<template>
    <div>
        <ButtonGroup class="btn-group">
            <Button class="btn-content" :loading="btnLoading" @click="roleSelect(dataObj.id, dataObj.name)">{{dataObj.name}}</Button>
            <Button class="btn-del" icon="md-close" @click="delBtn(dataObj.id)"></Button>
        </ButtonGroup>
    </div>
</template>

<script>
import {
  getMenuForRoleList,
  deleteRole
} from '../../../../../api/system/sys-staff-role-manager'
export default {
  name: 'roleGroup',
  props: {
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      btnLoading: false
    }
  },
  methods: {
    // 删除角色按钮操作
    delBtn (val) {
      this.$Modal.confirm({
        title: '确认删除此角色么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteRole(val)
        }
      })
    },
    // 删除角色接口
    deleteRole (val) {
      deleteRole({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.success()
          this.$emit('delOption')
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    // 点击角色按钮处理
    roleSelect (roleId, roleName) {
      const data = {
        role_id: roleId
      }
      this.getMenuForRoleList(data, roleId, roleName)
    },
    // 获取当前角色绑定数据接口
    getMenuForRoleList (data, roleId, roleName) {
      this.btnLoading = true
      getMenuForRoleList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.$emit('bindOption', data.data, roleId, roleName)
        } else {
          this.btnLoading = false
          this.error(data)
        }
      })
    },
    // 成功提示框
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    // 失败提示框
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
  },
  watch: {
  }
}
</script>

<style scoped>
    .btn-group {
        width: 150px;
        margin-bottom: 10px;
    }

    .btn-content {
        width: 70%;
    }

    .btn-del {
        width: 20%;
        color: red;
    }
</style>
