<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"
      >
        <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="sex">
              <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%"  disabled>
                <el-option
                 
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </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 label="访客公司" >
              <el-input
                placeholder="请输入访客公司"
                v-model="form.visitorCompany"
              ></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"
                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-tree-select
                v-model="form.intervieweeDepartId"
                :data="departData"
                :render-after-expand="false"
                style="width: 100%"
                @change="departChange"
              />
            </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-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-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 { getOrganization, getCustomer, 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: {
    idType: 0,//证件类型（身份证）
    visitorRegisterType: 0,//访客登记类型（现场登记）
    reservedField1: 1,//登记来源（访客机）
    registrationPlace:"共进大厦一楼",//登记地点
    visitorStartTime: "",
    vistorEndTime: "",
    mobilePhone: "",
  },
  rules: {
    visitorName: [
      { required: true, message: "请输入访客名称", trigger: "blur" },
    ],
    identityCardNo: [
      { required: true, message: "请输入访客身份证号码", trigger: "blur" },
    ],
    mobilePhone: proxy.regex.Phone(true, "请输入手机号码"),

    intervieweeMobile: proxy.regex.CheckMobile(
      { required: true, message: "被访人手机号码不能为空" },
      {
        trigger: "blur",
        validator: (rule, value, callback) =>
          proxy.regex.equalToMobile(
            rule,
            phoneArray.value,
            callback,
            form.value.intervieweeMobile
          ),
      }
    ),

    intervieweeDepartId: [
      { required: true, message: "请选择被访部门", trigger: "change" },
    ],
  },
  dateRange: [],
});
const timer = ref(null);
const options = [
  {
    value: '1',
    label: '女',
  },
  {
    value: '2',
    label: '男',
  }]
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.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.visitorStartTime = "";
    form.value.vistorEndTime = "";
  }
  if (JSON.stringify(dateRange.value) != "[]") {
    form.value.visitorStartTime = dateRange.value[0].replace("T", " ");
    form.value.vistorEndTime = 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);
      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);
        }
      });
    }
  });
}

/** 获取访客部门树结构数据 */
function getDepartData() {
  getOrganization({
    pageIndex: 1,
    maxResultCount: 10,
  }).then((request) => {
    if (request.success == true) {
      departData.value = JSON.parse(
        JSON.stringify(request.result.item)
          .replace(/name/g, "label")
          .replace(/id/g, "value")
      );
    } else {
      ElMessage.error(request.msg);
    }
  });
}

/**
 * @部门下拉chage事件
 */
function departChange(val) {
  getCustomer({
    pageIndex: 1,
    maxResultCount: 10,
    queryDto: {
      orgIds: [val],
    },
  }).then((request) => {
    if (request.success == true) {
      var dataArray = request.result.item;
      dataArray.forEach(function (item, index) {
      phoneArray.value.push(item.mobile1);
    });
    } 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">
: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>
