<!-- 访客车辆详情页面 -->
<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="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-col>

        <el-col :span="16">
          <el-row>
            <el-col :span="12">
              <el-form-item label="车主姓名">
                <el-input v-model.trim="dataForm.name" :disabled="isDetailMode" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-select v-model="dataForm.sex" :disabled="isDetailMode">
                  <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="身份证号">
                <el-input v-model.trim="dataForm.idCard" :disabled="isDetailMode" type="text" placeholder="身份证号"/>
              </el-form-item>
            </el-col>
          </el-row>

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

          <el-row>
            <el-col :span="12">
              <el-form-item label="车牌号">
                <el-input v-model.trim="dataForm.plateNumber" :disabled="isDetailMode" type="text" placeholder="联系电话"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="来访时间">
            <el-input v-model.trim="dataForm.visitTime" :disabled="isDetailMode" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来访事由">
            <el-input v-model.trim="dataForm.matter" :disabled="isDetailMode" type="text" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="来访人单位">
            <el-input v-model.trim="dataForm.deptname" :disabled="isDetailMode" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来访城市">
            <el-input v-model.trim="dataForm.city" :disabled="isDetailMode" type="text" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="接访人员">
            <el-input v-model.trim="interviewee" :disabled="isDetailMode" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="授权时间">
            <el-input v-model.trim="authTimeRange" :disabled="isDetailMode" type="text" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="入园时间">
            <el-input v-model.trim="dataForm.inTime" :disabled="isDetailMode" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="离开时间">
            <el-input v-model.trim="dataForm.outTime" :disabled="isDetailMode" type="text" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </el-dialog>
</template>

<script>
import { getSexType } from '@/api/allDict'

export default {
  name: 'VisitorCarDetail',
  data() {
    return {
      isDetailMode: true, // 是否为详情模式
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update,detail
      dataForm: {
        idCard: '', // 身份证号
        name: '', // 姓名
        sex: '', // 性别
        phone: '', // 联系电话
        temperature: '', // 体温
        plateNumber: '', // 车牌号
        visitTime: '', // 来访时间
        matter: '', // 来访事由
        deptname: '', // 来访人单位
        city: '', // 来访人城市
        personDeptName: '', // 接访部门
        personName: '', // 接访人
        beginTime: '', // 授权起始时间
        endTime: '', // 授权结束时间
        inTime: '', // 入园时间
        outTime: '' // 离开时间
      }, // 表单
      photo: '', // 图片路径
      interviewee: '',
      authTimeRange: '',
      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
      textMap: {
        create: '来访人员登记',
        detail: '详情'
      }, // 表头显示标题
      sexList: []
    }
  },
  created() {
    // 初始化性别字典值列表
    getSexType().then(response => {
      this.sexList = response.data
    })
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = dialogFormVisible

      this.resetForm()

      if (dialogStatus === 'detail') {
        this.dataForm = {
          plateNumber: row.plateNumber,
          idCard: row.visitorPerson.idCard,
          name: row.visitorPerson.name,
          sex: row.visitorPerson.sex,
          phone: row.visitorPerson.phone,
          temperature: row.visitorPerson.temperature,
          visitTime: row.visitorPerson.visitTime,
          matter: row.visitorPerson.matter,
          deptname: row.visitorPerson.deptname,
          city: row.visitorPerson.city,
          personDeptName: row.visitorPerson.personDeptName,
          personName: row.visitorPerson.personName,
          beginTime: row.visitorPerson.beginTime,
          endTime: row.visitorPerson.endTime,
          inTime: row.inTime,
          outTime: row.outTime
        }

        this.interviewee = row.visitorPerson.personDeptName + ' / ' + row.visitorPerson.personName
        this.authTimeRange = row.visitorPerson.beginTime.substr(0, 10) + ' 至 ' + row.visitorPerson.endTime.substr(0, 10)
        this.photo = row.visitorPerson.photo
      }
    },
    // 清除数据
    resetForm() {
      this.dataForm = {
        idCard: '', // 身份证号
        name: '', // 姓名
        sex: '', // 性别
        phone: '', // 联系电话
        temperature: '', // 体温
        plateNumber: '', // 车牌号
        visitTime: '', // 来访时间
        matter: '', // 来访事由
        deptname: '', // 来访人单位
        city: '', // 来访人城市
        personDeptName: '', // 接访部门
        personName: '', // 接访人
        beginTime: '', // 授权起始时间
        endTime: '', // 授权结束时间
        inTime: '', // 入园时间
        outTime: '' // 离开时间
      }

      this.photo = ''
      this.interviewee = ''
      this.authTimeRange = ''
    }
  }
}
</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>