<template>
  <div>
    <!-- 表格搜索 -->
    <div class="flex-align-center search-panel" style="margin-bottom:16px">
      <div class="flex-align-center">
        <p>搜索:</p>
        <el-input size="small" placeholder="角色名称,角色描述" @clear="listData('search')" @keyup.native.enter="listData('search')"  v-model="param.content.where.condition" prefix-icon="el-icon-search" clearable></el-input>
      </div>
      <div class="flex-align-center" style="margin-left:30px">
        <p style="width:80px">角色类型:</p>
        <el-select style="width:120px;" size="small" v-model="param.content.where.usertype" clearable placeholder="请选择" @change="listData('search')">
          <el-option v-for="item in options" :label="item.remarks" :value="item.value" :key="item.index"></el-option>
        </el-select>
      </div>
    </div>
    <tableLayout :layout="tablecols" :data="list" :custom="true" :height="tableHieght">
      <template v-slot:customcol="scope">
        <p v-if="scope.column.columnname === 'status'">
          <span :style="scope.column.data.status === 'ACTIVE'?'color:#52C41A':'color:#FF3B30'">{{scope.column.data.status === 'ACTIVE'?'启用':scope.column.data.status === 'INACTIVE'?'停用':'其他'}}</span>
        </p>
        <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
      </template>
      <template v-slot:opreation="scope">
        <slot name="detail" :data="scope.data"></slot>
        <slot name="edit" :data="scope.data"></slot>
        <slot name="delete" :data="scope.data"></slot>
      </template>
    </tableLayout>
    <div style="margin-top:16px;text-align:right">
      <el-pagination
        background
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="param.content.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      param:{
        "classname": "webmanage.role.role",
        "method": "query_roleList",
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "where":{
              "condition":"",
              "usertype":"",
            }
        }
      },
      options:[],
      tablecols:[],
      list:[],
      total:0,
      currentPage:0,
    }
  },
  methods:{
    async usertype () {
      let param = {
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "typename": "usertype",
            "parameter": {
            }
        }
      }
      const res = await this.$api.requested(param)
      this.options = res.data
    },
    listData (issearch) {
      issearch === 'search'?this.param.content.pageNumber = 1:''
      this.$api.requested(this.param).then(res=>{
        this.list = res.data
        this.total = res.total
        this.currentPage = res.pageNumber
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    rowClick (row) {
      this.$emit('onRowClick',row)
    },
    deleteClick (row) {
      this.$emit('deleteClick',row)
    }
  },
  mounted () {
    this.listData()
    this.usertype()
    // 获取角色表结构
    this.tablecols = this.tool.tabelCol(this.$route.name).roleTable.tablecols
  }
}

</script>
<style>
.el-input-group__append, .el-input-group__prepend{
  background-color: #4F7BFD ;
  color: #fff;
  border: 1px solid #4F7BFD;
  cursor: pointer;
}
</style>
<style scoped>
.search-panel p{
  flex: 1 0 auto;
  width:40px;
  font-size:14px
}
</style>