<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";
import request, { download } from "~/utils/request";
import type { FormInstance, FormRules } from "element-plus";
import printJS from "print-js";

// #region (constant)
const TABLE_KEY = "xkk_id";
const URL_CUT = "/xdjx/kcpzgl_kcpz";
// #endregion
const instance = getCurrentInstance();

// #region (type)
type TYPE_TABLE_FIELD = {
  [TABLE_KEY]: string;
  xkk_name: string; // 考试名称
  xkk_kslx: string; // 考试类型
  xkk_kc: string; // 考场
  xkk_kc_json: string; // 考场JSON
  xkk_ks: string; // 考生
  xkk_ks_json: string; // 考生JSON
  xkk_zkzqz: string; // 准考证前缀
  xkk_sjkmjk_json: string; // 时间科目监考JSON
  xkk_kslx_option_n: 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>();

// #region (page init)
async function init() {
  const res = await detailApi(props.aid);
  detail_Data.value = res.data.one_info;
  info.value = JSON.parse(detail_Data.value?.xkk_sjkmjk_json as string);
  const tempInfo: any = {
    ...detail_Data.value,
    xkk_kc: (detail_Data.value?.xkk_kc as string).split(","),
    xkk_kc_json: (detail_Data.value?.xkk_kc_json as string).split(","),
    xkk_ks: (detail_Data.value?.xkk_ks as string).split(","),
    xkk_ks_json: (detail_Data.value?.xkk_ks_json as string).split(","),
    kc: [],
    ks: [],
  };
  tempInfo.kc = tempInfo.xkk_kc.map((_: unknown, i: number) => ({
    value: tempInfo.xkk_kc[i],
    label: tempInfo.xkk_kc_json[i],
  }));
  tempInfo.ks = tempInfo.xkk_ks.map((_: unknown, i: number) => ({
    value: tempInfo.xkk_ks[i],
    label: tempInfo.xkk_ks_json[i],
  }));
  sessionStorage.setItem("ksxx", JSON.stringify(tempInfo));
  kcData.value = tempInfo.kc;

  loading.value = false;
}
init();
// #endregion

const info = ref();
const kcData = ref();

const dialogVisible_audit = ref(false);

type TYPE_TABLE_DIALOG_FIELD = {
  kskm: string;
  kssj: string;
  jkls: string;
  dydx: string;
  ysyl: string;
};

const dialogForm_Rules_audit = reactive<FormRules>({
  kskm: { required: true, message: "考试科目不能为空", trigger: "submit" },
  dydx: { required: true, message: "打印对象不能为空", trigger: "submit" },
});
const dialogForm_Data = ref<
  Partial<TYPE_TABLE_DIALOG_FIELD> & { keyword?: string }
>({});

const handleKskmChange = ($event: {
  kskm: string;
  kssj: object;
  jkls: string;
}) => {
  dialogForm_Data.value.kskm = $event.kskm;
  dialogForm_Data.value.kssj = $event.kssj.join("-");
  dialogForm_Data.value.jkls = $event.jkls;
};

const handleClick = () => {
  dialogVisible_audit.value = true;
};

const handleDialogFormBtn_cancel = (formRefKey?: string) => {
  dialogVisible_audit.value = false;
};

const handlePrint = async (
  formRefKey: string,
  extendData?: Partial<TYPE_TABLE_FIELD>
) => {
  const isValid = await (instance?.refs[formRefKey] as FormInstance).validate(
    (valid: boolean) => valid
  );
  if (isValid) {
    printJS({
      printable: "print-part",
      type: "html",
      style: `
        #print-part {
          print-color-adjust: exact
        }
        #print-part div {
          box-sizing: border-box;
        }
        .flex_center {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .flex {
          display: flex;
        }
        .flex-1 {
          flex: 1; 
        }
        .w-full {
          width: 100%;
        }
        .h-100px {
          height: 100px;
        }
        .h-150px {
          height: 150px;
        }
        .ml-30px {
          margin-left: 30px;
        }
        .ysyl {
          border: 1px solid #aaa;
          width: 100%;
          margin: auto;
        }
        .line {
          border: 1px solid #ccc;
          border-top: none;
        }
        .padding10 {
          padding: 10px;
        }
        .tip {
          color: #ccc;
        }
        .nowrap {
          white-space: nowrap;
          padding-right: 20px;
        }
      `,
    });
  }
};
</script>

<template>
  <div :loading="loading">
    <template v-if="detail_Data">
      <div class="flex text-3xl">
        <!-- <div>考试名称</div> -->
        <div>{{ detail_Data.xkk_name }}</div>
      </div>
      <div class="mt-10px mb-25px">考试类型：{{ detail_Data.xkk_kslx_option_n }}</div>

      <el-button @click="handleClick" type="primary">考场情况登记表</el-button>

      <!-- <div class="flex">
        <div>考试类型</div>
        <div>{{ detail_Data.xkk_kslx }}</div>
      </div> -->
      <!-- <div class="flex">
        <div>考场</div>
        <div>{{ detail_Data.xkk_kc }}</div>
      </div> -->
      <div class="flex my-10">
        <div class="mr-6 flex-none">考场</div>
        <div>{{ detail_Data.xkk_kc_json.split(',').join(' , ') }}</div>
      </div>
      <!-- <div class="flex">
        <div>考生</div>
        <div>{{ detail_Data.xkk_ks }}</div>
      </div>
      <div class="flex">
        <div>考生JSON</div>
        <div>{{ detail_Data.xkk_ks_json }}</div>
      </div>
      <div class="flex">
        <div>准考证前缀</div>
        <div>{{ detail_Data.xkk_zkzqz }}</div>
      </div> -->
      <div class="flex">
        <div class="mr-6 flex-none">考试信息</div>
        <div class="flex-auto">
          <el-table :data="info">
            <el-table-column prop="kskm" label="考试科目" width="auto" show-overflow-tooltip></el-table-column>
            <el-table-column prop="kssj" label="考试时间" width="auto" show-overflow-tooltip></el-table-column>
            <el-table-column prop="jkls" label="监考老师" width="auto" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </div>
    </template>

    <el-dialog width="700px" title="考场情况登记表" v-model="dialogVisible_audit" append-to-body destroy-on-close>
      <el-form :model="dialogForm_Data" ref="dialogForm_Ref_audit" :rules="dialogForm_Rules_audit" label-width="80px">
        <el-form-item label="考试科目" prop="kskm">
          <el-select value-key="kskm" v-model="dialogForm_Data.kskm" @change="handleKskmChange" class="w-full">
            <el-option v-for="(item, index) in info" :key="index" :value="item" :label="item.kskm"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="打印对象" prop="dydx">
          <el-select value-key="value" v-model="dialogForm_Data.dydx" class="w-full">
            <el-option v-for="(item, index) in kcData" :key="index" :value="item.label" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="dialogForm_Data.kskm && dialogForm_Data.dydx" label="样式预览" prop="ysyl">
          <div id="print-part" class="ysyl">
            <div class="flex">
              <div class="flex-1 padding10">{{ dialogForm_Data.dydx }}</div>
              <div class="flex-1 padding10">{{ detail_Data.xkk_name }}考场情况登记表</div>
            </div>
            <div class="flex padding10">
              <div class="nowrap">{{ dialogForm_Data.kskm }}</div>
              <div class="nowrap">{{ dialogForm_Data.kssj }}</div>
              <div class="nowrap ml-30px">{{ dialogForm_Data.jkls }}</div>
            </div>
            <div class="line"></div>
            <div class="flex">
              <div class="flex-1 padding10">应到人数</div>
              <div class="flex-1 padding10">实到人数</div>
            </div>
            <div class="line"></div>
            <div class="padding10 h-100px">缺考记录<span class="tip">（缺考考生准考证号及姓名）</span></div>
            <div class="line"></div>
            <div class="padding10 h-100px">违纪记录<span class="tip">（缺考考生准考证号、姓名及违纪情况）</span></div>
            <div class="line"></div>
            <div class="padding10 h-150px">其他</div>
            <div class="line"></div>
            <div class="padding10">监考签名</div>
          </div>
        </el-form-item>
        <div class="flex justify-center">
          <el-button @click="handlePrint('dialogForm_Ref_audit')" type="primary">打印</el-button>
          <el-button @click="handleDialogFormBtn_cancel('dialogForm_Ref_audit')" type="default">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>

</template>

<style lang="scss" scoped>
.ysyl {
  border: 1px solid #aaa;
  width: 100%;
}
.line {
  border: 1px solid #ccc;
  border-top: none;
}
.padding10 {
  padding: 10px;
}
.tip {
  color: #ccc;
}
.nowrap {
  white-space: nowrap;
  padding-right: 30px;
}
</style>