<template>
  <div class="right-list-toobar">
    <el-toolbar>
      <div class="toolbar-flex">
        <div>
          <el-button @click="refresh"><i class="fa fa-refresh"></i>刷新</el-button>
          <span>当前报表：URL点击量排行</span>
        </div>
        <div>
          <el-input v-model="searchURL" style="width:auto" placeholder="请输入URL"></el-input>
          <el-date-picker class="date-top" id="URLHit-date-picker1" v-model="dateRangeValue" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期范围" @change="dateRangeChange"></el-date-picker>&nbsp;
          <el-button @click="check" class="button" type="primary"><slot name="button">查看</slot></el-button>
        </div>
      </div>
    </el-toolbar>
    <div>
      <el-table resizable tooltip-effect="dark" style="width: 100%" ref="dataTable1" :data-read-url="getURL" :auto-get-data="false" :page-size="20">
        <el-table-column type="index" label=" " width="55"></el-table-column>
        <el-table-column label="URL" min-width="60%">
          <template slot-scope="scope">
            <a href="javascript:void(0);" @click="linkto(scope.row.item)">{{scope.row.item}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="top" label="点击量" min-width="13%"></el-table-column>
        <el-table-column prop="rate" label="比例" min-width="13%"></el-table-column>
        <el-table-column label="趋势" min-width="14%">
          <template slot-scope="scope">
            <a href="javascript:void(0);" @click="showTrend(scope.row.item)">时间趋势</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 趋势查看框 -->
    <el-dialog title="时间趋势" :visible.sync="trendDialog">
      <div>
        <el-date-picker id="URLHit-date-picker2" v-model="tdateRangeValue" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期范围" @change="tdateRangeChange"></el-date-picker>&nbsp;
        <el-button @click="trendCheck">查看</el-button>
      </div>
      <div class="chart-trend" style="margin-top:20px" v-loading="chartLoading">
        <echarts :options="trendOption" height="300px"></echarts>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Echarts from '@src/components/Echarts.vue'
export default {
  components: {
    echarts: Echarts
  },
  data() {
    return {
      chartLoading: false,
      dateRangeValue: [],
      startDate: '', // 搜索框日期范围
      endDate: '',
      trendDialog: false, // 访问趋势框
      tdateRangeValue: [],
      tStartDate: '', // 趋势日期范围
      tEndDae: '',
      trend: [], // URL访问趋势
      item: '', // 当前URL
      xData: [], // 趋势图表配置
      yData: [],
      trendOption: {},
      searchURL: ''
    }
  },
  methods: {
    dateRangeChange(val) {
      if (val && val instanceof Array) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.dateRangeValue = []
        this.startDate = ''
        this.endDate = ''
      }
    },
    tdateRangeChange(val) {
      if (val && val instanceof Array) {
        this.tStartDate = val[0]
        this.tEndDate = val[1]
      } else {
        this.tdateRangeValue = []
        this.startDate = ''
        this.endDate = ''
      }
    },
    refresh() {
      this.$refs.dataTable1.getData()
    },
    check() {
      this.$refs.dataTable1.getData()
    },
    async showChart() {
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [this.item]
        },
        xAxis: {
          boundaryGap: false,
          data: this.xData
        },
        yAxis: {

        },
        series: [
          {
            name: this.item,
            type: 'line',
            symbol: 'none',
            smooth: true,
            data: this.yData
          }
        ]
      }
      this.trendOption = option
    },
    linkto(url) {
      window.open(url)
    },
    showTrend(item) {
      this.item = item
      this.tdateRangeValue = this.dateRangeValue
      this.tStartDate = this.startDate
      this.tEndDate = this.endDate
      this.trendDialog = true
      this.loadTrend()
    },
    trendCheck() {
      this.loadTrend()
    },
    getURL() {
      let startdate = this.startDate
      let enddate = this.endDate
      return ['/ui/stats/urlhit', {
        params: {
          startdate: startdate,
          enddate: enddate,
          url: this.searchURL.trim()
        }
      }]
    },
    async loadTrend() {
      this.chartLoading = true
      let startdate = this.tStartDate
      let enddate = this.tEndDate
      let item = this.item
      let type = 'URL'
      let subType = 'TOP'
      let resp
      try {
        resp = await axios.get('/ui/stats/trend', {
          params: {
            startdate,
            enddate,
            item,
            type,
            subType
          }
        })
      } catch (e) {
        this.chartLoading = false
        return
      }
      this.chartLoading = false
      if (resp.data.status !== 1) {
        return resp.data
      }
      this.trend = resp.data.data
      this.xData = this.trend.map(function (obj) { return obj.date })
      let yName = this.item
      this.yData = this.trend.map(function (obj) { return obj[yName] })
      this.showChart()
    },
    async initDate() {
      let res = await axios.get('/ui/stats/summary/initdate')
      if (res.data.status === 1) {
        this.startDate = res.data.data.startDate
        this.endDate = res.data.data.endDate
        this.dateRangeValue = []
        this.dateRangeValue.push(this.startDate)
        this.dateRangeValue.push(this.endDate)
      }
    }
  },
  async created() {
    await this.initDate()
    this.refresh()
  }
}

</script>

<style scoped>
  .page-wrap {
    margin-top: 20px;
    margin-right: 20px;
  }

  .page-wrap .page {
    float: right;
  }
  .toolbar-flex{
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
  }
  .date-top {
    top: 2px;
  }
</style>
