<template>
  <div v-loading="loading">
    <div class="white-box">
      <div class="filter-box">
        <filter-user :filter-types.sync="filterTypes" filter-btn-name="筛选"
                     @select-value="handleFilterUser"></filter-user>
      </div>
      <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange" :height="tool.getTableHeight()">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="ROLE_NAME" label="角色">
          <template slot-scope="scope">
            <el-tag type="warning" size="small" class="no-border">{{scope.row.ROLE_NAME}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="REMARK" label="备注"></el-table-column>
        <el-table-column label="创建人">
          <template slot-scope="scope">
            {{scope.row.CREATE_ADMIN_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="修改人">
          <template slot-scope="scope">
            {{scope.row.UPDATE_ADMIN_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="修改时间">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.UPDATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-dropdown size="small" trigger="click" @command="handleRow" @click.stop="" v-if="scope.row.DONT_DEL==='0'&&(permission.hasPermission(`admin/role-permission`)||permission.hasPermission(`admin/role-edit`)||permission.hasPermission(`admin/role-delete`))">
              <el-button type="primary" size="small">
                操作该数据<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="`permission|${scope.row.ID}`" v-if="permission.hasPermission(`admin/role-permission`)">权限</el-dropdown-item>
<!--                <el-dropdown-item :command="`column|${scope.row.ID}`" v-if="permission.hasPermission(`admin/role-column`)">列表字段权限</el-dropdown-item>-->
                <el-dropdown-item :command="`edit|${scope.row.ID}`" v-if="permission.hasPermission(`admin/role-edit`)">编辑</el-dropdown-item>
                <el-dropdown-item :command="`delete|${scope.row.ID}`" v-if="permission.hasPermission(`admin/role-delete`)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <el-dropdown size="small" trigger="click" @command="muliDelHandle" v-if="permission.hasPermission(`admin/role-delete`)">
          <el-button type="primary" size="small">
            所选数据<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="delete">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" size="small" @click="onAdd" icon="el-icon-plus" v-if="permission.hasPermission(`admin/role-add`)">添加角色</el-button>
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import FilterUser from '@/components/FilterUser'
  import permission from '@/utils/permission'
  import Pagination from '@/components/Pagination'
  import filterHelper from '../../utils/filterHelper'

  export default {
    name: 'role',
    components: {FilterUser,Pagination},
    created() {

    },
    mounted() {
      this.getData()
    },
    data() {
      return {
        tableData: null,
        loading: true,
        multipleSelection: [],
        currentPage: 1,
        totalPages: 1,
        totalCount: 1,
        pageSize: 20,
        tool: tool,
        permission: permission,
        filterData: null,
        filterTypes: {
          'ROLE_NAME': {isUserTable: false, name: '角色'},
          'REMARK': {isUserTable: false, name: '备注'},
          'CREATE_ADMIN_NAME': {isUserTable: false, name: '创建人'},
          'CREATED_AT': {isUserTable: false, name: '创建时间', other: 'date'},
          'UPDATE_ADMIN_NAME': {isUserTable: false, name: '修改人'},
          'UPDATED_AT': {isUserTable: false, name: '修改时间', other: 'date'},
        },
        filterModel: {},
      }
    },
    methods: {
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      handleCurrentChange (page) {
        this.getData(this, page, this.pageSize)
      },
      handleSizeChange (pageSize) {
        this.getData(this, this.currentPage, pageSize)
      },
      handleRow (command) {
        let re = command.split('|')
        this.handleCommand(re[0], re[1])
      },
      handleCommand (command, id) {
        if (command === 'edit') {
          this.$router.push({path: `/admin/role-edit/${id}`})
        } else if (command === 'permission') {
          this.$router.push({path: `/admin/role-permission/${id}`})
        } else if (command === 'column') {
          this.$router.push({path: `/admin/role-column/${id}`})
        } else if (command === 'delete') {
          this.delHandle(this, id)
        }
      },
      onAdd() {
        this.$router.push({path: `/admin/role-add`})
      },
      delHandle(obj,id) {
        obj.$confirm('确定删除选定的数据？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          network.getData(`admin/role-delete/${id}`).then(response => {
            this.$message({
              message: response,
              type: 'success'
            })
            this.getData()
          })
        })
      },
      muliDelHandle(command) {
        if (command === 'delete') {
          this.$confirm('确定删除选定的数据？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let selectedIds = []
            for (let val of this.multipleSelection) {
              selectedIds.push(val.ID)
            }
            network.postData(`admin/role-delete`, {
              selected: selectedIds
            }).then(response => {
              this.$message({
                message: response,
                type: 'success'
              })
              this.getData()
            })
          })
        }
      },
      handleFilterUser(filterData) {
        filterHelper.handleFilterUser(this, filterData)
      },
      handleFilter() {
        this.getData()
      },
      getData(page, pageSize) {
        let filterData = this.filterModel
        let vueObj = this
        network.getPageData(this, 'admin/role', page, pageSize, filterData, function (response) {
          vueObj.allData = response
        })
      },
    }
  }
</script>

<style scoped>

</style>
