<template>
  <div class="title cl">
    <span class="y"><router-link to="/home">返回考试主页</router-link></span>
    <h2>图片下载</h2>
  </div>
  <div class="picture cl">
    <table cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <th>下载内容：</th>
        <td>
          <div class="input-radio">
            <a-radio-group name="radioGroup" v-model:value="type">
              <a-radio value="1">考生原图</a-radio>
              <a-radio value="2">签到表图片</a-radio>
            </a-radio-group>
          </div>
        </td>
      </tr>
      <tr>
        <th>本地保存地址：</th>
        <td>
          <input
            type="text"
            style="width: 400px"
            class="filetext"
            :value="dir"
          />
          <a href="##" class="filebtn" @click="chooseDirectory">选择</a>
        </td>
      </tr>
      <tr>
        <th>图片转存规则：</th>
        <td>
          <a-input v-model:value="template" style="width: 600px" />
        </td>
      </tr>
      <tr id="append-select">
        <th>是否续传：</th>
        <td>
          <div class="input-radio">
            <a-radio-group name="radioGroup" v-model:value="append">
              <a-radio :value="true">是</a-radio>
              <a-radio :value="false">否</a-radio>
            </a-radio-group>
          </div>
        </td>
      </tr>
      <tr id="exception-select">
        <th>异常处理：</th>
        <td>
          <div class="input-radio">
            <a-radio-group name="radioGroup" v-model:value="failover">
              <a-radio :value="true">终止</a-radio>
              <a-radio :value="false">跳过</a-radio>
            </a-radio-group>
          </div>
        </td>
      </tr>
      <tr id="watermark-select" v-if="type === '1'">
        <th>添加分数水印：</th>
        <td>
          <div class="input-radio">
            <a-radio-group name="radioGroup" v-model:value="watermark">
              <a-radio :value="true">是</a-radio>
              <a-radio :value="false">否</a-radio>
            </a-radio-group>
          </div>
        </td>
      </tr>
      <tr id="track-mode-select" v-if="type === '1'">
        <th>水印模式：</th>
        <td>
          <div class="input-radio">
            <a-radio-group name="radioGroup" v-model:value="trackMode">
              <a-radio value="1">普通</a-radio>
              <a-radio value="2">研究生</a-radio>
            </a-radio-group>
          </div>
        </td>
      </tr>
      <tr id="examNumber-select" v-if="type === '1'">
        <th>准考证号：</th>
        <td>
          <a-input
            v-model:value="examNumber"
            style="width: 600px"
            placeholder="多个准考证号用逗号分隔"
          />
        </td>
      </tr>
      <tr id="subjectCode-select" v-if="type === '1'">
        <th>科目代码：</th>
        <td>
          <a-input
            v-model:value="subjectCode"
            style="width: 600px"
            placeholder="多个科目代码用逗号分隔"
          />
        </td>
      </tr>

      <tr id="message-tr">
        <th></th>
        <td>
          <p class="error-tetx" id="message-text">{{ ruleExample }}</p>
        </td>
      </tr>
      <tr>
        <th></th>
        <td>
          <a href="##" class="start-btn" @click="start">
            <span>开始图片下载</span>
          </a>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { store } from "@/store";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

let type = ref("");
let template = ref("");
let dir = ref("");
let append = ref(false);
let failover = ref(true);
let watermark = ref(true);
let trackMode = ref("");
let examNumber = ref("");
let subjectCode = ref("");

let ruleExample = computed(() => {
  switch (type.value) {
    case "1":
      return "转存规则范例: " + store.config.imageUrl.sheet;
    case "2":
      return "转存规则范例: " + store.config.imageUrl.package;
  }
  return "";
});

const chooseDirectory = () => {
  window.electron.dialog
    .showOpenDialog({
      title: "请选择保存目录",
      properties: ["openDirectory"],
    })
    .then((result) => {
      if (result && result.filePaths) {
        dir.value = result.filePaths[0];
      }
    });
};

const start = () => {
  if (!type.value) {
    alert("请选择图片类型");
    return false;
  }
  if (!dir.value) {
    alert("请选择图片转存目录");
    return false;
  }
  if (!template.value) {
    alert("请填写图片转存规则");
    return false;
  }
  if (type.value == "1" && trackMode.value == "") {
    alert("请选择水印模式");
    return false;
  }

  store.pageInputs["/image-download"] = {
    type: type.value,
    template: template.value,
    dir: dir.value,
    append: append.value,
    failover: failover.value,
    watermark: watermark.value,
    trackMode: trackMode.value,
    examNumber: examNumber.value,
    subjectCode: subjectCode.value,
  };
  router.push("/image-download");
};
</script>
