<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">正常用户</div>
      <div class="contain-search">
        <el-input placeholder="搜索用户名/手机账号" v-model="searchText" maxlength="20" class="input-with-select" @keyup.enter.native="pageQueryUser">
          <el-button slot="append" icon="el-icon-search" @click="pageQueryUser"></el-button>
        </el-input>
      </div>
    </div>
    <div class="content-container">
      <el-table
        :data="tableData"
        height="630"
        v-loading="tableLoading"
        border ref="tableEle">
        <el-table-column
          v-for="item in tableItem"
          :key="item.index"
          :prop="item.prop ? item.prop : ''"
          :label="item.tit ? item.tit : ''"
          :width="item.width ? item.width : ''"
          align="center">
          <template slot-scope="scope">
            <div v-if="scope.row[item.prop]">
              <el-button v-if="item.link" type="text"
                @click="queryInfo(scope.row.id)">{{scope.row[item.prop]}}</el-button>
              <span v-else>{{scope.row[item.prop]}}</span>
            </div>
            <div class="operate-row" v-if="item.operate && typeof scope.row === 'object'">
              <el-button
                size="medium"
                type="danger"
                @click="pullBlackFun(scope.row.id)">拉黑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <baseInfo ref="baseInfoView"></baseInfo>
    <pullBlack ref="pullBlack"></pullBlack>
  </div>
</template>

<script>
import { pageNormalUser } from '@/api/userInfo'
import { parseTime } from '@/utils/index'
import comTable from '@/utils/comTable'

import baseInfo from './baseInfo'
import pullBlack from './pullBlack'
export default {
  data() {
    return {
      searchText: '',
      pageSize: 10,
      pageNo: 1,
      total: 0,
      tableData: [],
      tableLoading: true,
      tableItem: [
        {
          prop: 'loginPhone',
          tit: '手机账号',
          width: '120',
          link: true
        },
        {
          prop: 'account',
          tit: '用户名'
        },
        {
          prop: 'job',
          tit: '职位'
        },
        {
          prop: 'comp',
          tit: '所在机构'
        },
        {
          prop: 'linkPhone',
          tit: '联系电话',
          width: '120'
        },
        {
          prop: 'email',
          tit: '联系邮箱',
          width: '160'
        },
        {
          prop: 'createTime',
          tit: '创建时间',
          width: '160'
        },
        {
          prop: 'createTime',
          tit: '最后登录时间',
          width: '160'
        },
        {
          operate: true,
          width: '100'
        }
      ]
    }
  },
  components: {
    baseInfo,
    pullBlack
  },
  created() {
    this.pageQueryUser()
  },
  methods: {
    pageQueryUser() {
      var that = this
      this.$http.get(pageNormalUser, {
        key: that.searchText,
        pageSize: that.pageSize,
        pageNo: that.pageNo
      }, function(res) {
        that.tableLoading = false
        if (res.success && res.data) {
          const obj = res.data.data
          if (obj.length > 0) {
            for (let i = 0; i < obj.length; ++i) {
              if (obj[i].createTime) {
                obj[i].createTime = parseTime(obj[i].createTime)
              }
            }
            that.total = res.data.total
            that.tableData = obj
            comTable.gapFilling(that.tableData)
          } else {
            that.pageNo = 1
            that.total = 0
            that.tableData = []
          }
        } else {
          that.pageNo = 1
          that.total = 0
          that.tableData = []
        }
      })
    },
    queryInfo(id) {
      this.$refs.baseInfoView.queryNormalOne(id)
    },
    pullBlackFun(id) {
      this.$refs.pullBlack.queryNormalOne(id)
    },
    handleCurrentChange(val) {
      this.$refs.tableEle.bodyWrapper.scrollTop = 0
      this.pageNo = val
      this.pageQueryUser()
    }
  }
}
</script>