<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="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-input v-model="formFilter.creator" placeholder="搜索发明人"></el-input>
                </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="'result'" 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 { pqPpatentList, queryTotalView, queryOneView } from '@/api/statistics'
  import { parseTime, kexiuUrl } 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,
        platform: process.env.PLAT_ID,
        formFilter: {
          title: '',
          creator: '',
          dateRange: '',
          orderBy: '1'
        },
        pageSize: 10,
        pageNo: 1,
        total: 0,
        tableData: [],
        tableLoading: true,
        tableItem: [
          {
            tit: '图表',
            chart: true,
            width: 80
          },
          {
            prop: 'name',
            tit: '成果名称',
            active: 'active'
          },
          {
            prop: 'authors',
            tit: '发布者',
            width: '160'
          },
          {
            prop: 'createTime',
            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(kexiuUrl + queryTotalView, {
          tn: 'ppatent',
          platform: this.platform,
          bt: this.beginDate
        }, (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 = {
          name: form.title,
          author: form.creator,
          bt: st,
          et: et,
          orderBy: form.orderBy,
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          platform: this.platform
        }
        this.$http.get(kexiuUrl + pqPpatentList, obj, (response) => {
          if (response.success && response.data) {
            const res = response.data
            const epData = res.data
            for (let i = 0; i < epData.length; i++) {
              epData[i].createTime = parseTime(epData[i].createTime).substr(0, 16)
              epData[i].authors = epData[i].authors.substr(0, epData[i].authors.length - 1)
            }
            this.total = res.total
            if (epData.length === that.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()
      },
      changeRangerDate(val) {
        this.formFilter.dateRange = val
      },
      sortChanged(val) {
        this.formFilter.orderBy = val
      },
      showChart(val) {
        this.chartOneData = []
        this.$http.get(kexiuUrl + queryOneView, {
          platform: this.platform,
          tn: 'ppatent',
          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>
