<template>
  <div>
    <el-dialog :title="props.title" width="1000px" v-model="props.addDiaShow" :before-close="handleClose">
      <!-- 培训计划新增或修改 -->
      <div class="config">
        <el-form ref="Fromrefs" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm.value"
          :disabled='!saveBtnShow' style="width: 100% !important;">
          <el-form-item label="原工作单位：">
            <el-input v-model="ruleForm.company" clearable style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="现工作单位：">
            <el-input v-model="ruleForm.workunit" clearable style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="准备调、借、聘：" prop="arttlhtvt">
            <el-select class="pxdx_box" v-model="ruleForm.arttlhtvt" clearable style="width:100%">
              <el-option v-for="item in D_TB_ARTTLHTVT" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="专职驾驶工作：" prop="ftdj">
            <el-input v-model="ruleForm.ftdj" clearable style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="考试科目：" prop="aes">
            <el-select class="pxdx_box" v-model="ruleForm.aes" clearable style="width:100%">
              <el-option v-for="item in D_TB_AES" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="考试时间：">
            <el-date-picker v-model="ruleForm.testtime" style="width: 100%" type="date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="考试成绩：" prop="testscores">
            <el-input v-model="ruleForm.testscores" type='number' clearable style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="是否合格：">
            <el-select class="pxdx_box" v-model="ruleForm.pass" clearable style="width:100%">
              <el-option v-for="item in D_TB_ISPASS" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="考核人员：">
            <el-input v-model="ruleForm.api" clearable style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="职业道德审核人员：">
            <el-input v-model="ruleForm.iawslsepcas" clearable style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="职业道德政审情况：" style="width: 100% !important">
            <el-input v-model="ruleForm.sopeopc" clearable style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="单位车管意见：" style="width: 100% !important">
            <el-input v-model="ruleForm.uvmd" clearable style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="单位领导意见：" style="width: 100% !important">
            <el-input v-model="ruleForm.unitleadersviews" clearable style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="单位车管意见时间：">
            <el-date-picker v-model="ruleForm.uvmdatt" style="width: 100%" type="date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="单位领导意见时间：">
            <el-date-picker v-model="ruleForm.unitleadersviewstime" style="width: 100%" type="date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="安全职能部门意见：" style="width: 100% !important">
            <el-input v-model="ruleForm.ufotssv" clearable style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="安全职能部门时间：">
            <el-date-picker v-model="ruleForm.usfatt" style="width: 100%" type="date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="是否符合要求：" prop="dcwir">
            <el-select class="pxdx_box" v-model="ruleForm.dcwir" clearable style="width:100%">
              <el-option v-for="item in D_TB_ISDCWIR" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="驾驶证有效期：">
            <el-date-picker v-model="ruleForm.lvp" style="width: 100%" type="date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="handleSave(Fromrefs)" v-if="saveBtnShow">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance
} from "vue";
import * as rule from "@/utils/rules.js";
import { postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_TB_ARTTLHTVT, D_TB_AES, D_TB_ISPASS, D_TB_ISDCWIR } = proxy.$dict("D_TB_ARTTLHTVT", "D_TB_AES", "D_TB_ISPASS", "D_TB_ISDCWIR");
//表单数据
const ruleForm = ref({
});
const loading = ref(false)
const Fromrefs = ref()
//规则校验
const rules = reactive({
  arttlhtvt: [{ required: true, message: "准备调、借、聘不能为空", trigger: "blur" }],
  aes: [{ required: true, message: "考试科目不能为空", trigger: "blur" }],
  ftdj: [{ required: true, message: "专职驾驶工作不能为空", trigger: "blur" }],
  dcwir: [{ required: true, message: "是否符合要求不能为空", trigger: "blur" }],
  ...rule.percentageRule({ validator: true, require: true }, "testscores")

});
const props = defineProps({
  addDiaShow: {
    type: Boolean,
    default: false
  },
  rowxq: {
    type: Object,
    default: () => { }
  },
  title: String,
  saveBtnShow: {
    default: true,
    type: Boolean
  }
});

watchEffect(() => {
  if (props.rowxq) {
    ruleForm.value = JSON.parse(JSON.stringify(props.rowxq));
  } else {
    ruleForm.value = {}
  }
});
const emits = defineEmits(["changeAddVi", "changeclose"]);

onMounted(() => { });

// 关闭
const handleClose = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("changeclose", false);
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("changeclose", false);
  }

};

// 关闭×
const closeDialog = () => {
  emits("changeclose", false);
};
// 保存
const handleSave = async (formEl) => {
  loading.value = true
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (ruleForm.value) {
        if (ruleForm.value.id) {
          postApi(ruleForm.value, "/mosty-jcgl/driverTeerf/updateDriverTeerf")
            .then(() => {
              ElMessage.success("修改成功");
              emits("changeclose", false);
              emits("changeAddVi", ruleForm.value);
              loading.value = false
            }).catch((err) => {
              loading.value = false
            })
        } else {
          emits("changeAddVi", ruleForm.value);
          loading.value = false
          emits("changeclose", false);
        }
      }
    } else {
      ElMessage.warning('请输入必填项！！！')
      loading.value = false
    }
  })
}
</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 {
  width: 955px;

  .el-form {
    padding: 10px 40px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

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

.pxdx_box {
  width: 500px;
}

.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;
}
</style>