<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>
        <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>
              <el-button v-else-if="item.reason" type="text"
                @click="blackReason(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="mini"
                type="primary"
                @click="handleRenew(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="baseInfo" :type="blackType"></baseInfo>
    <pullBlack ref="pullBlack"></pullBlack>
  </div>
</template>

<script>
import {
  pageBlackUser,
  cancelBlackUser
} from '@/api/userInfo'
import { parseTime } from '@/utils'
import comTable from '@/utils/comTable'
import queryBase from '@/utils/queryBase'

import baseInfo from './baseInfo'
import pullBlack from './pullBlack'
export default {
  data() {
    return {
      AllCitys: [],
      blackType: true,
      searchText: '',
      pageSize: 10,
      pageNo: 1,
      total: 0,
      tableData: [],
      tableLoading: true,
      tableItem: [
        {
          prop: 'loginPhone',
          tit: '手机账号',
          width: '120',
          link: true
        },
        {
          prop: 'account',
          tit: '用户名'
        },
        {
          prop: 'linkPhone',
          tit: '联系电话',
          width: '120'
        },
        {
          prop: 'email',
          tit: '联系邮箱',
          width: '160'
        },
        {
          prop: 'invalidTime',
          tit: '最后拉黑时间',
          width: '160'
        },
        {
          prop: 'invalidReason',
          tit: '最后拉黑理由',
          width: '240',
          reason: true
        },
        {
          prop: 'invalidOperator',
          tit: '操作人'
        },
        {
          operate: true,
          width: '100'
        }
      ]
    }
  },
  components: {
    baseInfo,
    pullBlack
  },
  created() {
    this.pageQueryUser()
  },
  methods: {
    pageQueryUser() {
      var that = this
      this.$http.get(pageBlackUser, {
        key: that.searchText,
        pageSize: that.pageSize,
        pageNo: that.pageNo
      }, function(res) {
        that.tableLoading = false
        if (res.success && res.data) {
          const obj = res.data.data
          for (let i = 0; i < obj.length; ++i) {
            if (obj[i].invalidTime) {
              obj[i].invalidTime = parseTime(obj[i].invalidTime)
            }
            if (obj[i].invalidOperator) {
              queryBase.getAdminUser(obj[i].invalidOperator, function(sc, value) {
                if (sc) {
                  obj[i].invalidOperator = value.name
                }
              })
            }
          }
          that.total = res.data.total
          that.tableData = obj
          comTable.gapFilling(that.tableData)
        } else {
          that.total = 0
          that.tableData = []
        }
      })
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.pageQueryUser()
    },
    queryInfo(id) {
      this.$refs.baseInfo.queryBlackOne(id)
    },
    blackReason(id) {
      this.$refs.pullBlack.queryBlackOne(id)
    },
    handleRenew(id) {
      var that = this
      this.$http.get(cancelBlackUser, {
        id: id
      }, function(res) {
        if (res.success) {
          that.pageQueryUser()
        }
      })
    }
  }
}
</script>