<template>
  <div>
    <TopNav :navTitle="title" :showRight="false" :showLeft="true" />
    <div class="concent">
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.sqrXm"
          name="sqrXm"
          label="申请人"
          readonly
          label-width="70px"
        />
        <van-field
          v-model="form.sqbm"
          name="sqbm"
          label="申请人部门"
          readonly
          label-width="70px"
        />
        <van-field
          v-model="form.qjlxmc"
          name="qjlxmc"
          label="请假类型"
          is-link
          label-width="70px"
          required
          :rules="[{ required: true, message: '请假类型' }]"
          @click="chooseQJLX"
        />
        <van-field
          v-model="form.kssj"
          name="kssj"
          label="开始时间"
          readonly
          is-link
          label-width="70px"
          required
          :rules="[{ required: true, message: '请选择开始时间' }]"
          @click="chooseTime('kssj')"
        />
        <van-field
          v-model="form.jssj"
          name="jssj"
          readonly
          label="结束时间"
          is-link
          label-width="70px"
          required
          :rules="[{ required: true, message: '请选择结束时间' }]"
          @click="chooseTime('jssj')"
        />
        <van-field
          v-model="form.bz"
          name="bz"
          label="备注"
          type="textarea"
          label-width="70px"
        />
        <div style="margin: 16px 0; padding: 0 5vw">
          <van-button
            :loading="loading"
            round
            native-type="submit"
            block
            type="primary"
          >
            提交</van-button
          >
        </div>
      </van-form>
    </div>

    <!-- 时间选择 -->
    <van-popup v-model:show="showksPicker" position="bottom">
      <van-datetime-picker
        v-model="time"
        type="date"
        title="请选择时间"
        :min-hour="minTime"
        :min-date="minDate"
        :formatter="formatter"
        @confirm="onksConfirm"
        @change="ksChange"
        @cancel="showksPicker = false"
      />
    </van-popup>
    <!-- 请假类型 -->
    <van-dialog
      :show="showSetting"
      title="请选择请假类型"
      show-cancel-button
      @confirm="onConfirm"
      @cancel="showSetting = false"
      confirmButtonColor="#3e6ee8"
    >
      <van-radio-group v-model="isActive">
        <van-radio v-for="item in D_BZ_QXJLX" :key="item.dm" :name="item.dm">{{
          item.zdmc
        }}</van-radio>
      </van-radio-group>
    </van-dialog>
  </div>
</template>

<script setup>
import router from "../../../../router/index.js";
import { getDictList, setDict } from "../../../../utils/dict";
import {
  ryqjListById,
  ryqjListEdit,
  ryqjListAdd,
} from "../../../../api/qwzx.js";
import TopNav from "../../../../components/topNav.vue";
import { timeValidate, hintToast } from "../../../../utils/tools.js";
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance,
  watch,
  computed,
} from "vue";
import { useRoute } from "vue-router";
const { D_BZ_QXJLX } = getDictList("D_BZ_QXJLX"); //字典信息请假类型
const { proxy } = getCurrentInstance();
const route = useRoute();
const user = ref(JSON.parse(window.localStorage.getItem("userInfo")));
const form = ref({
  sqrXm: user.value.userName,
  sqbm: user.value.deptName,
  sqbmid: user.value.deptList[0].deptId,
  qjlx: "",
  qjlxmc: "",
  kssj: "",
  jssj: "",
  bz: "",
  sqrlx: "01",
  sqrId: user.value.id,
});
const minDate = computed({
  get: () => {
    if (!form.value.kssj) {
      return new Date();
    } else if (timeType.value === "jssj") {
      return new Date(form.value.kssj);
    } else {
      return new Date();
    }
  },
});
const title = ref("");
const time = ref("");
const minTime = timeValidate(new Date(), "ymd");
const isActive = ref(null);
const timeType = ref(null);
const showSetting = ref(false);
const showksPicker = ref(false);

watch(
  () => D_BZ_QXJLX,
  (newValue) => {
    if (newValue._object.D_BZ_QXJLX.length > 0) init();
  },
  { deep: true }
);
onMounted(() => {
  // init()
});

// 初始化
function init() {
  if (route.query.type == "add") {
    title.value = "新增人员请假";
  } else {
    title.value = "修改人员请假";
    getInfoByID(route.query.id);
  }
}

// 根据id查询时间
function getInfoByID(id) {
  ryqjListById(id).then((res) => {
    form.value = res;
    let obj = D_BZ_QXJLX.value.find((v) => {
      return v.dm == form.value.qjlx;
    });
    if (obj) {
      form.value.qjlxmc = obj.zdmc;
    }
  });
}

// 编辑 - 新增请假类型
function onSubmit(e) {
  if (route.query.id && route.query.type == "edit") {
    let { qjlxmc, ...params } = form.value;
    ryqjListEdit(params).then((res) => {
      router.go(-1);
      hintToast("编辑成功");
    });
  }
  if (route.query.type == "add") {
    let { qjlxmc, ...params } = form.value;
    ryqjListAdd(params).then((res) => {
      hintToast("新增成功");
      router.go(-1);
    });
  }
}

// 请假类型
function chooseQJLX() {
  showSetting.value = true;
}

//确认用户的选择请假类型
function onConfirm() {
  showSetting.value = false;
  form.value.qjlx = isActive.value;
  let obj = D_BZ_QXJLX.value.find((v) => {
    return v.dm == isActive.value;
  });
  form.value.qjlxmc = obj.zdmc;
}
// 时间点击
function chooseTime(val) {
  timeType.value = val;
  showksPicker.value = true;
}
// 时间选择
function onksConfirm(val) {
  showksPicker.value = false;
  switch (timeType.value) {
    case "kssj":
      form.value.kssj = timeValidate(val, "ymd");
      form.value.jssj = form.value.kssj;
      break;
    case "jssj":
      form.value.jssj = timeValidate(val, "ymd");
      break;
  }
  timeType.value = null;
}
function ksChange(val) {
  switch (timeType.value) {
    case "kssj":
      form.value.kssj = timeValidate(val, "ymd");
      break;
    case "jssj":
      form.value.jssj = timeValidate(val, "ymd");
      break;
  }
}
</script>

<style lang="scss" scoped>
@import "../../../../assets/styles/mixin.scss";
.concent {
  margin-top: 16vw;
}
::v-deep .van-radio-group {
  padding: 5vw;
}

::v-deep .van-radio {
  padding: 2vw 0;
}
.van-cell {
  @include table_item_color($table-item-theme);
  box-sizing: border-box;
  border-radius: 4px;
  padding: 6px;
  margin: 8px 4%;
  width: 92%;
  overflow: hidden;
  color: var(--van-cell-text-color);
  font-size: var(--van-cell-font-size);
  line-height: var(--van-cell-line-height);
}
</style>