<template>
    <hc-tab-card w-to="1450" :tabs="tabsData" :tab-key="tabsKey" class="hc-project-ledger-page" @change="tabsChange">
        <template #extraToSearch>
            <div v-if="tabsKey === '1'" class="hc-flex">
                <hc-date-year v-model="searchForm1.startYear" v-model:end="searchForm1.endYear" />
                <div class="relative ml-3 w-[300px]">
                    <hc-search-input v-model="searchForm1.queryValue" text="搜索" color="#151921" @search="searchClick1">
                        <template #prepend>
                            <el-select v-model="searchForm1.year" placeholder="年份" clearable style="width: 80px">
                                <el-option label="2023" value="2023" />
                                <el-option label="2024" value="2024" />
                            </el-select>
                        </template>
                    </hc-search-input>
                </div>
            </div>
        </template>
        <template #extra>
            <div v-if="tabsKey === '1'" class="hc-flex">
                <div class="ml-6 w-[120px]">
                    <el-select v-model="searchForm1.key1" filterable clearable block placeholder="项目阶段" @change="searchClick1">
                        <el-option v-for="item in stateData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="ml-2 w-[100px]">
                    <el-select v-model="searchForm1.key2" filterable clearable block placeholder="项目类型" @change="searchClick1">
                        <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>
            <div v-if="tabsKey === '2'" class="hc-flex">
                <div class="relative ml-3 w-[300px]">
                    <hc-search-input v-model="searchForm2.queryValue" color="#151921" text="搜索" @search="searchClick2">
                        <template #prepend>
                            <el-select v-model="searchForm2.year" placeholder="年份" style="width: 75px">
                                <el-option label="2023" value="2023" />
                                <el-option label="2024" value="2024" />
                            </el-select>
                        </template>
                    </hc-search-input>
                </div>
                <div class="ml-6 w-[120px]">
                    <el-select v-model="searchForm2.key1" filterable clearable block placeholder="项目阶段" @change="searchClick2">
                        <el-option v-for="item in stateData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>
            <el-button v-yes-com:[deriveTableItem] type="primary" class="ml-2">批量导出</el-button>
        </template>
        <HcTableList1 v-if="tabsKey === '1'" ref="table1Ref" />
        <HcTableList2 v-if="tabsKey === '2'" ref="table2Ref" />
        <template #action>
            <hc-pages v-if="tabsKey === '1'" :pages="searchForm1" @change="pageChange1" />
            <hc-pages v-if="tabsKey === '2'" :pages="searchForm2" @change="pageChange2" />
        </template>
    </hc-tab-card>
</template>

<script setup>
import { ref } from 'vue'
import HcTableList1 from './modules/project-list.vue'
import HcTableList2 from './modules/gist-list.vue'

//选项卡切换
const tabsKey = ref('1')
const tabsData = ref([
    { key: '1', name: '项目资料' },
    { key: '2', name: '工作要点' },
])
const tabsChange = ({ key }) => {
    tabsKey.value = key
}

//项目阶段
const stateData = ref([{ value: '1', label: '新开工项目' }, { value: '2', label: '建成项目' }])

//项目类型
const typeData = ref([{ value: '1', label: '铁路' }, { value: '2', label: '高速公路' }])

//搜索条件
const searchForm1 = ref({
    startYear: '', endYear: '', queryValue: '', year: '',
    current: 1, size: 20, total: 0,
})
const searchForm2 = ref({
    startYear: '', endYear: '', queryValue: '', year: '',
    current: 1, size: 20, total: 0,
})

//搜索
const searchClick1 = () => {

}
const searchClick2 = () => {

}

//分页
const pageChange1 = ({ current, size }) => {
    searchForm1.value.current = current
    searchForm1.value.size = size
}

//分页
const pageChange2 = ({ current, size }) => {
    searchForm2.value.current = current
    searchForm2.value.size = size
}

const table1Ref = ref(null)
const table2Ref = ref(null)

//批量导出
const deriveTableItem = (_, resolve) => {
    resolve()
}
</script>

<style lang="scss">
@import '~src/styles/project/ledger';
</style>
