<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:95%">
          <el-form :model="formFilter" class="demo-form" label-width="100px">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="栏目分类：">
                  <el-select v-model="formFilter.catalog" placeholder="选择分类" clearable @change="catalogChanged">
                    <el-option :label="item.tit" :value="item.val" v-for="item in columnType" :key="item.index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="标题：">
                  <el-input v-model="formFilter.title" placeholder="搜索标题"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="作者来源：">
                  <el-input v-model="formFilter.source" placeholder="搜索作者来源"></el-input>
                </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="发布者：">
                  <el-select v-model="formFilter.creator" 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="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="'content'" 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 { pqFilterList, queryTotalView, queryCreator, queryOneView } from '@/api/statistics'
import { parseTime, contentType, columnType } from '@/utils/index'
import complexTable from '@/components/complexTable'
import ret from '@/utils/comTable'
import cacheModule from '@/utils/queryName'
import LineChart from './lineChart/LineChart'
import { dayListFn, chartModel } from './lineChart/chart'

export default {
  data() {
    return {
      ChartItemDialogVisible: false,
      columnType,
      nameOptions: [],
      formFilter: {
        title: '',
        catalog: '',
        source: '',
        creator: '',
        dateRange: '',
        orderBy: '1'
      },
      pageSize: 10,
      pageNo: 1,
      total: 0,
      tableData: [],
      tableLoading: true,
      tableItem: [
        {
          tit: '图表',
          chart: true,
          width: 80
        },
        {
          prop: 'title',
          tit: '标题',
          active: 'active'
        },
        {
          prop: 'catalog',
          tit: '栏目分类'
        },
        {
          prop: 'creator',
          tit: '发布人',
          width: '160'
        },
        {
          prop: 'modifyTime',
          tit: '发布时间',
          width: '160'
        },
        {
          prop: 'sum',
          tit: '浏览数量',
          width: '160'
        }
      ],
      chartData: [],
      chartOneData: [],
      beginDate: dayListFn(true)
    }
  },
  components: {
    complexTable,
    LineChart
  },
  created() {
    this.publishList()
    this.getContentTotal()
  },
  methods: {
    getContentTotal() {
      this.$http.get(queryTotalView, {
        tn: 'article',
        bt: this.beginDate
      }, (res) => {
        var obj = res.data
        this.chartData = chartModel(obj)
      })
      // this.$http.get('/static/json.txt', {
      // }, (res) => {
      //   var obj = res.data
      //   this.chartData = chartModel(obj)
      // })
    },
    filterSearch() {
      this.pageNo = 1
      this.total = 0
      this.tableData = []
      this.publishList()
    },
    publishList() {
      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,
        catalog: form.catalog,
        source: form.source,
        creator: form.creator,
        published: 1,
        bt: st,
        et: et,
        orderBy: form.orderBy,
        pageSize: this.pageSize,
        pageNo: this.pageNo
      }
      this.$http.get(pqFilterList, obj, (response) => {
        if (response.success && response.data) {
          const res = response.data
          const epData = res.data
          let j = 0
          for (let i = 0; i < epData.length; i++) {
            epData[i].modifyTime = parseTime(epData[i].modifyTime).substr(0, 16)
            epData[i].catalog = contentType[epData[i].catalog]
            j++
            cacheModule.Judge(epData[i].creator, info => {
              j--
              epData[i].creator = info.name
              if (j === 0) {
                this.total = res.total
                if (epData.length === that.info.pageSize) {
                  this.tableData = epData
                } else {
                  const array = epData
                  ret.gapFilling(array)
                  this.tableData = array
                }
              }
            })
          }
          if (epData.length === 0) {
            this.total = 0
            this.tableData = []
          }
        } else {
          this.total = 0
          this.tableData = []
        }
      })
    },
    current(val) {
      this.pageNo = val
      this.publishList()
    },
    remoteOwnerName(query) {
      var that = this
      if (query !== '') {
        that.selectLoading = true
        that.$http.get(queryCreator, {
          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.creator = val
    },
    catalogChanged(val) {
      this.formFilter.catalog = val
    },
    sortChanged(val) {
      this.formFilter.orderBy = val
    },
    showChart(val) {
      this.chartOneData = []
      this.$http.get(queryOneView, {
        tn: 'article',
        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>
