<template>
  <div class="app-container callTotalCount">
    <div class="filter-container">
      <el-date-picker
        v-model="seachDate"
        class="filter-item"
        type="daterange"
        format="yyyy年MM月dd日"
        value-format="yyyy-MM-dd"
        align="left"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"/>
        <span>媒体来源:</span>
         <el-select v-model="mediaSourcesId" placeholder="请选择媒体来源">
            <el-option
            v-for="item in mediaSources"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            </el-option>
        </el-select>
        <span>省份名称:</span>
         <el-cascader
        v-model="provinceCity"
        :options="provinceCityDatas"
        :props="props"
        placeholder="请选择省市"
        class="filter-item"
        clearable
        filterable
        change-on-select
      />
      <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
      <el-button type="primary" class="filter-item" icon="el-icon-upload2" @click="btn_export">导出</el-button>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="图形" name="first">
        <div class="echarts">
          <div id="huData" style="height:650px;width:100%;"/>
        </div>

      </el-tab-pane>
      <el-tab-pane label="表格" name="second">
        <div class="tableContent">
          <el-table :data="tableData" height="600" border style="width: 100%">
            <el-table-column prop="日期" label="日期" align="center"/>
            <el-table-column prop="接通次数" label="媒体名称" align="center"/>
            <el-table-column prop="呼损次数" label="省份名称" align="center"/>
            <el-table-column prop="接通率" label="接入数" align="center"/>
            <el-table-column prop="呼损率" label="百分比" align="center"/>
          </el-table>
        </div>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
import {
  getDataList
} from '@/api/mediaCenter/mediaInformation'
import { getProviceCity } from "@/api/commonAPI";
export default {
  name: 'ConnectLoss',
  data() {
    return {
      seachDate: '',
      activeName: 'first',
      tableData: [] ,// 表格数据
      mediaSourcesId: '' ,// 媒体来源id
      mediaSources:[
          {
              id:0,
              name:'百度'
          },
          {
              id:1,
              name:'腾讯'
          },
      ],//媒体来源
      provinceCity: [], // 省市下拉绑定的值
      provinceCityDatas: [], // 省市下拉数据
      props: {
        // 自定义省市下拉数据的key值
        value: "code",
        label: "name",
        // children: "entityJson"
      },
    }
  },
  created() {
      this.getProCity();
  },
  mounted: function() {
    this.getList()
  },
  methods: {

    handleClick(tab, event) {

    },
    getList() {
      const echarts = require('echarts')
      const myChart = echarts.init(document.getElementById('huData'))
      const option = {
        tooltip: {
          trigger: 'axis'
        },

        legend: {
          data: ['接通次数', '呼损次数', '接通率', '呼损率'],
          bottom: 60
        },

        grid: {
          bottom: 180
        },
        dataZoom: [{ // 这个dataZoom组件，默认控制x轴。
          type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
          xAxisIndex: 0,
          start: 0, // 左边在 0% 的位置。
          end: 100, // 右边在 100% 的位置。
          bottom: 100
        }

        ],
        xAxis: [{
          type: 'category',
          data: [],
          axisPointer: {
            type: ''
          },
          axisLabel: {
            rotate: 30,
            interval: 0
          }
        }],
        yAxis: [{
          type: 'value',
          name: '通话次数（次）',
          nameLocation: 'end',
          nameGap: 40,
          //							min: 0,
          //							max:300,
          interval: 50,
          axisLabel: {
            formatter: '{value} '
          }

        },
        {
          type: 'value',
          name: '百分比（%）',
          nameLocation: 'end',
          nameGap: 35,
          min: 0,
          max: 100,
          interval: 10,
          axisLabel: {
            formatter: '{value} '
          }
        }
        ],
        series: [{
          type: 'bar',
          name: '接通次数',
          data: []
        },
        {
          type: 'bar',
          name: '呼损次数',
          data: []
        },
        {
          type: 'line',
          name: '接通率',
          data: [],
          yAxisIndex: 1
        },
        {
          type: 'line',
          name: '呼损率',
          data: [],
          yAxisIndex: 1
        }
        ],
        color: ['#1ab394', '#fbbe5b', '#88ebc4', '#fa957f']
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      this.loading = true
      return new Promise(resolve => {
        const params = {
          stime: this.seachDate && this.seachDate[0],
          endtime: this.seachDate && this.seachDate[1]
        }
        getDataList(params).then(response => {
          this.loading = false
          const xAxisData = []
          const sres = []
          const sres1 = []
          const sres2 = []
          const sres3 = []
          if (response.state.toLowerCase() === 'success') {
            this.tableData = response.data
            for (let i = 0; i < response.data.length; i++) {
              xAxisData.push(response.data[i].日期)
              sres.push(response.data[i].接通次数)
              sres1.push(response.data[i].呼损次数)
              sres2.push(response.data[i].接通率)
              sres3.push(response.data[i].呼损率)
            }
            myChart.setOption({
              xAxis: [{
                data: xAxisData
              }],
              series: [{
                data: sres
              }, {
                data: sres1
              }, {
                data: sres2
              }, {
                data: sres3
              }]
            })
          }
        })
        resolve()
      })
    },

    btn_search() {
      this.getList()
    },
    btn_export() {
      const exportUrl = `${this.$store.getters.serverConfig.BASE_API}callcenterapi/api/switchedlosscall/exportexcel?stime=${this.seachDate &&
					this.seachDate[0]}&endtime=${this.seachDate && this.seachDate[1]} `
      window.location.href = exportUrl
    },
    // 获取省市下拉数据
    getProCity() {
      return new Promise(resolve => {
        getProviceCity().then(response => {
          if (response.state.toLowerCase() === "success") {
            this.provinceCityDatas = response.data;
          }
        });
        resolve();
      });
    },
  }

}
</script>
<style lang="scss" scoped>
span{
    font-size: 14px;
}
</style>
