<script setup lang="ts">
import { ref } from "vue";
import request, { download } from "~/utils/request";
import printJS from "print-js";

// #region (constant)
const TABLE_KEY = "xxx_id";
const URL_CUT = "/xdjx/xszhsz_xscjbgd";
// #endregion

// #region (type)
type TYPE_TABLE_FIELD = {
  [TABLE_KEY]: string;
  xxx_xsxm: string; // 学生姓名
  xxx_xsxh: string; // 学生学号
  grade_id: string; // 年级编号
  grade_name: string; // 年级名称
  class_id: string; // 班级编号
  class_name: string; // 班级名称
  team_id: string;
  team_name: 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_union",
    data: {
      [TABLE_KEY]: _id,
    },
  });
}

const detail_Data = ref<TYPE_TABLE_FIELD>();
const detailInfo = ref({
  xdjx_xszhsz_xycj: { data: [] },
  xdjx_xszhsz_xqfygl: { data: [] },
  cxddpf: { data: [] },
  xdjx_xszhsz_xspygl_pyjl: { data: [] },
  xdjx_xszhsz_xqcqgl: { data: [] },
  xdjx_xszhsz_xstjxm: { data: [] },
  xdjx_xszhsz_jygl: { data: [] },
  xdjx_xszhsz_bgdfsxx: { data: [] },
});

// #region (page init)
async function init() {
  const res = await detailApi(props.aid);
  // detail_Data.value = res.data;
  loading.value = false;
  detailInfo.value = res.data;
  if (res.data.xdjx_xszhsz_xscjbgd.data[0]) {
    detail_Data.value = res.data.xdjx_xszhsz_xscjbgd.data[0];
  }

  detailInfo.value.cxddpf = { data: [] };
  res.data.xdjx_xszhsz_cxddgl_cxddpf.data.map((item) => {
    if (item.xxcpf_cpzbdf_json) {
      detailInfo.value.cxddpf.data.push(JSON.parse(item.xxcpf_cpzbdf_json));
    }
  });
}
init();
// #endregion
const xk = ["语文", "数学", "英语", "物理"];
const info = {
  xycj: xk.map((k) => ({ k, v: "ABCD".at(~~(Math.random() * 3)) })),
  xqfy: [
    { k: "语文", t: "李静", v: "作文写不错" },
    { k: "数学", t: "朱希范", v: "计算算的很快，继续保持" },
    { k: "英语", t: "越起", v: "建议报个补习" },
    { k: "物理", t: "赵匡", v: "理解速度很快" },
  ],
  cxdd: [
    { k: "聪明伶俐", v: 7 },
    { k: "团结友爱", v: 9 },
    { k: "乐于助人", v: 10 },
  ],
  bzrpy:
    "你是一个积极向上，有自信心的孩子。学习上有计划、有目标，能够合理安排自己的时间，学习状态挺好;心态平和，关心、帮助同学，关心班集体，积极参加班级、学校组织的各项活动，具有较强的劳动观念，积极参加体育活动，尊敬师长。希望你再接再厉，不满足于现状，争取做的更好。",
  xqcq: 100,
  tjqk: [
    { k: "身高", v: "170cm" },
    { k: "体重", v: "69kg" },
    { k: "视力", v: "5.0" },
  ],
};

const handlePrint = () => {
  printJS({
    printable: "print-part",
    type: "html",
    style: `
#print-part {
      print-color-adjust: exact
}
.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-6 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.pre::before {
  background-color: rgba(96, 165, 250, 1);
  display: inline-block;
  height: 100%;
  margin-right: 6px;
  color: #60A5FA;
  content: "|";
  width: 4px;
}
`,
  });
};
</script>

<template>
  <div :loading="loading">
    <template v-if="detail_Data">
      <!-- <div class="flex">
        <div>学生姓名</div><div>{{detail_Data.xxx_xsxm}}</div>
      </div>
      <div class="flex">
        <div>学生学号</div><div>{{detail_Data.xxx_xsxh}}</div>
      </div>
      <div class="flex">
        <div>年级编号</div><div>{{detail_Data.grade_id}}</div>
      </div>
      <div class="flex">
        <div>年级名称</div><div>{{detail_Data.grade_name}}</div>
      </div>
      <div class="flex">
        <div>班级编号</div><div>{{detail_Data.class_id}}</div>
      </div>
      <div class="flex">
        <div>班级名称</div><div>{{detail_Data.class_name}}</div>
      </div> -->
      <el-button class="mb-2" @click="handlePrint">打印</el-button>
      <div class="flex flex-col border py-8 px-6" id="print-part">
        <div class="flex_center text-2xl">
          <h1>{{ detail_Data.team_name }} 综合素质报告单</h1>
        </div>
        <div class="flex_center text-2xl">
          <h1>{{ detail_Data.xxx_xsxm }} {{ detail_Data.class_name }}</h1>
        </div>
        <div class="py-3 px-3">
          <div class="pre py-2">学业成绩</div>
          <!-- <div class="flex flex-row">
            <div v-for="({ k, v }) in info.xycj">{{ k }} : {{ v }}</div>
          </div> -->
          <div v-for="(item, index) in detailInfo.xdjx_xszhsz_xycj.data" :key="index">{{ item.xxxcj_xycj }}</div>
        </div>
        <div class="py-3 px-3">
          <div class="pre py-2">学期附言</div>
          <!-- <div class="flex flex-col">
            <div v-for="({ k, t, v }) in info.xqfy">{{ k }} {{ t }}: {{ v }}</div>
          </div> -->
          <div v-for="(item, index) in detailInfo.xdjx_xszhsz_xqfygl.data" :key="index">
            <div class="flex flex-col">
              <div>{{ item.subject_name }} {{ item.xxxfy_jsmc }} {{ item.xxxfy_fymc }}</div>
            </div>
          </div>
        </div>
        <div class="py-3 px-3">
          <div class="pre py-2">操行等地</div>
          <!-- <div class="flex flex-col">
            <div v-for="({ k, v }) in info.cxdd">{{ k }} : {{ v }}</div>
          </div> -->
          <div v-for="(item, index) in detailInfo.cxddpf.data" :key="index">
            <div v-for="(value, i) in item" :key="i">{{ value.zbmc }} {{ value.value }}分</div>
          </div>
        </div>
        <div class="py-3 px-3">
          <div class="pre py-2">班主任评语</div>
          <!-- <div> {{ info.bzrpy }}</div> -->
          <div v-for="(item, index) in detailInfo.xdjx_xszhsz_xspygl_pyjl.data" :key="index">{{ item.xpyjl_pynr }}</div>
        </div>
        <div class="py-3 px-3">
          <div class="pre py-2">学期出勤</div>
          <!-- <div> 出勤率 : {{ info.xqcq }}%</div> -->
          <div v-for="(item, index) in detailInfo.xdjx_xszhsz_xqcqgl.data" :key="index">出勤率：{{ item.xcq_cqqk }}</div>
        </div>
        <div class="py-3 px-3">
          <div class="pre py-2">体检情况</div>
          <div class="flex flex-row">
            <!-- <div v-for="({ k, v }) in info.tjqk">{{ k }} : {{ v }}</div> -->
            <div style="margin-right: 20px;" v-for="(item, index) in detailInfo.xdjx_xszhsz_xstjxm.data" :key="index">{{ item.xtxm_tjxmmc }}：{{ item.xtxm_tjxm_json }}</div>
          </div>
        </div>
        <div class="py-3 px-3">
          <div class="pre py-2">寄语</div>
          <div class="flex flex-row">
            <!-- <div v-for="({ k, v }) in info.tjqk">{{ k }} : {{ v }}</div> -->
            <div style="margin-right: 20px;" v-for="(item, index) in detailInfo.xdjx_xszhsz_jygl.data" :key="index">{{ item.xjy_mc }}</div>
          </div>
        </div>
        <div class="py-3 px-3">
          <div class="pre py-2">附属信息</div>
          <div class="flex flex-row">
            <!-- <div v-for="({ k, v }) in info.tjqk">{{ k }} : {{ v }}</div> -->
            <div style="margin-right: 20px;" v-for="(item, index) in detailInfo.xdjx_xszhsz_bgdfsxx.data" :key="index">{{ item.xfs_nr }}</div>
          </div>
        </div>
      </div>
    </template>
  </div>

</template>

<style>
</style>
