<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" />
            </div>

            <div style="padding-top: 16px; padding-bottom: 16px">
                <h3 style="margin: 10px">物料信息</h3>
                <el-table :data="tableData" border height="300" style="width: 100%; margin-top: 20px">
                    <el-table-column prop="id" label="ID" width="180" />
                    <el-table-column prop="name" label="Name" />
                    <el-table-column prop="amount1" label="Cost 1 ($)" />
                    <el-table-column prop="amount2" label="Cost 2 ($)" />
                    <el-table-column prop="amount3" label="Cost 3 ($)" />
                </el-table>
            </div>

            <div style="padding-top: 16px; border-bottom: 1px solid #eeeeee">
                <h3 style="margin: 10px">操作信息</h3>
                <DetailsSearch
                    :formData="dataStore.formData1"
                    :ruleForm="dataStore.ruleForm1"
                    :labelWidth="dataStore.labelWidth"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="shipmentOutboundShipmentOrderDetails">
import { cloneDeep } from "lodash-es";
import DetailsSearch from "@/components/DetailsSearch/index.vue";
import PermissionButton from "@/components/PermissionButton/index.vue";
import { BUTTON } from "./constant/details/button";
import { FORM_DATA, RULE_FORM, RULE_FORM1, FORM_DATA1 } from "./constant/details/search";
const dataStore = reactive<any>({
    labelWidth: "165px",
    buttons: cloneDeep(BUTTON),
    ruleForm: cloneDeep(RULE_FORM), // 表单值
    formData: cloneDeep(FORM_DATA), //表单配置项
    ruleForm1: cloneDeep(RULE_FORM1), // 表单值
    formData1: cloneDeep(FORM_DATA1) //表单配置项
});

const tableData: any[] = [
    {
        id: "12987122",
        name: "Tom",
        amount1: "234",
        amount2: "3.2",
        amount3: 10
    },
    {
        id: "12987123",
        name: "Tom",
        amount1: "165",
        amount2: "4.43",
        amount3: 12
    },
    {
        id: "12987124",
        name: "Tom",
        amount1: "324",
        amount2: "1.9",
        amount3: 9
    },
    {
        id: "12987125",
        name: "Tom",
        amount1: "621",
        amount2: "2.2",
        amount3: 17
    },
    {
        id: "12987126",
        name: "Tom",
        amount1: "539",
        amount2: "4.1",
        amount3: 15
    }
];
const handleButtonClickCallback = () => {};
</script>

<style scoped></style>
