<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-row>
          <el-button type="primary" @click="addJump">新增角色</el-button>
        </el-row>
      </div>
      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border
        highlight-current-row>
        <el-table-column prop="roleName" label="角色" min-width="110"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link target="_blank" type="primary" @click="editInfo(scope.row)" :underline="false">编辑</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" type="primary" @click="setInfo(scope.row)" :underline="false">设置职责范围</el-link>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      style="text-align: center; margin-top: 10px" :page-size="deptCircularPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
    </el-pagination>
    <el-dialog :close-on-click-modal="false" title="角色管理" :visible.sync="sendInfo" width="400px"
      :before-close="sendInfoClose">
      <div class="Info_css">
        <div class="Info_item">
          <el-input placeholder="输入角色" v-model="Info.newsTitle"></el-input>
        </div>
        <div class="Info_btn">
          <el-button @click="sendInfoClose">取消</el-button>
          <el-button @click="submit" type="primary">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="设置职责范围" :visible.sync="addRoleRanFlag" width="800px" center :close-on-click-modal="false">
      <div class="two-form" v-if="!loadingRoleRan">
        <el-menu v-if="addRoleRanFlag" class="el-menu-vertical-demo" ref="jobScopeMenu"
          :default-openeds='defaultOpeneds'>
          <el-submenu v-for="(item,val) in queryList" :key="val" :index="item.pluginId" class="one-menu">
            <template slot="title">
              <i class="el-icon-caret-right"></i>
              <span>{{ item.pluginName }}</span>
            </template>
            <el-submenu v-for="service in item.activatedServices" :key="service.serviceId" :index="service.serviceId"
              class="two-menu">
              <template slot="title">
                <i class="el-icon-caret-right-two-menu" />
                <span @click.stop="allSelect(service)">
                  <el-checkbox disabled v-if="service.featureCheckeds.length!==service.features.length"
                    :indeterminate="service.featureCheckeds.length>0" :value="false"></el-checkbox>
                  <el-checkbox disabled v-else :indeterminate="false" :value="true"></el-checkbox>
                  {{ service.serviceName }}
                </span>
              </template>
              <el-checkbox-group v-model="service.featureCheckeds">
                <el-menu-item v-for="feature in service.features" :key="feature.featureId" :index="feature.featureId">
                  <el-checkbox :label='feature.featureId'>{{ feature.featureName }}</el-checkbox>
                </el-menu-item>
              </el-checkbox-group>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </div>
      <div v-else v-loading="true"></div>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="queryList.length===0" type="primary" @click="saveRoleRan">保 存</el-button>
        <el-button :disabled="queryList.length===0" @click="addRoleRanFlag=false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import {
    getList,
    create,
    changeInfo,
    compAndChildrenInfo,
    getDeptPageByCompId,
    getRoleInfo,
    getTenantlist,
    bindResources
  } from '@/api/permissionSettingManagement';
  export default {
    components: {
      'el-image-viewer': () =>
        import('element-ui/packages/image/src/image-viewer'),
    },
    data() {
      return {
        defaultOpeneds: [],
        queryList: [],
        loadingRoleRan: false,
        addRoleRanFlag: false,
        deptTitle: '',
        tableData: [],
        //分页
        currentPage: 1,
        pageSize: 10,
        deptBudgetTotal: 0,
        deptCircularPage: {},
        userInfo: false,
        rejectInfo: false,
        sendInfo: false,
        Info: {
          newsTitle: ''
        },
        selectRow: {}
      };
    },
    mounted() {
      // this.getList();
    },
    async created() {
      await this.initDict();
    },
    methods: {
      async initDict() {
        // 获取部门
        const resp2 = await getDeptPageByCompId({
          compId: localStorage.getItem('enterprise-front-companyId'),
          vesselBankFlag: 'V'
        });
        this.deptList = resp2.records;
        await this.getList();
        //       try {
        //         this.loadingList = true;
        //         // 获取公司
        //         const resp = await compAndChildrenInfo();
        //         resp[0].children.unshift({
        //           compId: resp[0].compId,
        //           compName: resp[0].compName
        //         });
        //         this.companyList = resp[0].children;

        //       } catch (error) {
        //         if (error.code && error.code !== "200") this.$message(error.message);
        //       } finally {
        //         this.loadingList = false;
        //       }
      },
      // 鼠标移入获取当前行信息
      enterMouse(row, column, cell, event) {
        this.msgRow = row;
      },
      async showRoleRan(row) {
        this.addRoleRanFlag = true;
        try {
          await this.initPluginDetails();
          let resp = await getRoleInfo({
            roleId: row.roleId
          });
          this.currRow = resp.data;
          let _defaultOpeneds = [];
          this.queryList.forEach(value => {
            console.log(value)
            value.activatedServices.forEach(value2 => {
              const _featureCheckeds = [];
              if (this.currRow.resources.length != 0) {
                this.currRow.resources.forEach(value3 => {
                  value2.features.forEach(value4 => {
                    if (value4.featureId === value3.resourceId)
                      _featureCheckeds.push(value3.resourceId);
                  });
                });
              }

              if (_featureCheckeds.length > 0) {
                _defaultOpeneds.push(value2.serviceId);
                _defaultOpeneds.push(value.pluginId);
              }
              this.$set(value2, 'featureCheckeds', _featureCheckeds);
            });
          });
          this.$set(this, 'defaultOpeneds', _defaultOpeneds);
          this.loadingRoleRan = false;
        } catch (error) {
          if (error.code && error.code !== '200') this.$message(error.message);
        }
      },
      // 初始化插件树
      async initPluginDetails() {
        try {
          this.loadingRoleRan = true;
          if (this.queryList.length === 0) {
            // 获取插件列表;
            const resp4 = await getTenantlist({
              tenantId: '3101066fa2ae4f5d9936d0016714c0dc'
            });
            resp4.data.forEach((value, index) => {
              value.activatedServices.forEach((value2, index2) => {
                value2.featureCheckeds = [];
              });
            });
            this.$set(this, 'queryList', resp4.data);
            console.log('lsit', this.queryList)
          }
        } catch (error) {
          if (error.code && error.code !== '200') this.$message(error.message);
        }
      },
      submit() {
        // if (!this.Info.newsTitle) {
        //   this.$message.error("请输入标题");
        //   return;
        // }

        if (this.deptTitle == '添加') {
          let _obj = {
            compId: '2710b21efc1e4393930c5dc800010dc4',
            deptId: '3d7dbdc962ca4a96a48522c9ee528bc3',
            roleName: this.Info.newsTitle,
            underCompId: '2710b21efc1e4393930c5dc800010dc4',
            underCompName: '黑龙江中天昊元贸易有限公司',
            vesselBankFlag: 'B'
          }
          create(_obj).then((response) => {
              this.$notify({
                title: '成功',
                message: '添加成功！',
                type: 'success',
              });
              this.sendInfoClose();
              this.listLoading = false;
              this.getList()
            })
            .catch((error) => {
              this.$notify({
                title: '失败',
                message: error,
                type: 'error',
              });
              this.sendInfoClose();
            });
        } else {
          this.selectRow.roleName = this.Info.newsTitle
          changeInfo(this.selectRow).then((response) => {
              this.$notify({
                title: '成功',
                message: '编辑成功！',
                type: 'success',
              });
              this.sendInfoClose();
              this.listLoading = false;
              this.getList()
            })
            .catch((error) => {
              this.$notify({
                title: '失败',
                message: error,
                type: 'error',
              });
              this.sendInfoClose();
            });

        }

      },
      sendInfoClose() {
        this.sendInfo = false;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.getList();
      },
      getList() {
        let _data = {
          compId: '2710b21efc1e4393930c5dc800010dc4',
          pageSize: 10,
          currentPage: 1,
          vesselBankFlag: 'B'
        }
        getList(_data)
          .then((res) => {
            this.tableData = res.data.records
          })
          .catch(() => {
            this.loading = false;
          });
      },
      addJump() {
        this.deptTitle = '添加';
        this.sendInfo = true
      },
      editInfo(val) {
        this.deptTitle = '编辑';
        this.Info.newsTitle = val.roleName
        this.sendInfo = true
        this.selectRow = val

      },
      setInfo(val) {
        this.showRoleRan(val)
      },
      // 保存权限范围
      async saveRoleRan(val) {
        try {
          console.log(this.currRow)
          const roleId = this.currRow.roleId;
          console.log(this.currRow)
          const resources = [];
          this.queryList.forEach((value, index) => {
            console.log(value)
            value.activatedServices.forEach((value2, index2) => {
              value2.featureCheckeds.forEach((value3, index3) => {
                resources.push({
                  resourceId: value3
                });
              });
            });
          });
          const data = {
            roleId,
            resources
          };
          await bindResources(data);
          this.$message({
            message: '保存成功!',
            type: 'success'
          });
          this.addRoleRanFlag = false;
          this.getList();
        } catch (error) {
          if (error.code && error.code !== '200') this.$message(error.message);
        }
      },
      allSelect(data) {
        const sour = data.features;
        const selected = data.featureCheckeds;
        if (sour.length !== selected.length) {
          const _selected = [];
          sour.forEach((value, index) => {
            _selected.push(value.featureId);
          });
          this.$set(data, 'featureCheckeds', _selected);
        } else {
          this.$set(data, 'featureCheckeds', []);
        }
      }
    },
  };
</script>
<style lang="scss" scoped>
  .el-menu-vertical-demo {
    width: 100%;
    border-width: 0px;

    &>li {
      background-color: #f6f6f6;
      margin: 2px;

      &>ul>li {
        border-bottom: 1px dashed #cccccc;

        &>ul li {
          display: inline-block;
          width: 20%;
        }
      }
    }
  }

  .two-form {
    max-height: 600px;
    overflow: auto;
  }

  // /deep/.el-checkbox__input.is-disabled .el-checkbox__inner {
  //   cursor: auto !important;
  //   background-color: #fff;
  // }

  // /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
  // /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  //   background-color: #1d6ced !important;
  //   border-color: #1d6ced !important;
  // }

  // /deep/.el-submenu__title {
  //   height: 40px;
  //   line-height: 40px;
  // }

  .el-checkbox {
    margin-right: 10px;
  }

  .one-menu {
    .el-submenu__title {
      background-color: #f6f6f6;
    }
  }

  .two-menu {
    .el-menu {
      border-bottom: 1px dashed #ccc;

      .el-menu-item {
        .el-checkbox {
          width: 23%;
        }
      }
    }

    .el-submenu__title {
      border-bottom: 1px dashed #ccc;
      background-color: #fff;
    }
  }

  .one-menu.is-opened .el-icon-caret-right {
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }

  .el-icon-caret-right-two-menu:before {
    // content: "\E60E";
    content: "\E791";
  }

  .two-menu.is-opened .el-icon-caret-right-two-menu {
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }

  .select-all {
    color: blue;
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;
  }

  .center {
    padding: 10px 20px;
    background: #f5f6f7;
    min-height: calc(100vh - 50px);

    .top_css {
      padding: 10px;

      .search_btn {
        height: 80px;
        background: linear-gradient(#fafbfb, #ffffff);
        display: flex;
        margin-top: 20px;

        .search_block {
          margin-left: 20px;
        }

        .search_item {
          text-align: center;
          font-size: 14px;
          font-weight: 600;
          line-height: 40px;
          width: 112px;
          height: 40px;
          background: #f7f8f9;
          cursor: pointer;
          margin-top: 30px;
        }

        .searchNo {
          color: #323233;
        }

        .search {
          color: #2f53eb;
          background: #ffffff;
        }
      }
    }

    .center_css {
      background: #ffffff;
      border-radius: 1px;
      margin-top: 10px;
      padding-bottom: 10px;
    }

    .screen {
      display: flex;

      .search {
        width: 40px;
        height: 40px;
        background: #2f53eb;
        border-radius: 0px 2px 2px 0px;
        border: 1px solid #DCDFE6;
        margin-left: -1px;
      }

      .count_css {
        width: 80px;
        text-align: center;
        line-height: 40px;
        color: #666666;
      }
    }

    .el-button {
      padding: 10px 20px !important;
    }

    .center_css {

      ::v-deep .el-table th,
      ::v-deep .el-table td {
        text-align: center;
      }

      .fujian {
        font-size: 24px;
        color: #409eff;
      }

      .warning {
        font-size: 14px;
        color: #ed1d1d;
      }
    }
  }

  .car_css {
    width: 50%;
    display: inline-block;
    text-align: center;
    margin-top: 20px;
  }

  .car_item {
    width: 100px;
    height: 100px;
  }

  .user {
    margin-bottom: 20px;

    .title_css {
      color: #9d9d9d;
      margin-bottom: 6px;
    }

    .name_css {
      color: #0d0d0d;
      margin-bottom: 20px;
    }

    .form_btn {
      text-align: right;
    }

    .user_item {
      width: 380px;
      height: 250px;
      margin-bottom: 20px;
    }
  }

  ::v-deep .el-table--border .el-table__header th {
    background: #f7f8f9;
  }

  .btn_css {
    color: #409eff;
    cursor: pointer;
  }

  .sign {
    font-size: 14px;
    color: red;
  }

  .form_css {
    width: 100%;
    margin: 0 auto 20px;

    ::v-deep .el-checkbox {
      width: 40%;
      height: 30px;
    }

    ::v-deep .el-dialog__body {
      padding: 10px 20px;
    }

    ::v-deep .el-dialog__title {
      font-size: 16px;
    }

    // ::v-deep .el-textarea__inner {
    //   background: #F0F1F2;
    // }

    .form_btn {
      text-align: right;
      margin-top: 10px;
    }
  }

  //发送信息
  .Info_css {
    .Info_title {
      color: #323233;
      font-size: 16px;
    }

    .Info_item {
      margin: 20px 0;
    }

    .Info_btn {
      text-align: right;
      margin-top: 10px;
    }
  }

  .advancePayment-style {
    display: flex;
  }

  ::v-deep .advancePayment-style .el-input__inner {
    height: 30px;
  }

  .pay {
    .pay_css {
      display: flex;
      margin-bottom: 20px;
    }
  }

  .find::v-deep input.el-input__inner {
    border-radius: 0;
  }
</style>
