<template>
    <Popup v-model:show="showPopup" class="table-popup">
        <div class="table-content">
            <el-table :data="tableData" border :span-method="objectSpanMethod">
                <el-table-column prop="id" label="果树id" />
                <el-table-column prop="name" label="客户姓名" />
                <el-table-column prop="value" label="认养斤数" />
                <el-table-column prop="tel" label="收货电话" />
                <el-table-column prop="time" label="发货时间" />
                <el-table-column prop="address" label="收货地址" />
            </el-table>
        </div>
        <div class="table-btn-group">
            <div class="btn cancel-btn" @click="showPopup = false">取消</div>
            <div class="btn edit-btn" @click="showPopup = false">保存</div>
        </div>
    </Popup>
</template>

<script setup>
import { Popup } from "vant";
import { ref, watch } from "vue";
const props = defineProps({
    showPopupParent: {
        type: Boolean,
        default: false,
    },
});

const showPopup = ref(false);

const tableData = [
    {
        id: "BTY-001",
        name: "陈依依",
        value: "50",
        tel: "13855556564",
        time: "2025.06.15",
        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
    },
    {
        id: "BTY-001",
        name: "谢可资",
        value: "50",
        tel: "13855556564",
        time: "2025.06.15",
        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
    },
    {
        id: "BTY-002",
        name: "陈五五",
        value: "50",
        tel: "13855556564",
        time: "2025.06.15",
        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
    },
    {
        id: "BTY-003",
        name: "黎依依",
        value: "50",
        tel: "13855556564",
        time: "2025.06.15",
        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
    },
    {
        id: "BTY-003",
        name: "李依依",
        value: "50",
        tel: "13855556564",
        time: "2025.06.15",
        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
    },
    {
        id: "BTY-004",
        name: "潘依依",
        value: "50",
        tel: "13855556564",
        time: "2025.06.15",
        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
    },
];

// 预先计算合并信息
const spanMap = {};
tableData.forEach((item, index) => {
    if (!spanMap[item.id]) {
        spanMap[item.id] = {
            count: 1,
            startIndex: index,
        };
    } else {
        spanMap[item.id].count++;
    }
});

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex === 0) {
        const id = row.id;
        if (rowIndex === spanMap[id].startIndex) {
            return {
                rowspan: spanMap[id].count,
                colspan: 1,
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0,
            };
        }
    }
};

watch(
    () => props.showPopupParent,
    (newValue, oldValue) => {
        showPopup.value = !showPopup.value;
    }
);
</script>

<style lang="scss" scoped>
.table-content {
    ::v-deep {
        .el-table {
            --el-table-border-color: rgba(255, 255, 255, 0.1);
            --el-table-text-color: #FFFFFF;
            --el-table-header-text-color: rgba(255, 255, 255, 0.6);
            --el-table-row-hover-bg-color: transparent;
            --el-table-current-row-bg-color: transparent;
            --el-table-header-bg-color: transparent;
            --el-table-bg-color: rgba(255, 255, 255, 0.04);
            --el-table-tr-bg-color: transparent;
        }
        .el-table tr {
            background: transparent;
        }
        .el-table th.el-table__cell {
            background: transparent;

        }
    }
}
.table-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 28px;
    .btn {
        cursor: pointer;
        padding: 9px 80px;
        font-size: 12px;
        border-radius: 4px;
        border: 1px solid #ffd489;
    }
    .cancel-btn {
        color: #ffd489;
    }
    .edit-btn {
        background: #ffd489;
        color: #000000;
    }
    .btn + .btn {
        margin-left: 8px;
    }
}
</style>
<style lang="less">
.table-popup {
    background: #232323;
    padding: 24px 16px 28px 16px;
    width: 66%;
    border: 1px solid #666666;
    border-radius: 8px;
}
</style>
