<!-- @format -->

<template>
  <div class="form-group">
    <div class="controls" style="line-height: 26px">
      <div
        class="p-tabMenu-wrap-outSide"
        style="margin: 0 0px 13px"
        v-if="menuItems && menuItems.length > 1">
        <div class="p-tabMenu-wrap-inside">
          <!-- <p-tabMenu :model"menuItems" :activeItem="activeMenuItem"></p-tabMenu>
        <a-tabs v-model:activeKey="activeMenuItem" tab-position="top"
                   @change="(e) => onChangeTab(e)">
          <a-tab-pane v-for="menuItem in menuItems" :key="menuItem.type" :tab="menuItem.label" :closable="false">
              {{ menuItem.label }}
            </a-tab-pane>
        </a-tabs> -->

          <a-radio-group
            v-model:value="activeMenuItem"
            button-style="solid"
            @change="(e) => onChangeTab(e)">
            <a-radio-button
              v-for="menuItem in menuItems"
              :key="menuItem.type"
              :value="menuItem.type"
              >{{ menuItem.label }}</a-radio-button
            >
          </a-radio-group>
        </div>
      </div>
      <ul class="m1-wrap"
        ><!-- 包裹所有注册权限-->
        <li class="m1-item" v-for="tempGoal in goals"
          ><!-- 某个app 如：外部网络-->
          <div class="menus-wrap">
            <!-- app名称-->
            <div class="m1-title">
              <input
                type="checkbox"
                :checked="tempGoal[checkedKey]"
                @change="change(tempGoal, null, null, null, null, null)" />
              <!-- :disabled="readonly" -->
              <strong>{{ tempGoal.label }}</strong>
            </div>
            <!-- 数据权限 -->
            <div
              class="data-auth-wrap"
              v-if="tempGoal['codeDataScope'] && tempGoal['codeDataScope']['status'] == 1">
              <div class="field-item">
                <label> 数据权限: </label>
                <div class="stack-dropdown" style="width: 278px; margin-right: 6px">
                  <a-select
                    v-model:value="tempGoal['codeDataScopeValue']['deptScopeType']"
                    style="width: 200px"
                    :options="dataAuthOptions"
                    @change="(e) => onSelect(e, tempGoal)" />
                </div>
              </div>
              <div
                class="field-item"
                v-if="
                  tempGoal['codeDataScopeValue'] &&
                  tempGoal['codeDataScopeValue']['deptScopeType'] == 5
                ">
                <template v-if="tempGoal['codeDataScopeValue']['deptStr']">
                  <div class="selectedData">
                    {{ tempGoal['codeDataScopeValue']['deptStr'] }}
                  </div>
                </template>

                <button class="btn-prime" @click="selectDepartment(tempGoal)">选择</button>
              </div>
            </div>
          </div>
          <ul class="m2-wrap"
            ><!-- 包裹app下面的菜单-->
            <!-- 一级菜单项-->
            <li class="m2-item" v-for="subGoal1 in tempGoal['menus']">
              <!-- 1、一级菜单项父级包裹层-->
              <div class="menus-wrap">
                <!-- 一级菜单项名称-->
                <div class="m2-title">
                  <input
                    type="checkbox"
                    :checked="subGoal1[checkedKey]"
                    @change="change(tempGoal, subGoal1, null, null, null, null)" />
                  <!-- :disabled="readonly" -->
                  <strong>{{ subGoal1.label }}</strong>
                </div>
                <!-- ***** 全选功能 ******* -->
                <div
                  class="m2-title m2-title-checkAll"
                  v-if="subGoal1['checkAll'] && subGoal1['checkAll']['show']">
                  <input
                    type="checkbox"
                    :checked="subGoal1['checkAll'][checkedKey]"
                    @change="change(tempGoal, subGoal1, null, null, null, null, true)" />
                  <!-- :disabled="readonly" -->
                  <strong>全选</strong>
                </div>
                <!-- 一级菜单项下面的操作项-->
                <ul class="m3-wrap">
                  <li class="m3-item">
                    <span v-for="operation in subGoal1['operations']">
                      <input
                        type="checkbox"
                        :checked="operation[checkedKey]"
                        @change="change(tempGoal, subGoal1, null, null, null, operation)" />
                      <!-- :disabled="readonly" -->
                      {{ operation.label }}
                    </span>
                  </li>
                </ul>
              </div>
              <!-- 2、二级菜单项子级包裹层-->
              <ul class="submenus-wrap" v-if="subGoal1['menus']">
                <li class="submenus-item" v-for="subGoal2 in subGoal1['menus']">
                  <div class="menus-wrap">
                    <!-- 二级菜单项名称-->
                    <div class="m2-title">
                      <input
                        type="checkbox"
                        :checked="subGoal2[checkedKey]"
                        @change="change(tempGoal, subGoal1, subGoal2, null, null, null)" />
                      <!-- :disabled="readonly" -->
                      <strong>{{ subGoal2.label }}</strong>
                    </div>
                    <!-- 二级菜单项下面的操作-->
                    <ul class="m3-wrap">
                      <li class="m3-item">
                        <span v-for="operation in subGoal2['operations']">
                          <input
                            type="checkbox"
                            :checked="operation[checkedKey]"
                            @change="change(tempGoal, subGoal1, subGoal2, null, null, operation)" />
                          <!-- :disabled="readonly" -->
                          {{ operation.label }}
                        </span>
                      </li>
                    </ul>
                  </div>
                  <!-- 3、三级菜单项子级包裹层-->
                  <ul class="submenus-wrap" v-if="subGoal2['menus']">
                    <li class="submenus-item" v-for="subGoal3 in subGoal2['menus']">
                      <div class="menus-wrap">
                        <!-- 三级菜单项名称-->
                        <div class="m2-title">
                          <input
                            type="checkbox"
                            :checked="subGoal3[checkedKey]"
                            @change="change(tempGoal, subGoal1, subGoal2, subGoal3, null, null)" />
                          <!-- :disabled="readonly" -->
                          <strong>{{ subGoal3.label }}</strong>
                        </div>
                        <!-- 三级菜单项下面的操作-->
                        <ul class="m3-wrap">
                          <li class="m3-item">
                            <span v-for="operation in subGoal3['operations']">
                              <input
                                type="checkbox"
                                :checked="operation[checkedKey]"
                                @change="
                                  change(tempGoal, subGoal1, subGoal2, subGoal3, null, operation)
                                " />
                              <!-- :disabled="readonly" -->
                              {{ operation.label }}
                            </span>
                          </li>
                        </ul>
                      </div>
                      <!-- 4、四级菜单项子级包裹层-->
                      <ul class="submenus-wrap" v-if="subGoal3['menus']">
                        <li class="submenus-item" v-for="subGoal4 in subGoal3['menus']">
                          <div class="menus-wrap">
                            <!-- 四级菜单项名称-->
                            <div class="m2-title">
                              <input
                                type="checkbox"
                                :checked="subGoal4[checkedKey]"
                                @change="
                                  change(tempGoal, subGoal1, subGoal2, subGoal3, subGoal4, null)
                                " />
                              <!-- :disabled="readonly" -->
                              <strong>{{ subGoal4.label }}</strong>
                            </div>
                            <!-- 四级菜单项下面的操作-->
                            <ul class="m3-wrap">
                              <li class="m3-item">
                                <span v-for="operation in subGoal4['operations']">
                                  <input
                                    type="checkbox"
                                    :checked="operation[checkedKey]"
                                    @change="
                                      change(
                                        tempGoal,
                                        subGoal1,
                                        subGoal2,
                                        subGoal3,
                                        subGoal4,
                                        operation,
                                      )
                                    " />
                                  <!-- :disabled="readonly" -->
                                  {{ operation.label }}
                                </span>
                              </li>
                            </ul>
                          </div>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  export default defineComponent({
    name: 'RoleAuthority',
    components: {},
    props: {
      field: {
        type: String,
        default: 'resourceCodeMap',
      },
      dataSource: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['change', 'updata:longLat', 'validate', 'getChildrenOptions'],
    setup(props, { emit }) {
      let goals = ref([]);
      let checkedKey = ref('checked');
      let type = ref();
      let dataValid = ref(false);
      let menuItems = ref([]); // 所有分类的tab
      let activeMenuItem = ref(); // 当前active状态的tab
      let deactiveMenuItem = ref();
      let menuGoalsMap = ref({}); // 所有分类模块信息
      let allCheckedMap = ref({ common: [] }); // 所有分类中已勾选信息保存
      let checkedValidMap = ref({}); // 各个分类模块的校验
      // let form = roleDataAuthForm();
      let dataAuthMode = ref(0); // 数据权限模式
      let dataAuthOptions = ref([]); // 数据权限可选项
      let daDefaultValue = ref(); // 数据权限默认选中值
      let departmentsMap = ref({}); // 数据权限可选部门信息
      let allResources = ref([]); // 所有权限注册信息
      let appDataAuthScopeMap = ref({}); // 所有分类模块的数据权限模式信息
      let gloabalDataAuthMap = ref({}); //  所有分类模块的数据权限存储信息
      let readonly = ref(false);
      let propsDataSource = ref({});
      // if (props) {
      //   dataSource.value = props.hikMenuCarSaveFormList;
      //   emit('change', dataSource.value);
      // }
      // const changeTable = (item) => {
      //   emit('change', currentList);
      // };
      let dataAuthOptionsList = [
        {
          label: '全部',
          value: 1,
        },
        {
          label: '自己',
          value: 2,
        },
        {
          label: '本部门',
          value: 3,
        },
        {
          label: '本部门及其下属部门',
          value: 4,
        },
        {
          label: '自选部门',
          value: 5,
        },
      ];
      propsDataSource.value = JSON.parse(JSON.stringify(props.dataSource));
      dataAuthMode.value =
        propsDataSource.value && propsDataSource.value['dataAuthMode']
          ? propsDataSource.value['dataAuthMode']
          : 0;
      if (dataAuthMode.value == 2) {
        dataAuthOptions.value = dataAuthOptionsList;
        daDefaultValue.value = dataAuthOptionsList[1]['value'];
        loadDepartment(); // 先获取部门信息再渲染权限
      } else {
        // 获取所有权限信息
        if (propsDataSource.value && propsDataSource.value['allResources']) {
          getProjectGoals(propsDataSource.value['allResources']);
        }
      }

      console.log('ddddd', props);
      function onSelect(item, goal) {
        if (item) {
          if (Object.keys(goal['codeDataScopeValue']).length == 0) {
            // 存储数据权限
            let dataScope = {
              scopeType: 'dept',
              deptList: [],
              deptScopeType: item['value'],
            };
            if (item['value'] == 5) {
              // 自选部门
              dataScope['deptList'] = propsDataSource.value['checkedKeys'];
            }
            goal['codeDataScopeValue'] = dataScope;
          } else {
            goal['codeDataScopeValue']['deptScopeType'] = item['value'];
            if (item['value'] != 5) {
              // 非自选部门，清楚已选择的部门信息
              goal['codeDataScopeValue']['deptList'] = [];
              goal['codeDataScopeValue']['deptStr'] = '';
            }
          }
        }
      }

      function selectDepartment(goal) {
        // const modalRef = modalService.open(FormModal, {backdrop: 'static', size: 'lg'});
        // modalRef.componentInstance.title = '选择部门';
        // modalRef.componentInstance.form = roleDataAuthForm();
        // const codeDataScopeValue = goal['codeDataScopeValue'];
        // let data = {};
        // if (codeDataScopeValue) {
        //   data['deptList'] = codeDataScopeValue['deptList'] ? JSON.parse(JSON.stringify(codeDataScopeValue['deptList'])) : [];
        // }
        // // const deptList = goal['codeDataScopeValue'] && goal['codeDataScopeValue']['deptList'] ? goal['codeDataScopeValue']['deptList'] : [];
        // modalRef.componentInstance.data = data;
        // const thisObj = this;
        // const instance = modalRef.componentInstance;
        // modalRef.result.then(result => {
        //   if (result == 'ok') {
        //     if (goal['codeDataScopeValue'] && goal['codeDataScopeValue']) {
        //       goal['codeDataScopeValue']['deptList'] = instance.data && instance.data['checkedKeys'] ? instance.data['checkedKeys'] : [];
        //       goal['codeDataScopeValue']['deptItems'] = instance.data && instance.data['deptList'] ? instance.data['deptList'] : [];
        //       if (instance.data && instance.data['deptList']) {
        //         goal['codeDataScopeValue']['deptStr'] = thisObj.getDepartmentDisplay(null, instance.data['deptList']);
        //       }
        //     }
        //   }
        // });
      }

      function loadDepartment() {
        http.get('/api/community/objs/Department').then((res) => {
          if (res && res['success'] && res['data'] && res['data']['data']) {
            res['data']['data'].forEach((it) => {
              departmentsMap.value[it['departmentUuid']] = it['departmentName'];
            });
            // 所有权限注册信息
            if (propsDataSource.value && propsDataSource.value['allResources']) {
              getProjectGoals(propsDataSource.value['allResources']);
            }
          }
        });
      }

      function getDepartmentDisplay(goal, list?: Array<object>): string {
        let displayStr = '';
        // 已有勾选数据
        if (goal) {
          const checkedKeys = goal['codeDataScopeValue']['deptList'];
          if (checkedKeys && checkedKeys instanceof Array && checkedKeys.length > 0) {
            checkedKeys.forEach((key, index) => {
              displayStr = displayStr + departmentsMap.value[key];
              displayStr += index == checkedKeys.length - 1 ? '' : ',';
            });
          }
        }
        if (list) {
          list.forEach((item, index) => {
            displayStr = displayStr + item['departmentName'];
            displayStr += index == list.length - 1 ? '' : ',';
          });
        }
        return displayStr;
      }

      // 切换不同模块
      function onChangeTab(item) {
        // 切换成功tab之前，
        if (
          deactiveMenuItem.value &&
          deactiveMenuItem.value &&
          menuGoalsMap.value[deactiveMenuItem.value]
        ) {
          // 1. 将当前激活的tab里面的信息存储到menuModulesMap中
          menuGoalsMap.value[deactiveMenuItem.value] = goals.value ? goals.value : [];
          // 2. 保存已勾选的数据信息到allCheckedMap
          buildAuthority();
        }
        // 存储完成后，赋值最新激活tab
        activeMenuItem.value = item.target.value;
        deactiveMenuItem.value = activeMenuItem.value;
        if (
          activeMenuItem.value &&
          activeMenuItem.value &&
          menuGoalsMap.value[activeMenuItem.value]
        ) {
          goals.value = menuGoalsMap.value[activeMenuItem.value];
        } else {
          goals.value = [];
        }
        if (!item['checked']) {
          // 1. 该菜单未曾被点击过，则权限数据来自于data，2.如果被点击过，则权限数据保留goals.value中被操作的状态
          setAuthorityFromData();
          item['checked'] = true;
        }
      }

      function getProjectGoals(response) {
        // goals.value = Goals;
        // const configMap = Goals; // 资源配置
        const configArr = response; // 资源配置
        // const appGoal = { // app内容
        //   name: configMap['name'],
        //   label: configMap['label'], // 以前端命名的label来显示菜单名称
        //   menus: menuGoals,
        // };
        menuItems.value = [];
        allCheckedMap.value = { common: [] };
        if (configArr instanceof Array) {
          configArr.forEach((dataItem) => {
            const menuGoals = []; // app下面菜单
            /** 获取所有模块，形成tabMenus*/
            const appLabel = dataItem['appLabel'] ? dataItem['appLabel'] : dataItem['appId'];
            menuItems.value.push({
              label: appLabel,
              type: dataItem['appId'],
            });
            allCheckedMap.value[dataItem['appId']] = [];
            appDataAuthScopeMap.value[dataItem['appId']] = dataItem['dataScope'];
            const appId = dataItem['appId'];
            const menus = dataItem && dataItem['menus'] ? dataItem['menus'] : [];
            if (menus && menus instanceof Array) {
              menus.forEach((menu) => {
                const goal = {
                  appId: appId,
                  code: menu['code'],
                  icon: menu['icon'],
                  label: menu['label'],
                  type: menu['type'] == 'noChildrenMenu' ? 'menus' : menu['type'],
                  url: menu['url'],
                  operations: [],
                };
                // 接口
                if (menu['backApi']) {
                  goal['backApi'] = menu['backApi'];
                }
                // 数据权限配置
                if (menu['codeDataScope']) {
                  const codeDataScope = menu['codeDataScope'];
                  goal['codeDataScope'] = codeDataScope;
                  if (codeDataScope['status'] == 1 && codeDataScope['scopeType'] == 'dept') {
                    let dataScopeValue = {
                      scopeType: codeDataScope['scopeType'],
                      deptList: [],
                      deptScopeType: daDefaultValue.value, // 默认选择自己，deptList为空
                    };
                    goal['codeDataScopeValue'] = dataScopeValue;
                  }
                }
                // 下一级别菜单
                if (menu['menus']) {
                  goal['menus'] = [];
                  transferAuthGoal(menu, goal, menuGoals, appId);
                }
                menuGoals.push(goal);
              });
            }
            menuGoalsMap.value[appId] = menuGoals;
          });
          if (menuItems.value && menuItems.value.length > 0) {
            // menuItems.value[0]['clicked'] = true;
            activeMenuItem.value = menuItems.value[0].type;
            deactiveMenuItem.value = activeMenuItem.value;
          }
        }
        /**
         * 转换模块赋值
         */
        if (
          activeMenuItem.value &&
          activeMenuItem.value &&
          menuGoalsMap.value[activeMenuItem.value]
        ) {
          goals.value = menuGoalsMap.value[activeMenuItem.value];
        } else {
          goals.value = [];
        }

        /***************************** 获得当前角色权限并显示 *************************************/
        setAuthorityFromData();
      }

      // 根据已有权限设置勾选状态
      function setAuthorityFromData() {
        const roleAuthorityArr = propsDataSource.value[props.field]; // 已勾选模块的uuid
        if (roleAuthorityArr && roleAuthorityArr instanceof Array) {
          const roleAuthMap = {}; // 角色权限map
          const roleDataAuthMap = {}; // 角色数据权限map
          roleAuthorityArr.forEach((roleAuth) => {
            roleAuthMap[roleAuth['appId']] = roleAuth['codeList'] ? roleAuth['codeList'] : [];
            roleDataAuthMap[roleAuth['appId']] = roleAuth['codeDataScopeValue']
              ? roleAuth['codeDataScopeValue']
              : {};
            allCheckedMap.value[roleAuth['appId']] = roleAuth['codeList']
              ? roleAuth['codeList']
              : [];
            checkedValidMap.value[roleAuth['appId']] = !!(
              roleAuth['codeList'] && roleAuth['codeList'].length > 0
            );
          });
          if (!roleAuthMap || Object.keys(roleAuthMap).length === 0) {
            return;
          }
          // menuItems.value[0].type
          menuItems.value.forEach((ele) => {
            // goals.value = menuGoalsMap.value[activeMenuItem.value];
            let temp = menuGoalsMap.value[ele.type];
            temp.forEach((goal) => {
              // 模块授权
              const goalName = goal['code'];
              const primeKey = goal['appId'];
              // goal[checkedKey.value] = false;
              goal[checkedKey.value] = !!roleAuthMap[primeKey].includes(goalName);

              // 操作授权
              if (goal['operations'] && goal['operations'].length > 0) {
                goal['operations'].forEach((operation) => {
                  const operationName = operation['code'];
                  const key = operation['appId'];
                  // operation[checkedKey.value] = false;
                  operation[checkedKey.value] = !!roleAuthMap[key].includes(operationName);
                });
              }
              // 模块数据权限授权
              let codeDataScopeValue = goal['codeDataScopeValue'];
              if (codeDataScopeValue && roleDataAuthMap) {
                const codeDataAuth = roleDataAuthMap[primeKey][goal['code']]; // 当前数据权限信息
                if (codeDataAuth) {
                  if (codeDataAuth['deptScopeType']) {
                    codeDataScopeValue['deptScopeType'] = codeDataAuth['deptScopeType'];
                  }
                  if (codeDataAuth['deptList']) {
                    codeDataScopeValue['deptList'] = codeDataAuth['deptList'];
                  }
                }
                //重赋值
                goal['codeDataScopeValue'] = codeDataScopeValue;
                goal['codeDataScopeValue']['deptStr'] = getDepartmentDisplay(goal);
              }
              // 子菜单
              transferShowAuthGoal(goal, roleAuthMap);
            });
            // 全选数据授权后，检测各个全选按钮是否应该被勾选
            for (let i = 0; i < temp.length; i++) {
              const goal = temp[i];
              if (goal['checkAll'] && goal['checkAll']['show']) {
                if (goal[checkedKey.value]) {
                  // 该模块被勾选才检测其全选按钮
                  checkUpperGoalCheckAll(goal); // 检测该全选按钮是否被勾选
                }
              } else {
                setCheckAllGoal(goal); // 检测含有全选按钮的子模块，全选按钮是否被勾选设置
              }
            }
          });
        }
        emit('change', buildAuthority());
      }

      /** 检测含有全选按钮的子模块，并进行全选按钮是否被勾选设置*/
      function setCheckAllGoal(goal) {
        if (!goal['menus'] || (goal['menus'] && goal['menus'].length === 0)) return;
        if (goal['menus'] && goal['menus'].length > 0) {
          goal['menus'].forEach((subGoal) => {
            if (subGoal['checkAll'] && subGoal['checkAll']['show']) {
              if (subGoal[checkedKey.value]) {
                // 该模块被勾选才检测其全选按钮
                checkUpperGoalCheckAll(subGoal);
              }
            } else {
              setCheckAllGoal(subGoal);
            }
          });
        }
      }

      /**
       * 将权限显示出来
       * @param goal
       * @param goalsMap
       */
      function transferShowAuthGoal(goal, roleAuthMap) {
        if (!goal['menus'] || (goal['menus'] && goal['menus'].length === 0)) return;

        if (goal['menus'] && goal['menus'].length > 0) {
          goal['menus'].forEach((subGoal) => {
            // 模块
            const subGoalName = subGoal['code'];
            // subGoal[checkedKey.value] = false;
            const primeKey = goal['appId'];
            subGoal[checkedKey.value] = !!roleAuthMap[primeKey].includes(subGoalName);
            // 操作授权
            if (subGoal['operations'] && subGoal['operations'].length > 0) {
              subGoal['operations'].forEach((operation) => {
                const operationName = operation['code'];
                const key = operation['appId'];
                // operation[checkedKey.value] = false;
                operation[checkedKey.value] = !!roleAuthMap[key].includes(operationName);
              });
            }
            transferShowAuthGoal(subGoal, roleAuthMap);
          });
        }
      }
      /**
       *
       * @param currentMenu
       * @param currentGoal
       * @param mainGoal
       */
      function transferAuthGoal(currentMenu, currentGoal, mainGoal, appId) {
        if (currentMenu['menus'] && currentMenu['menus'].length === 0) return;
        if (currentMenu['menus'] && currentMenu['menus'].length > 0) {
          currentMenu['menus'].forEach((subMenu) => {
            const subGoal = {
              appId: appId,
              code: subMenu['code'],
              icon: subMenu['icon'],
              label: subMenu['label'],
              type: subMenu['type'] == 'noChildrenMenu' ? 'menus' : subMenu['type'],
              url: subMenu['url'],
              operations: [],
            };
            // 如果是一级菜单，则增加全选按钮
            if (subGoal['type'] === 'menus' || subGoal['type'] === 'noChildrenMenu') {
              subGoal['type'] = 'menus';
              subGoal['checkAll'] = {
                show: true,
              };
            }
            if (subMenu['menus']) {
              subGoal['menus'] = [];
              transferAuthGoal(subMenu, subGoal, currentGoal, appId);
            }
            if (subMenu['type'] === 'op') {
              // 如果是操作，需要放到父节点的后面
              currentGoal['operations'].push(subGoal);
            } else if (subMenu['type'] === 'menus' || subMenu['type'] === 'noChildrenMenu') {
              // 如果是菜单，按正常层级排放
              subMenu['type'] = 'menus';
              currentGoal['menus'].push(subGoal);
            }
          });
        }
      }

      // 勾选/取消 权限
      function change(goal, subGoal1, subGoal2, subGoal3, subGoal4, operation, checkAll?: any) {
        /**
         * ******************** 1 点击模块 **************************
         */
        if (goal && !subGoal1 && !subGoal2 && !subGoal3 && !subGoal4 && !operation) {
          goal[checkedKey.value] = !goal[checkedKey.value];
          traverseCheck(goal);
          /** 根据父模块被勾选状态，则判断其子模块中含有全选按钮的选中状态 */
          if (goal['menus'] && goal['menus'] instanceof Array) {
            goal['menus'].forEach((sub) => {
              if (sub['checkAll'] && sub['checkAll']['show']) {
                if (!goal[checkedKey.value]) {
                  // 父模块未被勾选
                  sub['checkAll'][checkedKey.value] = false;
                } else {
                  // 父模块被勾选
                  checkUpperGoalCheckAll(sub);
                }
              }
            });
          }
        }
        /**
         * 1.1 点击一级模块
         */
        if (goal && subGoal1 && !subGoal2 && !subGoal3 && !subGoal4 && !operation) {
          if (checkAll) {
            // 如果是点击全选按钮
            const checkAllFlag = !subGoal1['checkAll'][checkedKey.value];
            subGoal1['checkAll'][checkedKey.value] = checkAllFlag;
            subGoal1[checkedKey.value] = checkAllFlag;
          } else {
            subGoal1[checkedKey.value] = !subGoal1[checkedKey.value];
          }
          /** 一级模块下的操作勾选状况 */
          if (subGoal1[checkedKey.value]) {
            // 一级模块被勾选
            if (checkAll) {
              // 若勾选全选按钮，则该模块的操作被勾选
              if (subGoal1['operations'] && subGoal1['operations'].length > 0) {
                subGoal1['operations'].forEach((op) => {
                  op[checkedKey.value] = subGoal1[checkedKey.value];
                });
              }
            }
          } else {
            // 一级模块被取消勾选
            if (subGoal1['operations'] && subGoal1['operations'].length > 0) {
              subGoal1['operations'].forEach((op) => {
                op[checkedKey.value] = subGoal1[checkedKey.value];
              });
            }
            // 全选按钮：取消当前模块勾选，目前固定含有全选按钮的一级模块的[全选]按钮应该被取消勾选
            revertUpperGoalCheckAll(subGoal1, subGoal1[checkedKey.value]);
          }
          /*** 该模块下所有模块、操作都与此次操作状态一致*/
          traverseCheck(subGoal1, checkAll);

          /*************************  处理'全选'按钮 时机问题: 待子模块状态确定后，再判断全选按钮状态 ******************************/
          /** todo 后面点击几个模块也存在时机该问题，后面处理*/
          /** 如果该模块是取消勾选状态，则该模块的全选操作也被取消勾选 */
          if (!subGoal1[checkedKey.value]) {
            if (subGoal1['checkAll']) {
              subGoal1['checkAll'][checkedKey.value] = false;
            }
          } else {
            /** 如果该模块是勾选状态，则根据该模块操作以及子模块状态判断 */
            // 勾选二级模块，则需要判断目前固定含有全选按钮的一级模块的[全选]按钮是否应该被勾选
            checkUpperGoalCheckAll(subGoal1);
          }

          /**
           * 父模块状态
           */
          if (subGoal1[checkedKey.value]) {
            goal[checkedKey.value] = true;
          } else {
            goal[checkedKey.value] = false;
            goal['menus'].forEach((sub) => {
              if (sub[checkedKey.value]) {
                goal[checkedKey.value] = true;
              }
            });
          }
        }
        /**
         * 1.2 点击二级模块
         */
        if (goal && subGoal1 && subGoal2 && !subGoal3 && !subGoal4 && !operation) {
          subGoal2[checkedKey.value] = !subGoal2[checkedKey.value];
          if (subGoal2[checkedKey.value]) {
            // 二级模块被勾选
            // 勾选二级模块，则需要判断目前固定含有全选按钮的一级模块的[全选]按钮是否应该被勾选
            checkUpperGoalCheckAll(subGoal1);
          } else {
            // 二级模块被取消勾选
            if (subGoal2['operations'] && subGoal2['operations'].length > 0) {
              subGoal2['operations'].forEach((op) => {
                op[checkedKey.value] = subGoal2[checkedKey.value];
              });
            }

            // 全选按钮：取消当前模块勾选，目前固定含有全选按钮的一级模块的[全选]按钮应该被取消勾选
            revertUpperGoalCheckAll(subGoal1, subGoal2[checkedKey.value]);
          }
          /*** 该模块下所有模块、操作都与此次操作状态一致*/
          traverseCheck(subGoal2);
          /**1 所有父级模块的状态 **/
          if (subGoal2[checkedKey.value]) {
            //二级模块被勾选
            subGoal1[checkedKey.value] = true;
            goal[checkedKey.value] = true;
            checkedUpperGoalList(subGoal1, subGoal2);
          } else {
            checkUpperGoal(subGoal1);
            checkUpperGoal(goal);
          }
        }
        /**
         * 1.3 点击三级模块
         */
        if (goal && subGoal1 && subGoal2 && subGoal3 && !subGoal4 && !operation) {
          subGoal3[checkedKey.value] = !subGoal3[checkedKey.value];
          if (subGoal3[checkedKey.value]) {
            //  三级模块被勾选
            // 勾选三级模块，则需要判断目前固定含有全选按钮的一级模块的[全选]按钮是否应该被勾选
            checkUpperGoalCheckAll(subGoal1);
          } else {
            // 三级模块被取消勾选
            if (subGoal3['operations'] && subGoal3['operations'].length > 0) {
              subGoal3['operations'].forEach((op) => {
                op[checkedKey.value] = subGoal3[checkedKey.value];
              });
            }
            // 全选按钮：取消当前模块勾选，目前固定含有全选按钮的一级模块的[全选]按钮应该被取消勾选
            revertUpperGoalCheckAll(subGoal1, subGoal3[checkedKey.value]);
          }
          /*** 该模块下所有模块、操作都与此次操作状态一致*/
          traverseCheck(subGoal3);
          /**1 所有父级模块的状态 **/
          if (subGoal3[checkedKey.value]) {
            subGoal2[checkedKey.value] = true;
            subGoal1[checkedKey.value] = true;
            goal[checkedKey.value] = true;
            checkedUpperGoalList(subGoal2, subGoal3);
            checkedUpperGoalList(subGoal1, subGoal3);
          } else {
            /* 1.1、二级模块的状态 **/
            //如果二级模块是一个资源标记：如集群下面的管理，如果下面三级模块都没有被勾选，该二级模块也应该不被勾选
            // if (subGoal2['operations'] && subGoal2['operations'].length == 0) {
            //   subGoal2[checkedKey.value] = false;
            //   if (subGoal2['menus'] && subGoal2['menus'].length > 0) {
            //     subGoal2['menus'].forEach(sub => {
            //       if (sub[checkedKey.value]) {   //如果遍历其同级兄弟子模块有被勾选的，则其最近父级模块和查看勾选
            //         subGoal2[checkedKey.value] = true;
            //         subGoal2['operations'].forEach(op => {
            //           if (op['name'] == 'list') {
            //             op[checkedKey.value] = true;
            //           }
            //         });
            //       }
            //     });
            //   }
            // }

            // checkUpperGoal(subGoal2); // 不关联所有父级模块
            checkUpperGoal(subGoal1);
            checkUpperGoal(goal);
          }
        }
        /**
         * 1.4 点击四级模块
         */
        if (goal && subGoal1 && subGoal2 && subGoal3 && subGoal4 && !operation) {
          subGoal4[checkedKey.value] = !subGoal4[checkedKey.value];
          if (subGoal4[checkedKey.value]) {
            //  四级模块被勾选
            // 勾选四级模块，则需要判断目前固定含有全选按钮的一级模块的[全选]按钮是否应该被勾选
            checkUpperGoalCheckAll(subGoal1);
          } else {
            // 四级模块被取消勾选
            if (subGoal4['operations'] && subGoal4['operations'].length > 0) {
              subGoal4['operations'].forEach((op) => {
                op[checkedKey.value] = subGoal4[checkedKey.value];
              });
            }
            // 全选按钮：取消当前模块勾选，目前固定含有全选按钮的一级模块的[全选]按钮应该被取消勾选
            revertUpperGoalCheckAll(subGoal1, subGoal4[checkedKey.value]);
          }
          /*** 该模块下所有模块、操作都与此次操作状态一致*/
          traverseCheck(subGoal4);
          /**1 所有父级模块的状态 **/
          if (subGoal4[checkedKey.value]) {
            subGoal3[checkedKey.value] = true;
            subGoal2[checkedKey.value] = true;
            subGoal1[checkedKey.value] = true;
            goal[checkedKey.value] = true;
            checkedUpperGoalList(subGoal3, subGoal4);
            checkedUpperGoalList(subGoal2, subGoal4);
            checkedUpperGoalList(subGoal1, subGoal4);
          } else {
            // checkUpperGoal(subGoal3); // 不关联所有父级模块
            checkUpperGoal(subGoal2);
            checkUpperGoal(subGoal1);
            checkUpperGoal(goal);
          }
        }

        /**
         * ******************** 2 点击操作 **************************
         */

        /**
         * 2.1点击一级模块的操作项
         */
        if (goal && subGoal1 && !subGoal2 && !subGoal3 && !subGoal4 && operation) {
          operation[checkedKey.value] = !operation[checkedKey.value];

          if (operation[checkedKey.value]) {
            goal[checkedKey.value] = true;
            subGoal1[checkedKey.value] = true;
            //勾选当前模块非list的操作，则当前模块的的查看（list）操作被勾选
            selectedCurrentGoalNotList(operation, subGoal1);
            // todo 判断父级模块的全选按钮： 勾选某个操作，则需要判断该操作所属模块的父模块全选按钮是否应该被勾选
            // 判断本级模块的全选按钮：
            if (subGoal1['checkAll'] && subGoal1['checkAll']['show']) {
              checkUpperGoalCheckAll(subGoal1);
            }
          } else {
            //todo 全选按钮：取消当前操作，则当前模块的的父模块的[全选]按钮应该被取消勾选
            // 全选按钮：取消当前操：则当前模块(一级模块)的[全选]按钮应该被取消勾选
            revertUpperGoalCheckAll(subGoal1, operation[checkedKey.value]);
            //取消当前模块list的操作，则当前模块的的非查看（list）操作被取消勾选
            revertCurrentGoalList(operation, subGoal1);
          }
        }
        /**
         * 2.2点击二级模块的操作项
         */
        if (goal && subGoal1 && subGoal2 && !subGoal3 && !subGoal4 && operation) {
          operation[checkedKey.value] = !operation[checkedKey.value];

          if (operation[checkedKey.value]) {
            goal[checkedKey.value] = true;
            subGoal1[checkedKey.value] = true;
            subGoal2[checkedKey.value] = true;
            //该模块最近父级模块的若有查看操作，则勾选上
            if (subGoal1['operations'] && subGoal1['operations'].length > 0) {
              subGoal1['operations'].forEach((op) => {
                if (op['name'] == 'list') {
                  op[checkedKey.value] = true;
                }
              });
            }
            //勾选当前模块非list的操作，则当前模块的的查看（list）操作被勾选
            selectedCurrentGoalNotList(operation, subGoal2);
            // 勾选某个操作，则需要判断该操作所属模块的父模块全选按钮是否应该被勾选
            checkUpperGoalCheckAll(subGoal1);
          } else {
            // 全选按钮：取消当前操作，则当前模块的的父模块(一级模块)的[全选]按钮应该被取消勾选
            revertUpperGoalCheckAll(subGoal1, operation[checkedKey.value]);
            //取消当前模块list的操作，则当前模块的的非查看（list）操作被取消勾选
            revertCurrentGoalList(operation, subGoal2);
            //顺序不可颠倒
            checkUpperGoal(subGoal1);
            checkUpperGoal(goal);
          }
        }
        /**
         * 2.3点击三级模块的操作项
         */
        if (goal && subGoal1 && subGoal2 && subGoal3 && !subGoal4 && operation) {
          operation[checkedKey.value] = !operation[checkedKey.value];
          if (operation[checkedKey.value]) {
            goal[checkedKey.value] = true;
            subGoal1[checkedKey.value] = true;
            subGoal2[checkedKey.value] = true;
            subGoal3[checkedKey.value] = true;
            //该模块父级模块的若有查看操作，则勾选上
            checkedUpperGoalList(subGoal2, subGoal3);
            checkedUpperGoalList(subGoal1, subGoal3);
            //勾选当前模块非list的操作，则当前模块的的查看（list）操作被勾选
            selectedCurrentGoalNotList(operation, subGoal3);

            // 勾选某个操作，则需要判断该操作所属模块固定含有的全选按钮是否应该被勾选
            checkUpperGoalCheckAll(subGoal1);
          } else {
            // 全选按钮：取消当前操作，则当前模块的所属模块固定含有的[全选]按钮应该被取消勾选
            revertUpperGoalCheckAll(subGoal1, operation[checkedKey.value]);
            //取消当前模块list的操作，则当前模块的的非查看（list）操作被取消勾选
            revertCurrentGoalList(operation, subGoal3);
            checkUpperGoal(subGoal2);
            checkUpperGoal(subGoal1);
            checkUpperGoal(goal);
          }
        }
        /**
         * 2.4 点击四级模块的操作项
         */
        if (goal && subGoal1 && subGoal2 && subGoal3 && subGoal4 && operation) {
          operation[checkedKey.value] = !operation[checkedKey.value];
          if (operation[checkedKey.value]) {
            goal[checkedKey.value] = true;
            subGoal1[checkedKey.value] = true;
            subGoal2[checkedKey.value] = true;
            subGoal3[checkedKey.value] = true;
            subGoal4[checkedKey.value] = true;
            //该模块父级模块的若有查看操作，则勾选上
            checkedUpperGoalList(subGoal3, subGoal4);
            checkedUpperGoalList(subGoal2, subGoal4);
            checkedUpperGoalList(subGoal1, subGoal4);
            //勾选当前模块非list的操作，则当前模块的的查看（list）操作被勾选
            selectedCurrentGoalNotList(operation, subGoal4);
            // 勾选某个操作，则需要判断该操作所属模块固定含有的全选按钮是否应该被勾选
            checkUpperGoalCheckAll(subGoal1);
          } else {
            // 全选按钮：取消当前操作，则当前模块的所属模块固定含有的[全选]按钮应该被取消勾选
            revertUpperGoalCheckAll(subGoal1, operation[checkedKey.value]);
            //取消当前模块list的操作，则当前模块的的非查看（list）操作被取消勾选
            revertCurrentGoalList(operation, subGoal4);
            checkUpperGoal(subGoal3);
            checkUpperGoal(subGoal2);
            checkUpperGoal(subGoal1);
            checkUpperGoal(goal);
          }
        }
        emit('change', buildAuthority());
      }

      function checkedUpperGoalList(goal, subGoal) {
        if (goal['operations'] && goal['operations'].length > 0) {
          goal['operations'].forEach((op) => {
            if (op['name'] == 'list') {
              //勾选子模块，则其父级模块和查看勾选
              op[checkedKey.value] = subGoal[checkedKey.value];
            }
          });
        }
      }

      function checkUpperGoal(goal) {
        goal[checkedKey.value] = false;
        goal['menus'].forEach((sub) => {
          // 勾选菜单，不勾选父级模块菜单后面的操作，只关注菜单项即可
          // if (sub['operations'] && sub['operations'].length > 0) {
          //   sub[checkedKey.value] = false;
          //   sub['operations'].forEach(op => {
          //     if (op[checkedKey.value]) {
          //       sub[checkedKey.value] = true;
          //     }
          //   });
          // }
          if (sub[checkedKey.value]) {
            goal[checkedKey.value] = true;
          }
        });
      }

      function selectedCurrentGoalNotList(operation, goal) {
        if (operation['name'] != 'list') {
          //勾选当前模块非list的操作，则当前模块的的查看（list）操作被勾选
          goal['operations'].forEach((op) => {
            if (op['name'] == 'list') {
              op[checkedKey.value] = operation[checkedKey.value];
            }
            if (op['name'] == 'add' && operation['name'] == 'copy') {
              op[checkedKey.value] = operation[checkedKey.value];
            }
          });
        }
      }

      function revertCurrentGoalList(operation, goal) {
        if (operation['name'] == 'list') {
          //取消当前模块list的操作，则当前模块的的非查看（list）操作被取消勾选
          goal[checkedKey.value] = operation[checkedKey.value];
          goal['operations'].forEach((op) => {
            if (op['name'] != 'list') {
              op[checkedKey.value] = operation[checkedKey.value];
            }
          });
          traverseCheck(goal);
        } else if (operation['name'] == 'add') {
          goal['operations'].forEach((op) => {
            if (op['name'] == 'copy') {
              op[checkedKey.value] = operation[checkedKey.value];
            }
          });
        }
      }

      // 菜单或者操作被勾选的时候，全选按钮的状态设置
      function checkUpperGoalCheckAll(goal) {
        if (goal['checkAll']) {
          goal['checkAll'][checkedKey.value] = true;
        }
        // 当前模块中的操作选中状态判断
        const operations = goal['operations'];
        if (operations && operations instanceof Array) {
          let opUnCheckedFlag = false; // 当前模块下的操作存在没有勾选的
          for (let i = 0; i < operations.length; i++) {
            const op = operations[i];
            if (!op[checkedKey.value]) {
              opUnCheckedFlag = true;
              goal['checkAll'][checkedKey.value] = false;
              return;
            }
          }
          if (opUnCheckedFlag) {
            return;
          }
        }
        getGoalCheckedStatus(goal, goal);
      }

      // 获取全选按钮下面各个模块的是否全部勾选情况
      function getGoalCheckedStatus(checkAllGoal, goal) {
        // 当前模块下的菜单项选中状态判断
        const menus = goal['menus'];
        if (!menus) {
          return;
        }
        for (let i = 0; i < menus.length; i++) {
          const sub = menus[i];
          if (!sub[checkedKey.value]) {
            checkAllGoal['checkAll'][checkedKey.value] = false;
            return;
          } else {
            if (sub['operations']) {
              let opFlag = false; // 当前菜单下的操作存在没有勾选的
              for (let i = 0; i < sub['operations'].length; i++) {
                const op = sub['operations'][i];
                if (!op[checkedKey.value]) {
                  opFlag = true;
                  checkAllGoal['checkAll'][checkedKey.value] = false;
                  return;
                }
              }
              if (opFlag) {
                return;
              } else {
                getGoalCheckedStatus(checkAllGoal, sub);
              }
            }
          }
        }
      }

      // 菜单或者操作被取消勾选的时候，全选按钮的状态设置
      function revertUpperGoalCheckAll(goal, checked) {
        if (goal['checkAll']) {
          goal['checkAll'][checkedKey.value] = checked;
        }
      }

      function traverseCheck(goal, checkAll?: any) {
        if (goal['menus'] && goal['menus'].length > 0) {
          goal['menus'].forEach((sub) => {
            sub[checkedKey.value] = goal[checkedKey.value];
            if (!goal[checkedKey.value]) {
              // 如果菜单是取消勾选，下面操作项需要关联，如果是菜单是勾选，则无需关联操作
              if (sub['operations']) {
                sub['operations'].forEach((op) => {
                  op[checkedKey.value] = goal[checkedKey.value];
                });
              }
              // 如果菜单是取消勾选，下面相关的[全选]按钮也需要取消
              if (sub['checkAll']) {
                sub['checkAll'][checkedKey.value] = goal[checkedKey.value];
              }
            }
            if (checkAll) {
              if (goal[checkedKey.value]) {
                // 如果是菜单是勾选，并且是全选按钮，则需要关联操作
                if (sub['operations']) {
                  sub['operations'].forEach((op) => {
                    op[checkedKey.value] = goal[checkedKey.value];
                  });
                }
              }
            }
            if (checkAll) {
              traverseCheck(sub, checkAll);
            } else {
              traverseCheck(sub);
            }
          });
        } else {
          return;
        }
      }

      function buildAuthority(valid?: boolean) {
        const checkedUuidListMap = { common: [] };
        goals.value.forEach((goal) => {
          if (!goal[checkedKey.value]) {
            return;
          }
          // 保存角色权限
          classifyData(checkedUuidListMap, goal);
          // 保存数据权限
          if (propsDataSource.value['dataAuthMode'] == 2) {
            saveDataAuth(gloabalDataAuthMap.value, goal);
          }
          if (!goal['menus']) {
            return;
          }
          transferAuthority(checkedUuidListMap, goal);
        });

        if (activeMenuItem.value && activeMenuItem.value) {
          const type = activeMenuItem.value;
          allCheckedMap.value[type] = checkedUuidListMap[type] ? checkedUuidListMap[type] : [];
        }
        if (allCheckedMap.value['common'] && allCheckedMap.value['common'].length == 0) {
          delete allCheckedMap.value['common'];
        }

        // 将数据权限存入表单数据data中
        if (propsDataSource.value['dataAuthMode'] == 2) {
          propsDataSource.value['dataScopeMap'] = gloabalDataAuthMap.value;
        }

        return allCheckedMap.value;
      }

      function transferAuthority(uuidListMap, goal) {
        if (goal && goal['menus'] && goal['menus'] instanceof Array) {
          goal['menus'].forEach((subMod) => {
            // 1. 模块勾选
            if (!subMod[checkedKey.value]) {
              return;
            }
            classifyData(uuidListMap, subMod);
            // 2. 该模块下的操作项被勾选
            if (subMod['operations']) {
              // 操作项
              subMod['operations'].forEach((operation) => {
                if (!operation[checkedKey.value]) {
                  return;
                }
                classifyData(uuidListMap, operation);
              });
            }
            if (!subMod['menus']) {
              return;
            }
            transferAuthority(uuidListMap, subMod);
          });
        } else {
          return;
        }
      }

      // 存储角色权限信息

      function classifyData(uuidListMap, goal) {
        const primeKey = goal['appId'] ? goal['appId'] : 'common';
        // 存储角色权限信息
        if (Object.keys(uuidListMap).includes(primeKey)) {
          uuidListMap[primeKey].push(goal['code']);
        } else {
          uuidListMap[primeKey] = [goal['code']];
        }
      }
      // 存储数据权限
      function saveDataAuth(dataAuthMap, goal) {
        const primeKey = goal['appId'] ? goal['appId'] : 'common';
        // 存储数据权限信息
        if (Object.keys(dataAuthMap).includes(primeKey)) {
          const currentGoalDA = dataAuthMap[primeKey];
          const codeDataScopeValue = currentGoalDA['codeDataScopeValue'];
          if (codeDataScopeValue) {
            if (goal['codeDataScopeValue']) {
              let value = goal['codeDataScopeValue'];
              codeDataScopeValue[goal['code']] = {
                deptScopeType: value['deptScopeType'],
                deptList: value['deptList'],
                scopeType: value['scopeType'],
              };
              dataAuthMap[primeKey]['codeDataScopeValue'] = codeDataScopeValue; // 重新赋值
            }
          }
        } else {
          // scopeMode
          const scopeMode = appDataAuthScopeMap.value[primeKey]
            ? appDataAuthScopeMap.value[primeKey]['scopeMode']
            : '';
          // codeDataScopeValue
          const codeDataScopeValue = {};
          if (goal['codeDataScopeValue']) {
            const value = goal['codeDataScopeValue'];
            codeDataScopeValue[goal['code']] = {
              deptScopeType: value['deptScopeType'],
              deptList: value['deptList'],
              scopeType: value['scopeType'],
            };
          }
          dataAuthMap[primeKey] = {
            scopeMode: scopeMode,
            codeDataScopeValue: codeDataScopeValue,
          };
        }
      }
      return {
        // dataSource,
        // handleChangeIndex,
        goals,
        checkedKey,
        type,
        dataValid,
        menuItems,
        deactiveMenuItem,
        activeMenuItem,
        menuGoalsMap,
        allCheckedMap,
        checkedValidMap,
        dataAuthMode,
        dataAuthOptions,
        daDefaultValue,
        departmentsMap,
        allResources,
        appDataAuthScopeMap,
        gloabalDataAuthMap,

        //方法
        onChangeTab,
        change,
        onSelect,
        selectDepartment,
      };
    },
    data() {
      return {
        editingKey: '',
        propsList: [],
      };
    },
    created() {},
    methods: {},
  });
</script>
<style lang="less" scoped>
  .m1-wrap {
    .m1-item {
      padding-top: 20px;
      box-sizing: border-box;
      .menus-wrap {
        display: flex;
        .data-auth-wrap {
          display: flex;
          .field-item {
            display: flex;
            label {
              flex-shrink: 0;
            }
            .stack-dropdown {
              width: 278px !important;
              input {
                width: 100% !important;
              }
            }
            .selectedData {
              width: 278px;
              margin-right: 8px;
              border: 1px solid #ced0da;
              padding: 0 6px;
            }
          }
        }
      }
      .m1-title {
      }
      .m2-wrap {
        padding-left: 70px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
        box-sizing: border-box;
        .m2-item {
          padding-top: 10px;
          box-sizing: border-box;
          .m2-title {
            width: 150px;
          }
          .m3-wrap {
            flex: 1;
          }
          .menus-wrap {
            display: flex;
          }
          .submenus-wrap {
            padding-left: 25px;
            .submenus-item {
              padding-top: 10px;
            }
          }
        }
      }
    }
  }
  ul,
  li {
    list-style: none;
  }
  input[type='checkbox'] {
    cursor: pointer;
    // width: 12px;
    // height: 14px;
    margin: 0 6px;
  }
  // input[type=checkbox]:before {
  //     display: inline-block;
  //     border: 1px solid #b2b7bd;
  //     border-radius: 2px;
  //     width: 12px!important;
  //     height: 12px!important;
  //     content: "";
  //     line-height: 1;
  //     text-indent: -1px;
  //     top: -2px;
  //     position: relative;
  // }
  // input[type=checkbox]:checked:before {
  //     content: "\E730";
  //     font-family: iconfont;
  //     color: #fff;
  //     background: #0ed2bf;
  //     border: 1px solid #0ed2bf;
  //     font-weight: bolder;
  //     display: inline-block;
  //     border-radius: 2px;
  //     width: 12px!important;
  //     height: 12px!important;
  //     line-height: 1;
  //     text-indent: -1px;
  // }
</style>
