<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">已激活企业</div>
      <div class="contain-search">
        <el-input placeholder="搜索企业名称" v-model="searchText" class="input-with-select" @keyup.enter.native="pageQuery">
          <el-button slot="append" icon="el-icon-search" @click="pageQuery"></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 type="text" v-if="item.link"><a :href="queryDetailShow(scope.row.id)" target="_blank">{{scope.row[item.prop]}}</a></el-button>
              <div v-else-if="item.tag">
                <el-tag style="margin:2px" v-for="tag in scope.row[item.prop]" :key="tag.index">{{tag}}</el-tag>
              </div>
              <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>
  </div>
</template>

<script>
import {
  pageCompany,
  queryCompKeyword,
  activeUserName
} from '@/api/companyCen'
import { parseTime, xtUrl } from '@/utils'
import comTable from '@/utils/comTable'
export default {
  data() {
    return {
      searchText: '',
      pageSize: 10,
      pageNo: 1,
      total: 0,
      tableData: [],
      tableLoading: true,
      tableItem: [
        {
          prop: 'name',
          tit: '企业名称',
          link: true
        },
        {
          prop: 'industry',
          tit: '所属行业',
          tag: true,
          width: '240'
        },
        {
          prop: 'linkman',
          tit: '联系人'
        },
        {
          prop: 'linkphone',
          tit: '联系电话',
          width: '120'
        },
        {
          prop: 'linkemail',
          tit: '联系邮箱',
          width: '160'
        },
        {
          prop: 'activeTime',
          tit: '激活时间',
          width: '160'
        },
        {
          prop: 'activeUname',
          tit: '关联用户名',
          width: '160'
        }
      ]
    }
  },
  components: {
  },
  created() {
    this.pageQuery()
  },
  methods: {
    pageQuery() {
      var that = this
      this.$http.get(pageCompany, {
        name: that.searchText,
        actived: 1,
        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) {
            var hData = { num: 1, data: obj }
            for (let i = 0; i < obj.length; ++i) {
              if (obj[i].activeTime) {
                obj[i].activeTime = parseTime(obj[i].activeTime)
              }
              (function(item, num) {
                item.industry = []
                item.activeUname = ''
                that.getActiveUserName(item, num)
                that.getCompanyKeyword(item, num)
              })(obj[i], hData.num)
            }
            hData.num--
            that.total = res.data.total
            if (hData.num === 0) {
              that.tableData = obj
            }
            comTable.gapFilling(that.tableData)
          }
        } else {
          that.total = 0
          that.tableData = []
        }
      })
    },
    getCompanyKeyword(lmt, num) {
      var that = this
      var objKey = []
      num++
      that.$http.get(queryCompKeyword, {
        id: lmt.id,
        type: 1
      }, function(res) {
        num--
        if (res.success && res.data) {
          const str = res.data
          if (str.length > 0) {
            str.map(item => {
              objKey.push(item.value)
            })
            lmt.industry = objKey
            that.$forceUpdate()
          }
        }
      })
    },
    getActiveUserName(lmt, num) {
      var that = this
      num++
      that.$http.get(activeUserName, {
        id: lmt.id
      }, function(data) {
        num--
        if (data.success && data.data) {
          lmt.activeUname = data.data
          that.$forceUpdate()
        }
      })
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.pageQuery()
    },
    queryDetailShow(id) {
      return xtUrl + '/company.html?id=' + id
    }
  }
}
</script>