<template>
  <el-dialog
    title="异常情况"
    width="500px"
    :visible.sync="visible"
    :destroy-on-close="false"
    :close-on-click-modal="false"
  >
    <div v-for="(exceptionInfo, exceptionIndex) in exceptionInfoList" :key="exceptionIndex" class="access_record_item">
      <div class="item_filed" :style="[{ cursor : !exceptionInfo.status?'pointer' : 'default'}]">
        <div class="filed_value">时间({{ type == 'inList'?'进':'出' }})：{{ exceptionInfo.passTime | matchNull }}</div>
        <div class="filed_value">设备({{ type == 'inList'?'进':'出' }})：{{ exceptionInfo.sn | matchNull }}</div>
        <div class="filed_value">地点({{ type == 'inList'?'进':'出' }})：{{ exceptionInfo.snName | matchNull }}</div>
      </div>
      <div class="item_img">
        <el-image
          style="width: 120px; height: 120px"
          fit="cover"
          :src="exceptionInfo.photo"
          :preview-src-list="[exceptionInfo.photo]"
        >
          <div slot="error" style="width: 120px;height: 120px;display: flex;justify-content: center;align-items: center;color:#C0C4CC;background-color: #F5F7FA;font-size: 14px">暂无照片</div>
        </el-image>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取消 </el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  filters: {
    matchNull(str) {
      if (!str) {
        return '-'
      } else {
        return str
      }
    }
  },
  data() {
    return {
      exceptionInfoList: [],
      visible: false,
      submitLoading: false,
      type: ''
    }
  },
  methods: {
    open(obj) {
      this.visible = true
      this.submitLoading = false
      this.$nextTick(() => {
        this.type = obj.typeField
        this.exceptionInfoList = obj.row[obj.typeField]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.access_record_item {
  padding: 10px;
  width: calc(100% );
  border: 1px solid rgba(227, 241, 255, 1);
  background: rgba(227, 238, 255, 0.34);
  //height: 80px;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .item_filed {
    font-size: 14px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .filed_value {
      height: 20px;
      line-height: 20px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      &:first-child {
        //font-weight: 500;
        //color: rgba(28, 149, 255, 1);
      }
    }
  }

  .item_img {

  }

  &:not(&:first-child) {
    margin-top: 10px;
  }
}
</style>
