<template>
  <div class="layout-no-cols right-list-toolbar">
    <div class="member-role-page tool-box">
      <el-toolbar>
        <el-col :span="14">
          <el-button @click="addRoleClickHandler" priv="Member.Role.Add">
            <i class="fa fa-plus" aria-hidden="true"></i> 新建
          </el-button>
        </el-col>
        <el-col :span="10" class="search-box-r tool-search-box-r">
          <el-input v-model="searchKey" placeholder="请输入角色名/角色代码" class="search-bar-algin-toolbar" @keyup.enter.native="searchClickHandlder"></el-input>
          <span class="search-icon"><i class="fa fa-search" @click="searchClickHandlder" title="查询"></i></span>
        </el-col>
      </el-toolbar>
      <el-table ref="roleList" class="member-role-list" :data-read-url="getData">
        <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
        <el-table-column label="角色名称">
          <template slot-scope="scope">
            <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(scope.row)">{{scope.row.roleName}}</a>
          </template>
        </el-table-column>
        <el-table-column  label="角色代码">
          <template slot-scope="scope">
            <span>{{scope.row.roleCode}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="right">
          <template slot-scope="scope">
            <el-button @click.stop="editRoleClickHandler(scope.row)" type="text" title="编辑" priv="Member.Role.Edit">
              <i class="fa fa-edit f16" aria-hidden="true"></i>
            </el-button>
            <el-button @click.stop="delClickHandler(scope.row)" type="text" title="删除" priv="Member.Role.Delete">
              <i class="fa fa-remove f16" aria-hidden="true"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
// const roleDynamicRouters = {
// //   page:require('./roleAddOrEditPage.vue').default
//   pagePath: './roleAddOrEditPage.vue'
// }
export default {
  data() {
    return {
      roleList: [],
      searchKey: ''
    }
  },
  methods: {
    gotoDetailPage(row) {
      if (!row || !row.roleCode) {
        return
      }
      this.$router.push({path: `/member/roleInfo/${row.roleCode}`})
    },
    searchClickHandlder() {
      this.$refs.roleList.getData()
    },
    // 添加角色
    addRoleClickHandler() {
      //  let aRouter = util.addRoute(roleDynamicRouters.pagethis)
      this.$router.push({path: '/member/role/new'})
    },
    // 编辑角色
    editRoleClickHandler(row) {
      if (!row || !row.roleCode) {
        return
      }
      //  let aRouter = util.addRoute(roleDynamicRouters.page this)
      //  this.$router.push({path: aRouter.pathquery: { roleCode: row.roleCode }})
      this.$router.push({path: `/member/role/${row.roleCode}`})
    },
    // 删除角色
    async delClickHandler(row) {
      if (!row || !row.roleCode) {
        return
      }
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      try {
        let res = await axios.delete(`/ui/memberroles/${row.roleCode}`)
        util.showMessage(res)
        if (res.data.status === 1) {
          this.$refs.roleList.getData()
        }
      } catch (e) {
        // util.showErrorNotification(e)

      }
    },
    getData() {
      return ['/ui/memberroles',
        {
          params: { searchName: encodeURIComponent(this.searchKey.trim()) }
        }
      ]
    }
  }
}
</script>

<style scoped>
  .member-role-page .member-role-list .list-card-title {
    font-size: 14px;
  }
</style>
