<!-- 委外订单列表 -->
<template>
    <div class="table-box">
        <Search :formData="datas.formData" :ruleForm="datas.ruleForm" @handleSearch="handleSearch" @handleReset="handleReset" />
        <!-- 表格 -->
        <ProTable
            ref="proTable"
            :columns="datas.columns"
            :request-api="getListApi"
            :init-param="datas.initParam"
            :ruleForm="datas.ruleForm"
            :formData="datas.formData"
        >
            <template #type="scope">
                {{ datas.type[scope.row.type] }}
            </template>
            <template #status="scope">
                <span v-if="scope.row.status === '导出成功'" style="color: #3ad6ac">
                    {{ scope.row.status }}
                    <i class="iconfont icon-chenggong"></i>
                </span>
                <span v-if="scope.row.status === '导出失败'" style="color: #ff5363">
                    {{ scope.row.status }}
                    <i class="iconfont icon-shijing"></i>
                </span>
                <span v-if="scope.row.status === '正在导出'" style="color: #fdc027">{{ scope.row.status + "..." }}</span>
            </template>
            <template #filePath="scope">
                <a
                    style="color: #4178d5"
                    :href="scope.row.filePath"
                    v-if="
                        scope.row.statusKey == 1 &&
                        Math.abs((new Date(scope.row.date).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000)) <= 7
                    "
                    >下载</a
                >
                <a v-else style="color: #666666; cursor: no-drop">下载</a>
            </template>
        </ProTable>
    </div>
</template>

<script setup lang="ts">
import Search from "@/components/Search/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { ref, reactive } from "vue";

import { getListApi, getStatusApi } from "@/api/modules/exportList";
import { RULEFORM, FORMDATA, COLUMNS } from "./constant/list/index";

import { cloneDeep } from "lodash-es";
import { useSearchInfoObject, useSetSearchData } from "@/hooks/useSearch";
const proTable = ref<any>();

// 数据源
const datas: any = reactive({
    columns: COLUMNS, //列表配置项
    initParam: cloneDeep(RULEFORM), // 初始化搜索条件|重置搜索条件
    ruleForm: cloneDeep(RULEFORM), // 搜索条件
    formData: FORMDATA, //搜索配置项,
    type: {}
});

//获取当前组织仓库
const getStatus = async () => {
    const result: Record<string, any> = await getStatusApi();
    if (result.status === 200) {
        const { data } = result;
        datas.type = data.type;
        datas.formData = useSetSearchData(datas.formData, {
            type: useSearchInfoObject(data.type),
            status: useSearchInfoObject(data.status)
        });
    }
};
getStatus();

const handleSearch = () => {
    proTable!.value.initPage(datas.ruleForm);
};
const handleReset = () => {
    datas.ruleForm = cloneDeep(RULEFORM);
    datas.exportList = cloneDeep(RULEFORM);
    proTable!.value.initPage(datas.initParam);
};
</script>
<style scope lang="scss">
.main-container {
    width: -moz-available;
    width: -webkit-fill-available;
    width: stretch;
    height: -moz-available;
    height: -webkit-fill-available;
    height: stretch;
    height: 100% !important;
    margin: 0 16px;
}
</style>
