<!-- 访客车辆刷证登记页面 -->
<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||canRead" 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="体温（℃）">
                <el-input v-model.trim="dataForm.temperature" :disabled="!isEditMode" type="text" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="车牌号" prop="plateNumber">
                <el-input v-show="checkInCar" v-model.trim="dataForm.plateNumber" :disabled="!isEditMode" type="text" placeholder="车牌号"/>
                <el-select v-show="!checkInCar" v-model="dataForm.plateNumber">
                  <el-option v-for="item in this.$parent.dataForm.visitCarDTOList" :key="item.plateNumber" :label="item.plateNumber" :value="item.plateNumber" />
                </el-select>
              </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" 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, plateValidator } from '@/utils/validate'

export default {
  name: 'VisitorCarCheckIn',
  data() {
    return {
      canRead: false,
      isEditMode: true, // 是否为编辑模式，非编辑模式都为只读
      readCard: false, // 是否从读卡器读卡，未从读卡器读卡不能提交，读卡之后不能编辑
      checkInCar: true, // 添加车辆还是添加随车人员
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update,detail
      dataForm: {
        idCard: '', // 身份证号
        name: '', // 姓名
        sex: '', // 性别
        sexStr: '',
        phone: '', // 联系电话
        birthday: '', // 出生日期
        temperature: '', // 体温
        photo: '',
        address: '',
        plateNumber: '' // 来访车辆车牌号
      }, // 表单
      photo: '', // 图片路径
      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
      textMap: {
        createCar: '来访车辆登记',
        createPerson: '随车人员登记',
        detail: '详情'
      }, // 表头显示标题
      rules: {
        phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
        temperature: [{ required: true, trigger: ['blur', 'change'], validator: temValidator }],
        plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }]
      }, // 前端校验规则
      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 === 'createCar') { // 如果是新增，清除验证
        this.isEditMode = true
        this.readCard = false
        this.checkInCar = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      } else if (dialogStatus === 'createPerson') {
        this.isEditMode = true
        this.readCard = false
        this.checkInCar = false

        // 默认选中第一辆车
        if (this.$parent.dataForm.visitCarDTOList.length > 0) {
          this.dataForm.plateNumber = this.$parent.dataForm.visitCarDTOList[0].plateNumber
        }

        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,
          plateNumber: row.plateNumber
        }

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

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

      this.isEditMode = true
      this.readCard = false
    },
    readIDCard() {
      this.resetForm()
      this.canRead = true
      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) {
        that.canRead = false
        const data = JSON.parse(receiveMsg.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 carList = this.$parent.dataForm.visitCarDTOList
          let isCarChecked = false
          // 访客列表
          const list = this.$parent.dataForm.visitorBaseDTOList
          let isChecked = false

          // 添加车辆
          if (this.dialogStatus === 'createCar') {
            // 遍历父组件的carList，检查是否已经登记过
            carList.forEach(item => {
              if (item.plateNumber === this.dataForm.plateNumber) {
                isCarChecked = true
              }
            })

            // 首先添加车辆
            if (isCarChecked === true) {
              this.$message.error('该辆车已经登记过，请检查')

              this.$nextTick(() => {
                this.btnLoading = false
                this.readCard = false
              })
            } else {
              // 发送信号登记车辆
              const car = {
                plateNumber: this.dataForm.plateNumber,
                idCard: this.dataForm.idCard,
                ownerName: this.dataForm.name,
                ownerPhone: this.dataForm.phone
              }
              this.$emit('checked', 'createCar', car)

              // 发送信号让父组件添加人员
              this.$emit('checked', 'createPerson', this.dataForm)

              this.dialogFormVisible = false
            }
          } else if (this.dialogStatus === 'createPerson') {
            // 遍历父组件的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', 'createPerson', this.dataForm)

              this.$confirm('新增成功，是否继续新增?', '提示', {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'info'
              }).then(() => {
                this.resetForm()
                this.dataForm.plateNumber = this.$parent.dataForm.visitCarDTOList[0].plateNumber
                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>