<template>
  <div class="role-manage-page">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入角色ID"
          class="search-input"
          v-model="searchContent.roleId"
          style="width: 200px"
          clearable
        />
        <Input
          placeholder="请输入角色名称"
          class="search-input"
          v-model="searchContent.roleName"
          style="width: 200px"
          clearable
          type="text"
        />
        <ButtonGroup class="search-btngroup" >
          <Button @click="handleSearch" type="primary">查找</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
        <Button @click="handleAdd" type="info">+ 添加角色</Button>
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import { AccountStatus, AccountStatusObj, RoleManageType, RoleManageObj } from '@/enums'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  computed: {},
  data () {
    return {
      AccountStatusObj,
      searchContent: {
        roleId: '',
        roleName: '',
        pageSize: 10,
        pageNum: 1
      },
      columns: [
        { title: 'UID', key: 'roleId', minWidth: 180, align: 'left' },
        { title: '角色名称', key: 'roleName', width: 150, align: 'center' },
        { title: '角色归属',
          key: 'type',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('span', RoleManageObj[params.row.type])
          }
        },
        { title: '权限',
          key: 'auth',
          minWidth: 200,
          align: 'left',
          render: (h, params) => {
            let newAuth = []
            if (params.row.auth.length > 6) {
              newAuth = params.row.auth.slice(0, 5)
            } else {
              newAuth = params.row.auth
            }
            return h('span',
              {
                style: {
                  color: '#5296ee'
                }
              },
              [
                h('Poptip', {
                  props: {
                    trigger: 'hover',
                    content: params.row.auth.join(','),
                    wordWrap: true,
                    width: 200,
                    transfer: true
                  }
                }, `${newAuth.join(',')}......`)
              ]
            )
          }
        },
        { title: '备注', key: 'remarks', minWidth: 150, align: 'left' },
        {
          title: '新建时间',
          key: 'adminId',
          width: 160,
          align: 'center',
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        {
          title: '状态',
          key: 'adminId',
          width: 100,
          align: 'center',
          render: (h, params) => {
            let obj = AccountStatusObj[params.row.status]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          }
        },
        {
          title: '操作',
          minWidth: 200,
          align: 'left',
          fixed: 'right',
          render: (h, params) => {
            let status = params.row.status
            let disableBtn = h(
              'Button',
              {
                props: {
                  type: status == AccountStatus.DISABLE ? 'primary' : 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleOffShelf(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              status == AccountStatus.DISABLE ? '可 用' : '禁 用'
            )
            let editBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleEdit(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '编 辑'
            )
            let deleteBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '删 除'
            )
            return h('div', [disableBtn, editBtn, deleteBtn])
          }
        }
      ],
      loading: false,
      totalSize: 0,
      tableData: []
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.searchContent.roleId = this.searchContent.roleId.replace(/\s+/g, '')
      this.searchContent.roleName = this.searchContent.roleName.replace(/\s+/g, '')
      this.api({
        apiName: 'roleManageList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    handleAdd () {
      this.$router.push({ name: 'add_role' })
    },
    handleEdit (row) {
      return () => {
        this.$router.push({ name: 'edit_role', query: { roleId: row.roleId } })
      }
    },
    handleDelete (row) {
      return () => {
        let roleId = row.roleId
        this.$Modal.confirm({
          title: '删除',
          content: `确认要删除此条数据吗 ？`,
          onOk: () => {
            this.api({
              apiName: 'deleteRoleManage',
              postdata: roleId,
              success: (res) => {
                this.requestData()
                this.$Notice.success({ title: `删除成功！` })
              }
            })
          }
        })
      }
    },
    handleOffShelf (row) {
      return () => {
        let roleId = row.roleId
        let apiName = row.status === AccountStatus.DISABLE ? 'ableRoleManage' : 'disableRoleManage'
        let title = row.status === AccountStatus.DISABLE ? '可用' : '禁用'
        this.$Modal.confirm({
          title,
          content: `确认要改变当前角色状态吗 ？`,
          onOk: () => {
            this.api({
              apiName,
              postdata: roleId,
              success: (res) => {
                this.requestData()
                this.$Notice.success({ title: '操作成功！' })
              }
            })
          }
        })
      }
    },
    handleSearch () {
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    }
  },
  created () {
    this.requestData()
  }
}
</script>
<style lang="less" scoped>
.search-con {
     padding: 10px 0;
}
.search-input {
    margin-right: 10px;
}
.search-btngroup {
    margin-right: 10px;
}
</style>
