<template>
  <div>
    <MOSTY.FromPage :title="props.title" @closeDialog="handleClose">
      <template #content>
        <div class="config">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm.value"
            :="true" :disabled="disabled">
            <el-form-item label="证书名称：" prop="tcname">
              <el-input v-model="ruleForm.tcname" maxlength="50" autosize type="textarea" show-word-limit
                placeholder="不能超过50个字" style="width: 280px"></el-input>
            </el-form-item>
            <el-form-item label="证书编号：" prop="tcno">
              <el-input v-model="ruleForm.tcno" clearable style="width: 280px"></el-input>
            </el-form-item>
            <el-form-item label="颁发单位：">
              <el-input v-model="ruleForm.tcawardunit" maxlength="50" autosize type="textarea" show-word-limit
                placeholder="不能超过50个字" style="width: 280px"></el-input>
            </el-form-item>
            <el-form-item label="证书类别：" prop="zstype">
              <MOSTY.DictTree v-model="ruleForm.zstype" :zdbh="'D_TB_ZSLB'" style="width: 280px" @onChange="getxzqh" />
            </el-form-item>
            <el-form-item label="证书有效期:" >
              <el-select class="pxdx_box" v-model="zsyxqDate" clearable style="width: 280px">
                <el-option label="非长期有效" :value="true" />
                <el-option label="长期有效" :value="false" />
              </el-select>
            </el-form-item>
            <el-form-item label="发证日期始：" prop="tcbegindate">
              <el-date-picker style="width: 280px" v-model="ruleForm.tcbegindate" type="date" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="发证日期止：" v-if="zsyxqDate" prop="tcdeadline">
              <el-date-picker style="width: 280px" v-model="ruleForm.tcdeadline" type="date" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" :disabled-date="disablednowDate" />
            </el-form-item>
            <el-form-item label="技术教育时间：">
              <el-date-picker v-model="ruleForm.jsjytime" style="width: 280px" type="daterange" range-separator="至"
                start-placeholder="教育开始日期" end-placeholder="教育结束日期" value-format="YYYY-MM-DD">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="姓名：" prop="tcperson" style="display: flex">
              <el-input v-model="ruleForm.tcperson" clearable readonly style="width: 280px; ">
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('01')">选择</el-button></template>
              </el-input>
            </el-form-item>
            <el-form-item label="性别：" prop="tcsex">
              <el-select class="pxdx_box" v-model="ruleForm.tcsex" clearable style="width: 280px">
                <el-option v-for="item in D_BZ_XB" :key="item" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="身份证号：" prop="tcidcard">
              <MOSTY.IdentityCard width="280px" v-model="ruleForm.tcidcard" clearable @onInput="identityCardChange">
              </MOSTY.IdentityCard>
            </el-form-item>
            <el-form-item label="文化程度：" prop="tceducationlevel">
              <el-select class="pxdx_box" v-model="ruleForm.tceducationlevel" clearable style="width: 280px">
                <el-option v-for="item in D_BZ_AQRYWHCD" :key="item" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="职业或操作范围：">
              <el-input v-model="ruleForm.zyhczfw" maxlength="100" autosize type="textarea" show-word-limit
                placeholder="不能超过100个字" style="width: 280px"></el-input>
            </el-form-item>

            <el-form-item label="备注：" style="width: 100%">
              <el-input v-model="ruleForm.bz" maxlength="1000" type="textarea" show-word-limit placeholder="不能超过1000个字"
                style="width: 100%" />
            </el-form-item>
            <el-form-item label="上传附件：" style="width: 100%">
              <MOSTY.Upload :isAutoWidth='true' :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" v-model="ruleForm.files"
                :showinput="true" :delrow="delrow" :disabled="disabled"></MOSTY.Upload>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>

        <el-button type="primary" :loading="loading" :disabled="disabled" @click="handleSave(ruleFormRef)">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button @click="handleClose" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </template>
    </MOSTY.FromPage>

    <!-- 选择人员 -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :leaderid="leaderid" @choosedUsers="getSonValue">
    </ChooseUser>
  </div>
</template>

<script setup>
// 引入
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watch,
  getCurrentInstance
} from "vue";
import { getItem } from "@/utils/storage";
import { useRouter } from "vue-router";
import * as rule from "@/utils/rules.js";
import { createAndClickLink } from "@/utils/tools.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { getApi, postApi, putApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const { D_TB_ZSLB, D_BZ_XB, D_BZ_AQRYWHCD } = proxy.$dict(
  "D_TB_ZSLB",
  "D_BZ_XB",
  "D_BZ_AQRYWHCD"
);
const loading = ref(false); //新增保存按钮截流
const otherfiledelrow = ref({});
const disabled = ref(false);
const ruleFormRef = ref();
const zzlx = ref(null);
const ruleForm = ref({});
const emits = defineEmits(["changeAddVi", "changeclose"]);
const chooseUserVisible = ref(false); //选择人员弹窗
const singleShow = ref(true); //单选多选
const leaderid = ref("");
const deptId = ref(getItem("deptId").ssdwid);
// 证书有效期
const zsyxqDate = ref()
//规则校验
const rules = reactive({
  tcname: [{ required: true, message: "证书名称不能为空", trigger: "blur" }],
  tcno: [{ required: true, message: "证书编号不能为空", trigger: "blur" }],
  // tcawardunit: [
  //   { trigger: "blur", required: true, message: "颁发单位不能为空" }
  // ],
  zstype: [{ trigger: "blur", required: true, message: "证书类别不能为空" }],
  tcperson: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
  tcsex: [{ required: true, message: "性别不能为空", trigger: "blur" }],
  ...rule.identityCardRule({ validator: true, require: true }, "tcidcard"), //身份证校验
  tceducationlevel: [
    { required: true, message: "文化程度不能为空", trigger: "blur" }
  ],

  tcbegindate: [
    { trigger: "blur", required: true, message: "发证日期始不能为空" }
  ],
  tcdeadline: [
    { trigger: "blur", required: true, message: "发证日期止不能为空" }
  ],
  // jsjytime: [
  //   { trigger: "blur", required: true, message: "技术教育时间不能为空" }
  // ]
});
const props = defineProps({

  title: String,
  xqobj: Object
});
function disablednowDate(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(ruleForm.value.tcbegindate).getTime()
}
//获取详情
onMounted(() => {
  if (props.xqobj) {
    if (props.title == '证书修改') {
      disabled.value = false;
    } else {
      disabled.value = true;
    }
    ruleForm.value = props.xqobj;
    if(ruleForm.value.tcdeadline==='2099-12-31') zsyxqDate.value=false
  } else {
    disabled.value = false;
    ruleForm.value = {};
  }
});
function ChooesDdld(val) {
  zzlx.value = val;
  //选择检查成员
  if (val == "01") {
    leaderid.value = "";
    singleShow.value = true;
    chooseUserVisible.value = true;
  }
}
const getSonValue = (value) => {
  if (zzlx.value == "01") {
    ruleForm.value.tcperson = value[0].userName;
    ruleForm.value.tcpersonid = value[0].id;
    getdreardata(ruleForm.value.tcpersonid);
  }
};
//获取驾驶员驾驶信息
function getdreardata(id) {
  getApi({}, `/mosty-base/sysUser/getUserInfo/${id}`).then((res) => {
    ruleForm.value.tcsex = res.sex;
    ruleForm.value.tcidcard = res.idEntityCard;
    ruleForm.value.tceducationlevel = res.whcd;
  });
}

// 关闭
const handleClose = () => {
  if (!disabled.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        ruleForm.value = {};
        emits("changeAddVi", false);
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    ruleForm.value = {};
    emits("changeAddVi", false);
  }

};

// 关闭×
const closeDialog = () => {
  loading.value = false;
  emits("changeAddVi", false);
  emits("changeclose", false);
};
// 保存
const handleSave = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      ruleForm.value.files = ruleForm.value.files
        ? ruleForm.value.files.toString()
        : null;
      ruleForm.value.jsjytime = ruleForm.value.jsjytime
        ? ruleForm.value.jsjytime.toString()
        : null;
        if(zsyxqDate.value===false){
// ruleForm.value.tcbegindate='1900-01-01'
ruleForm.value.tcdeadline='2099-12-31'
        }
      if (props.title == "证书新增") {
        postApi(ruleForm.value, "/mosty-jcgl/tcertificate/add").then((res) => {

          ElMessage.success("新增成功");
          emits("changeAddVi", false);
        }).finally(() => {
          loading.value = false;
        });
      } else {
        postApi(ruleForm.value, "/mosty-jcgl/tcertificate/edit").then((res) => {
          loading.value = false;
          ElMessage.success("修改成功");
          emits("changeAddVi", false);
        }).finally(() => {
          loading.value = false;
        });
      }
    } else {
      ElMessage.warning("请输入必填项");
    }
  });
};
</script>

<style lang="scss" scoped>
.fj {
  .el-form {
    padding: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    // width: 1170px;
    justify-content: flex-end;
  }

  .from_fix {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin-top: 10px;

    // .el-form-item--default .el-form-item__content {
    //   flex-wrap: nowrap !important;
    // }

    .el-input {
      width: 100%;
    }
  }
}

::v-deep .el-form-item__content {
  flex-wrap: nowrap !important;
}

.config {
  margin-top: 20px;

  .el-form {
    width: 100%;
    padding: 10px;
    margin: 10px auto;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .el-form-item {
    text-align: center;
  }
}

.pxdx_box {
  width: 500px;
}

::v-deep .el-dialog__body {
  overflow: auto !important;
  max-height: 540px !important;
}

.titleBox {
  align-items: center;
  margin: 0;
  padding: 0;
  height: 60px;
  border: 1px solid rgb(32, 75, 54);
  padding: 20px;
}

.form>div {
  position: relative;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    align-items: center;

    .el-select {
      width: 65%;
    }
  }
}

.el-input {
  width: 75%;
}

.two .el-input {
  width: 65%;
}

.three {
  justify-content: flex-start !important;

  .el-select {
    width: 15%;
  }
}

.four {
  display: flex;
  align-items: center;

  span {
    width: 5%;
  }

  .el-textarea__inner {
    width: 95%;
  }
}

.group {
  margin-top: 50px;
  // background-color: red;
  position: relative;
}

.fj {
  margin-top: 50px;
  width: 100%;

  .content {
    width: 100%;
    display: flex;
    padding: 20px;

    div {
      display: flex;
      width: 85%;
      align-items: center;
    }

    justify-content: space-between;
  }
}

.jc {
  margin-top: 50px;
}

.tabBox {
  height: 300px !important;
}

.el-table {
  height: 300px !important;
  border: 1px solid var(--el-color-primary);
}

.el-form-item__content {
  flex-wrap: nowrap;
}

.el-collapse {
  border-color: var(--el-color-primary);
  // height: 460px;
}

::v-deep .el-collapse-item__header {
  border-bottom-color: var(--el-color-primary);
  color: #000 !important;
}

::v-deep .el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}

::v-deep .el-date-editor .el-range-input {
  color: #0c0b0b !important;
}

::v-deep .el-range-editor.is-disabled input {
  background-color: #d3dbdd !important;
}

::v-deep .el-range-editor.is-disabled {
  background-color: #d3dbdd !important;
}
</style>
