<template>
  <ai-list class="accountRoleList">
    <ai-title slot="title" title="账号角色管理" isShowBottomBorder/>
    <template #content>
      <ai-search-bar>
        <template #left>
          <el-button
              type="primary"
              icon="el-icon-circle-plus"
              @click="$router.push({hash:'#add'})"
              v-if="$permissions('admin_sysaccountrole_add')"
          >添加
          </el-button>
          <el-button
              icon="el-icon-delete"
              class="delete-btn del-btn-list"
              @click="allDelete"
              :disabled="!Boolean(multipleSelection.length)"
              v-if="$permissions('admin_sysaccountrole_del')"
          >删除
          </el-button>
        </template>
        <template #right>
          <el-input
              size="small"
              v-model="searchInfo"
              placeholder="角色名称"
              clearable
              @keyup.enter.native="mhSearch()"
              prefix-icon="iconfont iconSearch"
          />
          <el-button
              type="primary"
              icon="iconfont iconSearch"
              @click="mhSearch()"
          >查询
          </el-button
          >
          <el-button
              icon="el-icon-refresh-right"
              style="padding: 8px 13.5px"
              @click="resetConditon"
          >重置
          </el-button
          >
        </template>
      </ai-search-bar>
      <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          header-cell-class-name="table-header"
          tooltip-effect="light"
          max-height="calc(100% - 80px)"
          row-class-name="table-row"
          cell-class-name="table-cell"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="name" label="角色名" width="300"/>
        <el-table-column label="权限明细" prop="appRoleList">
          <template slot-scope="scope">
            <el-tooltip
                content="更多角色用户请点击详情按钮"
                placement="top"
                effect="light"
                v-if="scope.row.appRoleList.length > 3"
            >
              <span>{{ scope.row.appRoleListHtml }}</span>
            </el-tooltip>
            <span
                v-for="(item, index) in scope.row.appRoleList"
                :key="index"
                v-else
            >
              <span>{{ item.appName }}-</span>
              <span>{{ item.name }}；</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template class="operation_icon" slot-scope="scope">
            <el-button
                type="text"
                size="small"
                @click="beforeCopy(scope.row)"
                v-if="$permissions('admin_sysaccountrole_add')"
            >复制角色
            </el-button>
            <el-button
                type="text"
                size="small"
                @click="detailShow(scope.row)"
                v-if="$permissions('admin_sysaccountrole_detail')"
            >详情
            </el-button>
            <el-button
                type="text"
                size="small"
                @click="edit(scope.row)"
                v-if="$permissions('admin_sysaccountrole_edit')"
            >编辑
            </el-button
            >
            <el-button
                type="text"
                size="small"
                @click="beforeDelete(scope.row)"
                v-if="$permissions('admin_sysaccountrole_del')"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
        <div slot="empty" class="no-data"></div>
      </el-table>
      <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :page-size="pageSize"
            :page-sizes="[10, 20, 50, 100, 200]"
            layout="total,prev, pager, next,sizes, jumper"
            :total="total"
        />
      </div>
      <el-dialog
          class="editStyle"
          :visible.sync="copyDialog"
          width="520px"
          @close="dataInit()"
          title="复制角色"
      >
        <el-form :model="form" label-width="80px">
          <el-form-item
              label="角色名"
              :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-input
                v-model="roleName"
                placeholder="请输入..."
                size="small"
                clearable
            />
          </el-form-item>
        </el-form>
        <div slot="footer" style="text-align: center">
          <el-button
              style="width: 92px"
              size="small"
              class="delete-btn"
              @click="copyDialog = false"
          >取消
          </el-button
          >
          <el-button
              style="width: 92px"
              size="small"
              type="primary"
              @click="copyFn()"
              :disabled="!Boolean(roleName)"
          >确认
          </el-button>
        </div>
      </el-dialog>
      <ai-dialog title="账号角色详情" :visible.sync="viewShow" customFooter>
        <ai-card title="基本信息">
          <template #content>
            <ai-wrapper>
              <ai-info-item label="账号角色名称" :value="row.name"/>
            </ai-wrapper>
          </template>
        </ai-card>
        <ai-card title="权限信息">
          <template #content>
            <div
                class="view_info"
                v-for="(item, index) in row.appRoleList"
                :key="index"
            >
              <i class="iconfont iconProlife" style="color: #999"/>&nbsp;
              {{ [item.appName, item.name].join(" / ") }}
            </div>
          </template>
        </ai-card>
        <template #footer>
          <el-button
              type="primary"
              @click="edit(row)"
              v-if="$permissions('admin_sysaccountrole_edit')"
          >编辑角色
          </el-button>
        </template>
      </ai-dialog>
    </template>
  </ai-list>
</template>
<script>
export default {
  name: "accountRoleList",
  inject:{
    instance:{}
  },
  data() {
    return {
      searchInfo: "",
      pageSize: 10,
      tableData: [],
      multipleSelection: [],
      total: 0,
      pageNum: 1,
      row: {},
      deleteIds: [],
      copyDialog: false,
      roleName: "",
      viewShow: false,
      titleDel: "",
      form: {},
    };
  },
  methods: {
    getTableList() {
      this.tableData = [];
      this.instance.post(`/admin/role-acc/page`, null, {
        params: {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          roleName: this.searchInfo,
        },
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records;
          this.total = res.data.total;
          if (this.tableData.length) {
            this.tableData.map((item) => {
              if (item.appRoleList.length > 3) {
                item.appRoleListHtml = `${item.appRoleList[0].appName}-${item.appRoleList[0].name}；${item.appRoleList[1].appName}-${item.appRoleList[1].name}；${item.appRoleList[2].appName}-${item.appRoleList[2].name}；`;
              }
            });
          }
        }
      });
    },
    dataInit() {
      this.deleteIds = [];
      this.multipleSelection = [];
      this.row = {};
    },
    handleSelectionChange(val) {
      this.deleteIds = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach((e) => {
        this.deleteIds.push(e.id);
      });
    },
    allDelete() {
      this.titleDel = "确定要执行删除操作吗？";
      this.deleteRole();
    },
    beforeDelete(row) {
      this.deleteIds = [];
      this.row = row;
      this.titleDel = "确定需要删除该角色吗？";
      this.deleteIds.push(row.id);
      this.deleteRole();
    },

    beforeCopy(row) {
      this.row = row;
      this.copyDialog = true;
    },
    detailShow(row) {
      this.row = row;
      this.viewShow = true;
    },
    edit(row) {
      this.$router.push({
        hash: "#add",
        query: {
          info: row,
        },
      });
    },
    copyFn() {
      let crr = [];
      let appRoleList = this.row.appRoleList;
      appRoleList.forEach((e) => {
        crr.push(e.id);
      });
      this.instance.post(`/admin/role-acc/modify?appRoles=${crr}`, null, {
        params: {
          roleName: this.roleName,
        },
      })
      .then((res) => {
        if (res.code == 0) {
          this.$message({message: "复制成功", type: "success"});
          this.copyDialog = false;
          this.pageNum = 1;
          this.getTableList();
        }
      });
    },
    deleteRole() {
      this.$confirm(this.titleDel, {
        type: "error",
      })
      .then(() => {
        this.instance
        .post(`/admin/role-acc/del?ids=${this.deleteIds}`, null, {})
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("删掉角色成功");
            this.getTableList();
          }
        });
      })
      .catch(() => {
      });
    },
    mhSearch() {
      this.pageNum = 1;
      this.getTableList();
    },
    // 重置
    resetConditon() {
      this.pageNum = 1;
      this.searchInfo = "";
      this.getTableList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getTableList();
    },
  },
  created() {
    this.getTableList();
  },
};
</script>
<style lang="scss" scoped>
.accountRoleList {
  height: 100%;

  ::v-deep.ai-card {
    box-shadow: none;
    border: 1px solid #eee;

    .aibar {
      height: 40px;
      background: #f3f6f9;
    }

    .ai-card__body {
      padding: 0 16px;
    }
  }

  .view_info {
    color: #333;
    padding-left: 20px;
    margin-bottom: 10px;

    .info-title {
      margin-bottom: 10px;
    }
  }
}
</style>
