<template>
  <div>
    <ul class="role-menu">
      <li class="no-data" v-if="!Array.isArray(roleList) || roleList.length == 0">暂无数据</li>
      <li :class="['role-item', { active: activeRoleId == el.roleId }]" v-for="el in roleList" :key="el" @click="onChangeRole(el)">
        <span class="role-name">{{ el.roleName }}</span>
        <el-dropdown placement="bottom-start">
          <i class="iconfont icongengduo edit-icon"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="onEditRole(el)">编辑</el-dropdown-item>
            <el-dropdown-item v-if="showDelRoleButton" @click.native="onDelRole(el)">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
    </ul>
    <!-- 删除角色 -->
    <el-dialog :visible.sync="delRole.show" title="删除角色" width="600px" @closed="onDelRoleClose">
      <div class="del-role">
        <i class="el-icon-warning"></i>
        <div class="del-role-content">
          <p class="del-role-tip">确认删除“{{ delRole.roleName }}”角色吗？</p>
          <p class="del-role-tip">请在输入框中输入该角色名称，以避免误操作。</p>
          <el-input style="margin-top: 10px;width: 440px" v-model.trim="delRole.roleNameInput"></el-input>
        </div>
      </div>
      <template slot="footer">
        <el-button @click="delRole.show = false">取消</el-button>
        <el-button type="primary" :loading="delRole.loading" @click="onDelRoleSure">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/admin-list.js';

const { delRole } = api;

export default {
  name: 'RoleList',
  props: {
    roleList: {
      type: Array,
      default: () => []
    },
    activeRoleId: [ String, Number ],
    showDelRoleButton: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 删除角色弹窗
      delRole: {
        show: false,
        loading: false,
        // 角色id
        roleId: '',
        // 角色名称
        roleName: '',
        // 用户输入的角色名称
        roleNameInput: '',
      },
    };
  },
  methods: {
    onChangeRole(roleData) {
      this.$emit('change-role', roleData);
    },
    // 新建角色、编辑角色跳转
    onEditRole(roleData) {
      this.$emit('edit-role', roleData);
    },
    // 删除角色
    onDelRole(roleData) {
      const { roleId, roleName } = roleData;
      Object.assign(this.delRole, { show: true, roleId, roleName });
    },
    onDelRoleClose() {
      Object.assign(this.delRole, { roleId: '', roleName: '', roleNameInput: '' });
    },
    // 确认删除角色
    onDelRoleSure() {
      const { roleId, roleName, roleNameInput } = this.delRole;
      if (roleNameInput.length == 0) {
        return this.$message.warning('请输入角色名称！');
      }
      if (roleName != roleNameInput) {
        return this.$message.warning('请输入正确的角色名称！');
      }
      this.delRole.loading = true;
      delRole({ roleId }).then(res => {
        if (res.code == '0000') {
          this.$message.success('删除成功！');
          // 如果被删除的角色是当前选中的角色，需要将选中的角色id置空
          this.$emit('del-role-succ', roleId == this.activeRoleId);
          this.delRole.show = false;
        }
      }).finally(() => this.delRole.loading = false);
    },
  }
};
</script>

<style lang="less" scoped>
.role-menu {
  .role-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px 5px 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: @gray02;
    cursor: pointer;
    &.active {
      color: @blue;
      background-color: rgba(47,84,235,0.05);;
    }
    &:hover {
      color: @blue;
      background-color: rgba(47,84,235,0.05);;
      .edit-icon {
        opacity: 1;
        color: @blue;
        background-color: rgba(47,84,235,0.09);
      }
    }
    .edit-icon {
      padding: 4px;
      opacity: 0;
      font-size: 12px;
    }
    .role-name {
      display: block;
      width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .no-data {
    padding: 10px 0 40px 0;
    text-align: center;
    color: @gray03;
  }
}
.del-role {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  .el-icon-warning {
    color: #E6A23C;
    font-size: 24px;
  }
  .del-role-content {
    margin-left: 10px;
    .del-role-tip {
      font-size: 14px;
      font-weight: 400;
      color: @gray02;
      line-height: 20px;
    }
  }
}
</style>
