<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="handleClose"
    title="游客信息 ( 请刷卡读取身份信息 )"
    width="780px">
    <div class="guestInfo-dialog">
      <div class="btn-wrap-left">
        <el-button
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
        >
          添加游客
        </el-button>
      </div>
      <el-form
        class="table-box"
        ref="form"
        :model="model"
      >
        <el-table
          border
          stripe
          class="guest-info-table"
          :data="model.guestData"
        >
          <el-table-column
            label="#"
            type="index"
            width="50"
          >
          </el-table-column>

          <el-table-column
            prop="guestName"
            label="游客姓名"
          >
            <template slot-scope="scope">
              <el-form-item
                verify
                can-be-empty
                :prop="'guestData.' + scope.$index + '.guestName'"
              >
                <el-input
                  clearable
                  size="small"
                  :disabled="scope.row.lock"
                  v-model="scope.row.guestName"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column
            label="身份证"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-form-item
                can-be-empty
                :verify="verifyId"
                :prop="'guestData.' + scope.$index + '.guestIdentify'"
              >
                <el-input
                  clearable
                  size="small"
                  class="id"
                  :disabled="scope.row.lock"
                  v-model="scope.row.guestIdentify"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <span
                class="el-button el-button--primary el-button--mini"
                @click="delTicket(scope.row.idKey)"
              >
                <i class="el-icon-delete"></i>
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-total">
          共计：{{ model.guestData.length }} 人
        </div>
      </el-form>

      <div class="dialog-btn-wrap">
        <el-button
          type="primary"
          @click="handleClose">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleSave">
          确定
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { setTourist } from '@/pages/common'
import { verifyId, verifyPhone } from '@/utils/validate'
import { getIdInfo } from '@/api/ZTKReaderApi'

export default {
  props: {
    checkWay: {
      type: Number,
      default: 0
    }
  },
  computed: {
    model () {
      return { guestData: this.guestData }
    },
    verify () {
      return this.$refs.form && this.$refs.form.validate()
    }
  },
  data () {
    return {
      finished: false,
      visible: false,
      guestData: []
    }
  },
  methods: {
    verifyId,
    verifyPhone,
    show (data) {
      this.visible = true
      this.guestData = JSON.parse(JSON.stringify(data))

      // 身份证读卡
      this.timer && clearTimeout(this.timer)
      this.finished = false
      this.getIdInfo()
    },
    async getIdInfo () {
      if (this.finished) return
      let idInfo = await getIdInfo()

      // 更新身份证信息
      if (idInfo) {
        setTourist(this.guestData, 1, idInfo)
      }

      this.timer = setTimeout(() => {
        this.getIdInfo()
      }, 500)
    },
    handleSave () {
      // 身份证入园，必须填写游客信息
      if (this.checkWay === 3 && this.guestData.find(item => {
        return !item.guestName || !item.guestIdentify
      })) {
        this.$message.error('身份证入园，游客信息必须完整')
        return
      }

      // 表单校验
      this.verify.then(val => {
        if (val) {
          this.$emit('updateTicket', this.guestData)
          this.handleClose()
        }
      }).catch(e => {
        this.$message.error('输入的信息有误，请检查')
      })
    },
    handleClose () {
      this.visible = false
      this.finished = true
    },
    delTicket (idKey) {
      // this.$emit('delTicket', idKey)
      let index = this.guestData.findIndex(item => {
        return item.idKey === idKey
      })
      this.guestData.splice(index, 1)
    },
    handleAdd () {
      setTourist(this.guestData, 1)
    }
  }
}
</script>

<style lang="scss">
.guestInfo-dialog {
  .el-input,.el-select,.el-date-editor.el-input,.el-input-number {
    width: 182px;
  }
  .el-input--small{
      width: 140px;
  }
  .el-input--small.id{
      width: 200px;
  }
  .el-table td.align-item .cell{
      margin-top: -20px;
  }
  .guest-info-table {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
