<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">
            <div class="mb10" style="text-align: end;">
                <el-radio-group v-model="frontAndBack">
                    <el-radio-button label="治理前" :value="0" />
                    <el-radio-button label="治理后" :value="1" />
                </el-radio-group>
            </div>
            <div>
                绑定数据指标:
                <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>
            </div>
        </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 frontAndBack = ref(0)

const handleChange = (e: any) => {
    value.value = []
    emit('setValue', e, activeName.value == '1' ? frontAndBack.value : 0)
}
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>
