<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>
        </template>
        <template #extra>
            <el-button hc-btn type="primary">
                <HcIcon name="download-2" />
                <span>导出</span>
            </el-button>
        </template>
        文档文件
    </hc-new-card>
</template>

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

defineOptions({
    name: 'AlterLedgersCover',
})

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

})

//类型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({})
</script>
