<!-- 导出列表 -->
<template>
    <div class="table-box">
        <ProTable
            ref="proTable"
            :formData="dataStore.formData"
            :columns="dataStore.columns"
            :request-api="getListApi"
            :init-param="dataStore.initParam"
            :orgCode="dataStore.ruleForm.orgCode"
        >
            <!-- 导出状态 -->
            <template #status_text="scope">
                <span v-if="scope.row.status_text === '导出成功'" style="color: #3ad6ac">
                    {{ scope.row.status_text }}
                    <i class="iconfont icon-chenggong"></i>
                </span>
                <span v-if="scope.row.status_text === '导出失败'" style="color: #ff5363">
                    {{ scope.row.status_text }}
                    <i class="iconfont icon-shijing"></i>
                </span>
                <span v-if="scope.row.status_text === '正在导出'" style="color: #fdc027">{{
                    scope.row.status_text + "..."
                }}</span>
            </template>
            <!-- 下载(7天内) -->
            <template #download_url="scope">
                <a
                    style="color: #4178d5"
                    :href="scope.row.download_url"
                    v-if="
                        scope.row.status == 1 &&
                        Math.abs((new Date(scope.row.created_at).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" name="exportList">
import ProTable from "@/components/ProTable/index.vue";
import { ref, reactive } from "vue";
import { getListApi, getExportTypesApi } from "@/api/modules/exportList";
import { RULE_FORM, FORM_DATA, COLUMNS } from "./constant/list/index";
import { cloneDeep } from "lodash-es";

const proTable = ref<any>();
// 数据源
const dataStore: any = reactive({
    columns: COLUMNS, //列表配置项
    initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
    ruleForm: cloneDeep(RULE_FORM), // 搜索条件
    formData: FORM_DATA //搜索配置项,
});

//获取导出类型
const getExportTypes = async () => {
    const result: Record<string, any> = await getExportTypesApi();
    if (result?.code === 0) {
        const { data } = result;
        let options: any[] = [];
        //将数据格式化为label,value的形式
        data.forEach((item: any) => {
            options.push({
                value: item.export_type,
                label: item.bill_name
            });
        });
        //赋值任务类型
        dataStore.formData[0].options = cloneDeep(options);
    }
};
getExportTypes();
</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>
