<template>
  <div class="seal-apply">
    <a-form
      :model="formModel"
      :label-col="{ span: 9 }"
      :wrapper-col="{ span: 15 }"
    >
      <a-form-item label="印章类型">
        <a-radio-group v-model:value="formModel.sealType" button-style="solid">
          <a-radio value="0" :disabled="disableEdit">个人电子印章</a-radio>
          <a-radio value="1" :disabled="disableEdit">法人电子印章</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="未申请证书" v-if="formModel.sealType == '0'">
        <a-switch checked-children="是" v-model:checked="formModel.noCert" />
      </a-form-item>
      <a-form-item
        :label="formModel.sealType == '1' ? '统一信用代码' : '身份证号码'"
      >
        <a-input
          v-model:value="formModel.idCardNumOrTydm"
          :disabled="disableEdit"
        />
      </a-form-item>
      <a-form-item label="印章名称">
        <a-input v-model:value="formModel.sealName" :disabled="disableEdit" />
      </a-form-item>
      <a-form-item label="印章申领表">
        <div>
          <div style="display: inline-block">
            <Upload
              v-model:fileId="formModel.sealImageId"
              name="印章申领表"
              :disabled="disableEdit"
              :fileUrl="filePath"
            />
          </div>
          <div style="display: inline-block; vertical-align: top">
            <a-button type="link"
              ><a
                :href="
                  formModel.sealType == '0'
                    ? 'http://183.136.157.18:7308/stgl/sources/202102/附件4：个人电子印章启用申请表.docx'
                    : 'http://183.136.157.18:7308/stgl/sources/202102/附件1：法人电子印章启用申请表.docx'
                "
                target="_blank"
                ><DownloadOutlined />模板下载</a
              ></a-button
            >
          </div>
        </div>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 10 }">
        <a-button type="primary" @click="createSealApply">提交</a-button>
        <a-button style="margin-left: 10px" @click="toggleDrawer"
          >历史提交记录</a-button
        >
      </a-form-item>
    </a-form>
  </div>
  <a-drawer
    title="历史记录"
    placement="right"
    :closable="false"
    v-model:visible="showDrawer"
    width="450px"
  >
    <a-empty v-if="!(sealApplyList && sealApplyList.length > 0)" />
    <div
      v-for="sealApply in sealApplyList"
      :key="sealApply.id"
      style="padding: 10px"
    >
      <a-card size="small">
        <template #title>
          {{ sealApply.sealName
          }}<a-tag
            style="margin-left: 4px"
            :color="status[sealApply.status].color"
            >{{ status[sealApply.status].text }}</a-tag
          >
        </template>
        <p>类型: {{ sealApply.type == 0 ? "个人电子印章" : "法人电子印章" }}</p>
        <p>
          {{ sealApply.type == 0 ? "身份证号码" : "统一信用代码" }}:
          {{ sealApply.idCardNumOrTydm }}
        </p>
        <p>发起时间: {{ sealApply.createTime }}</p>
        <p v-if="sealApply.rejectMsg">不通过原因:{{ sealApply.rejectMsg }}</p>
        <a-button type="primary" @click="onSubmit(sealApply.id)">
          进度查询
        </a-button>
      </a-card>
    </div>
  </a-drawer>
</template>
<style>
.seal-apply {
  width: 550px;
}
</style>
<script>
import Upload from "@/components/Upload";
import { onMounted, reactive, ref, inject } from "vue";
import { get, post } from "@/services/http";
import { message } from "ant-design-vue";
export default {
  components: {
    Upload
  },
  setup() {
    const useReload = inject("reload");
    var formModel = reactive({
      sealType: "",
      sealName: "",
      idCardNumOrTydm: "",
      sealImageId: 0,
      noCert: false
    });
    var sealApplyList = ref([]);
    var progressingId = ref(0);
    var disableEdit = ref(false);
    var filePath = ref("");
    var showDrawer = ref(false);
    onMounted(async () => {
      var resp = await get("/api2/ca/sealApplyList");
      if (resp.data) {
        sealApplyList.value = resp.data;
        // var currentApply = sealApplyList.value.find(
        //   p => p.status == 0 || p.status == 1
        // );
        // progressingId.value = currentApply?.id || 0;
        // disableEdit.value = progressingId.value !== 0;
        // if (currentApply) {
        //   formModel.sealType = currentApply.sealType;
        //   formModel.sealName = currentApply.sealName;
        //   formModel.idCardNumOrTydm = currentApply.idCardNumOrTydm;
        //   filePath.value = currentApply.sealApplyFilePath;
        // }
      }
    });
    async function createSealApply() {
      var resp = await post("/api2/ca/sealApply", formModel);
      if (resp.errorCode == 0) {
        message.success("创建成功", useReload);
      } else {
        message.error(resp.errorMsg, useReload);
      }
    }
    async function sendSealApply(id) {
      var resp = await post("/api2/ca/sendSealApply", { id });
      if (resp.errorCode == 0) {
        message.success("申请成功", useReload);
      } else {
        message.error(resp.errorMsg);
      }
    }
    async function querySealApply(id) {
      var resp = await get("/api2/ca/querySealApply", { id });
      if (resp.errorCode == 0) {
        message.success(
          "当前状态:" + ["待审核", "已通过", "已拒绝"][resp.data],
          useReload
        );
      } else {
        message.error(resp.errorMsg);
      }
    }
    async function onSubmit(id) {
      var sealApply = sealApplyList.value.find(p => p.id == id);
      if (sealApply.status == 0) {
        await sendSealApply(id);
      } else {
        await querySealApply(id);
      }
    }
    const toggleDrawer = () => {
      showDrawer.value = !showDrawer.value;
    };
    return {
      formModel,
      sealApplyList,
      progressingId,
      onSubmit,
      disableEdit,
      filePath,
      showDrawer,
      toggleDrawer,
      querySealApply,
      sendSealApply,
      createSealApply,
      status: {
        0: {
          color: "orange",
          text: "未申领"
        },
        1: {
          color: "orange",
          text: "审核中"
        },
        2: {
          color: "greeb",
          text: "进行中"
        },
        3: {
          color: "red",
          text: "申请拒绝"
        }
      }
    };
  }
};
</script>
