<template>
  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="设备名称">
            <el-input v-model.trim="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.trim="dataForm.name" disabled type="text"/>
            <!--<span>{{ dataForm.devcode }}</span>-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="设备类型">
            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
            <!--<span>{{ dataForm.typeName }}</span>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备型号">
            <el-input v-model.trim="dataForm.model" disabled type="text"/>
            <!--<span>{{ dataForm.model }}</span>-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="在线状态">
            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-show="isFence" label="是否开启">
            <el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>
            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="安装日期">
            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
            <!--<span>{{ dataForm.installDate }}</span>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="安装位置">
            <el-input v-model.trim="dataForm.position" disabled type="text"/>
            <!--<span>{{ dataForm.position }}</span>-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="isDoor" :gutter="20">
        <el-col :span="12">
          <el-form-item label="进出营">
            <el-input v-model.trim="dataForm.inOutName" disabled type="text"/>
            <!--<span>{{ dataForm.inOutName }}</span>-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="isIrisDev" :gutter="20">
        <el-col :span="24">
          <el-form-item label="授权人员列表" style="margin-bottom: 0px;" />
          <el-table :data="authList" class="table" stripe height="200" row-class-name="small-row-class" border>
            <el-table-column prop="name" label="姓名" align="center" />
            <el-table-column prop="deptName" label="部门" align="center" />
            <el-table-column prop="idCardNo" label="身份证号" align="center">
              <template slot-scope="scope">
                {{ encrypIdCardNo(scope.row.idCardNo) }}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>

import { getDetailDevice } from '@/api/device'
export default {
  name: 'DeviceDetail',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update,detail
      dataForm: {
        id: '', // id
        name: '', // 设备名
        devcode: '', // 设备编号
        typeName: '', // 设备类型
        model: '', // 设备型号
        onlineStatusName: '', // 在线状态
        deviceStatusName: '', // 设备状态
        position: '', // 安装位置
        installDate: '', // 安装日期
        inOutName: '' // 进出营
      }, // 表单
      textMap: {
        create: '新增设备',
        update: '编辑设备',
        detail: '设备详情'
      }, // 表头显示标题
      isEditMode: false,
      isIrisDev: false,
      isFence: false,
      isDoor: false,
      authList: []
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = dialogFormVisible
      this.resetForm()
      if (dialogStatus === 'detail') {
        this.isEditMode = false

        // 电子围栏设备有开启字段
        if (row.typeName.indexOf('电子围栏') >= 0) {
          this.isFence = true
        }

        // 营门设备有进出营门的标志位
        if (row.areaId === '1') {
          this.isDoor = true
        }

        // 虹膜设备有授权人员列表
        if (row.typeName.indexOf('虹膜') >= 0) {
          this.isIrisDev = true
        }

        getDetailDevice(row.id).then(response => {
          if (response.code === 200) {
            this.dataForm = {
              id: row.id,
              name: row.name,
              devcode: row.devcode,
              typeName: row.typeName,
              model: row.model,
              onlineStatusName: row.onlineStatusName,
              position: row.position,
              installDate: row.installDate,
              inOutName: response.data.inOutName,
              deviceStatusName: response.data.deviceStatusName
            }

            if (response.data.irisAuthorizeList !== '') {
              this.authList = response.data.irisAuthorizeList
            }
          } else {
            this.$message.error(response.message)
          }
        }).catch(() => {

        })
      }
    },
    resetForm: function() {
      this.dataForm = {
        id: '', // id
        name: '', // 设备名
        devcode: '', // 设备编号
        typeName: '', // 设备类型
        model: '', // 设备型号
        onlineStatusName: '', // 在线状态
        deviceStatusName: '', // 设备状态
        position: '', // 安装位置
        installDate: '', // 安装日期
        inOutName: '' // 进出营
      } // 表单
      this.isIrisDev = false
      this.isFence = false
      this.isDoor = false
    },
    // 身份证号加密显示
    encrypIdCardNo(idCard) {
      if (idCard.length > 6) {
        return idCard.substr(0, 6) + '********' + idCard.substr(14)
      } 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>
