<template>
  <div>
    <el-form ref="userEditForm" :model="form" :label-width="formLabelWidth" clearable>
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名：" prop="realName" :rules="ruleRequired">
            <el-input
              type="text"
              v-model="form.realName"
              autocomplete="off"
              maxlength="20"
              :show-word-limit="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="家长电话" prop="phone">
            <el-input type="text" v-model="form.phone" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="入班时间：" prop="joinTime">
            <el-date-picker v-model="form.joinTime" type="date" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="退出时间：" prop="exitTime">
            <el-date-picker v-model="form.exitTime" type="date" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="当前状态：" prop="status">
            <el-select
              v-model="form.status"
              filterable
              placeholder="就读/退出"
              style="width: 180px"
            >
              <el-option key="1" label="未录入" :value="0" />
              <el-option key="2" label="就读" :value="1" />
              <el-option key="3" label="退出" :value="10" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请减免" prop="amountRelief">
            <el-switch v-model="form.reliefApplication" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="form.reliefApplication" class="pb-4.5">
        <el-col :span="24">
          <div style="display: flex; gap: 10px">
            <label for="Level" class="el-form-item__label" style="width: 120px"
              >减免详情:
            </label>
            <el-input-number
              v-model="form.amountRelief"
              :precision="2"
              :step="0.1"
              style="width: 180px"
              placeholder="减免金额(元)"
              :max="99999999"
            />

            <el-select
              v-model="form.reliefType"
              filterable
              placeholder="减免类型"
              style="width: 180px"
            >
              <el-option
                v-for="(item, i) in reliefTypeEnum"
                :key="i"
                autocomplete="off"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-date-picker
              placeholder="减免时间"
              style="width: 180px"
              v-model="form.reliefSubTime"
              type="date"
            />
          </div>
        </el-col>
      </el-row>

      <el-row class="pb-4.5">
        <el-col :span="24">
          <div style="display: flex; gap: 10px">
            <label for="Level" class="el-form-item__label" style="width: 120px"
              >选修方向：</label
            >
            <el-select
              v-model="form.gLSubject"
              filterable
              clearable
              placeholder="历史/地理"
              style="width: 180px"
            >
              <el-option
                v-for="(item, i) in subject1"
                :key="i"
                clearable
                autocomplete="off"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="form.gSubject1"
              filterable
              clearable
              placeholder="小学科"
              style="width: 180px"
            >
              <el-option
                v-for="(item, i) in subject2"
                :key="i"
                autocomplete="off"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="form.gSubject2"
              filterable
              placeholder="小学科"
              style="width: 180px"
            >
              <el-option
                v-for="(item, i) in subject2"
                :key="i"
                autocomplete="off"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>

      <el-form-item label="备注：" prop="remark">
        <el-input v-model="form.remark" maxlength="500" type="textarea" />
      </el-form-item>
      <el-row>
        <el-col :span="12"> </el-col>
      </el-row>
      <el-row class="pt-4">
        <el-col :span="24">
          <el-form-item label="就读班级：" prop="positionIds" :rules="ruleRequired">
            <el-button type="success" @click="CheckPosition()">选择就读班级</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <div
        v-for="(position, index) in positionList"
        :key="index"
        style="padding-left: 120px; padding-bottom: 20px"
      >
        <div class="subjectTagEnableDiv" v-if="position.enable === false">
          <el-tag type="info">{{ "禁用" }}</el-tag>
          <el-tag type="info">{{ position.schoolName || "-" }}</el-tag>
          <el-tag type="info">{{
            position.graduationYear ? position.graduationYear + "届" : "-"
          }}</el-tag>
          <el-tag type="info">{{ position.grade || "-" }}</el-tag>
          <el-tag type="info">{{ position.className || "-" }}</el-tag>
          <el-tag type="info">{{ position.subjectName || "-" }}</el-tag>
          <el-tag type="info">{{ position.name || "-" }}</el-tag>
          <el-tag type="info">{{ position.endTime }}</el-tag>
        </div>
        <div class="subjectTagEnableDiv" v-else>
          <el-tag>{{ position.schoolName || "-" }}</el-tag>
          <el-tag type="warning">{{
            position.graduationYear ? position.graduationYear + "届" : "-"
          }}</el-tag>
          <el-tag type="success">{{ position.grade || "-" }}</el-tag>
          <el-tag type="primary" class="classTag">{{ position.className || "-" }}</el-tag>
          <el-tag type="info" class="subjectTag">{{
            position.subjectName || "-"
          }}</el-tag>
          <el-tag type="danger">{{ position.name || "-" }}</el-tag>
        </div>
      </div>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handleSubmitForm()"
          >立即提交</el-button
        >
        <el-button @click="handleResetForm()">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="dialog-container">
      <el-dialog
        v-if="dialog.visible"
        ref="PositionCheckFromDialog"
        :title="dialog.title"
        v-model="dialog.visible"
        :width="dialog.width"
        :close-on-click-modal="dialog.close"
        :close-on-press-escape="dialog.close"
        append-to-body
      >
        <PositionForm
          :userType="form.userType"
          :positions="PositionFormIds"
          @handleCheckCallback="handleCheckCallback"
        />
      </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { EditStudent, StudentInfo } from "@/api/student";
import { cloudSchoolCombo, getUserInfo, editUser, Position } from "@/api/userCenter";
import PositionForm from "../teacher/positionForm.vue";
import { getenum, getenumDic } from "@/api/enum";
import { ruleRequired, rulePhone } from "@/utils/rules";
import { ElMessage, FormInstance } from "element-plus";
import { ComboModel } from "@/components/hTable/hTable";

interface FormData {
  id: number;
  uId?: number;
  account: string;
  userType: number;
  level: number;
  passWord: string;
  realName: string;
  studentId: string;
  templateId: number;
  phone: string | number;
  cloudSchoolId: number;
  subjectLevels: any[];
  subjectLevel: Record<string, any>;
  positionIds: number[];
  positionFormIds?: number[];
  gLSubject?: number;
  gSubject1?: number;
  gSubject2?: number;
  idCard?: string;
  exitTime?: string;
  joinTime?: string;
  remark?: string;
  status?: string;
  amountRelief?: number;
  reliefSubTime?: number;
  reliefType?: number;
  reliefApplication?: number;
}

interface DialogConfig {
  close: boolean;
  title: string;
  visible: boolean;
  width: string;
}
defineOptions({
  name: "UserEditForm",
});

const userEditForm = ref<FormInstance>();
const props = defineProps<{
  id: number;
}>();

const formLabelWidth = "120px";
const size = "small";
const loading = ref(false);

const reliefTypeEnum = ref<ComboModel[]>();

const subject1 = ref<ComboModel[]>([
  { value: 4, text: "物理" },
  { value: 8, text: "历史" },
]);

const subject2 = ref<ComboModel[]>([
  { value: 5, text: "化学" },
  { value: 6, text: "生物" },
  { value: 9, text: "地理" },
  { value: 7, text: "政治" },
]);

const userTypeList = ref<ComboModel[]>([]);
const userLevelList = ref<ComboModel[]>([]);
const subjectLEnum = ref<Record<string, string>>({});
const positionList = ref<Position[]>([]);
const CloudSchoolArr = ref<ComboModel[]>([]);
const Template = ref<any[]>([]);
const PositionFormIds = ref<number[]>([]);

const defaultSubjectLevel = reactive({
  UserId: 0,
  Level: 0,
  Subject1: 0,
  Subject2: 0,
  Subject3: 0,
  Subject4: 0,
  Subject5: 0,
  Subject6: 0,
  Subject7: 0,
  Subject8: 0,
  Subject9: 0,
  CreatePositionId: 1,
});

const form = ref<FormData>({
  id: props.id,
  account: "",
  userType: 1,
  level: 0,
  passWord: "",
  realName: "",
  studentId: "",
  templateId: 0,
  phone: "",
  cloudSchoolId: 0,
  subjectLevels: [],
  subjectLevel: { ...defaultSubjectLevel },
  positionIds: [],
  positionFormIds: [],
});

const dialog = reactive<DialogConfig>({
  close: false,
  title: "",
  visible: false,
  width: "1200px",
});

const customeRules = reactive({
  mobile: [
    { required: false, message: "手机号必填", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],
});

const getUserSubjectLevel = (obj: Record<string, any>) => {
  if (!obj.id) {
    form.value.subjectLevel = { ...defaultSubjectLevel };
    obj = form.value.subjectLevel;
  }
  return Object.entries(obj).filter((s) => s[0].includes("Subject"));
};

const userLevel2subject = (str: string) => {
  const name = str.match(/[0-9]+/)?.[0] || "";
  return subjectLEnum.value[name];
};
const emit = defineEmits(["handlePagedCallback"]);
const handlePagedCallback = () => {
  // Emit event to parent if needed
  emit("handlePagedCallback");
};

const handleSubmitForm = () => {
  userEditForm.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      let ac = form.value.account || new Date().getTime() + "";
      const formData = {
        id: form.value.uId || 0,
        userType: form.value.userType || 1,
        level: form.value.level || 0,
        account: form.value.account || new Date().getTime() + "",
        PassWord: form.value.id === 0 ? "无效密码" : "",
        realName: form.value.realName || "",
        studentId: form.value.studentId || "",
        templateId: form.value.templateId || 0,
        subjectLevels: form.value.subjectLevels || [],
        subjectLevel: form.value.subjectLevel || { ...defaultSubjectLevel },
        positionIds: form.value.positionIds || [],
        gLSubject: form.value.gLSubject,
        gSubject1: form.value.gSubject1,
        gSubject2: form.value.gSubject2,
        idCard: form.value.idCard,
        cloudSchoolId: form.value.cloudSchoolId,
        phone: form.value.phone,
      };

      let res = await editUser(formData);

      if (res.code !== 200) {
        loading.value = false;
        ElMessage.error(res.message);
        return;
      }
      res = await EditStudent({
        ...form.value,
        userCenterId: res.data,
      });
      if (res.code !== 200) {
        loading.value = false;
        ElMessage.error(res.message);
        return;
      }
      loading.value = false;
      ElMessage.success("操作成功");
      handlePagedCallback();
      //edit info
    }
  });
  // Form validation and submission logic
};

const handleResetForm = () => {
  Object.assign(form, {
    id: props.id,
    account: "",
    userType: 1,
    level: 0,
    passWord: "",
    realName: "",
    studentId: "",
    subjectLevels: [],
    subjectLevel: { ...defaultSubjectLevel },
    positionIds: [],
    idCard: "",
    phone: "",
    cloudSchoolId: "",
    pointPenSN: "",
  });
  positionList.value = [];
};

const fetchInitData = async () => {
  reliefTypeEnum.value = `
    1.复读生
    2.艺术生
    3.春招生
    4.领导承诺批准全免
    5.资源班
    6.国际班
    7.合同制收费学校
    8.渠道商家属
    9.新开班但领导承诺第一学期不收费`
    .split("\n")
    .filter((s) => s.trim())
    .map((s) => {
      const [value, text] = s.trim().split(".");
      return { value: text.trim(), text: text.trim() };
    });
};

const fetchFormData = async () => {
  handleResetForm();
  if (props.id !== 0) {
    let res = await getUserInfo(props.id);
    if (res.data.SubjectLevel && res.data.SubjectLevel.CreatePositionId) {
      delete res.data.SubjectLevel.CreatePositionId;
    }
    let sInfo = await StudentInfo(props.id);
    Object.assign(form.value, {
      id: res.data.id,
      uId: res.data.id,
      userType: res.data.userType,
      level: res.data.level,
      account: res.data.account,
      passWord: res.data.passWord,
      realName: res.data.realName,
      studentId: res.data.studentId,
      templateId: res.data.templateId,
      subjectLevels: res.data.subjectLevels,
      subjectLevel: res.data.subjectLevel,
      positionIds: res.data.positions
        .filter((s: any) => s.enable !== false)
        .map((w: any) => w.id),
      gLSubject: res.data.gLSubject,
      gSubject1: res.data.gSubject1,
      gSubject2: res.data.gSubject2,
      idCard: res.data.idCard,
      phone: res.data.phone,
      cloudSchoolId: res.data.cloudSchoolId,
      pointPenSN: res.data.pointPenSN,
      ...sInfo.data,
    });

    positionList.value = res.data.positions;
    PositionFormIds.value = res.data.positions
      .filter((s: any) => s.Enable !== false)
      .map((s: any) => s.id);
  }
};

const userTypeChange = () => {
  if (form.value.userType === 2) {
    form.value.studentId = "";
  }
  customeRules.mobile[0].required = form.value.userType !== 1;
};

const CheckPosition = () => {
  dialog.title = "选择就读班级";
  dialog.visible = true;
  PositionFormIds.value = positionList.value
    .filter((s) => s.enable !== false)
    .map((s) => s.id);
};

const handleCheckCallback = (checkPosition: Position[]) => {
  dialog.visible = false;
  positionList.value = checkPosition;
  form.value.positionIds = positionList.value.map((w) => w.id);
};

onMounted(async () => {
  await fetchInitData();
  fetchFormData();
});
</script>

<style scoped>
.userform_ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.userform_ul li {
  margin-bottom: 10px;
}

.subjectTagEnableDiv {
  margin-top: 5px;
}

.subjectTagEnableDiv .el-tag {
  margin-right: 5px;
}

.classTag {
  background-color: #409eff;
  color: white;
}

.subjectTag {
  background-color: #909399;
  color: white;
}
.classTag {
  color: #a3bf08 !important;
  background-color: #f4fbd1 !important;
  border-color: #f4fbd1 !important;
}
.subjectTagEnableDiv {
  padding: 1px;
}
.subjectTag {
  color: #eb0de4 !important;
  background-color: #fbd9ff !important;
  border-color: #fbd9ff !important;
}

.userform_ul {
  list-style: none;
}
</style>
