<template>
    <el-tabs v-model.trim="activeName" class="demo-tabs">
        <el-tab-pane label="数据单位" name="0">
            绑定数据单位:
            <el-cascader :popper-append-to-body="false" ref="cascaderUnit" placeholder="请选择数据单位" v-model.trim="value"
                :options="options1" filterable @change="handleChange" :props="{
                    value: 'code',
                    label: 'name'
                }"></el-cascader>
        </el-tab-pane>
        <el-tab-pane label="数据指标" name="1">
            绑定数据指标:
            <el-cascader :popper-append-to-body="false" ref="cascaderUnit" placeholder="请选择数据指标" v-model.trim="value"
                :options="options2" filterable @change="handleChange" :props="{
                    value: 'name',
                    label: 'showName'
                }"></el-cascader>
        </el-tab-pane>
        <el-tab-pane label="合格率判定" name="2">
            绑定合格率判定:
            <el-cascader :popper-append-to-body="false" ref="cascaderhgl" placeholder="请选择数据合格率" v-model.trim="value"
                :options="options3" filterable @change="handleChange" :props="{
                    value: 'name',
                    label: 'showName'
                }"></el-cascader>
        </el-tab-pane>
        <el-tab-pane label="监测点台账指标" name="3">
            绑定数据指标:
            <el-cascader :popper-append-to-body="false" ref="cascaderjcd" placeholder="请选择监测点台账" v-model.trim="value"
                :options="options4" filterable @change="handleChange" :props="{
                    value: 'name',
                    label: 'showName'
                }"></el-cascader>
        </el-tab-pane>
    </el-tabs>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { codeDicTree } from '@/api/system-boot/dictTree'
import { targetLimitChooseTree, getIndex, terminalChooseTree } from '@/api/harmonic-boot/luckyexcel'
const emit = defineEmits(['setValue'])

const activeName = ref('0')
const value = ref([])

const options1 = ref([])
const options2 = ref([])
const options3 = ref([])
const options4: any = ref([])

const handleChange = (e: any) => {
    value.value = []

    emit('setValue', e)
}

codeDicTree({ code: 'Device_Unit' }).then(res => {
    options1.value = res.data
})
getIndex().then(res => {
    options2.value = res.data
})
targetLimitChooseTree().then(res => {
    options3.value = res.data
})
terminalChooseTree().then(res => {
    options4.value = res.data
})

onMounted(() => { })
</script>
<style lang="scss" scoped>
:deep(.el-tab-pane) {
    padding: 10px;
}
</style>
