<script setup lang="ts">
import {
  BeforeRequestType,
  PageContentInstance
} from "/@/components/PageContent";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { usePageSearch, type PageHooks } from "/@/hooks/page";
import contentConfig from "./config/content.detail";
import searchConfig from "./config/search.detail";
import { usePermission } from "/@/hooks/core";
import { ElMessage } from "element-plus";
import apis from "./config/apis";
import { ref } from "vue";
import { httpRequsetExport } from "/@/utils/export";
import { ElMessageBox } from "element-plus"
import { shallowRef } from "vue";

// 明细权限:列表_oneOrSet|导出_oneOrSet
const pageName = "mediumDepartment";
const { hasPermissionWithCode } = usePermission(pageName);
const pageContentRef = ref<PageContentInstance | null>(null);
const loading = shallowRef(false);

const confirmData = ref({});

const searchCallback = params => ({
  result: { ...params, depart_type: "2" }
});

const resetCallback = params => ({
  result: { ...params, depart_type: "2" }
});

const callback = {
  onSuccess: () => (loading.value = false),
  onStart: () => (loading.value = true),
  onFail: () => (loading.value = false)
};

const hooks: PageHooks = {
  pageSearchHook: () =>
    usePageSearch(searchCallback, resetCallback, searchConfig)
};

async function handleExportAllReport() {
  const params = pageContentRef.value.getBasicParams();
  try {
    await httpRequsetExport({
      fileType: "application/vnd.ms-excel;charset=utf-8",
      url: "/admin/report/exportinfo",
      name: "新媒体提成业绩明细.xlsx",
      ...callback,
      params
    });
  } catch (err) {
    console.log(err);
  }
}

async function beforeRequest() {
  const params = pageContentRef.value.getBasicParams();
  loading.value = true;
  const { data } = await apis.isConfirm({ ...params });
  loading.value = false;
  confirmData.value = data || {};
  return BeforeRequestType.NEXT;
}

contentConfig.beforeRequestList = beforeRequest;

async function handleConfirmInfo() {
  ElMessageBox.confirm("是否确认全部明细?", {
    type: 'warning'
  }).then(async () => {
    const params = pageContentRef.value.getBasicParams();
    const { message, code } = await apis.confirm({ ...params, depart_type: "2", status:"1" });
    if (Number(code) === 1) {
      ElMessage.success("明细已确认完成");
      beforeRequest();
    } else {
      ElMessage.warning(message);
    }
  })
}

async function handleDeleteConfirmInfo() {
  ElMessageBox.confirm("是否取消确认全部明细?", {
    type: 'warning'
  }).then(async () => {
    const params = pageContentRef.value.getBasicParams();
    const { message, code } = await apis.delete({ ...params, id: confirmData.value.id, status:"0" });
    if (Number(code) === 1) {
      ElMessage.success("明细取消确认完成");
      beforeRequest()
    } else {
      ElMessage.warning(message);
    }
  })
}
</script>

<template>
  <PageContainer v-loading="loading" :hooks="hooks" :pageName="pageName"
    :getContentRef="ref => (pageContentRef = ref as PageContentInstance)" :contentConfig="contentConfig"
    :searchConfig="searchConfig">
    <template #content_header>
        <div style="display: flex">
        <div style="
            color: #000000;
            font-size: 14px;
            margin-right: 10px;
            line-height: 26px;
          ">
          当前状态：
          <span style="color: red">
            {{ Number(confirmData.status) === 1 ? "已确认" : "未确认" }}</span>
        </div>
        <div style="
            color: #000000;
            font-size: 14px;
            margin-right: 10px;
            line-height: 26px;
          ">
          确认人：{{ confirmData.apply_name || "--" }}
        </div>
        <div style="
            color: #000000;
            font-size: 14px;
            margin-right: 10px;
            line-height: 26px;
          ">
          确认时间：{{ confirmData.createtime || "--" }}
        </div>
          <ElButton @click="handleConfirmInfo" size="small" v-if="Number(confirmData.length) === 0 && hasPermissionWithCode('21')
            ">确认全部明细
          </ElButton>

          <ElButton @click="handleDeleteConfirmInfo" size="small" v-if="Number(confirmData.status) === 1 && hasPermissionWithCode('22')
            ">取消确认全部明细
          </ElButton>
      
        <ElButton :icon="useRenderIcon('arrow-up-line') as unknown as string" v-if="hasPermissionWithCode('18')"
          @click="handleExportAllReport" type="primary" size="small">导出
        </ElButton>
      </div>
    </template>
  </PageContainer>
</template>
