<template>
    <hc-new-card>
        <template #header>
            <hc-new-switch :datas="tabTab" :keys="tabKey" :round="false" size="default" @change="tabChange" />
            <div v-if="tabKey === 'key2'" class="ml-3 w-40">
                <el-select v-model="searchForm.key1" filterable block placeholder="选择工区">
                    <el-option label="工区1" value="1" />
                    <el-option label="工区2" value="2" />
                    <el-option label="工区3" value="3" />
                </el-select>
            </div>
            <div class="ml-3 w-40">
                <el-select v-model="searchForm.key2" filterable block placeholder="按变更金额过滤">
                    <el-option label="所有变更" value="1" />
                    <el-option label="正变更" value="2" />
                    <el-option label="负变更" value="3" />
                </el-select>
            </div>
        </template>
        <template #extra>
            <el-button hc-btn type="primary">
                <HcIcon name="download-2" />
                <span>导出</span>
            </el-button>
        </template>
        <div class="hc-table-ref-box">
            <el-table class="w-full" :data="tableData" row-key="id" height="100%" hc>
                <el-table-column type="expand" label="-">
                    <template #default="props">
                        <!-- props.row.key1 -->
                        <hc-table :is-index="false" :column="tableColumn" :datas="tableData1" is-new />
                    </template>
                </el-table-column>
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="key1" label="变更令编号" />
                <el-table-column prop="key2" label="名称" />
                <el-table-column prop="key3" label="变更批复日期" />
                <el-table-column prop="key4" label="增减金额" />
            </el-table>
        </div>
    </hc-new-card>
</template>

<script setup>
import { onActivated, onMounted, ref } from 'vue'

defineOptions({
    name: 'AlterLedgersLedger',
})

//渲染完成
onActivated(() => {

})

//类型tab数据和相关处理
const tabKey = ref('key1')
const tabTab = ref([
    { key: 'key1', name: '普通变更' },
    { key: 'key2', name: '工区变更' },
])

const tabChange = (item) => {
    tabKey.value = item?.key
    console.log(item)
}

const searchForm = ref({
    key2: '1',
})

const tableData = ref([
    { key1: '1111' },
])
const tableColumn = ref([
    { key: 'key1', name: '清单编号' },
    { key: 'key2', name: '清单名称' },
    { key: 'key3', name: '单位' },
    { key: 'key4', name: '变更前数量' },
    { key: 'key5', name: '变更后数量' },
    { key: 'key6', name: '数量增减量' },
    { key: 'key7', name: '变更前单价' },
    { key: 'key8', name: '变更后单价' },
    { key: 'key9', name: '原金额' },
    { key: 'key10', name: '现金额' },
    { key: 'key11', name: '金额增减' },
])
const tableData1 = ref([
    { key1: '1111' },
])
</script>
