<!-- 访客刷证登记页面 -->
<template>
  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-well-code="right" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-row>
            <div class="avatar">
              <el-image
                :src="photo!==''?photo:defaultPhoto"
                fit="cover"
                style="width: 130px; height: 175px"/>
            </div>
          </el-row>
          <el-row>
            <el-button v-show="isEditMode" :disabled="readCard" type="primary" plain class="id-card-btn" @click="readIDCard">读取身份证</el-button>
          </el-row>
        </el-col>

        <el-col :span="16">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model.trim="dataForm.name" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="必填"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="dataForm.sex" :disabled="readCard||!isEditMode" placeholder="性别" clearable>
                  <el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24" >
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model.trim="dataForm.idCard" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="身份证号"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="14">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model.trim="dataForm.phone" :disabled="!isEditMode" type="text" placeholder="联系电话"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="体温" prop="temperature">
                <el-input v-model.trim="dataForm.temperature" :disabled="!isEditMode" type="text" />
              </el-form-item>
            </el-col>
          </el-row>

          <!--          <el-row>-->
          <!--            <el-col :span="24" >-->
          <!--              <el-form-item label="出生日期" prop="birthday">-->
          <!--                <el-date-picker-->
          <!--                  v-model="dataForm.birthday"-->
          <!--                  :editable="false"-->
          <!--                  :readonly="readCard"-->
          <!--                  :disabled="!isEditMode"-->
          <!--                  type="date"-->
          <!--                  style="width: 100%"-->
          <!--                  value-format="yyyy-MM-dd"-->
          <!--                  placeholder="选择出生日期"/>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--          </el-row>-->

          <!--          <el-row :gutter="20">-->
          <!--            <el-col :span="24">-->
          <!--              <el-form-item label="住址" prop="address">-->
          <!--                <el-input v-model.trim="dataForm.address" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="非必填"/>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--          </el-row>-->
        </el-col>
      </el-row>
    </el-form>
    <div v-show="isEditMode" slot="footer" class="dialog-footer">
      <el-button :loading="btnLoading" :disabled="!readCard" type="primary" @click="saveData">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSexType } from '@/api/allDict'
import { getBirthdayByIdNO, getSexByIdNO } from '@/utils/dataAnalysis'
import { phoneValidator, temValidator } from '@/utils/validate'

export default {
  name: 'VisitorCheckIn',
  data() {
    return {
      isEditMode: true, // 是否为编辑模式，非编辑模式都为只读
      readCard: false, // 是否从读卡器读卡，未从读卡器读卡不能提交，读卡之后不能编辑
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update,detail
      dataForm: {
        idCard: '', // 身份证号
        name: '', // 姓名
        sex: '', // 性别
        sexStr: '',
        phone: '', // 联系电话
        birthday: '', // 出生日期
        temperature: '', // 体温
        photo: '',
        address: ''
      }, // 表单
      photo: '', // 图片路径
      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
      textMap: {
        create: '来访人员登记',
        detail: '详情'
      }, // 表头显示标题
      rules: {
        phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
        temperature: [{ required: true, trigger: ['blur', 'change'], validator: temValidator }]
      }, // 前端校验规则
      sexList: [],
      btnLoading: true // 保存按钮是否不允许点击
    }
  },
  watch: {
    'dataForm.idCard': function(val) {
      this.dataForm.birthday = getBirthdayByIdNO(val)
      this.dataForm.sex = getSexByIdNO(val)
    }
  },
  created() {
    // 初始化性别字典值列表
    getSexType().then(response => {
      this.sexList = response.data
    })
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
      this.btnLoading = false
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = dialogFormVisible

      this.resetForm()

      if (dialogStatus === 'create') { // 如果是新增，清除验证
        this.isEditMode = true
        this.readCard = false
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      } else if (dialogStatus === 'detail') {
        this.isEditMode = false

        this.dataForm = {
          idCard: row.idCard,
          name: row.name,
          phone: row.phone,
          temperature: row.temperature,
          address: row.address
        }

        this.dataForm.birthday = getBirthdayByIdNO(row.idCard)
        this.dataForm.sex = getSexByIdNO(row.idCard)

        this.photo = row.photo
      }
    },
    // 清除数据
    resetForm() {
      this.dataForm = {
        idCard: '', // 身份证号
        name: '', // 姓名
        sex: '', // 性别
        sexStr: '',
        phone: '', // 联系电话
        birthday: '', // 出生日期
        temperature: '', // 体温
        photo: '',
        address: ''
      }

      this.photo = ''
      this.btnLoading = false
      this.readCard = false

      this.isEditMode = true
      this.readCard = false
    },
    readIDCard() {
      const that = this
      this.ws = that.$root.ws
      if (this.ws === null) {
        this.ws = new WebSocket(that.$root.wsURL)
        // 注册各类回调
        this.ws.onopen = function() {
          that.ws.send('ReadIdCard')
        }
        this.ws.onclose = function() {
          that.$message.info('与ICS连接断开')
          that.$root.ws = null
        }
        this.ws.onerror = function() {
          that.$message.error('与ICS通信发生错误')
        }
        that.$root.ws = this.ws
      } else {
        this.ws.send('ReadIdCard')
      }
      this.ws.onmessage = function(receiveMsg) {
        const data = JSON.parse(receiveMsg.data)
        console.log(data)
        if (data !== '' && data.message !== 'fail') {
          that.dataForm.idCard = data.IdCardNo
          that.dataForm.name = data.Name
          that.photo = data.Photo.replace('bmp', 'png')
          that.dataForm.photo = data.Photo.replace('bmp', 'png')
          that.dataForm.address = data.Address
          that.dataForm.sexStr = data.Sex

          // 读过身份证了
          that.readCard = true
        } else {
          that.$message.warning('读卡失败')
        }
      }
    },
    // 保存数据
    saveData: function() {
      this.btnLoading = true

      this.visitorCheckedIn()
    },
    // 新增数据
    visitorCheckedIn: function() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid && this.readCard) {
          const list = this.$parent.dataForm.visitorBaseDTOList
          let isChecked = false
          // 遍历父组件的visitorBaseDTOList，检查是否已经登记过
          list.forEach(item => {
            if (item.idCard === this.dataForm.idCard) {
              isChecked = true
            }
          })

          if (isChecked === true) {
            this.$message.error('该身份证已经登记过，请检查')

            this.$nextTick(() => {
              this.btnLoading = false
              this.readCard = false
            })
          } else {
            // 发送信号让父组件添加
            this.$emit('checked', this.dataForm)

            this.$confirm('新增成功，是否继续新增?', '提示', {
              confirmButtonText: '是',
              cancelButtonText: '否',
              type: 'info'
            }).then(() => {
              this.resetForm()
              this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
              })
            }).catch(() => {
              this.dialogFormVisible = false
            })
          }
        } else {
          this.btnLoading = false
        }
      })
    }
  }
}
</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;
  }
</style>
