<template>
  <a-modal
    v-model:visible="rangeConfigVisible"
    title="分段设置"
    okText="确定"
    cancelText="取消"
    @ok="handleOk"
  >
    <div v-if="selectedRangeConfig">
      <a-timeline>
        <a-timeline-item
          v-for="(item, index) in selectedRangeConfig"
          :key="index"
        >
          {{
            `${item.baseScore + item.adjustScore}(${
              RANGE_POINT_TYPE[item.type]
            }${item.adjustScore > 0 ? "+" : ""}${item.adjustScore})`
          }}

          <a-button
            v-if="item.type !== 'ZERO'"
            @click="handleDeleteRangePoint(item)"
            >删除</a-button
          >
        </a-timeline-item>
      </a-timeline>

      <div class="tw-my-4 tw-flex tw-items-center">
        <span style="width: 60px">基础分</span>
        <a-select v-model:value="rangePoint.type" style="width: 100%">
          <a-select-option value="NATIONAL_SCORE">国家单科线</a-select-option>
          <a-select-option value="RETEST_SCORE">复试单科线</a-select-option>
          <!-- <a-select-option value="NATIONAL_TOTAL_SCORE">
            国家总分线
          </a-select-option>
          <a-select-option value="RETEST_TOTAL_SCORE">
            复试总分线
          </a-select-option>
          <a-select-option value="TOTAL_SCORE_LINE">国家满分线</a-select-option> -->
          <a-select-option value="CUSTOM">自定义</a-select-option>
        </a-select>
      </div>
      <div class="tw-my-4 tw-flex tw-items-center">
        <span style="width: 55px">调整分</span>
        <a-input-number
          v-model:value="rangePoint.adjustScore"
          class="tw-rounded-xl"
        ></a-input-number>
      </div>
      <a-button type="primary" @click="newRangePoint">新增分割点</a-button>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { getProjectCourseList } from "@/api/projectParamsManagementPage";
import { RANGE_POINT_TYPE } from "@/constants/constants";
import { ProjectCourse, RangeConfig } from "@/types";
import { onUpdated, reactive, watch } from "vue";

const emit = defineEmits(["updated"]);

const props = defineProps<{
  projectId: number;
  courseId: number;
  rangeConfig: RangeConfig[];
}>();

let rangeConfigVisible = $ref(false);
const showModal = () => {
  rangeConfigVisible = true;
};
defineExpose({ showModal });

let selectedRangeConfig = $ref<RangeConfig[]>([]);
let courseSetting = $ref({} as ProjectCourse);

watch(
  () => props.rangeConfig,
  () => {
    selectedRangeConfig = props.rangeConfig || [
      {
        type: "ZERO",
        baseScore: 0,
        adjustScore: 0,
      },
    ];
  }
);

onUpdated(async () => {
  const res = await getProjectCourseList({
    projectId: props.projectId,
    courseId: props.courseId,
    pageNo: 1,
    pageSize: 1,
  });
  courseSetting = res.data.content[0];
});

let rangePoint = reactive({
  baseScore: 0,
  adjustScore: 0,
  type: "",
});

function newRangePoint() {
  if (!rangePoint.type) return;
  if (!rangePoint.adjustScore) {
    rangePoint.adjustScore = 0;
  }
  if (rangePoint.type === "NATIONAL_SCORE") {
    rangePoint.baseScore = courseSetting.nationalScore;
  }
  if (rangePoint.type === "RETEST_SCORE") {
    rangePoint.baseScore = courseSetting.retestScore;
  }
  if (rangePoint.type === "NATIONAL_TOTAL_SCORE") {
    rangePoint.baseScore = courseSetting.nationalTotalScore;
  }
  if (rangePoint.type === "RETEST_TOTAL_SCORE") {
    rangePoint.baseScore = courseSetting.retestTotalScore;
  }
  if (rangePoint.type === "TOTAL_SCORE_LINE") {
    rangePoint.baseScore = courseSetting.totalScoreLine;
  }
  if (rangePoint.type === "ZERO") {
    rangePoint.baseScore = 0;
    rangePoint.adjustScore = 0;
  }
  selectedRangeConfig.push({ ...rangePoint } as RangeConfig);
  // let t = toRaw(selectedRangeConfig);
  // t.sort((a, b) => a.baseScore + a.adjustScore - (b.baseScore + b.adjustScore));
  // console.log(t);
  selectedRangeConfig = selectedRangeConfig.sort(
    (a, b) => a.baseScore + a.adjustScore - (b.baseScore + b.adjustScore)
  );
  Object.assign(rangePoint, {
    baseScore: 0,
    adjustScore: 0,
    type: "",
  });
}

function handleDeleteRangePoint(item: RangeConfig) {
  selectedRangeConfig = selectedRangeConfig.filter((v) => v !== item);
}

function handleOk() {
  emit("updated", selectedRangeConfig);
  rangeConfigVisible = false;
}
</script>
