<style>
  .tenantmenuDiv {
    padding: 20px;
  }

  .tenantmenuDiv .query-box {
    width: 100%;
    padding: 0 0 20px;
    border-bottom: 1px solid #ccc;
    position: relative;
    text-align: right;
  }

  .tenantmenuDiv .normalBtn {
    color: #fff;
    padding: 0 15px;
    height: 30px;
    background: #e95252;
    border: 1px solid #e95252;
    cursor: pointer;
    border-radius: 15px;
    margin-left: 10px;
    outline: none;
  }

</style>
<template>
  <div class="tenantmenuDiv">
    <div class="query-box">
      <button type="button" class="normalBtn" @click="setMiniProgramPage()" :disabled="isDisabled">{{btnText}}</button>
      <button type="button" class="normalBtn" @click="CommonJump('menu',{})">商城菜单</button>
    </div>
    <table class="commonTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th style="width:200px;">一级菜单</th>
        <th style="width:200px;">二级菜单</th>
        <th>三级菜单</th>
      </tr>
      <template v-for="(item,index) in dataList">
        <template v-for="(subItem,subIndex) in item.SubMenuList">
          <tr :key="index+'1'+subIndex">
            <td v-if="subIndex==0" :rowspan="item.SubMenuList.length">
              <el-checkbox v-model="item.IsChecked" :key="index" @change="ChangeItem(item)">{{item.MenuName}}
              </el-checkbox>
            </td>
            <td style="text-align:left;padding-left:5px;">
              <el-checkbox v-model="subItem.IsChecked" :key="subIndex"
                @change="ChangeItem(subItem);SetParent(subItem,0)">
                {{subItem.MenuName}}</el-checkbox>
            </td>
            <td style="text-align:left;padding-left:5px;">
              <template v-for="(childItem,childIndex) in subItem.SubMenuList">
                <el-checkbox v-model="childItem.IsChecked" :key="childIndex"
                  @change="SetParent(childItem,subItem.ParentId)">
                  {{childItem.MenuName}}</el-checkbox>
              </template>
            </td>
          </tr>
        </template>
      </template>
    </table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        dataList: [],
        TenantId: 0, //小程序Id
        isDisabled: false,
        btnText:"保存"
      };
    },
    created() {

    },
    methods: {
      ChangeItem(item) {
        if (item.SubMenuList && item.SubMenuList.length > 0) {
          item.SubMenuList.forEach(subItem => {
            subItem.IsChecked = item.IsChecked;
            if (subItem.SubMenuList && subItem.SubMenuList.length > 0) {
              subItem.SubMenuList.forEach(childItem => {
                childItem.IsChecked = item.IsChecked;
              })
            }
          })
        }
      },
      //设置父项选中
      SetParent(pItem, pValue) {
        this.dataList.forEach(item => {
          if (item.MenuId == pItem.ParentId && pItem.IsChecked) {
            item.IsChecked = pItem.IsChecked
          }
          if (pValue > 0 && item.MenuId == pValue && pItem.IsChecked) {
            item.IsChecked = pItem.IsChecked
          }
          if (item.SubMenuList && item.SubMenuList.length > 0) {
            item.SubMenuList.forEach(subItem => {
              if (subItem.MenuId == pItem.ParentId && pItem.IsChecked) {
                subItem.IsChecked = pItem.IsChecked
              }
              if (subItem.SubMenuList && subItem.SubMenuList.length > 0) {
                subItem.SubMenuList.forEach(childItem => {
                  if (childItem.MenuId == pItem.ParentId && pItem.IsChecked) {
                    childItem.IsChecked = pItem.IsChecked
                  }
                });
              }
            })
          }
        })
      },
      //获取分页数据
      getPageList() {
        this.apipost("/api/MContent/GetTenantMenuList", {}, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //添加修改菜单
      setMiniProgramPage() {
        this.isDisabled = true;
        var setArray = []; //新增修改的数组
        if (this.dataList && this.dataList.length > 0) {
          this.dataList.forEach(item => {
            if (item.IsChecked) {
              setArray.push({
                TMenuId: 0,
                MenuId: item.MenuId,
                TenantId: this.TenantId
              });
            }
            if (item.SubMenuList && item.SubMenuList.length > 0) {
              item.SubMenuList.forEach(subItem => {
                if (subItem.IsChecked) {
                  setArray.push({
                    TMenuId: 0,
                    MenuId: subItem.MenuId,
                    TenantId: this.TenantId
                  });
                }
                if (subItem.SubMenuList && subItem.SubMenuList.length > 0) {
                  subItem.SubMenuList.forEach(childItem => {
                    if (childItem.IsChecked) {
                      setArray.push({
                        TMenuId: 0,
                        MenuId: childItem.MenuId,
                        TenantId: this.TenantId
                      });
                    }
                  });
                }
              })
            }
          })
        }
        if (setArray.length == 0) {
          this.Info("请选择菜单!");
          this.isDisabled = false;
          return;
        }
    
        this.btnText="正在提交数据,请稍后...";
        this.apipost("/api/MContent/SetTenantMenu", setArray, res => {
          if (res.data.resultCode == 1) {
            this.getPageList();
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
          this.isDisabled = false;
          this.btnText="保存";
        })
      },
    },
    mounted() {
      this.TenantId = this.getLocalStorage().TenantId;
      this.getPageList();
    }
  };

</script>