<template>
  <div>
    <div class="flex-align-center flex-between" style="margin-bottom:10px">
      <slot name="add"></slot>
      <div class="flex-align-center search-panel">
        <!-- <el-input size="small" placeholder="请输入搜索内容"></el-input>&nbsp;<el-button size="small" type="">查询</el-button> -->
        <el-input size="small" placeholder="请输入查询内容" v-model="value">
          <template slot="append"><i class="el-icon-search"></i>查询</template>
        </el-input>
      </div>
    </div>
    <el-table
      :data="list"
      style="width: 100%"
      size="mini"
      highlight-current-row
      border
      :header-cell-style="{background:'#f1f2f3',color:'#333'}"
      @row-click="rowClick">
      <el-table-column
        prop="accountno"
        label="账号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="phonenumber"
        label="联系电话">
      </el-table-column>
      <el-table-column
        label="站点">
        <template slot-scope="scope">
          <el-tag v-for="item in scope.row.usersite" :key="item.index" size="mini" type="primary" effect="dark" style="margin:0 2px">{{item.sitename}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <el-tag size="mini" :type="scope.row.status === 'ACTIVE'?'success':'info'" effect="dark">{{scope.row.status === 'ACTIVE'?'启用中':scope.row.status}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:20px 0">
      <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.users.users",
        "method": "query_userList",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where":{
            "condition":""
          }
        }
      },
      list:[],
      total:0,
      currentPage:0,
      value:''
    }
  },
  methods:{
    listData () {
      this.$api.requested(this.param).then(res=>{
        this.list = res.data
        this.total = res.total
        this.currentPage = res.pageNumber
        this.rowClick(res.data[0])
      })
    },
    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('rowClick',row)
    }
  },
  mounted () {
    this.listData()
  }
}

</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{
  width: 300px;
  /* margin-bottom: 10px; */
}
</style>