<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"> 
          <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>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dataList: [],
        activeName: "1"
      };
    },
    created() {},
    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;
                  })
                }
              });
            }
            this.dataList = dataArray;
          } else {
            this.Info(res.data.message);
          }
        })
      },
    },
    mounted() {
      this.getList();
    }
  };

</script>
