<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">企业数据统计</div>
    </div>
    <div class="content-container">
      <div class="content-item" style="padding-top:0">
        <el-row :gutter="20">
          <el-col :span="12" style="border-right: 1px solid #ccc;">
            <div class="content-item-tit">企业总浏览量统计</div>
            <div class="line-chart-box">
              <LineChart :chartData="chartData"></LineChart>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="content-item-tit">企业状态统计</div>
            <div class="line-chart-box">
              <PieChart :chartData="chartDataPie"></PieChart>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="content-item">
        <div class="content-item-tit">企业浏览量查询</div>
        <div class="contain-search" style="margin-top:20px; width:95%">
          <el-form :model="formFilter" class="demo-form" label-width="100px">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="企业名称：">
                  <el-input v-model="formFilter.name" placeholder="搜索企业名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属行业：">
                  <el-input v-model="formFilter.industry" placeholder="搜索所属行业"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="企业状态：">
                  <el-select v-model="formFilter.actived" placeholder="选择分类" clearable @change="catalogChanged">
                    <el-option :label="item.tit" :value="item.val" v-for="item in [{tit: '已激活', val: '1'},{tit: '未激活', val: '0'}]" :key="item.index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间：">
                  <el-date-picker v-model="formFilter.dateRange" type="daterange"
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    format="yyyy-MM-dd" value-format="yyyyMMdd" @change="changeRangerDate">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="排序方式：">
                  <el-select v-model="formFilter.orderBy" placeholder="选择排序方式" @change="sortChanged">
                    <el-option label="按创建时间由新到旧排序" value="1"></el-option>
                    <el-option label="按浏览量由高到底排序" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label-width="30px" align="right">
                  <el-button type="primary" @click="filterSearch">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <complex-table :tableData="tableData" :tableItem="tableItem" :total="total" :jump="'company'" v-on:current="current" :chartLine= true @showChart="showChart"></complex-table>
      </div>
    </div>
    <el-dialog title="企业流量分析" :visible.sync="ChartItemDialogVisible" width="860px">
      <LineChart :chartData="chartOneData"></LineChart>
    </el-dialog>
  </div>
</template>

<script>
import { pqCompanyFilterList, queryTotalView, queryOneView, pqCompanyState } from '@/api/statistics'
import { queryCompKeyword } from '@/api/companyCen'

import { parseTime } from '@/utils/index'
import complexTable from '@/components/complexTable'
import ret from '@/utils/comTable'
import LineChart from './lineChart/LineChart'
import PieChart from './lineChart/PieChart'
import { dayListFn, chartModel } from './lineChart/chart'

export default {
  data() {
    return {
      ChartItemDialogVisible: false,
      formFilter: {
        name: '',
        industry: '',
        actived: '',
        dateRange: '',
        orderBy: '1'
      },
      pageSize: 10,
      pageNo: 1,
      total: 0,
      tableData: [],
      tableItem: [
        {
          tit: '图表',
          chart: true,
          width: 80
        },
        {
          prop: 'name',
          tit: '企业名称',
          active: 'active'
        },
        {
          prop: 'industry',
          tit: '所属行业',
          tag: true
        },
        {
          prop: 'linkman',
          tit: '联系人'
        },
        {
          prop: 'linkphone',
          tit: '联系电话',
          width: '120'
        },
        {
          prop: 'linkemail',
          tit: '联系邮箱',
          width: '160'
        },
        {
          prop: 'createTime',
          tit: '创建时间',
          width: '160'
        },
        {
          prop: 'sum',
          tit: '浏览数量'
        }
      ],
      chartDataPie: {},
      chartData: [],
      chartOneData: [],
      beginDate: dayListFn(true)
    }
  },
  components: {
    complexTable,
    LineChart,
    PieChart
  },
  created() {
    this.queryInfoList()
    this.getInfoTotal()
    this.queryCompnaySate()
  },
  methods: {
    queryCompnaySate() {
      this.$http.get(pqCompanyState, {}, (res) => {
        var obj = res.data
        this.chartDataPie = {
          actived: obj.actived,
          all: obj.count,
          unactived: obj.count - obj.actived
        }
      })
    },
    getInfoTotal() {
      this.$http.get(queryTotalView, {
        tn: 'company',
        bt: this.beginDate
      }, (res) => {
        var obj = res.data
        this.chartData = chartModel(obj)
      })
    },
    filterSearch() {
      this.pageNo = 1
      this.total = 0
      this.tableData = []
      this.queryInfoList()
    },
    queryInfoList() {
      var that = this
      const form = this.formFilter
      let st = ''
      let et = ''
      if (form.dateRange) {
        st = form.dateRange[0]
        et = form.dateRange[1]
      }
      var obj = {
        name: form.name,
        industry: form.industry,
        actived: form.actived,
        bt: st,
        et: et,
        orderBy: form.orderBy,
        pageSize: this.pageSize,
        pageNo: this.pageNo
      }
      this.$http.get(pqCompanyFilterList, obj, (res) => {
        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 = ''
                that.getCompanyKeyword(item, num)
              })(obj[i], hData.num)
            }
            hData.num--
            that.total = res.data.total
            if (hData.num === 0) {
              that.tableData = obj
            }
            ret.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.join('，')
            that.$forceUpdate()
          }
        }
      })
    },
    current(val) {
      this.pageNo = val
      this.queryInfoList()
    },
    changeRangerDate(val) {
      this.formFilter.dateRange = val
    },
    catalogChanged(val) {
      this.formFilter.actived = val
    },
    sortChanged(val) {
      this.formFilter.orderBy = val
    },
    showChart(val) {
      this.chartOneData = []
      this.$http.get(queryOneView, {
        tn: 'company',
        id: val,
        bt: this.beginDate
      }, (res) => {
        if (res.success) {
          this.chartOneData = chartModel(res.data)
          this.ChartItemDialogVisible = true
        }
      })
    }
  }
}
</script>

<style>
  .content-item{
    padding: 10px;
  }
  .content-item + .content-item {
    border-top: 1px solid #ccc;
  }
  .content-item-tit{
    line-height: 30px;
  }
</style>
