<!--
 * @Description:
 * @Version: 1.0
 * @Author: Drama
 * @Date: 2022-09-14 11:09:43
 * @LastEditors: Drama
 * @LastEditTime: 2022-09-16 14:49:14
 * @FilePath: /haoban-3/src/views/enterprise/guide-setting-copy.vue
 * Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<template>
  <div class="app-detail-wrap">
    <div class="border-box p-t-30 p-l-26 p-r-211">
      <el-form v-model="roleForm" label-width="100px">
        <el-form-item label="应用权限" required>
          <div class="dis-f">
            <div class="title-wrap border-box border-radio-2">
              <div class=" border-box tag-wrap F-S-14 F-C-BLACK dis-center border-radio-2 cursor-pointer" v-for="(item, index) in titleList" :key="index" :class="[activeNum == index ? 'checked-status' : '', item.isEmpty ? 'empted-status' : '']" @click="chooseType(index)">{{ item.title }}</div>
            </div>
            <div v-if="isShowErrorTip" class="error-tip border-box border-radio-2">
              <i class="el-icon-warning"></i>
              <div class="F-C-BLACK F-S-12 m-l-9">当前有未填项</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="" prop="" class="">
          <!-- TODO: 权限树 是否使用vue-gic-auth-tree组件 -->
          <!-- <div class="right-config">
            <div class="title">
              <p>权限设置</p>
            </div>
          </div> -->
          <!-- <div class="right-wrap_ account-limit-wrap expend" v-loading="loading">
            <elNewTree :data="treeData" show-checkbox ref="tree1" node-key="rightId" :default-checked-keys="withoutParents" :default-expanded-keys="setDefaultExpandedKeys(treeData)" :props="defaultProps"> </elNewTree>
          </div> -->
          <vue-gic-auth-tree class="auth-tree" :data="treeData" show-checkbox ref="tree" node-key="menuCode" :default-checked-keys="withoutParents" default-expand-all :props="defaultProps" showButtonFlag></vue-gic-auth-tree>
        </el-form-item>
      </el-form>
    </div>
    <!-- TODO: save按钮 -->
    <div class="fixed-save-btn border-box" v-if="$getButtonLimit($buttonCode.saveGoodsSet)">
      <el-button :limit-code="$buttonCode.saveGoodsSet" type="primary" :loading="loading" @click="submit" :disabled="$store.state.wxEnterpriseType">保存</el-button>
    </div>
  </div>
</template>

<script>
import elNewTree from '@/components/tree/tree';
import { deepClone, debounce, arrToTree } from '@/utils';
import { getRequest } from '@/api/api';

export default {
  name: 'GuideSetting',
  components: { elNewTree },
  data() {
    return {
      roleForm: {},
      titleList: [
        { title: '导购', isEmpty: false },
        { title: '店长', isEmpty: false },
        { title: '区经/督导', isEmpty: false }
      ],
      activeNum: 0,
      defaultProps: {
        children: 'menuBOList',
        label: 'menuName'
      },
      withoutParents: [], //不包含父节点
      treeData: [],
      withoutParents_0: [],
      withoutParents_1: [],
      withoutParents_2: [],
      curMenuCode_0: [], // 拷贝当前节点了的按钮
      curMenuCode_1: [],
      curMenuCode_2: [],
      roleId_0: '',
      roleId_1: '',
      roleId_2: '',
      copyMenu: [],
      loading: false,
      isShowErrorTip: false
    };
  },
  computed: {
    setDefaultExpandedKeys() {
      return treeData => treeData.map(el => el.rightId);
    }
  },
  mounted() {
    // TODO: 测试数据
    // this.treeData = [
    //   {
    //     menuCode: 'workbench',
    //     menuName: '工作台',
    //     menuUrl: 'pages/workbench/workbench',
    //     iconUrl: '',
    //     menuLevel: null,
    //     menuType: 0,
    //     menuSort: 0,
    //     parentCode: 0,
    //     statusFlag: 1,
    //     createTime: 1663145657000,
    //     updateTime: 1663145657000,
    //     routePath: '',
    //     menuBOList: [
    //       {
    //         menuCode: 'dataSummary',
    //         menuName: '数据面板',
    //         menuUrl: 'pages/workbench/workbench',
    //         iconUrl: '',
    //         menuLevel: null,
    //         menuType: 1,
    //         menuSort: 0,
    //         parentCode: 'workbench',
    //         statusFlag: 1,
    //         createTime: 1663145657000,
    //         updateTime: 1663145657000,
    //         routePath: '',
    //         menuBOList: []
    //       },
    //       {
    //         menuCode: 'customer',
    //         menuName: '我的顾客',
    //         menuUrl: 'pages/workbench/workbench',
    //         iconUrl: '',
    //         menuLevel: null,
    //         menuType: 1,
    //         menuSort: 0,
    //         parentCode: 'workbench',
    //         statusFlag: 1,
    //         createTime: 1663145658000,
    //         updateTime: 1663145658000,
    //         routePath: 'pages/hbapp/customer/list/list',
    //         menuBOList: [
    //           {
    //             menuLevel: null,
    //             menuName: '全品牌搜索',
    //             updateTime: 1663145658000,
    //             routePath: 'pages/hbapp/customer/list/search/search',
    //             menuUrl: 'pages/hbapp/customer/list/list',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerList_allSearch',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '分配会员',
    //             updateTime: 1663145658000,
    //             routePath: 'pages/hbapp/customer/distributeMember/distributeMember',
    //             menuUrl: 'pages/hbapp/customer/list/list',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerList_distribute',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '离职继承',
    //             updateTime: 1663145658000,
    //             routePath: 'pages/hbapp/customer/dimissionInherit/inheritMain/inheritMain',
    //             menuUrl: 'pages/hbapp/customer/list/list',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerList_inheritCustomer',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '群发助手',
    //             updateTime: 1663145658000,
    //             routePath: 'pages/hbapp/customer/massTextingAssistant/massTextingDetail/massTextingDetail',
    //             menuUrl: 'pages/hbapp/customer/list/list',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerList_massAssistant',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '会员导出',
    //             updateTime: 1663145658000,
    //             routePath: 'pages/hbapp/customer/fileExport/exportList/exportList',
    //             menuUrl: 'pages/hbapp/customer/list/list',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerList_customerExport',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '导购二维码',
    //             updateTime: 1663145658000,
    //             routePath: 'pages/hbapp/customer/list/guideQRCode/guideQRCode',
    //             menuUrl: 'pages/hbapp/customer/list/list',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerList_clerkQRCode',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '联系好友',
    //             updateTime: 1663145658000,
    //             routePath: '',
    //             menuUrl: 'pages/hbapp/customer/detail/detail',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerDetail_connectFriend',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '添加好友',
    //             updateTime: 1663145658000,
    //             routePath: '',
    //             menuUrl: 'pages/hbapp/customer/detail/detail',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerDetail_addFriend',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '电话',
    //             updateTime: 1663145658000,
    //             routePath: '',
    //             menuUrl: 'pages/hbapp/customer/detail/detail',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerDetail_call',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '短信',
    //             updateTime: 1663145658000,
    //             routePath: '',
    //             menuUrl: 'pages/hbapp/customer/detail/detail',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerDetail_smsMsg',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '分配导购',
    //             updateTime: 1663145658000,
    //             routePath: 'pages/hbapp/customer/detail/changeGuide/changgeGuide',
    //             menuUrl: 'pages/hbapp/customer/detail/detail',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerDetail_mainClerkExchange',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '打标签',
    //             updateTime: 1663145658000,
    //             routePath: '',
    //             menuUrl: 'pages/hbapp/customer/detail/detail',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerDetail_mark',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           },
    //           {
    //             menuLevel: null,
    //             menuName: '客户跟进',
    //             updateTime: 1663145658000,
    //             routePath: 'pages/hbapp/customer/list/guideQRCode/guideQRCode',
    //             menuUrl: 'pages/hbapp/customer/detail/detail',
    //             parentCode: 'customer',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'customerDetail_clerkQRCode',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           }
    //         ]
    //       },
    //       {
    //         menuCode: 'marketingTask',
    //         menuName: '营销任务',
    //         menuUrl: 'pages/workbench/workbench',
    //         iconUrl: '',
    //         menuLevel: null,
    //         menuType: 1,
    //         menuSort: 0,
    //         parentCode: 'workbench',
    //         statusFlag: 1,
    //         createTime: 1663145658000,
    //         updateTime: 1663145658000,
    //         routePath: 'pages/hbapp/marketingTask/taskList/taskList',
    //         menuBOList: [
    //           {
    //             menuLevel: null,
    //             menuName: '指派任务',
    //             updateTime: 1663145658000,
    //             routePath: 'pages/hbapp/task/phoneTaskDistribute/phoneTaskDistribute',
    //             menuUrl: 'pages/hbapp/marketingTask/phoneTaskList/phoneTaskList',
    //             parentCode: 'marketingTask',
    //             createTime: 1663145658000,
    //             menuBOList: [],
    //             menuCode: 'marketingTaskList_distribute',
    //             menuType: 1,
    //             iconUrl: '',
    //             menuSort: 0,
    //             statusFlag: 1
    //           }
    //         ]
    //       },
    //       {
    //         menuCode: 'dashboard',
    //         menuName: '看数据',
    //         menuUrl: 'pages/workbench/workbench',
    //         iconUrl: '',
    //         menuLevel: null,
    //         menuType: 1,
    //         menuSort: 0,
    //         parentCode: 'workbench',
    //         statusFlag: 1,
    //         createTime: 1663145658000,
    //         updateTime: 1663145658000,
    //         routePath: 'pages/hbapp/reportManagement/summaryReport/summaryReport',
    //         menuBOList: []
    //       },
    //       {
    //         menuCode: 'dailyReport',
    //         menuName: '云日报',
    //         menuUrl: 'pages/workbench/workbench',
    //         iconUrl: '',
    //         menuLevel: null,
    //         menuType: 1,
    //         menuSort: 0,
    //         parentCode: 'workbench',
    //         statusFlag: 1,
    //         createTime: 1663145658000,
    //         updateTime: 1663145658000,
    //         routePath: 'pages/hbapp/dailyReport/list/list',
    //         menuBOList: []
    //       },
    //       {
    //         menuCode: 'kpi',
    //         menuName: '月指标',
    //         menuUrl: 'pages/workbench/workbench',
    //         iconUrl: '',
    //         menuLevel: null,
    //         menuType: 1,
    //         menuSort: 0,
    //         parentCode: 'workbench',
    //         statusFlag: 1,
    //         createTime: 1663145658000,
    //         updateTime: 1663145658000,
    //         routePath: 'pages/hbapp/kpi/monthlyList/monthlyList',
    //         menuBOList: []
    //       },
    //       {
    //         menuCode: 'commodityCenter',
    //         menuName: '商品中心',
    //         menuUrl: 'pages/workbench/workbench',
    //         iconUrl: '',
    //         menuLevel: null,
    //         menuType: 1,
    //         menuSort: 0,
    //         parentCode: 'workbench',
    //         statusFlag: 1,
    //         createTime: 1663145658000,
    //         updateTime: 1663145658000,
    //         routePath: 'pages/hbapp/commodityCenter/commodityList/commondityList',
    //         menuBOList: []
    //       },
    //       {
    //         menuCode: 'orderComment',
    //         menuName: '订单评价',
    //         menuUrl: 'pages/workbench/workbench',
    //         iconUrl: '',
    //         menuLevel: null,
    //         menuType: 1,
    //         menuSort: 0,
    //         parentCode: 'workbench',
    //         statusFlag: 1,
    //         createTime: 1663145658000,
    //         updateTime: 1663145658000,
    //         routePath: 'pages/hbapp/orderComment/orderComment/orderComment',
    //         menuBOList: []
    //       },
    //       {
    //         menuCode: 'writeOff',
    //         menuName: '扫码核销',
    //         menuUrl: 'pages/workbench/workbench',
    //         iconUrl: '',
    //         menuLevel: null,
    //         menuType: 1,
    //         menuSort: 0,
    //         parentCode: 'workbench',
    //         statusFlag: 1,
    //         createTime: 1663145658000,
    //         updateTime: 1663145658000,
    //         routePath: 'pages/hbapp/cancelVerification/scan/scan',
    //         menuBOList: []
    //       },
    //       {
    //         menuCode: 'commission',
    //         menuName: '订单评价',
    //         menuUrl: 'pages/workbench/workbench',
    //         iconUrl: '',
    //         menuLevel: null,
    //         menuType: 1,
    //         menuSort: 0,
    //         parentCode: 'workbench',
    //         statusFlag: 1,
    //         createTime: 1663145658000,
    //         updateTime: 1663145658000,
    //         routePath: 'pages/hbapp/commission/commissionReport/commissionReport',
    //         menuBOList: []
    //       }
    //     ]
    //   }
    // ];
    this.getMenuRoleList();
  },
  methods: {
    chooseType(index) {
      this.titleList.forEach(item => {
        item.isEmpty = false;
      });
      let isChooseList = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
      // 切换tab时 缓存上个tag选择的节点
      this['withoutParents_' + this.activeNum] = [...isChooseList];
      this.activeNum = index;
      this.treeData = deepClone(this.copyMenu);
      this.withoutParents = this['withoutParents_' + this.activeNum];
      this.isShowErrorTip = false;
      this.activeNum = index;
    },
    // TODO: 获取类型选择菜单
    getQueryMenuList() {
      // index 当前页签
      let clerkType = 0;
      if (this.activeNum == 2) {
        clerkType = 3;
      } else {
        clerkType = this.activeNum;
      }
      let params = {
        clerkType
      };
      getRequest('/haoban-manage3-web/role/queryMenuByClerkType', params).then(res => {
        if (res.data.code == 0) {
          if (res.data.result) {
            // 接口当前选中
            this.treeData = deepClone(this.copyMenu);
            let resData = res.data;
            let menuCodes = ['customerList_allSearch', 'workbench', 'customer'];
            // let menuCodes = resData.result.menuCodes;
            this['roleId_' + this.activeNum] = resData.result.roleId;
            this['curMenuCode_' + this.activeNum] = [...menuCodes]; // 保存当前类别选中状态，保存的时候用用于记录操作的区别
            let assginArr = [...new Set(this['withoutParents_' + this.activeNum].concat(menuCodes))];
            this.withoutParents = [...assginArr];
            console.log(assginArr, '去重');
            console.log(this.withoutParents, '当前-----');
          } else {
            this.treeData = deepClone(this.copyMenu);
            this.withoutParents = [];
            console.log(this.withoutParents, 'aasdsadsa');
          }
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // TODO: 获取菜单列表
    getMenuRoleList() {
      const that = this;
      let query = {
        clerkType: this.activeNum
      };
      getRequest('/haoban-manage3-web/role/getHaobanMenuTreeList', query).then(res => {
        if (res.data.code == 0) {
          if (res.data.result) {
            let resData = res.data;
            let arr = resData.result;

            arr.forEach(item => {
              if (item.menuType == 0) {
                item.parentCode = 0;
              }
              if (item.menuBOList.length) {
                item.menuBOList = item.menuBOList.filter(data => data.menuType != 2);
              }
            });
            that.treeData = arrToTree(arr, 0, { idName: 'menuCode', parentIdName: 'parentCode', childName: 'menuBOList' });
            that.copyMenu = deepClone(that.treeData);
            that.getQueryMenuList();
          } else {
            this.treeData = [];
          }
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    submit: debounce(function() {
      let currentChooseList = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
      this['withoutParents_' + this.activeNum] = [...currentChooseList];
      console.log(this.withoutParents_0);
      console.log(this.withoutParents_1);
      console.log(this.withoutParents_2);
      let errFlag_0 = this.withoutParents_0.length ? true : false;
      let errFlag_1 = this.withoutParents_1.length ? true : false;
      let errFlag_2 = this.withoutParents_2.length ? true : false;
      if (!errFlag_0 || !errFlag_1 || !errFlag_2) {
        this.$set(this.titleList[0], 'isEmpty', !errFlag_0);
        this.$set(this.titleList[1], 'isEmpty', !errFlag_1);
        this.$set(this.titleList[2], 'isEmpty', !errFlag_2);
      }
    })
  }
};
</script>
<style lang="scss">
.auth-tree .iconfont.auth-expanded {
  font-family: 'element-icons' !important;
}
.auth-tree .el-tree-node__expand-icon.auth-tree-arrow {
  font-family: 'element-icons' !important;
}
</style>
<style lang="less" scoped>
.el-icon-warning {
  width: 12px;
  font-size: 12px;
  color: #fa8c16;
}

.m-l-9 {
  margin-left: 9px;
}

.p-l-26 {
  padding-left: 26px;
}

.p-r-211 {
  padding-right: 211px;
}

.F-S-14 {
  font-size: 14px;
}

.F-S-12 {
  font-size: 12px;
}

.F-C-BLACK {
  color: #303133;
}

.border-radio-2 {
  border-radius: 2px;
}

.dis-f {
  display: flex;
}

.p-t-30 {
  padding-top: 30px;
}

.damolish .el-button {
  padding: 8px 26px;
}

.dis-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-detail-wrap {
  height: 100%;
  background: #fff;
  .title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4px 13px 4px 4px;
    width: 201px;
    height: 32px;
    /* transform: translateY(-5px); */
    border: 1px solid #dcdfe6;
    background: #ffffff;
    .tag-wrap {
      padding: 0px 10px;
      height: 24px;
    }
    .checked-status {
      background: #ebeffe;
      color: #2f54eb;
    }

    .empted-status {
      color: #f5222d;
      background: rgba(245, 34, 45, 0.11);
    }
  }
  .error-tip {
    display: flex;
    align-items: center;
    width: 129px;
    padding: 4px 0px 4px 17px;
    height: 32px;
    margin-left: 8px;
    background: #fcf6f1;
  }
  .right-config {
    font-size: 14px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      box-sizing: border-box;
      padding: 15px 20px 15px 30px;
      color: #303133;
      border: 1px solid #e4e7ed;
      p {
        font-weight: 600;
      }
    }
  }
}
/*  权限设置 */
.account-limit-wrap {
  font-size: 0px;
  .limit-item {
    display: flex;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-bottom: 10px;
    .fl-item {
      flex: 0 0 225px;
      width: 225px;
      background: rgb(246, 246, 246);
      border-right: 1px solid #dcdfe6;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      justify-content: center;
      align-items: center;
      .opr-icon {
        color: #919191;
        font-size: 13px;
        padding: 6px 3px 3px;
        margin-right: 12px;
        cursor: pointer;
      }
    }
    .fr-item {
      flex: 1;
      width: 100%;
      color: #595959;
      .item-title {
        height: 45px;
        line-height: 45px;
        padding-left: 20px;
        font-weight: 500;
        background: rgb(246, 246, 246);
      }
    }
  }
}
.expend {
  height: auto;
}
.right-wrap_ {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.fixed-save-btn {
  position: fixed;
  display: flex;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  align-items: center;
  justify-content: center;
  bottom: 0;
  width: calc(100% - 206px);
  height: 56px;
  background: #ffffff;
  box-shadow: 1px -2px 8px 0px rgba(220, 223, 230, 0.6);
}
</style>
