<template>
  <div id="root">
    <el-form :inline="true" :model="listQuery" class="form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="listQuery.roleName" placeholder="角色名称"/>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="cleanQuery">清空</el-button>
        <el-button type="primary" @click="queryData">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="but-content">
      <el-button type="primary" @click="addRole">添加</el-button>
      <el-button type="warning" @click="updateRole">修改</el-button>
      <el-button type="danger" @click="deleteRole">删除</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="listData"
      tooltip-effect="dark"
      style="width: 100%;margin-top: 20px;"
      border
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
        align="center"/>
      <el-table-column
        prop="roleName"
        label="角色名称"
        align="center">
        <template slot-scope="scope"><span style="color: #409EFF;cursor: pointer" @click="infoRole(scope.row.id)">{{ scope.row.roleName }}</span></template>
      </el-table-column>
      <el-table-column
        prop="description"
        label="角色描述"
        align="center"/>
      <el-table-column
        prop="createUserName"
        label="创建人"
        align="center"/>
      <el-table-column
        prop="createDate"
        label="创建时间"
        align="center">
        <template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template>
      </el-table-column>
      <el-table-column
        prop="updateUserName"
        label="修改人"
        align="center"/>
      <el-table-column
        prop="updateDate"
        label="修改时间"
        align="center">
        <template slot-scope="scope">{{ formatDate(scope.row.updateDate) }}</template>
      </el-table-column>
    </el-table>
    <div class="footer-page">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 40, 100]"
        :page-size.sync="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listQuery: {
        roleName: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0, // 总数
      listData: [],
      selectId: [], // 表格选择框
      listLoading: false // 表格加载框
    }
  },
  mounted() {
    this.getRoleList()
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    getRoleList() { // 查询Role列表
      this.listLoading = true
      this.$store.dispatch('GetRoleList', this.listQuery).then((response) => {
        const resCode = response.code
        const resData = response.data
        if (resCode === '0') {
          this.listData = resData.list
          this.listQuery.pageSize = resData.pageSize
          this.listQuery.pageNum = resData.pageNum
          this.total = resData.total
          this.listLoading = false
          return
        }
        this.$message.error(response.message)
        this.listLoading = false
      }).catch(() => {
        console.log('error GetRoleList')
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.getRoleList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      this.getRoleList()
    },
    handleSelectionChange(rows) { // 表格选择框
      this.selectId = []
      for (const i in rows) {
        this.selectId.push(rows[i].id)
      }
      console.log(rows)
    },
    formatDate(val) {
      if (val === null) {
        return
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      // var hour = value.getHours()
      // var minutes = value.getMinutes()
      // var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
      return year + '-' + month + '-' + day
    },
    queryData() { // 点击查询按钮
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.getRoleList()
    },
    cleanQuery() { // 清楚查询条件
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.listQuery.roleName = ''
      this.getRoleList()
    },
    deleteRole() { // 删除角色
      const ids = this.selectId
      if (ids.length <= 0) {
        this.$message.error('请至少选择一行!')
        return
      }
      this.$store.dispatch('DeleteRole', ids).then((res) => {
        if (res.code === '1') {
          this.$message.error(res.message)
          return
        }
        this.$message.success(res.message)
        this.getRoleList()
      }).catch(() => {
        console.log('error DeleteRole')
      })
    },
    updateRole() { // 修改角色
      const ids = this.selectId
      if (ids.length <= 0) {
        this.$message.error('请至少选择一行!')
        return
      }
      if (ids.length > 1) {
        this.$message.error('只能选择一行数据!')
        return
      }
      this.$router.push({ name: 'role-edi', query: { id: ids[0] }})
    },
    addRole() { // 添加角色
      this.$router.push({ name: 'role-add' })
    },
    infoRole(id) { // 查看角色详情
      this.$router.push({ name: 'role-info', query: { id: id }})
    }
  }
}
</script>

<style scoped>
.form-inline {
  margin-left: 20px;
  margin-top: 20px;
}
.but-content {
  margin-left: 20px;
}
.footer-page {
  display: flex;
  justify-content: flex-end;
}
</style>
