<!-- 入库任务列表 -->
<template>
    <div class="table-box">
        <!-- 按钮 -->
        <ListBtns :selectionList="selectionList" @handleParentCallback="handleParentCallback" :ruleForm="datas.exportList" />
        <Search
            :formData="datas.formData"
            :ruleForm="datas.ruleForm"
            @handleSearch="handleSearch"
            @handleReset="handleReset"
            @handleConvertSeparators="handleConvertSeparators"
            @handleRemoteMehod="handleRemoteMehod"
        />
        <!-- 表格 -->
        <ProTable
            ref="proTable"
            :columns="datas.columns"
            :request-api="getInStockTaskListApi"
            :init-param="datas.initParam"
            :ruleForm="datas.ruleForm"
            @selectionChange="selectionChange"
        >
            <template #billNo="scope">
                <a @click="handleToDetail(scope.row)" class="break-word to-details">
                    {{ scope.row.billNo }}
                </a>
            </template>
        </ProTable>
    </div>
</template>
<script setup lang="ts" name="ofInboundInstructionsList">
import ListBtns from "@/components/ListBtns/index.vue";
import Search from "@/components/Search/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { cloneDeep } from "lodash-es";
import { RULEFORM, FORMDATA, COLUMNS } from "./constant/list/index";
import { initSearch } from "./init/index";
import { getInStockTaskListApi } from "@/api/modules/receiptAndWarehousing";
import { useSearchInfoArray, useSetSearchData } from "@/hooks/useSearch";
const $router = useRouter();
// 获取 ProTable 元素
const proTable = ref<any>(null);
// 数据源
const datas = reactive({
    exportList: cloneDeep(RULEFORM),
    columns: COLUMNS, //列表配置项
    initParam: cloneDeep(RULEFORM), // 初始化搜索条件|重置搜索条件
    ruleForm: cloneDeep(RULEFORM), // 搜索条件
    formData: FORMDATA //搜索配置项
});
//选中表格的行
let selectionList = ref([]);
/**
 *
 * @description 获取按钮操作结果
 * @param type {string} 按钮类型
 * @param result {Object} 操作结果
 */

//result?: Record<string, any>
const handleParentCallback = () => {
    datas.ruleForm = cloneDeep(RULEFORM);
    proTable!.value.getTableList(datas.initParam);
};
const handleSearch = () => {
    proTable!.value.initPage(datas.ruleForm);
    datas.exportList = datas.ruleForm;
    datas.exportList.pageNo = proTable!.value.pageable.pageNo;
    datas.exportList.pageSize = proTable!.value.pageable.pageSize;
};
const handleReset = () => {
    datas.ruleForm = cloneDeep(RULEFORM);
    datas.exportList = cloneDeep(RULEFORM);

    proTable!.value.initPage(datas.initParam);
};
const selectionChange = (selection: any) => {
    selectionList.value = selection;
};
//初始化搜索数据
initSearch(datas);

const handleRemoteMehod = (params: any) => {
    const { data, prop } = params;
    if (prop === "supplierId") {
        datas.formData = useSetSearchData(datas.formData, {
            supplierId: useSearchInfoArray(data)
        });
    }
    if (prop === "orgId") {
        datas.formData = useSetSearchData(datas.formData, {
            orgId: useSearchInfoArray(data)
        });
    }
};
const removeSpaces = (str: any) => {
    return str.replace(/\s+/g, "");
};
//将中文逗号(,)和分号(;)替换为英文逗号(,)
const convertSeparators = (str: any) => {
    let strClone = cloneDeep(str);
    return strClone.replace(/，/g, ",");
};

const handleConvertSeparators = (prop: any) => {
    if (datas.ruleForm[prop]) {
        datas.ruleForm[prop] = removeSpaces(datas.ruleForm[prop]);
        datas.ruleForm[prop] =
            datas.ruleForm[prop].indexOf("，") > -1 ? convertSeparators(datas.ruleForm[prop]) : datas.ruleForm[prop];
        if (datas.ruleForm[prop].indexOf(",") > -1) {
            datas.ruleForm[prop] = datas.ruleForm[prop].split(",");
        } else {
            let array = [];
            array.push(datas.ruleForm[prop]);
            datas.ruleForm[prop] = array;
        }
    }
};
//跳转到详情
const handleToDetail = (row: any) => {
    $router.push({
        path: "/receiptAndWarehousing/ofInboundInstructionsList/details",
        query: {
            id: row.id
        }
    });
};
</script>

<style scope lang="scss">
.to-details {
    color: #4178d5;
    cursor: pointer;
}
</style>
