<template>
  <div class="app-container fillIn">
    <div class="fillIn-contain animate__animated animate__fadeInUp">
      <p style="color: red; margin-bottom: 2%; font-size: 1.5rem">
        * 访客基本信息由身份证读卡器自动获取，请确保信息准确无误
      </p>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="15rem"
        class="fillIn-contain-form"
        style="padding-right:30px;"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="被访人姓名" :rules="rules.targetPeopleName">
              <el-input
                placeholder="请输入被访人姓名"
                v-model="form.targetPeopleName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被访人手机号码" prop="targetPeoplePhone">
              <el-input
                placeholder="请输入被访人手机号码"
                v-model="form.targetPeoplePhone"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              class="el-form-pack-12"
              label="来访事由"
              :rules="rules.visitorReasonCode"
            >
            <el-select v-model="form.visitorReasonCode" placeholder="请选择拜访事由" style="width: 100%" >
                <el-option
                  v-for="item in visitorReasonCodeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              class="el-form-pack-12"
              label="来访人数"
              :rules="rules.visitorNumber"
            >
              <el-input
                placeholder="请输入来访人数"
                v-model="form.visitorNumber"
                min="1"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到访起止时间" style="width: 100%" :rules="rules.dateRange">
              <el-date-picker
                v-model="dateRange"
                :default-time="[new Date(2000, 1, 1), new Date(2000, 2, 1)]"
                value-format="YYYY-MM-DDTHH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="访客名称"
              :rules="rules.peopleName"
            >
              <el-input
                placeholder="请输入访客名称"
                v-model="form.visitorPersonList.peopleName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="访客手机号"
              :rules="rules.peopleName"
            >
              <el-input
                placeholder="请输入访客手机号"
                v-model="form.visitorPersonList.peoplePhone"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">            
            <el-form-item label="性别" :rules="rules.sex">
              <el-select v-model="form.visitorPersonList.sex" placeholder="请选择性别" style="width: 100%" >
                <el-option
                 
                  v-for="item in sex"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号码"  :rules="rules.cardId">
              <el-input
                placeholder="请输入身份证号码"
                v-model="form.visitorPersonList.cardId"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来访单位" :rules="rules.callerCorpName">
              <el-input
                placeholder="请输入来访单位"
                v-model="form.visitorPersonList.callerCorpName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button
        type="primary"
        style="width: 20%; margin: 2rem 40% 0"
        size="large"
        @click="submitForm()"
      >
        <span>提 交</span>
      </el-button>
    </div>
  </div>
  <layout :data="{ logoLeft: '2.1%', returnState: true }" />
</template>

<script setup name="Index">
//大屏自适应
import "@/assets/js/flexible.js";
import { ElMessage } from "element-plus";

/*----------------------------------依赖引入-----------------------------------*/
import 'animate.css';
import axios from "axios";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
/*----------------------------------组件引入-----------------------------------*/
import layout from "@/components/layout/index.vue";
/*----------------------------------接口引入-----------------------------------*/
import {  addVisitor } from "@/api/index";
/*----------------------------------公共变量-----------------------------------*/
const router = useRouter();
const { proxy } = getCurrentInstance();

/*----------------------------------变量声明-----------------------------------*/
const formRef = ref(null); //refs
const departData = ref(); //组织列表
const phoneArray = ref([]); //人员电话号码合集
const data = reactive({
  form: {
    targetPeoplePhone:"",//被访人手机号
    targetPeopleName:"",//被访人姓名 .
    visitorReasonCode:"",//来访事由编码 .
    visitorReasonInfo:"",//来访事由 .
    visitorNumber:"",//来访人数 .
    startTime:"", //开始时间 .
    endTime:"", //结束时间 .
    visitorPersonList:{
      peopleName:"",//访客姓名 .
      peoplePhone:"",//访客手机号 .
      sex:"",//访客性别 .
      cardId:"341282199208123456",//证件号 .
      cardType:"2",//证件类型 .
      plates:"2",//车牌号 .
      callerCorpName:"",//来访单位 .
      signInOutState:"non",//签到/离状态 .
    } //访客信息列表 .
  },
  visitorReasonCodeList:[
    {label:"亲友拜访",value:"family_friends_visitor"},
    {label:"外卖配送",value:"courier_delivery"},
    {label:"受邀面试",value:"interview"},
    {label:"商务洽谈",value:"business_talks"},
    {label:"预约服务",value:"reservation_service"},
    {label:"其他",value:"other"}  
  ],
  visitorReasonInfoList:[
    {label:"亲友拜访",value:"family_friends_visitor"},    
    {label:"外卖配送",value:"ourier_delivery"},
    {label:"受邀面试",value:"interview"},
    {label:"商务洽谈",value:"business_talks"},    
    {label:"预约服务",value:"reservation_service"},
    {label:"其他",value:"other"}
  ],
  sex:[
    {label:"女",value:"woman"},
    {label:"男",value:"man"},
    {label:"未知",value:"unknown"},
  ],
  rules: {
    targetPeopleName: [
      { required: true, message: "请输入被访人姓名", trigger: "blur" },
    ],
    visitorReasonCode: [
      { required: true, message: "请选择来访事由", trigger: "change" },
    ],
    visitorNumber: [
      { required: true, message: "请输入来访人数", trigger: "blur" },
    ],
    peopleName: [
      { required: true, message: "请输入访客姓名", trigger: "blur" },
    ],
    peoplePhone:proxy.regex.Phone(true, "请输入访客手机号码"),
    sex: [
      { required: true, message: "请选择性别", trigger: "blur" },
    ],
    cardId: [
      { required: true, message: "请输入访客身份证号码", trigger: "blur" },
    ],
    mobilePhone:proxy.regex.CheckMobile(
      { required: true, message: "访客手机号码不能为空" },
      {
        trigger: "blur",
        validator: (rule, value, callback) =>
          proxy.regex.equalToMobile(
            rule,
            phoneArray.value,
            callback,
            form.value.intervieweeMobile
          ),
      }
    ),
    callerCorpName: [
      { required: true, message: "请输入来访单位", trigger: "blur" },
    ],
    dateRange:[{ required: true, message: "请选择到访起止时间", trigger: "blur" },]
  },
  dateRange: [],
});
const timer = ref(null);
const certificateData = ref({});
const { form, rules, dateRange, visitorReasonCodeList, visitorReasonInfoList, sex } = toRefs(data);
/*----------------------------------方法声明-----------------------------------*/


/** 身份证数据读取 */
function getData() {
  // timer.value = setInterval(() => {
  //   axios
  //     .get(
  //       "http://127.0.0.1:24010/ZKIDROnline/ScanReadIdCardInfo?OP-DEV=1&CMD-URL=4&REPEAT=1&READTYPE=1&TIMEOUT=4"
  //     )
  //     .then((response) => {
  //       form.value.visitorName = response.data.Certificate.Name;
  //       form.value.sex = response.data.Certificate.Sex=='女'?'1':'2';
  //       form.value.identityCardNo = response.data.Certificate.IDNumber;
  //     })
  //     .catch((error) => {});
  // }, 3000);
}

/** 新增访客表单提交 */
function submitForm() {
  if (dateRange.value == null) {
    dateRange.value = [];
    form.value.startTime = "";
    form.value.endTime = "";
  }
  if (JSON.stringify(dateRange.value) != "[]") {
    form.value.startTime = dateRange.value[0].replace("T", " ");
    form.value.endTime = dateRange.value[1].replace("T", " ");
  }

  //模拟身份证数据读取
  // form.value.visitorName = "袁明明";
  // form.value.sex = form.value.sex ='1';
  // form.value.identityCardNo = "411122199112078083";


  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      // form.value.sex = Number(form.value.sex);
      // form.value.accompanyNum = Number(form.value.accompanyNum);
      console.log(form.value)
      addVisitor(form.value).then((requset) => {
        if (requset.success == true) {
          ElMessage({
            message: "访客预约申请成功,请稍后查看微信小程序推送信息",
            type: "success",
          });
          setTimeout(function () {
            formRef.value.resetFields(); //重置from校验
            dateRange.value = [];
            router.push({ path: "/" });
          }, 5000);
        } else {
          ElMessage.error(requset.msg);
        }
      });
    }
  });
}

onMounted(() => {
  getData();
});

onUnmounted(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>
<style>
/* 约束屏幕尺寸 */

@media screen and (max-width: 1024px) {
  html {
    font-size: 5px !important;
  }
}

@media screen and (min-width: 1920px) {
  html {
    font-size: 10px !important;
  }
}
.el-form-item__error,
.el-date-editor .el-range-input {
  font-size: 1.4rem;
}
</style>

<style scoped lang="scss">
:deep(.el-tag) {
  font-size: 1.4rem;
  line-height: 1.2rem;
  height: 2.2rem;
}
.el-button--large {
  padding: 1.2rem 1.9rem;
  --el-button-size: 4rem;
}

.fillIn {
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  &-contain {
    width: 95.9rem;
    margin: 0 auto;
    padding: 20px;
    // background-color: rgba(6,45,99,1);
    background-color: #fff;
    &-form {
      font-size: 2rem;
    }
  }
}
</style>
<style>
.fillIn .el-form .el-form-item__label {
  font-size: 1.6rem;
  line-height: 3rem;
  height: 3rem;
}
.fillIn .el-input__inner {
  font-size: 1.6rem;
}
.fillIn .el-input__wrapper {
  height: 3rem;
  width: 60% !important;
}
.fillIn .el-form-item {
  margin-top: 1vh;
}
.fillIn .el-input__inner {
  width: 80%;
}
</style>
