/** 选择科室组件 */
<template>
  <div v-show="show">
    <div class="header">
      <van-button type="danger" class="cancle" hairline plain @click="cancel">取消</van-button>
      <div class="choose">选择科室</div>
      <van-button type="info" class="confirm" hairline plain @click="confirm">确认</van-button>
    </div>

    <van-tree-select
      :items="items"
      :active-id.sync="activeId"
      :main-active-index.sync="activeIndex"
      class="department"
    />
  </div>
</template>
<script>
  export default {
    props: {
      // 是否显示
      show: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        // items: [
        //   {
        //     // 导航名称
        //     text: "妇产科",
        //     // 导航名称右上角徽标
        //     // info: 3,
        //     // 该导航下所有的可选项
        //     children: [
        //       {
        //         // 名称
        //         text: "产科",
        //         // id，作为匹配选中状态的标识
        //         id: 1
        //         // 禁用选项
        //         // disabled: true
        //       }
        // ],
        // active-id为数组格式时，可以选中多个右侧选项
        activeId: -1, //右侧选中项的 id，支持传入数组
        activeIndex: 0, //左侧选中项的索引
        departmentList: [] // 科室信息
      };
    },
    methods: {
      // 取消事件
      cancel() {
        this.$emit("cancel");
      },
      // 确认事件
      confirm() {
        //   [0,1]  =>  [ id=>科目id  text=>科室文字]
        this.$emit("confirm", { id: this.activeId, text: this.chooseText });
      },
      // 获取科室信息
      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);
          }
        });
      }
    },
    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
              };
            })
          };
        });
        return arr;
      }
    }
  };
</script>
<style lang='less' scoped>
  @blue: #00a0e9;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;
    color: #000;
    font-size: 0.3rem;
    .cancle,
    .confirm,
    .choose {
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: 0.3rem;
    }
  }

  /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>
