<template>
  <div style="padding-top: 13vw">
    <TopNav :navTitle="title" />
    <van-form @submit="onSubmit" style="height: calc(100vh - 13vw);">
      <div class="infoBox">
        <ul class="cardInfo">
          <li class="item">
            <van-field v-model="normalForm.xm" required name="姓名" label="姓名" :disabled="disabled" placeholder="输入姓名"
              input-align="right" :rules="[{ required: true, message: '请输入姓名' }]" />
          </li>
          <li class="item">
            <van-field v-model="normalForm.sfzh" required :disabled="disabled" name="身份证号" label="身份证号"
              placeholder="输入身份证号" input-align="right" :rules="sfzhRuls" />
          </li>
          <li class="item">
            <van-field v-model="normalForm.xbmc" required :disabled="disabled" name="性别" label="性别" placeholder="请选择性别"
              input-align="right" readonly :rules="[{ required: true, message: '请选择性别' }]"
              @click="getCommonPop('sex')" />
          </li>
          <li class="item">
            <van-field v-model="normalForm.csrq" :disabled="disabled" required name="出生日期" label="出生日期"
              placeholder="点击设置" input-align="right" :rules="[{ required: true, message: '请选择出生日期' }]"
              @click="getCommonPop('time')" />
          </li>
          <li class="item">
            <van-field v-model="normalForm.lxdh" required name="联系电话" label="联系电话" placeholder="请输入联系电话"
              input-align="right" :rules="lxdhRuls" />
          </li>
          <li class="item">
            <van-field v-model="normalForm.xxdz" required name="现住址" label="现住址" placeholder="请输入住址名称"
              input-align="right" :rules="[{ required: true, message: '请输入住址名称' }]" />
          </li>
          <li class="item">
            <van-field name="备注" readonly label="备注" />
          </li>
          <div class="textarea">
            <van-field placeholder="请输备注" v-model="normalForm.bz" rows="4" autosize maxlength="500" show-word-limit
              type="textarea"></van-field>
          </div>
        </ul>
        <div class="footer">
          <van-button round block type="primary" native-type="submit" :loading="isLoading" loading-type="spinner"
            loading-text="登录中...">提交</van-button>
        </div>
      </div>
    </van-form>
  </div>

  <!-- 弹窗 -->
  <van-popup v-model:show="isShowCommonPicker" round position="bottom">
    <van-picker v-if="clickType == 'sex'" :columns="columns" @cancel="isShowCommonPicker = false" @confirm="onConfirm" />
    <van-datetime-picker @cancel="isShowCommonPicker = false" @confirm="onConfirm" v-if="clickType == 'time'" v-model="time" type="date" title="选择年月日">
    </van-datetime-picker>
  </van-popup>
</template>
<script setup>
import { IdCardValidator, phoneValidator } from "../../../utils/rules.js"
import { cyryDetail, editDetail, addDetail } from "../../../api/xfgl.js";
import { useRouter, useRoute } from "vue-router";
import TopNav from "../../../components/topNav.vue";
import { hintToast, timeValidate } from "../../../utils/tools";
import { getDictList, setDict } from "../../../utils/dict";
import { ref, onMounted, reactive, defineProps } from "vue";
const { D_BZ_XB } = getDictList("D_BZ_XB");
const route = useRoute();
const router = useRouter();
const message = ref("");
const normalForm = ref({});
const columns = ref([]);
const time = ref();
const isLoading = ref(false);
const disabled = ref(false)
const isShowCommonPicker = ref(false);
const clickType = ref(""); //点击选择
const title = ref("新增人员");
const sfzhRuls = ref([
  { required: true, message: '身份证号码不能为空', trigger: 'onChange/onBlur' },
  { validator: (value) => { return IdCardValidator(value) }, trigger: 'onChange/onBlur' }
])
const lxdhRuls = ref([
  { required: true, message: '联系电话不能为空', trigger: 'onChange/onBlur' },
  { validator: (value) => { return phoneValidator(value) }, trigger: 'onChange/onBlur' }
])

onMounted(() => {
  title.value = route.query.id ? "编辑人员" : "新增人员";
  disabled.value = route.query.id ? true : false;
  if (route.query.id) _getDetailById(); //根据id获取详情
});
//根据id获取详情
function _getDetailById() {
  cyryDetail(route.query.id).then((res) => {
    normalForm.value = res;
    D_BZ_XB.value.forEach((element) => {
      if (element.dm == res.xb) normalForm.value.xbmc = element.text;
    });
  });
}
// 选择性别
function getCommonPop(val) {
  if (disabled.value) return false;
  clickType.value = val;
  switch (val) {
    case "sex":
      columns.value = D_BZ_XB.value;
      break;
  }
  isShowCommonPicker.value = true;
}
// 确定选择
function onConfirm(val) {
  isShowCommonPicker.value = false;
  switch (clickType.value) {
    case "sex":
      normalForm.value.xbmc = val.text;
      normalForm.value.xb = val.dm;
      break;
    case "time":
      normalForm.value.csrq = timeValidate(val, "ymd");
      break;
  }
}

// 提交
function onSubmit() {
  isLoading.value = true;
  delete normalForm.value.xbmc
  if (title.value == '编辑人员') {
    editDetail(normalForm.value).then(res => {
      hintToast('编辑成功')
      router.go(-1);
    })
  } else {
    addDetail(normalForm.value).then(res => {
      hintToast('新增成功')
      router.go(-1);
    })
  }
}
</script>
<style lang="less" scoped>
.infoBox {
  height: 100%;
  position: relative;

  .cardInfo {
    height: calc(100vh - 13vw);
    padding: 1vw 4vw;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;

    .item {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // height: 8vw;
      width: 100%;
      border-bottom: 1px solid #e5e5e5;

      .mark {
        margin: 0 10px;
        color: red;
        font-size: 16px;
      }

      .text {
        color: #767676;
      }
    }

    .item::before {
      position: absolute;
      content: "";
      left: 0;
      top: 20%;
      // transform: translateY(-50%);
      background: #0066ff;
      width: 2px;
      height: 12px;
      z-index: 11;
    }
  }

  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align: center;

    .btn {
      padding: 2vw 6vw;
      background: #1989fa;
      color: #fff;
      border-radius: 4px;
    }
  }
}

.textarea {
  ::v-deep .van-field__control {
    background: #f8fafd;
    padding-left: 4px;
  }
}

.fjBox {
  padding: 4vw;
  box-sizing: border-box;
}
</style>