<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" v-if="item.PageTypeId!=6">
          <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>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
            </el-input>
            <el-tree
                :data="treeData"
                node-key="PageId"
                ref="tree"
                :props="defaultProps"
                filter
                :filter-node-method="filterNode"
                show-checkbox>
            </el-tree>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dataList: [],
        activeName: "1",
        treeData: [],
        filterText:'',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    created() {},
    watch: {
      filterText(val) {
        this.$refs.tree.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: ""
        };
        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.IsParameter = subItem.IsParameter;
                  obj.ParameterValue = subItem.ParameterValue;
                  obj.PageName = subItem.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;
                  })
                }
                if (item.PageTypeId == 6) {
                  this.treeData = this.getTree(item.SubMenuList);
                }
              });
            }
            this.dataList = dataArray;
            console.log(this.dataList, 'datalist');
            console.log(this.treeData, 'treeData');
          } else {
            this.Info(res.data.message);
          }
        })
      },

      //递归改变label children
      getTree(data) {
        if (data) {
          for (var i = 0; i < data.length; i++) {
            data[i].label = data[i].PageName;
            if (data[i].SubMenuList && data[i].SubMenuList.length > 0) {
              data[i].children = data[i].SubMenuList;
            }
            data[i].IsChecked=false;
            this.getTree(data[i].SubMenuList)
          }
        }
        return data;
      },
      filterNode(value, data) {
        console.log(value,'value');
          console.log(data,'data');
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },
    mounted() {
      this.getList();
    }
  };

</script>
