<template>
    <div class="table-box">
        <div style="padding-bottom: 16px">
            <PermissionButton
                :buttons="dataStore.buttons"
                @handleButtonClickCallback="handleButtonClickCallback"
            ></PermissionButton>
        </div>

        <div class="card table-main">
            <div style="padding-bottom: 10px; border-bottom: 1px solid #eeeeee">
                <h3 style="margin: 10px">基础信息</h3>
                <DetailsSearch
                    :formData="dataStore.formData"
                    :ruleForm="dataStore.ruleForm"
                    :labelWidth="dataStore.labelWidth"
                    @getSearchValue="getSearchValue"
                />
            </div>

            <div style="padding-top: 16px">
                <h3 style="margin: 10px">明细</h3>

                <FormTable
                    :columns="dataStore.formTableColumns"
                    :tableData="dataStore.formTableData"
                    @handleKeyupEnterInputValue="handleKeyupEnterInputValue"
                    ref="formTableRef"
                >
                    <template #operation="scope">
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleMxAdd()"
                            v-if="scope.$index === dataStore.formTableData.length - 1"
                            >新增</el-button
                        >
                        <el-button size="small" @click="handleDelete(scope)">删除</el-button>
                    </template>
                </FormTable>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="receiptWarehousingReceiptOrderAdd">
import { cloneDeep } from "lodash-es";
import DetailsSearch from "@/components/DetailsSearch/index.vue";
import FormTable from "@/components/FormTable/index.vue";
import PermissionButton from "@/components/PermissionButton/index.vue";
import { FORM_DATA, RULE_FORM, FORM_TABLE_COLUMNS, FORM_TABLE_DATA, FORM_TABLE_DATA_INIT } from "./constant/add";
import { useMsg } from "@/hooks/useMsg";
import { BUTTON } from "./constant/add/button";
const dataStore = reactive<any>({
    labelWidth: "125px",
    buttons: BUTTON,
    ruleForm: cloneDeep(RULE_FORM), // 表单值
    formData: cloneDeep(FORM_DATA), //表单配置项
    formTableColumns: cloneDeep(FORM_TABLE_COLUMNS), //可编辑表格配置项
    formTableData: cloneDeep(FORM_TABLE_DATA) //可编辑表格配置项
});
// 获取单据头数据
const getSearchValue = (params: any) => {
    if (!params) {
        return false;
    }
    const { val } = params;
    console.log(val, "========val========");
};
const handleKeyupEnterInputValue = () => {};
//明细新增
const handleMxAdd = () => {
    dataStore.formTableData.push(FORM_TABLE_DATA_INIT);
};
//明细删除
const handleDelete = (scope: any) => {
    if (dataStore.formTableData.length === 1) {
        useMsg("warning", "最少保留一行数据 ! ");
        return;
    }
    dataStore.formTableData.splice(scope.$index, 1);
};
//顶部按钮回调
const handleButtonClickCallback = (item: any) => {
    const { type } = item;
    console.log(type, "======12====>");
};
</script>

<style scoped></style>
