<template>
  <div>
    <xy-dialog ref="dialog" :width="70" :is-show.sync="isShow" type="form" :title="`${form.type_text}`"
      :form="formData">
      <template v-slot:logs>
        <el-timeline :reverse="true">
          <el-timeline-item v-for="(item, index) in form.logs" :key="index" :timestamp="item.created_at">
            {{item.remark}}
          </el-timeline-item>
        </el-timeline>
      </template>

      <template v-slot:checkcode v-if="formDataType=='coderecord'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-size: 32px;width: 230px!important;">
            核销码：
          </div>
          <div class="xy-table-item-content">
            <div style="font-size: 32px;padding: 25px;width:400px">
              {{form.code}}
            </div>
          </div>
        </div>
      </template>
      <template v-slot:codeType v-if="formDataType=='coderecord'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-size: 32px;width: 280px!important;">
            核销状态：
          </div>
          <div class="xy-table-item-content">
            <div style="font-size: 32px;padding: 25px;width:400px">
              <div v-for="item in codeTypeList">
                <div v-if="item.id == codeForm.type">
                  {{item.value}}
                </div>
              </div>
              <!-- <el-radio-group v-model="codeForm.type">
                <el-radio :label="item.id" >{{item.value}}</el-radio>
              </el-radio-group> -->
              <!-- {{form.audit_status_text}} -->
            </div>
          </div>
        </div>
      </template>
      <template v-slot:person_no v-if="formDataType=='coderecord'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-size: 32px;width: 230px!important;">
            入场牌：
          </div>
          <div class="xy-table-item-content">

            <!-- <el-input style="font-size: 32px;padding: 25px;width:400px" v-model="codeForm.person_no"
              placeholder="请输入入场牌"></el-input> -->
              <xy-table style="width: 600px" :height="260" :is-page="false" :list="codeForm.person_no"
                :table-item="codefollowTable">
                <template v-slot:btns>
                </template>
              </xy-table>
          </div>
        </div>
      </template>
      <template v-slot:car_no v-if="formDataType=='coderecord'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-size: 32px;width: 230px!important;">
            停车牌：
          </div>
          <div class="xy-table-item-content">

            <!-- <el-input style="font-size: 32px;padding: 25px;width:400px" v-model="codeForm.car_no"
              placeholder="请输入停车牌"></el-input> -->

              <xy-table style="width: 600px" :height="260" :is-page="false" :list="codeForm.car_no"
                :table-item="carfollowTable">
                <template v-slot:btns>
                </template>
              </xy-table>
          </div>
        </div>
      </template>
      <template v-slot:visitinfo>
        <div style="width:600px">
          拜访信息
        </div>
      </template>
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>到访日期：
          </div>
          <div class="xy-table-item-content">
            {{form.date}}
          </div>
        </div>
      </template>
      <template v-slot:visit_time_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>到访时段：
          </div>
          <div class="xy-table-item-content">
            {{form.visit_time?form.visit_time.start_time:''}}至{{form.visit_time?form.visit_time.end_time:''}}
          </div>
        </div>
      </template>
      <template v-slot:visit_area_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>前往区域：
          </div>
          <div class="xy-table-item-content">
            {{form.visit_area?form.visit_area.name:''}}
          </div>
        </div>
      </template>
      <template v-slot:reason v-if="form.type==1">
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>到访事由：
          </div>
          <div class="xy-table-item-content">
            {{form.reason}}
          </div>
        </div>
      </template>
      <template v-slot:workRange v-if="form.type==2">
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>施工时段：
          </div>
          <div class="xy-table-item-content">
            {{form.work_start_time}}至{{form.work_end_time}}
          </div>
        </div>
      </template>

      <template v-slot:plate v-if="form.type==3">
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            车辆类型：
          </div>
          <div class="xy-table-item-content">
            {{form.plate}}
          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            备注：
          </div>
          <div class="xy-table-item-content">
            {{form.remark}}
          </div>
        </div>
      </template>
      <template v-slot:visitorinfo>
        <div class="xy-table-item">
          <div class="xy-table-item-content" style="width:400px">
            拜访人信息：
          </div>
        </div>
      </template>
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>姓名：
          </div>
          <div class="xy-table-item-content">
            {{form.name}}
          </div>
        </div>
      </template>
      <template v-slot:mobile>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>联系电话：
          </div>
          <div class="xy-table-item-content">
            {{form.mobile}}
          </div>
        </div>
      </template>
      <template v-slot:credent>
        <div class="xy-table-item">
          <div class="xy-table-item-label">证件类型：
          </div>
          <div class="xy-table-item-content">
            {{form.credent==1?'身份证':'护照'}}
          </div>
        </div>
      </template>
      <template v-slot:idcard>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            证件号码：
          </div>
          <div class="xy-table-item-content">
            {{form.idcard}}
          </div>
        </div>
      </template>
      <template v-slot:company_name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            单位名称：
          </div>
          <div class="xy-table-item-content">
            {{form.company_name}}
          </div>
        </div>
      </template>
      <template v-slot:cda v-if="form.type==1 && form.visit_area && form.visit_area.name=='生产区'">
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            CDA编号：
          </div>
          <div class="xy-table-item-content">
            {{form.cda}}
          </div>
        </div>
      </template>
      <template v-slot:cars>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            到访车辆：
          </div>
          <div class="xy-table-item-content">
            {{form.cars?form.cars.join(','):''}}
          </div>
        </div>
      </template>

      <template v-slot:follw_people v-if="form.type==1||form.type==2">
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>随访人员：
          </div>
          <div class="xy-table-item-content">
            <xy-table style="width: 620px" :height="260" :is-page="false" :list="form.follw_people"
              :table-item="followTable">
              <template v-slot:btns>

              </template>
            </xy-table>
          </div>
        </div>
      </template>

      <!-- <template v-slot:long_time>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>长访客申请：
          </div>
          <div class="xy-table-item-content" style="width:620px">
            {{form.long_time==0?'否':'是'}}
            <div v-if="form.long_time==1" style="display: inline-block;vertical-align: middle;margin-left:10px">
              {{form.start_date}}至{{form.end_date}}
            </div>
          </div>
        </div>
      </template>
      <template v-slot:visitorinfos>
        <div class="xy-table-item">
          <div class="xy-table-item-content" style="width:400px">
            被访人信息：
          </div>
        </div>
      </template> -->
      <template v-slot:accept_admin_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>人员：
          </div>
          <div class="xy-table-item-content">
            {{form.accept_admin?form.accept_admin.name:''}}
          </div>
        </div>
      </template>
      <template v-slot:visitorinfos1 v-if="form.visit_area && form.visit_area.name=='生产区'">
        <div class="xy-table-item">
          <div class="xy-table-item-content" style="width:400px">
            陪同人信息：
          </div>
        </div>
      </template>
      <template v-slot:accompany_id  v-if="form.visit_area && form.visit_area.name=='生产区'">
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>人员：
          </div>
          <div class="xy-table-item-content">
            {{form.accompany?form.accompany.name:''}}
          </div>
        </div>
      </template>

      <template v-slot:accept_goods_admin_id v-if="form.type==3">
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>收货人：
          </div>
          <div class="xy-table-item-content">
            {{form.accept_goods_admin?form.accept_goods_admin.name:''}}
          </div>
        </div>
      </template>

      <!-- 审核 -->
      <template v-slot:checkRecord v-if="formDataType=='checkrecord'">
        <div style="width:600px">
          审核：
        </div>
      </template>
      <template v-slot:checkForm v-if="form.audit_status==0&&isCheck">
        <el-form-item prop='checkForm.status' style="margin-bottom:20px">
          <div class="xy-table-item">
            <div class="xy-table-item-label">状态：
            </div>
            <div class="xy-table-item-content">
              <el-select v-model="checkForm.status" placeholder="请选择" style="width:200px">
                <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop='checkForm.reason' style="margin-bottom:20px">
          <div class="xy-table-item">
            <div class="xy-table-item-label">
              备注：
            </div>
            <div class="xy-table-item-content">
              <el-input type="textarea" v-model="checkForm.reason" placeholder="请输入备注" style="width:300px"></el-input>
            </div>
          </div>
        </el-form-item>
      </template>

      <template v-slot:checkText v-if="form.audit_status==0&&!isCheck">
        <div class="checkforms dbitem" style="padding:30rpx">
          {{checkText}}
        </div>
      </template>




      <template v-slot:footerContent>
        <div>
          <Button ghost type="primary" @click="reset">取消</Button>
          <Button v-if="formDataType=='checkrecord'&&isCheck" type="primary" @click="checkSubmit">审核</Button>
          <Button v-if="formDataType=='coderecord'" type="primary" @click="codeSubmit">确认</Button>
        </div>
      </template>
    </xy-dialog>


  </div>
</template>

<script>
  import {
    save
  } from "@/api/visit/check.js"
  import {
    show
  } from "@/api/visit/record.js"
  import {
    cancelCode
  } from "@/api/gate"
  import {
    getInfo
  } from '@/api/user.js'
  import Cookies from 'js-cookie'
  export default {
    components: {},
    data() {
      return {
        isShow: false,
        id: '',
        userId: '',
        formDataType: '',
        formData: {
          checkcode: '',
          codeType: "",
          person_no: '',
          car_no: '',

          visitinfo: "",
          date: "",
          visit_time_id: "",
          visit_area_id: "",
          workRange: "",
          reason: "",
          plate: "",
          remark: "",
          visitorinfo: "",
          name: "",
          mobile: "",
          credent: 1,
          idcard: "",
          company_name: "",
          cda:'',
          cars: "",
          follw_people: [],
          long_time: 0,
          longrange: "",
          visitorinfos: "",
          accpet_department_id: "",
          accept_admin_id: "",
          visitorinfos1: "",
          accompany_id:"",
          accept_goods_admin_id: "",
          checkRecord: '',
          checkForm: {},
          checkText: ''

        },
        form: {},
        checkForm: {
          status: 1
        }, //审核
        codeForm: {
          type: 1,
          car_no: [],
          person_no: []
        }, // 核验
        codeTypeList: [{
          id:0,
          value:'请提醒陪同人签字'
        },{
          id: 1,
          value: '入场'
        }, {
          id: 2,
          value: '离场'
        }],
        gateAdminId: '',
        check_admin_name: "",
        carfollowTable: [{
          label: "车牌",
          prop: "car",
          width: 200
        },{
          label: "停车牌",
          prop: "car_no",
          width: 400,
          customFn: (row, scope) => {
            return (<el-input type="text" placeholder = "请填写停车牌"
              v-model={row.car_no}>
              </el-input>
            )
          }
        }],
        codefollowTable: [{
          label: "姓名",
          prop: "name",
          width: 200
        },{
          label: "入场牌",
          prop: "person_no",
          width: 400,
          customFn: (row, scope) => {
            return (<el-input type="text" placeholder = "请填写入场牌"
              v-model={row.person_no}>
              </el-input>
            )
          }
        }],
        followTable: [{
            label: "姓名",
            prop: "name",
            width: 200
          },
          {
            label: "联系电话",
            prop: "mobile",
            width: 200
          },
          {
            label: "证件类型",
            // width: 180,
            prop: 'credent',
            width: 200,
            formatter(cell, data, val) {
              return val == 1 ? '身份证' : '护照'
            }
          }, {
            label: "证件号码",
            prop: "idcard",
            width: 200
          }
        ],
        statusList: [{
            id: 1,
            value: "通过"
          },
          {
            id: 2,
            value: "驳回"
          },
        ],
        checkLevel: [{
          id: 1,
          value: '请等待一级审核完成'
        }, {
          id: 2,
          value: '请等待二级审核完成'
        }, {
          id: 3,
          value: '请等待三级审核完成'
        }],
        checkText: '',
        isCheck: false
      }
    },
    created() {
      // this.getVisitTime()
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          let that = this
          if (this.formDataType == 'checkrecord') {
            this.checkForm.visit_id = this.id
            this.getUserId()
            this.getDetail()
          }

          if (this.formDataType == 'coderecord') {
            this.codeForm.code = this.form.code
            this.codeForm.admin_id = parseInt(this.gateAdminId)
            this.codeForm.type = this.form.audit_status == 1 ? 1 : (this.form.audit_status == 3 && this.form.accept_admin_sign ? 2 : 0)
            if(this.codeForm.type==1){
              this.codeForm.person_no.push({name:this.form.name,person_no:''})
              for(var k of this.form.follw_people){
                this.codeForm.person_no.push({name:k.name,person_no:''})
              }
              for(var m of this.form.cars){
                this.codeForm.car_no.push({car:m,car_no:''})
              }
            }else{
              for(var k of this.form.person_no){
                this.codeForm.person_no.push(JSON.parse(k))
              }
              for(var m of this.form.car_no){
                this.codeForm.car_no.push(JSON.parse(m))
              }

            }

          }
        } else {
          this.reset()
        }
      }
    },
    methods: {
      selectLevel(val) {
        this.form.audit.map(item => {
          if (item.level == val) {
            this.checkForm.level = item.level
            this.checkForm.id = item.id
            this.checkForm.audit_admin_id = item.audit_admin_id
            this.check_admin_name = item.audit_admin ? item.audit_admin.name : ''
          }
        })
      },
      async getUserId() {
        const res = await getInfo()
        this.userId = res.id
      },
      async getDetail() {
        const res = await show({
          id: this.id
        })
        let that = this
        this.form = res
        for (let item of that.form.audit) {
          if (item.status == 0) {
            if (item.audit_admin_id == that.userId) {
              that.checkForm.level = item.level
              that.checkForm.id = item.id
              that.checkForm.audit_admin_id = item.audit_admin_id
              that.isCheck = true
              return
            } else {
              that.checkText = "请等待"+item.audit_admin.name+"审核"
              // that.checkLevel.map(item1 => {
              //   if (item.level == item1.id) {
              //     that.checkText = item1.value
              //   }else{

              //   }
              // })
              that.isCheck = false
              return
            }
          } else {
            that.isCheck = false
          }
        }

      },
      reset() {
        this.id = ''
        this.formDataType = ''
        this.checkForm = {}
        this.check_admin_name = ''
        this.codeForm = {
          type: 1,
          car_no: [],
          person_no: []
        }
        this.codeType = ''
        this.gateAdminId = ''
        this.isShow = false
        this.$refs['dialog'].reset()
      },
      checkSubmit() {
        console.log(this.checkForm)
        // return
        let that = this
        // this.form.id = this.id
        save({
          ...that.checkForm
        }).then(res => {
          this.$successMessage('审核成功')
          this.isShow = false
          this.$emit('refresh')
        })
      },
      codeSubmit() {
        let that = this
        console.log(this.codeForm)
        console.log(this.codeForm.person_no)
        if(this.codeForm.type==0){
          this.$successMessage('请提醒陪同人签字','','warning')
          this.isShow = false
          return
        }
        cancelCode({
          ...that.codeForm
        }).then(res => {
          this.$successMessage('核销成功')
          this.isShow = false
          this.$emit('refresh')
        })
      }

    }

  }
</script>

<style scoped>
  .xy-table-item-label {
    width: 180px !important;
  }

  .xy-table-item-content {
    width: 100%
  }

  .img__delete {
    transform: scale(0.8, 0.8);

    position: absolute;
    top: 4px;
    right: 4px;
  }

  /deep/ .el-radio__input {
    vertical-align: super;
  }

  /deep/ .el-radio__label {
    font-size: 32px;
  }
</style>
