<template>
  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="75%" append-to-body>
    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-row>
            <div class="avatar">
              <el-image
                :src="dataForm.photo!==''?dataForm.photo:defaultPhoto"
                fit="cover"
                style="width: 130px; height: 175px"/>
            </div>
          </el-row>
        </el-col>
        <el-col :span="18">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名">
                <span>{{ dataForm.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号">
                <span>{{ dataForm.idCardNo }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="出生日期">
                <span>{{ dataForm.birthday }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <span>{{ dataForm.sex }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所在部门">
                <span>{{ dataForm.deptName }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="联系电话">
                <span>{{ dataForm.phone }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="住址">
                <span>{{ dataForm.address }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row v-show="isKeyPerson" :gutter="20">
        <el-col :span="24" style="text-align: left;">
          <el-form-item label="虹膜图片" style="margin-bottom: 0px;" />
        </el-col>
      </el-row>
      <el-row v-show="isKeyPerson" :gutter="20">
        <el-col :span="12">
          <div class="avatar">
            <el-image
              :src="dataForm.leftIris!==''?dataForm.leftIris:defaultIris"
              fit="cover"/>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="avatar">
            <el-image
              :src="dataForm.rightIris!==''?dataForm.rightIris:defaultIris"
              fit="cover"/>
          </div>
        </el-col>
      </el-row>
      <el-row v-show="isKeyPerson" :gutter="20">
        <el-col :span="12">
          <el-form-item label="左眼虹膜">
            <span>{{ dataForm.leftIrisScore }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右眼虹膜">
            <span>{{ dataForm.rightIrisScore }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>

import { detailStaff } from '@/api/staff'
export default {
  name: 'StaffDetail',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update,detail
      dataForm: {
        id: '', // id
        name: '',
        birthday: '',
        address: '',
        idCardNo: '',
        sex: '',
        phone: '',
        deptName: '',
        deptId: '',
        photo: '',
        leftIris: '',
        rightIris: '',
        leftIrisScore: '0',
        rightIrisScore: '0'
      }, // 表单
      textMap: {
        create: '新增人员',
        update: '编辑人员',
        detail: '人员详情'
      }, // 表头显示标题
      isEditMode: false,
      isKeyPerson: false,
      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
      defaultIris: require('@/assets/global_images/iris.png'), // 默认虹膜图片
      btnLoading: true // 保存按钮是否不允许点击
    }
  },
  created() {

  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
      this.btnLoading = false
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = dialogFormVisible
      this.dataForm.controllerLine = ''
      if (dialogStatus === 'detail') {
        detailStaff(row.id).then(response => {
          if (response.code === 200) {
            if (response.data.irisData !== undefined && response.data.irisData !== '') {
              this.isKeyPerson = true
              this.dataForm.leftIris = 'static/' + response.data.irisData.leftImage
              this.dataForm.rightIris = 'static/' + response.data.irisData.rightImage
              this.dataForm.leftIrisScore = response.data.irisData.leftIrisScore
              this.dataForm.rightIrisScore = response.data.irisData.rightIrisScore
            } else {
              this.isKeyPerson = false
            }
          }
        })

        this.dataForm = {
          id: row.id,
          name: row.name,
          birthday: row.birthday,
          address: row.address,
          phone: row.phone,
          idCardNo: this.encrypIdCardNo(row.idCardNo),
          sex: this.formatGender(row.sex),
          deptName: row.deptName,
          photo: row.photo
        }
        this.isEditMode = false
      }
    },
    // 身份证号加密显示
    encrypIdCardNo(idCardNo) {
      if (idCardNo.length > 6) {
        return idCardNo.substr(0, 6) + '********' + idCardNo.substr(14, 18)
      } else if (idCardNo) {
        return idCardNo
      } else {
        return ''
      }
    },
    formatGender(value) {
      if (value === 1) {
        return '男'
      } else if (value === 2) {
        return '女'
      } else {
        return ''
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .dialog-footer {
    margin-top: -20px;
    text-align: center;
  }

  .avatar {
    margin: 10px;
    display: block;
    text-align: center;
  }
</style>