<template>
  <div class="flex-container">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline">
        <a-row :gutter="24">
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
              <a-button type="primary" style="margin-right:15px;" @click="showModal('add')">添加</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>
    <s-table
            ref="table"
            size="small"
            :columns="columns"
            class="flex-filling"
            :data="rowdata"
            style="word-break: break-all;"
            bordered
    >
      <template slot="operation" slot-scope="text, record">
                <span>
                  <a @click="showModal(record.id)">修改</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
      </template>
    </s-table>
    <!-- 弹窗 -->
    <rolemodal ref="model1" @ok="reflashTable()"></rolemodal>
  </div>
</template>

<script>

import { userManage ,userDelete } from '@/api/system'
import STable from '@/components/table/'

import treecheck from '@/components/sysmanage/treeCheck'
import rolemodal from './modal/roleModal'

export default {
  name:"userManage",
  components: {
    STable,
    treecheck,
    rolemodal
  },
  data() {
    return {
      treelist: [],
      columns: [
        { dataIndex: 'name', hide: true, sort: true, title: '名称' ,width:230},
        { dataIndex: 'pName', sort: true, title: '上级角色',width:300},
        { dataIndex: 'description', sort: true, title: '别名',width:230},
        { title: '操作', key: 'action', scopedSlots: { customRender: 'operation' } }
      ],
      queryParams: {
        roleName: ''
      },
      rowdata: parameter => {
        let params = {
          page: parameter.pageNo,
          limit: parameter.pageSize
        }
        return userManage(Object.assign(params, this.queryParams)).then(res => {
          let data = {
            data: res.rows,
            pageSize: parameter.pageSize,
            pageNo: parameter.pageNo,
            totalCount: res.total
          }

          return data
        })
      },


    }
  },
  methods: {

    reflashTable() {
      this.$refs.table.refresh({ search: true })
    },

    remove(roleId) {
      let that = this;
      userDelete({roleId}).then(() =>{
        that.reflashTable();
      })
    },
    showModal(type){

      this.$refs.model1.showModal(type)
    }

  },
  computed: {
    rowSelection() {

      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name
          }
        })
      }
    }
  }
}
</script>



