<script setup lang="ts">
import { ref } from "vue";
import {
  processKnowledgeFlow,
  queryKnowledgeDetail
} from "@/api/knowledgeCentre";
import { reactive } from "vue";
import Approved from "../approval/compontents/Approved.vue";
import RejectApproval from "../approval/compontents/RejectApproval.vue";
import { message } from "@/utils/message";
defineOptions({
  name: "SubmissionDetails"
});

const dialogVisible = ref(false);
const isApproval = ref(false);
const ApprovedRef = ref();
const RejectApprovalRef = ref();
const formData = reactive({
  knowledge: {
    publishDeptId: "",
    knowledgeFrom: undefined,
    title: ""
  },
  baseName: "",
  submittedDeptName: "",
  knowledgeInfo: {
    territory: "",
    publishDate: "",
    timeliness: undefined,
    execTimeBegin: "",
    execTimeEnd: "",
    knowledgeTag: "",
    policyType: "",
    publishScope: undefined
  },
  knowledgeContext: {
    context: ""
  },
  fileInfoList: []
});
const knowledgeId = ref("");
const todoId = ref("");
defineExpose({
  open(val) {
    dialogVisible.value = true;
    isApproval.value = false;
    getDeatils(val);
  },
  openApproval(row) {
    dialogVisible.value = true;
    isApproval.value = true;
    getDeatils(row.knowledgeId);
    knowledgeId.value = row.knowledgeId;
    todoId.value = row.todoId;
  }
});
const getDeatils = async id => {
  const res: any = await queryKnowledgeDetail({
    knowledgeId: id
  });
  for (const key in res.data) {
    // eslint-disable-next-line no-prototype-builtins
    if (formData.hasOwnProperty(key)) {
      formData[key] = res.data[key];
    }
  }
};

const closeDialog = () => {
  dialogVisible.value = false;
};
const downloadFile = (url, fileName) => {
  const link = document.createElement("a");
  link.href = url;
  link.download = fileName;
  link.click();
};
const approvalOk = async () => {
  const res: any = await processKnowledgeFlow({
    operate: 1,
    knowledgeId: knowledgeId.value,
    todoId: todoId.value
  });
  if (res.code === 200) {
    message("审批成功!", { type: "success" });
    dialogVisible.value = false;
    emit("getData");
  }
};
const RejectApprovalOk = async () => {
  const res: any = await processKnowledgeFlow({
    operate: 2,
    knowledgeId: knowledgeId.value,
    todoId: todoId.value
  });
  if (res.code === 200) {
    message("驳回成功!", { type: "success" });
    dialogVisible.value = false;
    emit("getData");
  }
};
const emit = defineEmits(["getData"]);
const openApproval = () => {
  ApprovedRef.value.open(knowledgeId.value, todoId.value);
};
const openRejectApproval = () => {
  RejectApprovalRef.value.open(knowledgeId.value, todoId.value);
};
const downLoadFile = item => {
  downloadFile(`/know-sub/file/downloadFile?fileId=${item.id}`, item.fileName);
};
</script>

<template>
  <div>
    <el-drawer
      :size="1200"
      append-to-body
      v-model="dialogVisible"
      :show-close="false"
      :with-header="false"
      :before-close="closeDialog"
      custom-class="submission-details"
    >
      <div class="submission-details">
        <div class="header-title">
          <div class="tip" />
          <span>知识详情</span>
        </div>
        <div class="line" />
        <div class="main">
          <div class="basicInfo">
            <div class="basicInfo_title">基本信息</div>
            <div class="basicInfo_item">
              <span>{{ `发文部门：${formData.submittedDeptName}` }}</span>
            </div>
            <div class="basicInfo_item">
              <span v-if="formData.knowledge.knowledgeFrom === 1">{{
                `显示来源：人工添加`
              }}</span>
              <span v-else>{{ `显示来源：暂无` }}</span>
            </div>
            <div class="basicInfo_item">
              <span>{{ `所属地区：${formData.knowledgeInfo.territory}` }}</span>
            </div>
            <div class="basicInfo_item">
              <span>{{
                `发布日期：${formData.knowledgeInfo.publishDate}`
              }}</span>
            </div>
            <div
              v-if="formData.knowledgeInfo.timeliness"
              class="basicInfo_item"
            >
              <span v-if="formData.knowledgeInfo.timeliness === 1">{{
                `时效性：长期有效`
              }}</span>
              <span v-if="formData.knowledgeInfo.timeliness === 2">{{
                `时效性：临时有效`
              }}</span>
            </div>
            <div
              v-if="formData.knowledgeInfo.timeliness === 2"
              class="basicInfo_item"
            >
              <span>{{
                `执行期限：${formData.knowledgeInfo.execTimeBegin} ~ ${formData.knowledgeInfo.execTimeEnd}`
              }}</span>
            </div>
            <div class="basicInfo_item">
              <span>{{
                `知识标签：${formData.knowledgeInfo.knowledgeTag}`
              }}</span>
            </div>
            <div class="basicInfo_item">
              <span>{{ `应用子库：${formData.baseName}` }}</span>
            </div>
            <div class="basicInfo_item">
              <span>{{
                `政策类型：${formData.knowledgeInfo.policyType}`
              }}</span>
            </div>
            <div class="basicInfo_item">
              <span v-if="formData.knowledgeInfo.publishScope === 1">{{
                `公开范围：公开`
              }}</span>
              <span v-else>{{ `公开范围：不公开` }}</span>
            </div>
          </div>
          <div class="main-content">
            <div class="content-title">{{ formData.knowledge.title }}</div>
            <div class="text" v-html="formData.knowledgeContext.context" />
            <div class="annex">
              <div
                class="annex_item"
                @click="downLoadFile(item)"
                v-for="(item, index) in formData.fileInfoList"
                :key="index"
              >
                <span>{{ `附件${index + 1}: ` }}</span>
                <span class="link">{{ item.fileName }}</span>
              </div>
            </div>
            <div v-if="isApproval" class="btn_list">
              <div class="main_btn" @click="openApproval">审批通过</div>
              <div class="btn" @click="openRejectApproval">审批驳回</div>
            </div>
          </div>
        </div>
        <Approved @approvalOk="approvalOk" ref="ApprovedRef" />
        <RejectApproval
          @RejectApprovalOk="RejectApprovalOk"
          ref="RejectApprovalRef"
        />
      </div>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
.submission-details {
  padding-left: 16px;

  .header-title {
    display: flex;
    align-items: center;
    // border-left: 6px solid #4287ff;

    font-size: 20px;
    font-weight: bold;
    color: #2b3f54;

    .tip {
      width: 6px;
      height: 20px;
      margin-right: 10px;
      line-height: 20px;
      background: #4287ff;
    }
  }

  .line {
    position: relative;
    left: -20px;
    width: 1160px;
    height: 1px;
    margin-top: 24px;
    background: rgb(91 139 255 / 30%);
  }
  .main {
    display: flex;
    // height: 100%;
    .basicInfo {
      width: 350px;
      padding: 24px 16px;
      border-right: 1px solid rgba(91, 139, 255, 0.3);
      height: 100%;
      .basicInfo_title {
        font-size: 20px;
        color: #333333;
        margin-bottom: 24px;
      }
      .basicInfo_item {
        font-size: 16px;
        color: #333333;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 24px;
      }
    }
    .main-content {
      flex: 1;
      padding: 32px 50px;
      .content-title {
        font-size: 36px;
        color: #000000;
        width: 100%;
        text-align: center;
      }
      .text {
        font-size: 16px;
        color: #666666;
        margin-top: 32px;
        height: calc(100vh - 360px);
        overflow: auto;
      }
      .annex {
        margin-top: 75px;
        .annex_item {
          display: flex;
          font-size: 16px;
          color: #333333;
          cursor: pointer;
          .link {
            color: #0052d9;
          }
        }
      }
      .btn_list {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 40px;
        .main_btn {
          width: 188px;
          height: 40px;
          background: #0052d9;
          box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
          border-radius: 6px 6px 6px 6px;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          line-height: 40px;
          text-align: center;
          cursor: pointer;
        }
        .btn {
          width: 188px;
          height: 40px;
          background: #ffffff;
          box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #0052d9;
          font-weight: 400;
          font-size: 16px;
          color: #0052d9;
          line-height: 40px;
          text-align: center;
          cursor: pointer;
          margin-right: 24px;
        }
      }
    }
  }
}
</style>
