<template>
  <div class="app-container fillIn">
    <div class="fillIn-contain">
      <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">
        <el-row>
          <el-col :span="12">
            <el-form-item label="访客名称" prop="visitorName" :rules="rules.visitorName">
              <el-input placeholder="请输入访客名称" v-model="form.visitorName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="set">
              <el-input placeholder="请输入访客名称" v-model="form.set" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号码" prop="identityCardNo">
              <el-input placeholder="请输入身份证号码" v-model="form.identityCardNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="mobilePhone">
              <el-input placeholder="请输入手机号码" v-model="form.mobilePhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="el-form-pack-12" label="拜访事由" prop="reason">
              <el-input placeholder="请输入拜访事由" v-model="form.reason"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="el-form-pack-12" label="随行人数" prop="accompanyNum">
              <el-input placeholder="请输入随行人数" v-model="form.accompanyNum" type="number" min="0"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="el-form-pack-12" label="访客部门" prop="intervieweeDepartId">
              <el-select v-model="form.intervieweeDepartId" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in departData" :key="item.departCode" :label="item.departName" :value="item.departCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被访人手机号码" prop="intervieweeMobile">
              <el-input placeholder="请输入被访人手机号码" v-model="form.intervieweeMobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="到访起止时间" style="width: 100%">
              <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-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 axios from "axios";

import { ref, reactive } from "vue";
/*----------------------------------组件引入-----------------------------------*/
import layout from "@/components/layout/index.vue";
/*----------------------------------接口引入-----------------------------------*/
import { getOrganization, getCustomer, addVisitor } from "@/api/index";
/*----------------------------------公共变量-----------------------------------*/

const { proxy } = getCurrentInstance();

/*----------------------------------变量声明-----------------------------------*/
const formRef = ref(null); //refs
const departData = ref([
  {
    departCode: 1,
    departName: "部门1",
  },
  {
    departCode: 2,
    departName: "部门2",
  },
]);
const data = reactive({
  form: {
    idType: 0,
    visitorRegisterType: 0,
    reservedField1: 1,
    visitorStartTime: "",
    vistorEndTime: "",
  },
  rules: {
    // set: [{ required: true, message: "请选择性别", trigger: "blur" }],
    visitorName: [{ required: true, message: "请输入访客名称", trigger: "blur" }],
    identityCardNo: [{ required: true, message: "请输入访客身份证号码", trigger: "blur" }],
    // mobilePhone: [{ required: true, message: "请输入访客手机号码", trigger: "blur" }],
    mobilePhone: proxy.regex.Phone(true, "请输入手机号码"),
    intervieweeMobile: proxy.regex.Phone(true, "请输入被访人手机号码"),
    intervieweeDepartId: [{ required: true, message: "请选择被访部门", trigger: "change" }],
  },
  dateRange: [],
});
const timer = ref(null);
const certificateData = ref({});
const { form, rules, dateRange } = 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.set = response.data.Certificate.Sex;
        form.value.identityCardNo = response.data.Certificate.IDNumber;

        // certificateData.value=response.data.Certificate
      })
      .catch((error) => {});
  }, 1000);
}

function submitForm() {
  console.log(form.value);
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      console.log(form.value);
    }
  });
}


function  getDepartData(){
  getOrganization({a:'a'}).then((request) => {
    if (request.status === "SUCCESS") {
      console.log(request)
    
    } else {
      ElMessage.error(request.msg);
    }
  });

}



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

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">
.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>
