<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.name" placeholder="搜索机构名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="机构类型：">
                  <el-input v-model="formFilter.orgType" 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="yyyy-MM-dd" @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="tableDataEnd" :tableItem="tableItem" :total="total" :jump="'org'" v-on:current="current" :chartLine= true @showChart="showChart"
          v-loading="tableLoding"></complex-table>
      </div>
    </div>
    <el-dialog title="机构流量分析" :visible.sync="ChartItemDialogVisible" width="860px">
      <LineChart :chartData="chartOneData"></LineChart>
    </el-dialog>
  </div>
</template>

<script>
import { pqOrgFilterList, queryTotalView, queryOneView } from '@/api/statistics'
import { parseTime } from '@/utils/index'
import complexTable from '@/components/complexTable'
import crossDomin from '@/utils/CrossDomain'
import LineChart from './lineChart/LineChart'
import { dayListFn, chartModel } from './lineChart/chart'
import { doneFilter } from './ObjFilters'

export default {
  data() {
    return {
      ChartItemDialogVisible: false,
      formFilter: {
        name: '',
        orgType: '',
        dateRange: '',
        orderBy: '1'
      },
      pageSize: 10,
      pageNo: 1,
      total: 0,
      tableData: [],
      tableDataEnd: [],
      filterTableDataEnd: [],
      flag: false,
      tableLoding: true,
      tableItem: [
        {
          tit: '图表',
          chart: true,
          width: 80
        },
        {
          prop: 'name',
          tit: '机构名称',
          active: 'active'
        },
        {
          prop: 'orgType',
          tit: '机构类型'
        },
        {
          prop: 'phone',
          tit: '联系电话',
          width: '160'
        },
        {
          prop: 'email',
          tit: '联系邮箱',
          width: '160'
        },
        {
          prop: 'assTime',
          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: 'organization',
        bt: this.beginDate
      }, (res) => {
        var obj = res.data
        this.chartData = chartModel(obj)
      })
    },
    filterSearch() {
      this.tableLoding = true
      const form = this.formFilter
      let st = new Date('1970-01-01')
      let et = new Date().getTime()
      if (form.dateRange) {
        st = new Date(form.dateRange[0]).getTime()
        et = new Date(form.dateRange[1]).getTime()
      }
      // 筛选条件
      var Conditions = {
        strs: [
          {
            type: 'name',
            val: form.name
          },
          {
            type: 'orgType',
            val: form.orgType
          }
        ],
        ranges: [
          {
            type: 'assTime',
            min: st,
            max: et
          }
        ]
      }
      this.tableDataEnd = []
      this.filterTableDataEnd = []
      this.filterTableDataEnd = doneFilter(this.tableData, Conditions)
      this.pageNo = 1
      this.total = this.filterTableDataEnd.length
      this.currentChangePage(this.filterTableDataEnd)
      this.flag = true
      this.tableLoding = false
    },
    sortChanged(val) {
      this.formFilter.orderBy = val
    },
    sortTableOperate(val) {
      if (val.length > 0) {
        val.sort((a, b) => {
          if (this.formFilter.orderBy === '1') {
            return new Date(b.assTime).getTime() - new Date(a.assTime).getTime()
          } else if (this.formFilter.orderBy === '2') {
            return b.sum - a.sum
          }
        })
      }
      return val
    },
    queryInfoList() {
      this.$http.get(pqOrgFilterList, {}, (response) => {
        if (response.success && response.data) {
          const epData = response.data
          let j = 0
          for (let i = 0; i < epData.length; i++) {
            epData[i].assTime = parseTime(epData[i].assTime).substr(0, 10)
            j++
            crossDomin.getAgencyInfo(epData[i].id, data => {
              j--
              Object.assign(epData[i], data)
              if (j === 0) {
                this.tableData = epData
                this.total = epData.length
                if (this.total > this.pageSize) {
                  for (let i = 0; i < this.pageSize; i++) {
                    this.tableDataEnd.push(epData[i])
                  }
                } else {
                  this.tableDataEnd = epData
                }
                this.tableLoding = false
                this.tableDataEnd = this.sortTableOperate(this.tableDataEnd)
              }
            })
          }
          if (epData.length === 0) {
            this.dataList = []
            this.tableData = []
            this.total = 0
          }
        } else {
          this.$sort.total = 0
          this.tableData = []
        }
      })
    },
    current(val) {
      this.pageNo = val
      if (!this.flag) {
        this.currentChangePage(this.tableDataEnd)
      } else {
        this.currentChangePage(this.filterTableDataEnd)
      }
    },
    currentChangePage(list) {
      let from = (this.pageNo - 1) * this.pageSize
      const to = this.pageNo * this.pageSize
      this.tableDataEnd = []
      for (; from < to; from++) {
        if (list[from]) {
          this.tableDataEnd.push(list[from])
        }
      }
      this.tableDataEnd = this.sortTableOperate(this.tableDataEnd)
    },
    changeRangerDate(val) {
      this.formFilter.dateRange = val
    },
    showChart(val) {
      this.chartOneData = []
      this.$http.get(queryOneView, {
        tn: 'organization',
        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>
