<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="`${form.type_text}`" :form="formData">
     <template v-slot:codeForm 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:300px" v-model="codeForm.code" ref="codeInput" placeholder="请输入核销码或扫码"></el-input>
         </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:cars>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            到访车辆：
          </div>
          <div class="xy-table-item-content">
            {{form.cars}}
          </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: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 {
    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: {
          codeForm: {},
          visitinfo: "",
          date: "",
          visit_time_id: "",
          visit_area_id: "",
          workRange: "",
          reason: "",
          plate: "",
          remark: "",
          visitorinfo: "",
          name: "",
          mobile: "",
          credent: 1,
          idcard: "",
          company_name: "",
          cars: "",
          follw_people: [],
          long_time: 0,
          longrange: "",
          visitorinfos: "",
          accpet_department_id: "",
          accept_admin_id: "",
          accept_goods_admin_id: "",

          checkRecord: '',
          checkForm: {},
          checkText:''

        },
        form: {},
        checkForm: {
          status:1
        }, //审核
        codeForm: {}, // 核验
        codeType: '',
        gateAdminId: '',
        check_admin_name: "",
        followTable: [{
            label: "姓名",
            prop: "name",
            width: 200
          },
          {
            label: "联系电话",
            prop: "mobile",
            width: 200
          },
          {
            label: "证件类型",
            // width: 180,
            width: 200,
          }, {
            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()
      this.getUserId()
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          let that = this
          if (this.formDataType == 'checkrecord') {
            this.checkForm.visit_id = this.form.id
            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.checkLevel.map(item1=>{
                  	if(item.level==item1.id){
                  		that.checkText = item1.value
                  	}
                  })
                  that.isCheck = false
                  return
                }
              }else{
              	that.isCheck = false
              }
            }

          }

          if (this.formDataType == 'coderecord') {
            this.codeForm.type = parseInt(this.codeType)
            this.codeForm.admin_id = parseInt(this.gateAdminId)
            this.$nextTick(() => {
              this.$refs.codeInput.focus()
            })
          }
        } 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
      },
      reset() {
        this.formDataType = ''
        this.checkForm = {}
        this.check_admin_name = ''
        this.codeForm = {}
        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)
        cancelCode({
          ...that.codeForm
        }).then(res => {
          this.$successMessage('核销成功')
          this.isShow = false
          this.$emit('refresh')
        })
      }

    }

  }
</script>

<style scoped lang="scss">
  .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;
  }
</style>
