<!-- 找专家选择科室组件  -->
<template>
    <div v-show="show">
        <van-tree-select
            :items="items"
            :active-id.sync="activeId"
            :main-active-index.sync="activeIndex"
            class="department"
            @click-item="confirm"
            height="6.2rem"
        />
        <van-button block type="info" @click="resetConfirm">重置</van-button>
    </div>
</template>
<script>
    export default {
        props: {
            // 是否显示
            show: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                // active-id为数组格式时，可以选中多个右侧选项
                activeId: -1, //右侧选中项的 id，支持传入数组
                activeIndex: 0, //左侧选中项的索引
                departmentList: [] // 科室信息
            };
        },
        methods: {
            // 取消事件
            cancel() {
                this.$emit("cancel");
            },
            // 确认事件
            confirm(data) {
                //   [0,1]  =>  [ id=>科目id  text=>科室文字]
                // this.$emit("confirm", { id: this.activeId, text: this.chooseText });
                this.$emit("confirm", { id: data.id, text: data.text });
            },
            // 获取科室信息
            GetDepartmentList() {
                this.$http.GetDepartmentList().then(({ data }) => {
                    if (data.IsSuccess) {
                        // 本地存储  科室信息
                        sessionStorage.setItem(
                            "DepartmentList",
                            JSON.stringify(data.ResultObject)
                        );
                        this.departmentList = data.ResultObject;
                    } else {
                        this.$toast(res.data.ResultMsg);
                    }
                });
            },
            // 重置按钮
            resetConfirm() {
                this.activeId = -1;
                // 发送重置事件
                this.$emit("reset");
            }
        },
        created() {
            // 优先本地 获取科室信息
            if (!sessionStorage.getItem("DepartmentList")) {
                this.GetDepartmentList();
            } else {
                this.departmentList = JSON.parse(
                    sessionStorage.getItem("DepartmentList")
                );
            }
        },
        computed: {
            // 选中科室的提示文字
            chooseText() {
                var text = "";
                this.items.map(v => {
                    v.children.map(value => {
                        if (this.activeId == value.id) {
                            text = value.text;
                        }
                    });
                });
                return text;
            },
            // 选中的科室
            items() {
                let arr = this.departmentList.map((value, index) => {
                    return {
                        text: value.DepartmentName,
                        children: value.DepartmentsList.map(v => {
                            return {
                                text: v.DepartmentName,
                                DepartmentsList: v.DepartmentsList,
                                id: v.Id,
                                ParentId: v.ParentId
                            };
                        })
                    };
                });
                // 科室默认值
                // arr.unshift({
                //     text: "一级科室名称",
                //     children: [
                //         {
                //             text: "科室",
                //             DepartmentsList: [],
                //             id: 0,
                //             ParentId: 0
                //         }
                //     ]
                // });
                return arr;
            }
        }
    };
</script>
<style lang='less' scoped>
    @blue: #00a0e9;
    /deep/ .department {
        .van-tree-select__item--active {
            color: @blue;
        }

        .van-sidebar .van-sidebar-item .van-sidebar-item__text {
            font-weight: 600;
        }
        .van-sidebar-item--select {
            background-color: @blue;
            border-color: @blue;
            color: #fff;
        }
    }
</style>