<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="queryParams.name" clearable placeholder="请输入角色名称" size="small" style="width: 240px"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="roleList" highlight-current-row @current-change="handleCurrentChange">
      <el-table-column label="角色编号" prop="id" width="120"/>
      <el-table-column :show-overflow-tooltip="true" label="角色名称" prop="name" width="150"/>
      <el-table-column :show-overflow-tooltip="true" label="角色标识" prop="code" width="150"/>
      <el-table-column label="角色类型" prop="type" width="80">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.SYSTEM_ROLE_TYPE" :value="scope.row.type"/>
        </template>
      </el-table-column>
      <el-table-column label="显示顺序" prop="sort" width="100"/>
      <el-table-column align="center" label="状态" width="100">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" disabled/>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total"
                @pagination="loadData"/>
  </div>
</template>

<script>
import {listRole,} from "../../api/system";
export default {
  name: "RoleChoose",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      roleList: [],
      currentRow: {},
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        name: undefined,
      },
      // 表单校验
      rules: {
        name: [
          {required: true, message: "角色名称不能为空", trigger: "blur"}
        ]
      },


    };
  },
  watch: {},
  created() {
    this.loadData();
  },
  methods: {
    getData() {
      return {value: this.currentRow.id, label: this.currentRow.name}
    },
    handleCurrentChange(row) {
      this.currentRow = row;
    },
    /** 查询角色列表 */
    loadData() {
      this.loading = true;
      listRole(this.queryParams).then(
          response => {
            this.roleList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.loadData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
