<template>
  <zj-tab-page
    ref="tabPage"
    :defaultActives="[
      { key: 'list', label: $route.meta.title + '-列表', essential: true },
    ]"
  >
    <template slot-scope="{ activeKey, data }">
      <div
        :style="{
          width: '100%',
          height: activeKey == 'list' ? '100%' : '0px',
          overflow: activeKey == 'list' ? 'auto' : 'hidden',
        }"
      >
        <div class="app-container">
          <div class="setting_title">权限管理</div>
          <el-divider></el-divider>
          <div class="mymain-container">
            <div class="btn-group clearfix">
              <div class="fl">
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-plus"
                  @click="addOrEdit('add')"
                  >新增角色</el-button
                >
              </div>
              <div class="fr">
                <el-input
                  placeholder="商户名称"
                  v-model="screenForm.companyName"
                  size="small"
                  style="width: 300px"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    size="small"
                    @click="getListByScreen"
                  ></el-button>
                </el-input>
                <el-button
                  size="small"
                  @click="
                    screenForm.companyName = '';
                    getListByScreen();
                  "
                  >清空</el-button
                >
              </div>
            </div>
            <div class="table">
              <el-table
                v-loading="listLoading"
                :data="dataList"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
                stripe
              >
                <el-table-column
                  align="center"
                  label="序号"
                  type="index"
                  width="50"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="商户"
                  prop="companyName"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="父级"
                  prop="parentRoleName"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="角色"
                  prop="name"
                ></el-table-column>
                <el-table-column align="center" label="适用机构" prop="type">
                  <template slot-scope="scope">
                    {{ ["平台", "商户", "商家"][scope.row.type] }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button type="text" @click="setMenuRole(scope.row)"
                      >设置权限</el-button
                    >
                    <el-button
                      type="text"
                      @click="addOrEdit('edit', scope.row.adminRoleId)"
                      v-if="scope.row.adminRoleId != 1"
                      >编辑</el-button
                    >
                    <el-popconfirm
                      style="margin-left: 10px"
                      title="确定删除吗？"
                      @confirm="handleDelete(scope.row.adminRoleId)"
                      v-if="scope.row.adminRoleId != 1"
                    >
                      <el-button slot="reference" type="text">删除</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pagination clearfix">
              <div class="fr">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 50]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="listTotal"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="~['add', 'edit'].indexOf(activeKey)"
        style="box-sizing: border-box; padding: 16px"
      >
        <el-form
          ref="addForm"
          :model="addForm"
          :inline="true"
          :rules="addFormRules"
          label-position="left"
          label-width="100px"
        >
          <el-form-item label="上级商户" prop="parentRoleId">
            <el-select v-model="addForm.companyId" placeholder="请选择">
              <el-option
                v-for="item in zzdshangji"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="父级" prop="parentRoleId">
            <el-select
              v-model="addForm.parentRoleId"
              placeholder="请选择"
              @change="
                (v) => {
                  if (v && dataList22.find((item) => item.adminRoleId == v)) {
                    addForm.parentRoleName = dataList22.find(
                      (item) => item.adminRoleId == v
                    ).name;
                  } else {
                    addForm.parentRoleName = '';
                  }
                }
              "
            >
              <el-option
                v-for="item in (dataList22 || []).filter(
                  (a) => a.adminRoleId != addForm.adminRoleId
                )"
                :key="item.adminRoleId"
                :label="item.name"
                :value="item.adminRoleId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="角色名" prop="name">
            <el-input
              v-model="addForm.name"
              autocomplete="off"
              placeholder="请输入角色名"
            ></el-input>
          </el-form-item>
          <el-form-item label="适用机构" prop="type">
            <el-select v-model="addForm.type" placeholder="请选择">
              <el-option
                v-for="item in [0].includes(userData.type)
                  ? [
                      { code: 2, name: '商家' },
                      { code: 1, name: '商户' },
                      { code: 0, name: '平台' },
                    ]
                  : [1, 3].includes(userData.type)
                  ? [
                      { code: 2, name: '商家' },
                      { code: 1, name: '商户' },
                    ]
                  : [{ code: 2, name: '商家' }]"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button size="mini" @click="data.removeTab()">取 消</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="submitAddForm(data.removeTab)"
            >确 定</el-button
          >
        </div>
      </div>
      <el-dialog
        title="设置权限"
        :visible.sync="roleFormVisible"
        :show-close="false"
        width="40%"
        :close-on-click-modal="false"
        custom-class="tree-dialog"
        top="50px"
      >
        <el-tree
          :data="menuRoleList"
          show-checkbox
          :check-strictly="true"
          :default-expand-all="true"
          :expand-on-click-node="true"
          node-key="moduleId"
          ref="tree"
          highlight-current
          :props="defaultProps"
          @check-change="getCheck"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span v-if="data.type < 3">
              <el-button
                type="text"
                size="mini"
                @click="() => quickSelection(data)"
                >一键全选</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="() => quickCancel(data)"
                style="color: #f56c6c"
                >一键取消</el-button
              >
            </span>
          </span>
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              roleFormVisible = false;
              flag = false;
            "
            >{{ editId != 1 ? "取 消" : "关 闭" }}</el-button
          >
          <el-button type="primary" @click="submitRoleForm" v-if="editId != 1"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </template>
  </zj-tab-page>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getRoleList,
  addRole,
  editRole,
  getRoleDetail,
  deleteRole,
  getMenuList,
  getMenuRoleIds,
  setMenuRole,
} from "@/api/setting";
import { adminCompanyList } from "@/api/payingMerchant.js";
export default {
  data() {
    return {
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      editId: null,
      addFormType: "add",
      screenForm: {
        companyName: "",
      },
      addForm: {
        name: "", // 角色名
        type: "",
        parentRoleId: "",
        parentRoleName: "",
        companyId: "",
      },
      addFormRules: {
        name: [{ required: true, message: "请输入角色名", trigger: "blur" }],
        type: [{ required: true, message: "请输入角色名", trigger: "blur" }],
      },
      menuRoleList: [],
      defaultProps: {
        children: "children",
        label: "moduleName",
      },
      adminRoleGetRoleType: [
        { code: 2, name: "商家" },
        { code: 1, name: "商户" },
        { code: 0, name: "平台" },
      ],
      dataList22: [],
      roleFormVisible: false,
      flag: false,
      zzdshangji: [],
    };
  },
  computed: {
    userData() {
      return JSON.parse(localStorage.getItem("greemall_user"));
    },
    ...mapGetters(["userid", "name"]),
  },
  created() {
    this.getList();
    getRoleList({
      pageNum: 1,
      pageSize: -1,
    }).then((res) => {
      this.dataList22 = res.data.records;
    });
    adminCompanyList({
      pageNum: 1,
      pageSize: -1,
      params: [],
    }).then((res) => {
      this.zzdshangji = res.data.records.map((item) => ({
        label: item.adminCompanyName,
        value: item.adminCompanyId,
      }));
    });
  },
  methods: {
    diguichazhaoid(arr, ids) {
      for (var item of arr) {
        ids.push(item.moduleId);
        if (item.children && item.children.length) {
          this.diguichazhaoid(item.children, ids);
        }
      }
    },
    zhaofuji(data, arr) {
      if (data.parent) {
        arr.push(data.data.moduleId);
        this.zhaofuji(data.parent, arr);
      }
    },
    quanbugouxuan(node, data) {
      let nowChecked = this.$refs.tree.getCheckedKeys();
      let thisId = data.moduleId;
      let childId = [];
      if (data.children.length) {
        childId = this.familyTree(data.children);
      }

      var parentId = [];
      this.zhaofuji(node, parentId);
      let setChecked = nowChecked
        .concat([thisId])
        .concat(childId)
        .concat(parentId);

      this.$refs.tree.setCheckedKeys(setChecked);
    },
    quxiaogouxuan(node, data) {
      let nowChecked = this.$refs.tree.getCheckedKeys();
      let thisId = data.moduleId;
      let childId = [];
      if (data.children.length) {
        childId = this.familyTree(data.children);
      }

      let setChecked = nowChecked;
      if (setChecked.indexOf(thisId) >= 0) {
        setChecked.splice(setChecked.indexOf(thisId), 1);
      }

      if (childId.length) {
        for (var i = 0; i < childId.length; i++) {
          if (setChecked.indexOf(childId[i]) >= 0) {
            setChecked.splice(setChecked.indexOf(childId[i]), 1);
          }
        }
      }

      this.$refs.tree.setCheckedKeys(setChecked);
    },

    // 一键全选
    quickSelection(data) {
      let nowChecked = this.$refs.tree.getCheckedKeys();
      let thisId = data.moduleId;
      let childId = [];
      if (data.children.length) {
        childId = this.familyTree(data.children);
      }

      let setChecked = nowChecked.concat([thisId]).concat(childId);

      this.$refs.tree.setCheckedKeys(setChecked);
    },

    // 一键取消
    quickCancel(data) {
      let nowChecked = this.$refs.tree.getCheckedKeys();
      let thisId = data.moduleId;
      let childId = [];
      if (data.children.length) {
        childId = this.familyTree(data.children);
      }

      let setChecked = nowChecked;
      if (setChecked.indexOf(thisId) >= 0) {
        setChecked.splice(setChecked.indexOf(thisId), 1);
      }

      if (childId.length) {
        for (var i = 0; i < childId.length; i++) {
          if (setChecked.indexOf(childId[i]) >= 0) {
            setChecked.splice(setChecked.indexOf(childId[i]), 1);
          }
        }
      }

      this.$refs.tree.setCheckedKeys(setChecked);
    },

    // 递归子id
    familyTree(arr) {
      var temp = [];
      var forFn = function (list) {
        for (var i = 0; i < list.length; i++) {
          var item = list[i];
          if (item.children) {
            temp.push(item.moduleId);
            forFn(item.children);
          }
        }
      };
      forFn(arr);
      return temp;
    },

    getCheck(data, val, oval) {
      // flag 限制初始化时出现卡顿
      if (this.flag) {
        const moduleIds = [
          ...new Set([
            ...this.$refs.tree.getCheckedNodes().map((e) => {
              return e.parentId;
            }),
            ...this.$refs.tree.getCheckedKeys(),
          ]),
        ];
        this.$refs.tree.setCheckedKeys(moduleIds);
      }
    },

    getList() {
      this.listLoading = true;
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        companyName: this.screenForm.companyName,
      };
      getRoleList(params).then((res) => {
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      });
    },

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1;
      this.getList();
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },

    // 操作 - 删除
    handleDelete(id) {
      deleteRole({ adminRoleId: id }).then((res) => {
        this.getList();
        this.$successMsg();
      });
    },

    // 新增编辑
    addOrEdit(type, id) {
      this.$refs.tabPage.addTab({
        activeKey: type,
        key: type,
        label: { add: "新增", edit: "编辑" }[type],
        triggerEvent: () => {
          this.$refs?.addForm?.resetFields();
          this.$data.addForm = this.$options.data().addForm;
          this.addFormType = type;
          if (type == "edit") {
            this.editId = id;
            getRoleDetail({ adminRoleId: id }).then((res) => {
              this.addForm = {
                ...res.data,
              };
            });
          }
        },
        closeEvent: () => {},
      });
    },

    // 提交 新增编辑
    submitAddForm(removeTab) {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let params = {
            ...this.addForm,
          };
          if (this.addFormType == "edit") {
            params.adminRoleId = this.editId;
            editRole(params).then((res) => {
              removeTab("list");
              this.getList();
              this.$successMsg("编辑成功");
              getRoleList({
                pageNum: 1,
                pageSize: -1,
              }).then((res) => {
                this.dataList22 = res.data.records;
              });
            });
          } else {
            addRole(params).then((res) => {
              removeTab("list");
              this.getList();
              this.$successMsg("新增成功");
              getRoleList({
                pageNum: 1,
                pageSize: -1,
              }).then((res) => {
                this.dataList22 = res.data.records;
              });
            });
          }
        }
      });
    },

    // 设置权限 - 获取列表
    setMenuRole(row) {
      this.roleFormVisible = true;
      this.editId = row.adminRoleId;

      getMenuList({
        adminUserId: this.userid,
        parentAdminRoleId: row.parentRoleId,
      }).then((res) => {
        // aaa(res.data)
        this.menuRoleList = res.data;
      });
      getMenuRoleIds({ adminRoleId: row.adminRoleId }).then((res) => {
        this.$refs.tree.setCheckedKeys(res.data);
        this.flag = true;
      });
    },

    // 设置权限 - 提交数据
    submitRoleForm(removeTab) {
      let params = {
        adminModuleIds: this.$refs.tree.getCheckedKeys(),
        adminModuleIds2: this.$refs.tree.getHalfCheckedKeys(),
        adminRoleId: this.editId,
      };
      setMenuRole(params).then((res) => {
        // removeTab('list')
        this.roleFormVisible = false;
        this.flag = false;
        this.getList();
        this.$successMsg();
      });
    },
  },
};
</script>

<style lang="scss">
.tree-dialog {
  .el-dialog__body {
    padding: 20px;

    .el-tree {
      max-height: calc(100vh - 140px - 54px - 70px);
      overflow-y: scroll;
      padding: 0 30px;

      > .el-tree-node {
        padding: 15px 0;
        border: 1px dashed #ddd;
        margin-bottom: 15px;
        border-radius: 10px;
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
::v-deep .tree-dialog {
  .el-dialog__body {
    padding: 20px;
    .el-tree {
      max-height: calc(100vh - 140px - 54px - 70px);
      overflow-y: scroll;
      padding: 0 30px;
      > .el-tree-node {
        padding: 15px 0;
        border: 1px dashed #ddd;
        margin-bottom: 15px;
        border-radius: 10px;
      }
    }
  }
}
::v-deep .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
