<script setup>
import { ElMessage } from "element-plus";
import { user } from "~/store/user";
const props = defineProps({
  id: String,
});

let form = $ref({
  zjhx_sm_id: "",
  jgtId: "",
  bindClassNum: "",
  partClassNum: "",
  centerNum: "",
  partNum: "",
  studentNum: "",
  teacherNum: "",
  subNum: "",
  time: "",
});
let time = $ref("");
let timeList = $ref([
  "2023-09~2024-08",
  "2024-09~2025-08",
  "2025-09~2026-08",
  "2026-09~2027-08",
  "2027-09~2028-08",
]);

let isEdit = $ref(false);
let user_role = $ref("sj");
let loading = $ref(true);
let schoolList = $ref([]);
let subSchoolList = $ref([]);
async function getSchool() {
  if (user.user_role_id == "72" || user.user_role_id == "75") {
    user_role = "xj";
  } else {
    user_role = "sj";
  }
  await request({
    url: "/sjsb/zjh_yshlw_school/index",
    data: {
      page: "1",
      limit: 999,
    },
  }).then((res) => {
    if (res.code == "1") {
      schoolList = res.data.page_data;
      if (!isEdit && user_role == "xj") {
        let index = res.data.page_data.findIndex(
          (el) => user.sm_id == el.szyx_sm_id
        );
        if (index === -1) {
          ElMessage.warning("用户所在学校异常，请联系管理员处理");
        } else {
          form.zjhx_sm_id = res.data.page_data[index].szyx_sm_id;
          handleChangeSm(form.zjhx_sm_id);
        }
      }
    }
  });
}

function handleChangeSm(e) {
  form.jgtId = "";
  if (!e) {
    subSchoolList = [];
    return;
  }
  request({
    url: "/sjsb/zjh_yshlw_school/index",
    data: {
      page: "1",
      limit: 999,
      szyx_sm_id: e,
    },
  }).then((res) => {
    if (res.code == "1") {
      subSchoolList = res.data.page_data;
      form.jgtId = subSchoolList[0].jgtId;
    }
  });
}

if (props.id) {
  isEdit = true;
  getSchool();
  request({
    url: "/sjsb/zjh_yshlw_xxtj/detail",
    data: {
      szyx_id: props.id,
    },
  }).then((res) => {
    if (res.code === "1") {
      console.log("res :>> ", res);
      // Object.keys(form).forEach((key) => {
      //   form[key] = res.data.one_info[key];
      // });
      for (const key in form) {
        form[key] = res.data.one_info[key];
      }
      handleChangeSm(res.data.one_info.zjhx_sm_id);
      form.jgtId = res.data.one_info.jgtId;
      form.time = `${res.data.one_info.startTime}~${res.data.one_info.endTime}`;
      // form.ym_student_num = res.data.one_info.ym_student_num * 1;
      // form.ym_timetable_json = res.data.one_info.ym_timetable_json?.split(',')
      // form.ym_date = res.data.one_info.ym_date;
      loading = false;
    }
  });
} else {
  isEdit = false;
  getSchool();
  loading = false;
}

const rules = {
  zjhx_sm_id: [
    { required: true, message: "请选择艺校学校名称", trigger: "submit" },
  ],
  jgtId: [
    { required: true, message: "请选择教共体学校名称", trigger: "submit" },
  ],
  bindClassNum: [
    { required: true, message: "请输入已结对班级数", trigger: "submit" },
  ],
  partClassNum: [
    { required: true, message: "请输入参与班级数", trigger: "submit" },
  ],
  centerNum: [
    { required: true, message: "请输入主讲老师数", trigger: "submit" },
  ],
  partNum: [{ required: true, message: "请输入助教⽼师数", trigger: "submit" }],
  studentNum: [
    { required: true, message: "请输入参与学生数", trigger: "submit" },
  ],
  teacherNum: [
    { required: true, message: "请输入总教师数", trigger: "submit" },
  ],
  time: [{ required: true, message: "请选择考核周期", trigger: "submit" }],
};

let formRef = $ref();
function handleSubmit() {
  console.log("form :>> ", form);
  formRef.validate().then((res) => {
    console.log("res :>> ", res);
    if (res === true) {
      let zjhx_sm_name;
      let smIndex = schoolList.findIndex(
        (el) => el.szyx_sm_id == form.zjhx_sm_id
      );
      if (smIndex > -1) zjhx_sm_name = schoolList[smIndex].szyx_sm_name;
      let jgtId_name;
      let subIndex = subSchoolList.findIndex((el) => el.jgtId == form.jgtId);
      if (subIndex > -1) jgtId_name = subSchoolList[subIndex].jgtId_name;
      request({
        url: `/sjsb/zjh_yshlw_xxtj/${props.id ? "edit" : "add"}`,
        data: {
          szyx_id: props.id,
          sjsb_zjh_yshlw_xxtj: {
            zjhx_sm_id: form.zjhx_sm_id,
            jgtId: form.jgtId,
            bindClassNum: form.bindClassNum,
            partClassNum: form.partClassNum,
            centerNum: form.centerNum,
            partNum: form.partNum,
            studentNum: form.studentNum,
            teacherNum: form.teacherNum,
            subNum: form.subNum,
            startTime: form.time.split("~")[0],
            endTime: form.time.split("~")[1],
            zjhx_sm_name,
            jgtId_name,
          },
        },
      }).then((res) => {
        if (res.code === "1") {
          ElMessage.success(res.msg);
          handleBack();
        }
      });
    }
  });
}

const router = useRouter();
function handleBack() {
  router.push({ name: "personal_sjsb" });
}
</script>

<template>
  <div
    class="w-full flex flex-col shadow bg-white rounded-md mt-4 p-4 items-center"
  >
    <div class="text-lg text-hex-050026 w-full font-semibold">数据上报</div>

    <div class="w-580px text-hex-949494" v-loading="loading">
      <el-form
        :model="form"
        label-position="top"
        ref="formRef"
        :rules="rules"
        v-if="!loading"
      >
        <div class="flex justify-between">
          <div>
            <el-form-item label="艺校学校名称" prop="zjhx_sm_id">
              <el-select
                v-model="form.zjhx_sm_id"
                clearable
                :disabled="isEdit || user_role == 'xj'"
                @change="handleChangeSm"
              >
                <el-option
                  v-for="item in schoolList"
                  :key="item.szyx_sm_id"
                  :value="item.szyx_sm_id"
                  :label="item.szyx_sm_name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label=" 已结对班级数" prop="bindClassNum">
              <el-input-number v-model="form.bindClassNum" />
            </el-form-item>
            <el-form-item label="参与班级数" prop="partClassNum">
              <el-input-number v-model="form.partClassNum" />
            </el-form-item>
            <el-form-item label="主讲老师数" prop="centerNum">
              <el-input-number v-model="form.centerNum" />
            </el-form-item>
            <el-form-item label=" 总教师数" prop="teacherNum">
              <el-input-number v-model="form.teacherNum" />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="教共体学校名称" prop="jgtId">
              <el-select disabled v-model="form.jgtId" clearable>
                <el-option
                  v-for="item in subSchoolList"
                  :key="item.jgtId"
                  :value="item.jgtId"
                  :label="item.jgtId_name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="约课数" prop="subNum">
              <el-input-number v-model="form.subNum" />
            </el-form-item>
            <el-form-item label="考核周期" prop="time">
              <el-select v-model="form.time" clearable>
                <el-option
                  v-for="(item, index) in timeList"
                  :key="index"
                  :value="item"
                  :label="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label=" 助教教师数" prop="partNum">
              <el-input-number v-model="form.partNum" />
            </el-form-item>
            <el-form-item label=" 参与学生数" prop="studentNum">
              <el-input-number v-model="form.studentNum" />
            </el-form-item>
          </div>
        </div>

        <div class="flex justify-around items-center text-sm mt-8">
          <div
            class="w-166px h-50px flex_center rounded bg-hex-00A3FF text-white cursor-pointer"
            @click="handleSubmit"
          >
            提交
          </div>
          <div
            class="w-166px h-50px flex_center rounded bg-hex-F4F4F4 text-hex-41387F cursor-pointer"
            @click="handleBack"
          >
            关闭
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep() {
  .el-input,
  .el-select,
  .el-input-number {
    width: 280px;
  }
}
</style>
