<script setup lang="ts">
import { ref } from "vue";
import request, { download } from "~/utils/request";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

// #region (constant)
const TABLE_KEY = "xxxddgl_id";
const URL_CUT = "/xdjx/xszhsz_cxddgl";
// #endregion

// #region (type)
type TYPE_TABLE_FIELD = {
  [TABLE_KEY]: string;
  xxxddgl_mc: string; // 名称
  xxx_id: string; // 所属成绩报告单
  xxxfy_bzrmc: string; // 班主任名称
  xxxfy_bzr_user_id: string; // 班主任用户编号
  team_id: string; // 学期编号
  team_name: string; // 学期名称
  grade_name: string; // 年级名称
  class_id: string; // 班级编号
  class_name: string; // 班级名称
  grade_id: string; // 年级编号
  xxxddgl_zt: string; // 状态
  xxxddgl_cpzb_json: string; // 测评指标JSON
  cm_id: string; // 班级编号
};
// #endregion

// #region (variable)
const loading = ref(true);
// #endregion

// #region (props)
const props = defineProps<{
  aid: string;
}>();
// #endregion

function detailApi(_id: string) {
  return request({
    url: URL_CUT + "/detail",
    data: {
      [TABLE_KEY]: _id,
    },
  });
}

const detail_Data = ref<TYPE_TABLE_FIELD>();
const pjData = ref([]);

// #region (page init)
async function init() {
  const res = await detailApi(props.aid);
  detail_Data.value = res.data.one_info;
  loading.value = false;
  if (detail_Data.value.xxxddgl_cpzb_json) {
    pjData.value = JSON.parse(detail_Data.value.xxxddgl_cpzb_json);
    pjData.value.map((item) => {
      item.value = 0;
    });
  }

  initStuData();
}
init();
// #endregion

const stuData = ref([]);
const activeStu = ref({});
async function initStuData() {
  let { data, code } = await request({
    url: "/xdjx/xszhsz_xscjbgd/index",
    data: {
      grade_id: detail_Data.value?.grade_id,
      class_id: detail_Data.value?.class_id,
    },
  });

  if (code == 1) {
    stuData.value = data.page_data;
  }
}

const handleClick = (data: object) => {
  activeStu.value = data;
  pjData.value.map((item) => {
    item.value = 0;
  });
};

const handleSubmit = async () => {
  if (!activeStu.value.xxx_id) {
    ElMessage.error("请先选择学生！");
    return;
  }
  let obj = {
    xxxddgl_id: props.aid,
    xxx_id: activeStu.value.xxx_id,
    xxcpf_xsxm: activeStu.value.xxx_xsxm,
    xxcpf_xsxh: activeStu.value.xxx_xsxh,
    team_id: activeStu.value.team_id,
    team_name: activeStu.value.team_name,
    grade_id: activeStu.value.grade_id,
    grade_name: activeStu.value.grade_name,
    class_id: activeStu.value.class_id,
    class_name: activeStu.value.class_name,
    xxcpf_cpzbdf_json: JSON.stringify(pjData.value),
  };

  let { data, code } = await request({
    url: "/xdjx/xszhsz_cxddgl_cxddpf/add",
    data: {
      xdjx_xszhsz_cxddgl_cxddpf: obj,
    },
  });

  if (code == 1) {
    ElMessage.success("打分成功！");
    handleCancel();
  }
};

const handleCancel = () => {
  router.back();
};
</script>

<template>
  <div :loading="loading">
    <div class="flex flex-center" v-if="detail_Data">
      <div class="left" style="width: 300px;padding-left: 20px;">
        <div>{{ detail_Data.xxxddgl_mc }}</div>
        <div>{{ detail_Data.team_name }}</div>
        <div>{{ detail_Data.class_name }}</div>
        <div style="margin-top: 30px;">
          <div class="stu-item" :class="activeStu.xxx_id==item.xxx_id && 'active'" v-for="(item, index) in stuData" :key="index" @click="handleClick(item)">{{ item.xxx_xsxm }}</div>
        </div>
      </div>
      <div class="right" style="flex: 1;">
        <!-- <item-table v-model="detail_Data.xxxddgl_cpzb_json" :cols="[{ k: 'zbmc', v: '指标名称' },{ k: 'fz', v: '分值' }]"></item-table> -->
        <el-table :data="pjData" element-loading-background="#ffffff70">
          <el-table-column prop="zbmc" label="指标名称" width="auto" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.zbmc }}（{{ scope.row.fz }}）
            </template>
          </el-table-column>
          <el-table-column label="打分" width="auto" show-overflow-tooltip>
            <template #default="scope">
              <el-input type="number" :min="0" :max="Number(scope.row.fz)" size="small" v-model="scope.row.value"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div style="text-align: center;margin-top: 20px;">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.stu-item {
  display: inline-block;
  width: 80px;
  cursor: pointer;
  border-radius: 50px;
  padding: 3px 5px;
  margin-right: 10px;
  text-align: center;
  &.active {
    background: #4351ff;
    color: #fff;
  }
}
</style>