<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="姓名">
                <el-input v-model="dataForm.name" disabled type="text"/>
                <!--<span>{{ dataForm.name }}</span>-->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号">
                <el-input v-model="dataForm.idCard" disabled type="text"/>
                <!--<span>{{ dataForm.idCard }}</span>-->
              </el-form-item>
            </el-col>
          </el-row>

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

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所在部门">
                <el-input v-model="dataForm.deptName" disabled type="text"/>
                <!--<span>{{ dataForm.deptName }}</span>-->
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="联系电话">
                <el-input v-model="dataForm.phone" disabled type="text"/>
                <!--<span>{{ dataForm.phone }}</span>-->
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="住址">
                <el-input v-model="dataForm.address" disabled type="text"/>
                <!--<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">
          <el-form-item label="重点区域授权">
            <el-checkbox-group v-model="areas">
              <el-checkbox v-for="item in keyAreaList" :label="item.value" :key="item.value" :disabled="true" border>{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="isKeyPerson" :gutter="20">
        <el-col :span="24">
          <el-form-item label="虹膜图片">
            <el-image
              :src="dataForm.rightIris!==''?dataForm.rightIris:defaultIris"
              fit="cover"
              style="width: 192px; height: 128px"/>
            <el-image
              :src="dataForm.leftIris!==''?dataForm.leftIris:defaultIris"
              fit="cover"
              style="width: 192px; height: 128px"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="isKeyPerson" :gutter="20">
        <el-col :span="24">
          <el-form-item label="虹膜质量">
            <span style="display:inline-block; width:192px; text-align: center">{{ dataForm.rightIrisScore }}</span>
            <span style="display:inline-block; width:192px; text-align: center">{{ dataForm.leftIrisScore }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>

import { detailStaff } from '@/api/staff'
import { getIrisAreaList } from '@/api/area'
export default {
  name: 'StaffDetail',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update,detail
      dataForm: {
        id: '', // id
        name: '',
        birthday: '',
        address: '',
        idCard: '',
        sex: '',
        phone: '',
        deptName: '',
        deptId: '',
        photo: '',
        leftIris: '',
        rightIris: '',
        leftIrisScore: '0',
        rightIrisScore: '0'
      }, // 表单
      textMap: {
        create: '新增人员',
        update: '编辑人员',
        detail: '人员详情'
      }, // 表头显示标题
      isEditMode: false,
      isKeyPerson: false,
      areas: [], // 重点区域复选框对应值
      keyAreaList: [],
      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
      defaultIris: require('@/assets/global_images/iris.png'), // 默认虹膜图片
      btnLoading: true // 保存按钮是否不允许点击
    }
  },
  created() {
    this.fetchIrisRegions() // 获取虹膜设备关联区域的列表
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
      this.btnLoading = false
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = dialogFormVisible
      this.dataForm.controllerLine = ''
      if (dialogStatus === 'detail') {
        this.isEditMode = false

        detailStaff(row.id).then(response => {
          if (response.code === 200) {
            this.dataForm = {
              id: row.id,
              name: row.name,
              birthday: row.birthday,
              address: row.address,
              phone: row.phone,
              idCard: this.encrypIdCardNo(row.idCard),
              sex: row.sexStr,
              deptName: row.deptName,
              photo: row.photo
            }

            if (response.data.areaIds !== '') {
              this.areas = response.data.areaIds.split(',')

              this.isKeyPerson = true
              if (response.data.irisData !== undefined && response.data.irisData !== '') {
                this.dataForm.leftIris = process.env.BASE_API + '/static/' + response.data.irisData.leftImage
                this.dataForm.rightIris = process.env.BASE_API + '/static/' + response.data.irisData.rightImage
                this.dataForm.leftIrisScore = response.data.irisData.leftIrisScore
                this.dataForm.rightIrisScore = response.data.irisData.rightIrisScore
              }
            } else {
              this.isKeyPerson = false
            }
          }
        })
      }
    },
    fetchIrisRegions() {
      getIrisAreaList().then(response => {
        this.keyAreaList = response.data
      })
    },
    // 身份证号加密显示
    encrypIdCardNo(idCard) {
      if (idCard.length > 6) {
        return idCard.substr(0, 6) + '********' + idCard.substr(14, 18)
      } else if (idCard) {
        return idCard
      } 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>
