<template>
    <div>
        <div>
            <el-dialog v-model="dialogVisible" :title="'选择scd文件,您选择的文件是:' + scdName" width="30%" @close="sureclose">
                <el-tree :data="treeList" :props="treeProps" @node-click="handleNodeClick" />
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cleanBox">取消</el-button>
                        <el-button type="primary" @click="sureArr">
                            确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs } from 'vue';
import scd from "../../../api/scd"
export default {
    props: {
        scdLooks: {
            type: Boolean,
            required: true
        }
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)
        let result = props.scdLooks
        let { cleanBox, sureArr } = toRefs(props)
        let treeList = ref([])//树形控件数据
        let scdName = ref('')//选择的scd名字
        let chooseScdid = ref('')//选择的scdid
        let treeProps = ref({
            children: 'children',
            label: 'scd_name',
            id: "id"
        })
        function tackLine() {
            dialogVisible.value = result
        }
        // 查询scd
        function searchScd(num) {
            scd.getAllScd({ stationid: num }).then(res => {
                treeList.value = res.data
            })
        }
        function backTo() {
            dialogVisible.value = false
            emit("nowBack", dialogVisible.value)
        }
        function getBack() {
            dialogVisible.value = false
            emit("nowBack", dialogVisible.value, scdName.value, chooseScdid.value)
        }
        function sureclose() {
            dialogVisible.value = false
            emit("nowBack", dialogVisible.value)
        }
        function handleNodeClick(e) {
            console.log(e, 'emit');
            scdName.value = e.scd_name
            chooseScdid.value = e.id
        }
        onMounted(() => {
            searchScd()
            tackLine()
        })
        return {
            dialogVisible,
            cleanBox: backTo,
            sureArr: getBack,
            sureclose,
            result,
            tackLine,
            searchScd,
            treeList,
            treeProps,
            handleNodeClick,
            scdName,
            chooseScdid,
        }
    }
}
</script>

<style scoped>
:deep(.el-dialog__body) {
    height: 400px;
    overflow-y: auto;
}
</style>