<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="50" class="input-with-select" @keyup.enter.native="pageQuery">
          <el-button slot="append" icon="el-icon-search" @click="pageQuery"></el-button>
        </el-input>
      </div>
      <div class="contian-operate">
        <el-button type="primary" @click="queryCompanyInfo">添加企业</el-button>
      </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="primary"
                @click="handelInvite(scope.row)">邀请</el-button>
              <el-button
                size="medium"
                type="primary"
                @click="handelEdit(scope.row.id)">修改</el-button>
              <el-button
                size="medium"
                type="primary"
                @click="handelProduct(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>
    <inviteIn ref="inviteInter"></inviteIn>
  </div>
</template>

<script>
import {
  pageCompany,
  queryInviteCode,
  queryCompKeyword
} from '@/api/companyCen'
import { parseTime, xtUrl } from '@/utils'
import comTable from '@/utils/comTable'
import inviteIn from './invite'
export default {
  data() {
    return {
      searchText: '',
      pageSize: 10,
      pageNo: 1,
      total: 0,
      tableData: [],
      tableLoading: true,
      tableItem: [
        {
          prop: 'name',
          tit: '企业名称',
          link: true,
          width: '200'
        },
        {
          prop: 'industry',
          tit: '所属行业',
          tag: true,
          width: '240'
        },
        {
          prop: 'linkman',
          tit: '联系人'
        },
        {
          prop: 'linkphone',
          tit: '联系电话',
          width: '120'
        },
        {
          prop: 'linkemail',
          tit: '联系邮箱',
          width: '160'
        },
        {
          prop: 'createTime',
          tit: '创建时间',
          width: '160'
        },
        {
          prop: 'inviteCode',
          tit: '邀请码'
        },
        {
          prop: 'activeTime',
          tit: '最后邀请时间',
          width: '160'
        },
        {
          operate: true,
          width: '200'
        }
      ]
    }
  },
  components: {
    inviteIn
  },
  created() {
    this.pageQuery()
  },
  methods: {
    pageQuery() {
      var that = this
      this.$http.get(pageCompany, {
        name: that.searchText,
        actived: 0,
        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].createTime) {
                obj[i].createTime = parseTime(obj[i].createTime)
              }
              if (obj[i].activeTime) {
                obj[i].activeTime = parseTime(obj[i].activeTime)
              }
              (function(item, num) {
                item.industry = []
                item.inviteCode = ''
                that.getInviteCode(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.pageNo = 1
            that.total = 0
            that.tableData = []
          }
        } else {
          that.pageNo = 1
          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()
          }
        }
      })
    },
    getInviteCode(lmt, num) {
      var that = this
      num++
      that.$http.get(queryInviteCode, {
        id: lmt.id
      }, function(data) {
        num--
        if (data.success && data.data) {
          lmt.inviteCode = data.data.inviteCode
          that.$forceUpdate()
        }
      })
    },
    queryCompanyInfo() {
      this.$router.replace({ name: 'compInfo' })
    },
    handelEdit(id) {
      this.$router.replace({
        name: 'compInfo',
        query: { id: id }
      })
    },
    handelProduct(id) {
      this.$router.replace({
        name: 'compProduct',
        query: { cid: id }
      })
    },
    handelInvite(row) {
      this.$refs.inviteInter.queryInviteInfo(row)
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.pageQuery()
    },
    queryDetailShow(id) {
      return xtUrl + '/company.html?id=' + id
    }
  }
}
</script>
