<template>
    <div class="table-box">
        <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>
                <!--     :summary-method="getSummaries" -->
                <el-table :data="tableData" border height="200" show-summary 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>
    </div>
</template>

<script setup lang="ts" name="receiptWarehousingReceiptOrderAdd">
import { cloneDeep } from "lodash-es";
import DetailsSearch from "@/components/DetailsSearch/index.vue";

import { FORM_DATA, RULE_FORM, FORM_TABLE_COLUMNS, FORM_TABLE_DATA } from "./constant/details";

const dataStore = reactive<any>({
    labelWidth: "125px",
    ruleForm: cloneDeep(RULE_FORM), // 表单值
    formData: cloneDeep(FORM_DATA), //表单配置项
    formTableColumns: cloneDeep(FORM_TABLE_COLUMNS), //可编辑表格配置项
    formTableData: cloneDeep(FORM_TABLE_DATA) //可编辑表格配置项
});
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 getSearchValue = (params: any) => {
    if (!params) {
        return false;
    }
    const { val } = params;
    console.log(val, "========val========");
};

// const getSummaries = (param: any) => {
//     const { columns, data } = param;
//     const sums: (string | VNode)[] = [];
//     columns.forEach((column: any, index: any) => {
//         if (index === 0) {
//             sums[index] = h("div", { style: { textDecoration: "underline" } }, ["合计"]);
//             return;
//         }
//         const values = data.map((item: any) => Number(item[column.property]));
//         if (!values.every((value: any) => Number.isNaN(value))) {
//             sums[index] = `${values.reduce((prev: any, curr: any) => {
//                 const value = Number(curr);
//                 if (!Number.isNaN(value)) {
//                     return prev + curr;
//                 } else {
//                     return prev;
//                 }
//             }, 0)}`;
//         } else {
//             sums[index] = "";
//         }
//     });

//     return sums;
// };
</script>

<style scoped></style>
