<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">
        <div class="content-item-tit">企业产品总浏览量统计</div>
        <div class="line-chart-box">
          <LineChart :chartData="chartData"></LineChart>
        </div>
      </div>
      <div class="content-item">
        <div class="content-item-tit">企业产品浏览量查询</div>
        <div class="contain-search" style="margin-top:20px; width:70%">
          <el-form :model="formFilter" class="demo-form" label-width="100px">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="产品名称：">
                  <el-input v-model="formFilter.title" placeholder="搜索产品名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属企业：">
                  <el-select v-model="formFilter.companyId" clearable filterable remote :remote-method="remoteOwnerName"
                  suffix-icon="el-icon-search" @change="ownerChanged" placeholder="搜索所属企业">
                    <el-option v-for="item in nameOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <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="12">
                <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="24">
                <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="'product'" 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 { queryCompName, queryCompanyOne } from '@/api/companyCen'
import { pqProductFilterList, queryTotalView, queryOneView } from '@/api/statistics'
import { parseTime } from '@/utils/index'
import complexTable from '@/components/complexTable'
import ret from '@/utils/comTable'
import LineChart from './lineChart/LineChart'
import { dayListFn, chartModel } from './lineChart/chart'

export default {
  data() {
    return {
      ChartItemDialogVisible: false,
      nameOptions: [],
      formFilter: {
        title: '',
        companyId: '',
        dateRange: '',
        orderBy: '1'
      },
      pageSize: 10,
      pageNo: 1,
      total: 0,
      tableData: [],
      tableItem: [
        {
          tit: '图表',
          chart: true,
          width: 80
        },
        {
          prop: 'name',
          tit: '产品名称',
          active: 'active'
        },
        {
          prop: 'companyName',
          tit: '所属企业'
        },
        {
          prop: 'createTime',
          tit: '创建时间',
          width: '160'
        },
        {
          prop: 'sum',
          tit: '浏览数量'
        }
      ],
      chartData: [],
      chartOneData: [],
      beginDate: dayListFn(true)
    }
  },
  components: {
    complexTable,
    LineChart
  },
  created() {
    this.queryInfoList()
    this.getInfoTotal()
  },
  methods: {
    getInfoTotal() {
      this.$http.get(queryTotalView, {
        tn: 'product',
        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 = {
        title: form.title,
        companyId: form.companyId,
        bt: st,
        et: et,
        orderBy: form.orderBy,
        pageSize: this.pageSize,
        pageNo: this.pageNo
      }
      this.$http.get(pqProductFilterList, 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)
              }
              (function(item, num) {
                item.companyName = ''
                that.getCompanyName(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 = []
        }
      })
    },
    getCompanyName(lmt, num) {
      var that = this
      num++
      that.$http.get(queryCompanyOne, {
        id: lmt.companyId
      }, function(res) {
        num--
        if (res.success) {
          const obj = res.data
          lmt.companyName = obj.name
          that.$forceUpdate()
        }
      })
    },
    current(val) {
      this.pageNo = val
      this.queryInfoList()
    },
    remoteOwnerName(query) {
      var that = this
      if (query !== '') {
        that.selectLoading = true
        that.$http.get(queryCompName, {
          name: query,
          size: 5
        }, function(res) {
          that.selectLoading = false
          if (res.success && res.data) {
            const obj = res.data
            that.nameOptions = obj.map(item => {
              return { value: item.id, label: item.name }
            })
          } else {
            that.nameOptions = []
          }
        })
      } else {
        that.compOptions = []
      }
    },
    changeRangerDate(val) {
      this.formFilter.dateRange = val
    },
    ownerChanged(val) {
      this.formFilter.companyId = val
    },
    sortChanged(val) {
      this.formFilter.orderBy = val
    },
    showChart(val) {
      this.chartOneData = []
      this.$http.get(queryOneView, {
        tn: 'product',
        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>
