<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-date-picker v-model="searchForm.key2" placeholder="截止日期" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
            </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 no-border">
            <el-table class="w-full" :data="tableData" row-key="id" height="100%" border>
                <el-table-column type="index" label="序号" width="60" />
                <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-column prop="key4" label="变更类别" />
                <el-table-column prop="key4" label="涉及细目号" />
                <el-table-column prop="key4" label="细目名称" />
                <el-table-column prop="key4" label="单位" />
                <el-table-column label="变更前数据(合同数据)" align="center">
                    <el-table-column prop="key5" label="数量" />
                    <el-table-column prop="key6" label="单价" />
                    <el-table-column prop="key7" label="金额" />
                </el-table-column>
                <el-table-column label="变更后数据" align="center">
                    <el-table-column prop="key9" label="数量" />
                    <el-table-column prop="key10" label="单价" />
                    <el-table-column prop="key11" label="金额" />
                </el-table-column>
                <el-table-column label="申请变更数据" align="center">
                    <el-table-column prop="key9" label="数量" />
                    <el-table-column prop="key10" label="单价" />
                    <el-table-column prop="key11" label="金额" />
                </el-table-column>
                <el-table-column label="批复变更数据" align="center">
                    <el-table-column prop="key9" label="数量" />
                    <el-table-column prop="key10" label="单价" />
                    <el-table-column prop="key11" label="金额" />
                </el-table-column>
                <el-table-column prop="key13" label="是否计量在哪一期" />
                <el-table-column prop="key14" label="计量金额(元)" />
            </el-table>
        </div>
    </hc-new-card>
</template>

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

defineOptions({
    name: 'AlterLedgersTable2',
})

//渲染完成
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({})

const tableData = ref([
    { key1: '1111' },
])
</script>
