<!-- 采购订单 -->
<template>
    <div class="table-box">
        <div
            style="height: 100%; padding: 16px; overflow-y: hidden; background-color: #ffffff; border-radius: 6px"
            ref="tableRef"
        >
            <div ref="searchRef" class="bt" style="height: 180px">
                <el-tabs v-model="formActiveName" class="demo-tabs">
                    <el-tab-pane label="基本信息" name="infoBasic">
                        <DetailsSearch
                            :formData="datas.formData"
                            :ruleForm="datas.ruleForm"
                            :labelWidth="labelWidth"
                            :formClass="datas.formClass"
                        >
                        </DetailsSearch>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <el-tabs v-model="activeName" class="demo-tabs" id="myElement">
                <el-tab-pane label="箱信息" name="outboundTaskListDetails">
                    <div
                        :class="datas.isBtn ? 'edit-btn-box1' : 'edit-btn-box'"
                        @click="handleEditClick"
                        v-if="authStore.btnsAuthList.includes('outboundTaskListDetailsEdit')"
                    >
                        编辑
                    </div>
                    <el-table :data="datas.ruleForm.details" style="width: 100%" :height="datas.tableHeight" border>
                        <el-table-column
                            :show-overflow-tooltip="true"
                            :prop="item.prop"
                            :align="item.align ?? 'center'"
                            :label="item.label"
                            :width="item.width ? item.width : 120"
                            v-for="(item, index) in datas.columns"
                            :key="index"
                        />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 编辑窗口 -->
        <el-dialog v-model="datas.isEdit" title="编辑" width="900" align-center @close="handleDiaLog">
            <div>
                <div style="display: flex; padding: 10px">
                    <div style="flex: 2">箱号</div>
                    <div style="flex: 1; padding-left: 20px">长CM</div>
                    <div style="flex: 1; padding-left: 20px">宽CM</div>
                    <div style="flex: 1; padding-left: 20px">高CM</div>
                    <div style="flex: 1; padding-left: 20px">重量KG</div>
                    <div style="flex: 4; padding-left: 20px">规格型号</div>
                </div>
                <div style="max-height: 200px; overflow: auto">
                    <div v-for="item in datas.editList.details" :key="item.id" style="display: flex; padding: 0 10px 10px">
                        <el-input v-model="item.boxBillNo" disabled style="flex: 2" />
                        <el-input
                            v-model="item.boxLength"
                            style="flex: 1; padding-left: 20px"
                            @input="handleInput(item, 'boxLength')"
                        />
                        <el-input
                            v-model="item.boxWide"
                            style="flex: 1; padding-left: 20px"
                            @input="handleInput(item, 'boxWide')"
                        />
                        <el-input
                            v-model="item.boxHigh"
                            style="flex: 1; padding-left: 20px"
                            @input="handleInput(item, 'boxHigh')"
                        />
                        <el-input
                            v-model="item.boxWeight"
                            style="flex: 1; padding-left: 20px"
                            @input="handleInput(item, 'boxWeight')"
                        />
                        <el-input v-model="item.specifications" style="flex: 4; padding-left: 20px" disabled />
                    </div>
                </div>
            </div>

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

<script setup lang="ts" name="outboundTaskListDetails">
import DetailsSearch from "@/components/DetailsSearch/index.vue";
import { FORMDATA, RULEFORM, COLUMNS } from "./constant/details/index";
import { cloneDeep } from "lodash-es";
import { getTaskDetailsApi, getEditBoxInfoApi } from "@/api/modules/deliveryAndOutbound";
import { useMsg } from "@/hooks/useMsg";
import { numberDecimalSeparatorRexg5 } from "@/utils/rexg/index";
import { useAuthStore } from "@/stores/modules/auth";
const authStore = useAuthStore();
let labelWidth = "107px";

const tableRef = ref<any>(null);
const searchRef = ref<any>(null);

const datas = reactive<any>({
    columns: COLUMNS, //明细信息列表配置项
    ruleForm: cloneDeep(RULEFORM), // 表单
    formData: cloneDeep(FORMDATA), //表头配置项
    tableHeight: 0, //表格高度
    isBtn: false, //控制编辑按钮显示
    isEdit: false, //控制编辑弹窗
    editList: [], //表格编辑数据
    pageSize: 1000, //默认请求1000条数据(现在一个单最多300条,需做分页优化,暂无该需求)
    pageNo: 1
});
const $route = useRoute();
let activeName = ref<any>("outboundTaskListDetails");
let formActiveName = ref<any>("infoBasic");
//获取详情
const getDetails = async (billNo: any) => {
    if (!billNo) {
        return false;
    }
    const result = await getTaskDetailsApi({
        billNo,
        pageSize: datas.pageSize,
        pageNo: datas.pageNo
    });
    if (result.status === 200) {
        const { data } = result;
        datas.ruleForm = cloneDeep(data);
        datas.isBtn = !datas.ruleForm.details.length;
    }
};
getDetails($route.query.billNo);
//动态计算表格高度
const handleResize = () => {
    nextTick(() => {
        datas.tableHeight = tableRef.value.clientHeight - 350;
        if (datas.tableHeight <= 92) {
            datas.tableHeight = 92;
        }
    });
};
//限制input输入
const handleInput = (item: any, type: any) => {
    item[type] = numberDecimalSeparatorRexg5(item[type]);
};
//窗口关闭
const handleDiaLog = () => {
    datas.editList = [];
};
//编辑
const handleEditClick = () => {
    if (datas.isBtn) {
        return;
    }
    //赋值
    datas.editList = cloneDeep(datas.ruleForm);
    //打开编辑窗口
    datas.isEdit = true;
};
//编辑确认
const handleEditCommit = async () => {
    let params: any = [];
    datas.editList.details.forEach((item: any) => {
        params.push({
            boxHigh: item.boxHigh,
            boxLength: item.boxLength,
            boxWeight: item.boxWeight,
            boxWide: item.boxWide,
            outStockBoxDetailsId: item.outStockBoxDetailsId,
            outStockId: item.outStockId
        });
    });
    const result = await getEditBoxInfoApi(params);
    const { isSuccess, message } = result;
    if (result.status === 200) {
        if (isSuccess) {
            useMsg("success", "数据修改成功 !");
            getDetails($route.query.billNo);
            datas.isEdit = false;
            datas.editList = [];
        } else {
            useMsg("error", message);
        }
    } else {
        useMsg("error", message);
    }
};

onMounted(() => {
    handleResize();
});
// 详情
onActivated(() => {
    window.addEventListener("resize", handleResize);
});
onDeactivated(() => {
    window.removeEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize);
});
</script>
<style scoped lang="scss">
.edit-btn-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 30px;
    margin-right: 12px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1;
    color: #ffffff;
    cursor: pointer;
    background: #4178d5;
    border-radius: 6px;
}
.edit-btn-box:hover {
    color: #ffffff;
    background: #7aa1e2;
    border: 1px solid rgb(65 120 213 / 10%);
}
.edit-btn-box1 {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 30px;
    margin-right: 12px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1;
    color: #ffffff;
    cursor: not-allowed;
    background: #4178d5;
    border-radius: 6px;
}
:deep(.el-dialog__body) {
    padding: 10px 10px 18px;
    font-size: 14px;

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