<template>
  <div>
    <MOSTY.FromPage :title="props.editObj.title" @closeDialog="black">
      <template #content>
        <MOSTY.Assort :title="'基本信息'" />
        <div class="box">
          <div style="display: flex; justify-content: center; margin-top: 10px;width: 100%;">
            <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" label-width="120px" class="demo-ruleForm"
              status-icon :inline="true" style="display: inline-block;" label-suffix="："
              :disabled="!props.editObj.saveBtnShow">
              <el-row>

                <el-col :span="12">
                  <el-form-item label="姓名" prop="userName">
                    <el-input v-model="data.formData.userName" placeholder="请选择人员" disabled style="width: 250px">
                      <template #append>
                        <el-button @click="selectUser">选择</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="岗位类别" prop="type">
                    <!-- <el-input v-model="data.formData.type" placeholder="请输入起始位置" style="width: 250px"></el-input> -->
                    <el-select v-model="data.formData.type" placeholder="请选择岗位类别" style="width: 250px">
                      <el-option v-for="item in D_BZ_ZDRYLX" :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="year">
                    <el-select v-model="data.formData.year" placeholder="请选择年份" style="width: 250px">
                      <el-option v-for="item in yearOpt" :key="item" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="授课次数" prop="mainHeadTeachingQty">
                    <el-input v-model.number="data.formData.mainHeadTeachingQty" type='number' placeholder="请输入授课次数"
                      style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="年度总学时" prop="neAnnualTotalHour">
                    <el-input v-model.number="data.formData.neAnnualTotalHour" type='number' placeholder="请输入年度总学时"
                      style="width: 250px">
                      <template #append>小时</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </template>
      <template #footer>

        <el-button type="primary" v-loading='loadingshow' v-if="props.editObj.saveBtnShow" @click="submit(ruleFormRef)">
          <el-icon>
            <DocumentChecked />
          </el-icon>保存
        </el-button>
        <el-button @click="black">
          <el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </template>
    </MOSTY.FromPage>


    <!-- 选择人员 -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" @choosedUsers="getSonValue">
    </ChooseUser>
  </div>
</template>
<script setup>
import { reactive, ref, watchEffect, getCurrentInstance, } from "vue";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";

import * as MOSTY from "@/components/MyComponents/index";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import { ElMessage } from "element-plus";
import { postApi } from "@/api/tobAcco_api.js";
import { filterYear } from "@/utils/auth.js";
import * as rule from "@/utils/rules.js";
import { JEblurFn } from "@/utils/auth.js";
const { proxy } = getCurrentInstance();
const { D_BZ_ZDRYLX, } = proxy.$dict("D_BZ_ZDRYLX");
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { },
  }
});
const loadingshow = ref(false)
const emit = defineEmits("changePage");
const ruleFormRef = ref();

const data = reactive({
  formData: {
    id: '',
    userId: '', // 用户id
    userName: '', // 用户姓名
    deptId: '',
    deptName: '', // 部门名称
    orgId: '', // 单位id
    orgName: '', // 单位名称
    type: '', // 岗位类别
    year: new Date().getFullYear(), // 年份
    mainHeadTeachingQty: '', // 授课次数
    neAnnualTotalHour: '', // 年度总学时
    // bz: '', // 备注
  }
});
data.formData.type
// 车辆选择框展示
const showCar = ref(false)
/** 选择人员组件显示 */
const chooseUserVisible = ref(false)
const singleShow = ref(true)
const memberList = ref([])

const yearOpt = ref(filterYear(5))
const rules = {
  userName: [{ required: true, message: "请选择人员", trigger: "blur" }],
  ...rule.intRule({ validator: true, require: true }, "mainHeadTeachingQty"),
  ...rule.intRule({ validator: true, require: true }, "neAnnualTotalHour"),
};
/** 选择人员 */
const selectUser = () => {
  chooseUserVisible.value = true
}
/** 保存人员数据 */
const getSonValue = (value) => {
  let user = value && value.length > 0 ? value[0] : {}
  data.formData.userId = user.id
  data.formData.userName = user.userName
  data.formData.orgId = user.ssdwid
  data.formData.orgName = user.ssdwmc
  data.formData.deptId = user.deptId
  data.formData.deptName = user.deptName
}
// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      loadingshow.value = true
      if (!data.formData.id) {
        postApi(data.formData, "/mosty-jcgl/training/manageTrainingInfo/saveManageTrainingInfo")
          .then(() => {
            ElMessage.success("新增成功");
            let obj = {
              ...props.editObj
            };
            emit("changePage", "Main", obj, '管理层');
            loadingshow.value = false
          })
      } else {
        postApi(data.formData, "/mosty-jcgl/training/manageTrainingInfo/editManageTrainingInfo")
          .then(() => {
            ElMessage.success("修改成功");
            loadingshow.value = false
            let obj = {
              ...props.editObj
            };
            emit("changePage", "Main", obj, '管理层');
          })
      }
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};

const black = () => {
  if (props.editObj.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        let obj = {
          ...props.editObj
        };
        emit("changePage", "Main", obj, '管理层');
      })
      .catch(() => {
        // catch error
      })
  } else {
    let obj = {
      ...props.editObj
    };
    emit("changePage", "Main", obj, '管理层');
  }

};

watchEffect(() => {
  if (props.editObj) {
    data.formData = props.editObj;
  }
});
</script>
<style lang="scss" scoped>
.box {

  width: 800px;
  color: black;
  font-size: 20px;
  margin: 0 auto;
}
</style>