<style>
  .other_Style {
    color: #409EFF;
  }

</style>
<template>
  <div class="chooseMenu">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in dataList" :label="item.PageTypeName" :name="item.PageTypeId+''" :key="index">
        <div style="height:450px;overflow:scroll;line-height:normal;" v-if="item.PageTypeId!=6&&item.PageTypeId!=8">
          <template v-for="(subItem,subIndex) in item.SubMenuList">
            <div :key="subIndex" style="margin-bottom:10px;">
              <el-checkbox v-model="subItem.IsChecked" :key="subIndex" @change="checkMenuChange(subItem)">
                <span v-if="subItem.SelfPageName">{{subItem.SelfPageName}}</span>
                <span v-else>{{subItem.PageName}} </span>
              </el-checkbox>
            </div>
          </template>
        </div>
        <div style="height:450px;overflow:scroll" v-else-if="item.PageTypeId==6">
          <el-input placeholder="输入关键字进行过滤" style="width:99%;margin-bottom:10px;" v-model="filterText">
          </el-input>
          <el-tree :data="item.SubMenuList" node-key="PageId" ref="tree" :props="defaultProps" filter
            :filter-node-method="filterNode" @check="handleCheck" :check-strictly="true" show-checkbox
            :check-on-click-node="true">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span :class="{'other_Style':data.SubMenuList&&data.SubMenuList.length>0}">{{ data.PageName }}</span>
            </span>
          </el-tree>
        </div>
        <div style="height:450px;overflow:scroll" v-else-if="item.PageTypeId==8">
          <el-input placeholder="输入关键字进行过滤" style="width:99%;margin-bottom:10px;" v-model="filterText2">
          </el-input>
          <el-tree :data="item.SubMenuList" node-key="PageId" ref="tree_dmc" :props="defaultProps" filter
            :filter-node-method="filterNode2" @check="handleCheck" :check-strictly="true" show-checkbox
            :check-on-click-node="true">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span :class="{'other_Style':data.SubMenuList&&data.SubMenuList.length>0}">{{ data.PageName }}</span>
            </span>
          </el-tree>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dataList: [],
        activeName: "1",
        filterText: '',
        filterText2: '',
        defaultProps: {
          children: 'SubMenuList',
          label: 'PageName'
        },
        checkedObj: {}
      };
    },
    created() {},
    watch: {
      filterText(val) {
        this.$refs.tree[0].filter(val.trim());
      },
      filterText2(val) {
        this.$refs.tree_dmc[0].filter(val.trim());
      }
    },
    methods: {
      //复选框选择
      checkMenuChange(subItem) {
        if (this.dataList && this.dataList.length > 0) {
          this.dataList.forEach(item => {
            if (item.SubMenuList && item.SubMenuList.length > 0) {
              item.SubMenuList.forEach(subItem => {
                subItem.IsChecked = false;
              })
            }
          });
        }
        subItem.IsChecked = !subItem.IsChecked;
      },
      //获取选择的菜单
      getChooseMenu() {
        var obj = {
          PageUrl: "",
          IsParameter: 0,
          ParameterValue: "",
          PageName: "",
          new_link_url: ''
        };
        if (this.activeName != 6) {
          if (this.dataList && this.dataList.length > 0) {
            this.dataList.forEach(item => {
              if (item.SubMenuList && item.SubMenuList.length > 0) {
                item.SubMenuList.forEach(subItem => {
                  if (subItem.IsChecked) {
                    obj.PageUrl = subItem.PageUrl;
                    obj.new_link_url = subItem.PageUrl
                    obj.IsParameter = subItem.IsParameter;
                    obj.ParameterValue = subItem.ParameterValue;
                    obj.PageName = subItem.PageName;
                  }
                })
              }
            });
          }
        } else {
          obj.PageUrl = this.checkedObj.PageUrl
          obj.new_link_url = this.checkedObj.PageUrl
          obj.IsParameter = this.checkedObj.IsParameter
          obj.ParameterValue = this.checkedObj.ParameterValue
          obj.PageName = this.checkedObj.PageName;
        }
        return obj;
      },
      handleClick(tab, event) {},
      //获取所有菜单
      getList() {
        this.apipost("/api/Tenant/GetMiniprogramPageListExt", {}, res => {
          if (res.data.resultCode == 1) {
            var dataArray = res.data.data;
            if (dataArray && dataArray.length > 0) {
              dataArray.forEach(item => {
                if (item.SubMenuList && item.SubMenuList.length > 0) {
                  item.SubMenuList.forEach(subItem => {
                    subItem.IsChecked = false;
                  })
                }
              });
            }
            this.dataList = dataArray;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.PageName.indexOf(value) !== -1;
      },
      filterNode2(value, data) {
        if (!value) return true;
        return data.PageName.indexOf(value) !== -1;
      },
      //check单选      
      handleCheck(a, b) {
        //a为传递给 data 属性的数组中该节点所对应的对象；b为树目前的选中状态对象
        if (b.checkedKeys.length > 0) {
          this.$refs.tree[0].setCheckedKeys([a.PageId]);
          this.checkedObj = a;
        }
      },
    },
    mounted() {
      this.getList();
    }
  };

</script>
