<!-- 入库单列表 -->
<template>
    <div class="table-box">
        <!-- 按钮 -->
        <ListBtns :selectionList="selectionList" @handleParentCallback="handleParentCallback" :ruleForm="datas.exportList" />
        <Search
            :formData="datas.formData"
            :ruleForm="datas.ruleForm"
            @handleSearch="handleSearch"
            @handleReset="handleReset"
            @handleRemoteMehod="handleRemoteMehod"
        />
        <!-- 表格 -->
        <ProTable
            ref="proTable"
            :columns="datas.columns"
            :request-api="getInStockListApi"
            :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>
            <!-- 只有采购入库单才显示同步状态 -->
            <template #successSync="scope">
                <a
                    @click="handleSuccessSync(scope.row)"
                    :class="
                        scope.row.successSync == '失败' && (scope.row.type == '采购入库' || scope.row.type == '生产入库')
                            ? 'break-word to-detail1'
                            : ''
                    "
                >
                    {{ scope.row.type == "采购入库" || scope.row.type == "生产入库" ? scope.row.successSync : "--" }}
                </a>
            </template>
        </ProTable>
        <!-- 同步成功操作弹窗 -->
        <el-dialog v-model="datas.isSynchronous" title="修改同步状态" width="500" align-center @close="handleDiaLog">
            <span style="font-size: 16px; color: red">确定入库数据已同步金蝶系统, 请输入金蝶入库单号</span>
            <div>
                <div style="display: flex; padding: 10px">
                    <div style="flex: 1; text-align: left">入库单号</div>
                    <div style="flex: 1; padding-left: 20px">来源单号</div>
                    <div style="flex: 1; padding-left: 20px; text-align: left">
                        <span style="padding-right: 3px; color: red">*</span>金蝶入库单号
                    </div>
                </div>
                <div style="max-height: 200px; overflow: auto">
                    <div v-for="item in datas.successSyncList" :key="item.id" style="display: flex; padding: 0 10px 10px">
                        <el-input v-model="item.billNo" disabled style="flex: 1; padding-right: 20px" />
                        <el-input v-model="item.sourceBillNo" disabled style="flex: 1; padding-right: 20px" />
                        <el-input v-model="item.erpBillNo" style="flex: 1" :maxlength="20" />
                    </div>
                </div>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="datas.isSynchronous = false">取消</el-button>
                    <el-button type="primary" @click="handleSynchronousCommit"> 确认 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="warehouseReceiptList">
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 { getInStockListApi, getInStockSyncSuccessApi } from "@/api/modules/receiptAndWarehousing";
import { useRouter } from "vue-router";
import { initSearch } from "./init/index";
import { useSearchInfoArray, useSetSearchData } from "@/hooks/useSearch";
import { ElMessageBox } from "element-plus";
import { useMsg } from "@/hooks/useMsg";
const proTable = ref<any>(null);
// 数据源
const datas: any = reactive<any>({
    exportList: cloneDeep(RULEFORM),
    columns: COLUMNS, //列表配置项
    initParam: cloneDeep(RULEFORM), // 初始化搜索条件|重置搜索条件
    ruleForm: cloneDeep(RULEFORM), // 搜索条件
    formData: FORMDATA, //搜索配置项
    isSynchronous: false, //用于控制同步成功弹窗
    successSyncList: [] //同步成功弹窗表格数据
});
//选中表格的行
let selectionList = ref([]);
initSearch(datas);
//路由
const $router = useRouter();
/**
 *
 * @description 获取按钮操作结果
 * @param type {string} 按钮类型
 * @param result {Object} 操作结果
 */
//按钮回调
const handleParentCallback = (params: Record<string, any>) => {
    const { type } = params;
    if (type === "Synchronous") {
        selectionList.value.forEach((item: any) => {
            datas.successSyncList.push({
                id: item.id,
                billNo: item.billNo,
                sourceBillNo: item.sourceBillNo,
                materialNumber: item.materialNumber,
                erpBillNo: ""
            });
        });
        datas.isSynchronous = true;
    } else {
        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;
};
const handleSuccessSync = (row: any) => {
    if (row.successSync === "失败") {
        ElMessageBox.alert(row.remark, "失败原因", {
            confirmButtonText: "确认",
            callback: (action: any) => {
                console.log(action);
            }
        });
    }
};
//同步成功按钮弹窗确认事件
const handleSynchronousCommit = async () => {
    let isErpBillNo = datas.successSyncList.some((item: any) => {
        return !item.erpBillNo;
    });
    if (isErpBillNo) {
        useMsg("warning", "金蝶入库单号不能为空 ! ");
        return;
    }
    let params: any = [];
    datas.successSyncList.forEach((item: any) => {
        params.push({
            id: item.id,
            sourceBillNo: item.sourceBillNo,
            materialNumber: item.materialNumber,
            erpBillNo: item.erpBillNo
        });
    });
    const result = await getInStockSyncSuccessApi(params);
    const { isSuccess, message } = result;
    if (result.status === 200) {
        // const { isSuccess, message } = result;
        if (isSuccess) {
            useMsg("success", "数据同步成功 !");
            datas.isSynchronous = false;
            datas.successSyncList = [];
            proTable!.value.getTableList(datas.initParam);
        } else {
            useMsg("error", message);
        }
    } else {
        useMsg("error", message);
    }
};
//同步成功弹窗关闭(清空数据)
const handleDiaLog = () => {
    datas.successSyncList = [];
};
//跳转到详情
const handleToDetail = (row: any) => {
    $router.push({
        path: "/receiptAndWarehousing/warehouseReceiptList/details",
        query: {
            id: row.id
        }
    });
};
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)
        });
    }
};
</script>

<style scoped>
.to-details {
    color: #4178d5;
    cursor: pointer;
}
.to-detail1 {
    color: red;
    cursor: pointer;
}
:deep(.el-dialog__body) {
    padding: 10px;
    font-size: 14px;

    /* color: red; */
    text-align: center;
}
:deep(.el-dialog__title) {
    font-weight: bold;
}
</style>
