<style>
.statistics .ant-col-6 {
  margin: 10px 0;
}
.statistics .ant-col-6 .ant-card-body {
  display: flex;
  justify-content: center;
}
.statistics .ant-col-6 p,
.statistics .ant-col-6 span {
  text-align: center;
  line-height: 40px;
  font-size: 30px;
  font-weight: 600;
  color: red;
  margin: 0;
}
.search-box .ant-card-body {
  padding: 5px 15px;
}
.search-box p {
  display: inline-block;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
.statistics .ant-col-6 .ant-card-body .styleElse {
  line-height: 60px;
  height: 40px;
  font-size: 16px;
  font-weight: 400;
  margin-left: 10px;
}
.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  display: none !important;
}
.yincang .ant-col-6 p {
  text-align: left;
  color: red;
  font-size: 16px;
  font-weight: 500;
}
.ant-table-thead div {
  font-weight: 700;
}
.tool-tip {
  position: absolute;
  top: 65px;
  right: 10px;
}
</style>
<template>
  <div class="statistics">
    <a-row class="image-list-heading vm-panel">
      <a-row>
        <div class="panel-heading">{{ title }}</div>
      </a-row>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-card :bordered="false" class="search-box">
          <p :style="active==1?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(1)">今天</p>
          <p :style="active==2?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(2)">昨天</p>
          <p :style="active==3?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(3)">近一周</p>
          <p :style="active==4?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(4)">近十五天</p>
          <p :style="active==5?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(5)">近一月</p>
          <p :style="active==6?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(6)">近三月</p>
          <p :style="active==7?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(7)">近半年</p>
          <p :style="active==8?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(8)">所有</p>
          <a-range-picker
            style="width:400px"
            :disabledDate="disabledDate"
            :showTime="{
                hideDisabledOptions: true,
            }"
            format="YYYY-MM-DD"
            v-model="startValue"
            @ok="getAdd(9)"
          />
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-card :bordered="false" class="search-box">
          <p @click="visible = true">对比</p>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="16" v-if="kuaishou">
      <a-col :span="6">
        <a-card title="总消耗" :bordered="false">
          <!-- <p>{{kuaishou.cost}}</p> -->
          <countTo :startVal="0" :endVal="kuaishou.cost" :duration="duration" :decimals="2"></countTo>
          <a-icon
            v-if="kuaishou.costProportion>0&&active==1"
            type="rise"
            class="styleElse"
            style="color:red;"
          />
          <a-icon
            v-else-if="kuaishou.costProportion<0&&active==1"
            type="fall"
            class="styleElse"
            style="color:#0bcd74;"
          />
          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
          <span
            v-if="active==1"
            :style="kuaishou.costProportion>0?'color:red':'color:#0bcd74'"
            class="styleElse"
            style="  margin-left:0"
          >{{kuaishou.costProportion?Math.abs(kuaishou.costProportion*100).toFixed(2)+'%':'0.00%'}}</span>
          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
            <template slot="title">
              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="封面点击数" :bordered="false">
          <!-- <p>{{kuaishou.photoClick}}</p> -->
          <countTo :startVal="0" :endVal="kuaishou.photoClick" :duration="duration" :decimals="0"></countTo>
          <a-icon
            v-if="kuaishou.photoClickProportion>0&&active==1"
            type="rise"
            class="styleElse"
            style="color:red;"
          />
          <a-icon
            v-else-if="kuaishou.photoClickProportion<0&&active==1"
            type="fall"
            class="styleElse"
            style="color:#0bcd74"
          />
          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
          <span
            v-if="active==1"
            :style="kuaishou.photoClickProportion>0?'color:red':'color:#0bcd74'"
            style="margin-left:0"
            class="styleElse"
          >{{kuaishou.photoClickProportion?Math.abs(kuaishou.photoClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
          <a-tooltip placement="topRight" class="tool-tip"  v-show="active==1">
            <template slot="title">
              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="封面曝光数" :bordered="false">
          <!-- <p>{{kuaishou.photoShow}}</p> -->
          <countTo :startVal="0" :endVal="kuaishou.photoShow" :duration="duration" :decimals="0"></countTo>
          <a-icon
            v-if="kuaishou.showProportion>0&&active==1"
            type="rise"
            class="styleElse"
            style="color:red;"
          />
          <a-icon
            v-else-if="kuaishou.showProportion<0&&active==1"
            type="fall"
            class="styleElse"
            style="color:#0bcd74;"
          />
          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
          <span
            v-if="active==1"
            :style="kuaishou.showProportion>0?'color:red':'color:#0bcd74'"
            class="styleElse"
            style="  margin-left:0"
          >{{kuaishou.showProportion?Math.abs(kuaishou.showProportion*100).toFixed(2)+'%':'0.00%'}}</span>
          <a-tooltip placement="topRight" class="tool-tip"  v-show="active==1">
            <template slot="title">
              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="素材曝光数" :bordered="false">
          <!-- <p>{{kuaishou.aclick}}</p> -->
          <countTo :startVal="0" :endVal="kuaishou.aclick" :duration="duration" :decimals="0"></countTo>

          <a-icon
            v-if="kuaishou.aClickProportion>0&&active==1"
            type="rise"
            class="styleElse"
            style="color:red;"
          />
          <a-icon
            v-else-if="kuaishou.aClickProportion<0&&active==1"
            type="fall"
            class="styleElse"
            style="color:#0bcd74;"
          />
          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
          <span
            v-if="active==1"
            :style="kuaishou.aClickProportion>0?'color:red':'color:#0bcd74'"
            class="styleElse"
            style="  margin-left:0"
          >{{kuaishou.aClickProportion?Math.abs(kuaishou.aClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
          <a-tooltip placement="topRight" class="tool-tip"  v-show="active==1">
            <template slot="title">
              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="10">
      <a-col :span="24">
        <a-card
          style="width:100%"
          :tabList="tabListNoTitle"
          :activeTabKey="noTitleKey"
          @tabChange="key => onTabChange(key, 'noTitleKey')"
        >
          <div id="chart" style="width:100%;height:500px"></div>
        </a-card>
      </a-col>
    </a-row>
    <a-modal title="数据对比" v-model="visible" width="80%" class="yincang">
      <a-radio-group v-model="value" style="margin-bottom:10px" @change="clear">
        <a-radio-button value="month">对比月</a-radio-button>
        <a-radio-button value="day">对比天</a-radio-button>
      </a-radio-group>
      <br />
      <div style="display:flex">
        <div v-if="value == 'month'" style="width:400px">
          <a-month-picker placeholder="请选择对比月份" v-model="oneMonth" style="width:50%" />
          <a-month-picker placeholder="请选择对比月份" v-model="twoMonth" style="width:50%" />
        </div>
        <a-range-picker
          v-else
          style="width:400px"
          :disabledDate="disabledDate"
          :showTime="{
                hideDisabledOptions: true,
            }"
          format="YYYY-MM-DD"
          v-model="contrastValue"
        />
        <a-button type="primary" style="margin-left:5px" @click="search">查询</a-button>
      </div>
      <a-row :gutter="15" style="margin-bottom:15px;margin-top:15px" v-if="contrastDataAll">
        <a-col :span="6">
          <a-card title="总消耗对比">
            <p>{{contrastDataAll.beCompared.statDate}}：{{contrastDataAll.beCompared.cost}}</p>
            <p>
              {{contrastDataAll.compared.statDate}}：{{contrastDataAll.compared.cost}}
              <a-icon
                v-if="contrastDataAll.compared.costProportion>0"
                type="rise"
                class="styleElse"
                style="color:red;"
              />
              <a-icon
                v-else-if="contrastDataAll.compared.costProportion<0"
                type="fall"
                class="styleElse"
                style="color:#0bcd74;"
              />
              <a-icon
                v-else-if="contrastDataAll.compared.costProportion==0"
                type="minus"
                class="styleElse"
                style="color:#0bcd74"
              />
              <span
                :style="contrastDataAll.compared.costProportion>0?'color:red':'color:#0bcd74'"
                class="styleElse"
                style="  margin-left:0"
              >{{Math.abs(contrastDataAll.compared.costProportion).toFixed(2)+'%'}}</span>
            </p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="封面点击数对比">
            <p>{{contrastDataAll.beCompared.statDate}}：{{contrastDataAll.beCompared.photoClick}}</p>
            <p>
              {{contrastDataAll.compared.statDate}}：{{contrastDataAll.compared.photoClick}}
              <a-icon
                v-if="contrastDataAll.compared.photoClickProportion>0"
                type="rise"
                class="styleElse"
                style="color:red;"
              />
              <a-icon
                v-else-if="contrastDataAll.compared.photoClickProportion<0"
                type="fall"
                class="styleElse"
                style="color:#0bcd74;"
              />
              <a-icon
                v-else-if="contrastDataAll.compared.photoClickProportion==0"
                type="minus"
                class="styleElse"
                style="color:#0bcd74"
              />
              <span
                :style="contrastDataAll.compared.photoClickProportion>0?'color:red':'color:#0bcd74'"
                class="styleElse"
                style="  margin-left:0"
              >{{Math.abs(contrastDataAll.compared.photoClickProportion).toFixed(2)+'%'}}</span>
            </p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="封面曝光数对比">
            <p>{{contrastDataAll.beCompared.statDate}}：{{contrastDataAll.beCompared.photoShow}}</p>
            <p>
              {{contrastDataAll.compared.statDate}}：{{contrastDataAll.compared.photoShow}}
              <a-icon
                v-if="contrastDataAll.compared.showProportion>0"
                type="rise"
                class="styleElse"
                style="color:red;"
              />
              <a-icon
                v-else-if="contrastDataAll.compared.showProportion<0"
                type="fall"
                class="styleElse"
                style="color:#0bcd74;"
              />
              <a-icon
                v-else-if="contrastDataAll.compared.showProportion==0"
                type="minus"
                class="styleElse"
                style="color:#0bcd74"
              />
              <span
                :style="contrastDataAll.compared.showProportion>0?'color:red':'color:#0bcd74'"
                class="styleElse"
                style="  margin-left:0"
              >{{Math.abs(contrastDataAll.compared.showProportion).toFixed(2)+'%'}}</span>
            </p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="素材曝光数对比">
            <p>{{contrastDataAll.beCompared.statDate}}：{{contrastDataAll.beCompared.aclick}}</p>
            <p>
              {{contrastDataAll.compared.statDate}}：{{contrastDataAll.compared.aclick}}
              <a-icon
                v-if="contrastDataAll.compared.comparedAclick>0"
                type="rise"
                class="styleElse"
                style="color:red;"
              />
              <a-icon
                v-else-if="contrastDataAll.compared.comparedAclick<0"
                type="fall"
                class="styleElse"
                style="color:#0bcd74;"
              />
              <a-icon
                v-else-if="contrastDataAll.compared.comparedAclick==0"
                type="minus"
                class="styleElse"
                style="color:#0bcd74"
              />
              <span
                :style="contrastDataAll.compared.comparedAclick>0?'color:red':'color:#0bcd74'"
                class="styleElse"
                style="  margin-left:0"
              >{{Math.abs(contrastDataAll.compared.comparedAclick).toFixed(2)+'%'}}</span>
            </p>
          </a-card>
        </a-col>
      </a-row>
      <a-row v-else>
        <a-col :span="24" style="text-align:center;height:186px;line-height:186px">暂无数据</a-col>
      </a-row>
      <a-row :gutter="10">
        <a-col :span="24">
          <a-card
            style="width:100%"
            :tabList="tabListNoTitle"
            :activeTabKey="noTitleKeyTwo"
            @tabChange="key => onTabChange(key, 'noTitleKeyTwo')"
          >
            <div id="chart1" style="width:100%;height:500px"></div>
          </a-card>
        </a-col>
      </a-row>
      <a-row style="margin-bottom:15px;margin-top:15px" v-if="dataTableTwo.length>0">
        <a-col :span="24">
          <a-card
            :tabList="tableCard"
            :activeTabKey="noTitleKeyTableTwo"
            @tabChange="key => onTabChange(key, 'noTitleKeyTableTwo')"
          >
            <a-table :columns="columnsDb" :dataSource="dataTableTwo" :pagination="false" bordered></a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-modal>
    <a-row style="margin-bottom:15px;margin-top:15px">
      <a-col :span="24">
        <a-card
          :tabList="tableNowCard"
          :activeTabKey="noTitleKeyTable"
          @tabChange="key => onTabChange(key, 'noTitleKeyTable')"
        >
          <a-table
            :columns="columns"
            :dataSource="dataTable"
            :pagination="false"
            :loading="loading"
            bordered
          ></a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import moment from 'moment'
import countTo from 'vue-count-to'
import { getAccountReport, getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
import { getAction, postAction } from '@/api/manage'
var upDate

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/graphic')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/legend')
export default {
  name: 'statistics',
  components: {
    ACol,
    ARow,
    countTo
  },

  data: function() {
    return {
      loading: true,
      columns: [
        { title: '时间', dataIndex: 'statDate', align: 'center' },
        {
          title: '总消耗环比',
          dataIndex: 'yesCost',
          scopedSlots: { customRender: 'yesCost' },
          align: 'center'
        },
        { title: '总消耗', dataIndex: 'cost', align: 'center' },
        {
          title: '封面点击数环比',
          dataIndex: 'yesPhotoClick',
          scopedSlots: { customRender: 'photoClickProportion' },
          align: 'center'
        },
        { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
        {
          title: '封面曝光数环比',
          dataIndex: 'yesPhotoShow',
          scopedSlots: { customRender: 'photoShowProportion' },
          align: 'center'
        },
        { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
        {
          title: '素材曝光数环比',
          dataIndex: 'yesAclick',
          scopedSlots: { customRender: 'aclickProportion' },
          align: 'center'
        },
        { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
      ],
      columnsDb: [
        { title: '时间', dataIndex: 'statDate', align: 'center' },
        { title: '总消耗', dataIndex: 'cost', align: 'center' },
        { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
        { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
        { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
      ],
      dataTable: [],
      dataTableTwo: [],
      dataAllTableTwo: null,
      dataAllTable: null,
      dataAllTableYester: null,
      title: '快手大盘',
      visible: false,
      statistics: [],
      showData: null,
      startValue: [],
      contrastValue: [],
      contrastDataAll: null,
      allValue: ['', ''],
      value: 'month',
      oneMonth: null,
      twoMonth: null,
      kuaishou: {
        aclick: 0,
        aClickProportion: 0,
        cost: 0,
        costProportion: 0,
        photoClick: 0,
        photoClickroportion: 0,
        photoShow: 0,
        showProportion: 0
      },
      tabListNoTitle: [
        {
          key: 'cost',
          tab: '总消耗'
        },
        {
          key: 'photoClick',
          tab: '封面点击数'
        },
        {
          key: 'photoShow',
          tab: '封面曝光数'
        },
        {
          key: 'aclick',
          tab: '素材曝光数'
        }
      ],
      tableCard: [
        {
          key: 'small',
          tab: '前'
        },
        {
          key: 'big',
          tab: '后'
        }
      ],
      tableNowCard: [
        {
          key: 'now',
          tab: '今天'
        },
        {
          key: 'yesterday',
          tab: '昨天'
        }
      ],
      noTitleKeyTableTwo: 'small',
      noTitleKey: 'cost',
      noTitleKeyTwo: 'cost',
      noTitleKeyTable: 'now',
      chart: null,
      chart1: null,
      active: 1,
      duration: 1000,
      dataDetail: null,
      contrastDataList: []
    }
  },
  methods: {
    a(item) {
      console.log(item)
    },
    moment,
    clear() {
      this.twoMonth = null
      this.oneMonth = null
      this.contrastDataAll = null
      this.contrastDataList = null
      this.contrastValue = []
      this.dataTableTwo = []
      this.dataAllTableTwo = null
      if (this.chart) {
        this.chart.clear()
      }
    },
    search() {
      var params = {}
      params.type = 10
      params.sign = this.value
      if (this.value == 'month') {
        if (this.twoMonth && this.oneMonth) {
          params.bigDate = moment(this.twoMonth._d).format('YYYY-MM')
          params.smallDate = moment(this.oneMonth._d).format('YYYY-MM')
        } else {
          this.$message.error('请选择两个需要对比的数据')
        }
      } else if (this.value == 'day') {
        params.smallDate = moment(this.contrastValue[0]._d).format('YYYY-MM-DD')
        params.bigDate = moment(this.contrastValue[1]._d).format('YYYY-MM-DD')
      }

      getKsAccountReport(params).then(res => {
        if (res.compared) {
          this.contrastDataAll = res
          //   this.drawPieAll(res)
        } else {
          this.contrastDataAll = null
        }
      })
      getKsDetail(params).then(res => {
        this.contrastDataList = res
        this.drawSearchLine(this.noTitleKeyTwo, res)
      })
      getReportList(params).then(res => {
        this.tableCard = [
          {
            key: 'small',
            tab: res[0].beStatDate
          },
          {
            key: 'big',
            tab: res[0].statDate
          }
        ]
        this.noTitleKeyTableTwo = 'small'
        if (this.value == 'day') {
          this.dataAllTableTwo = res[0]
          this.dataTableTwo = res[0].beComparedDetail.map((item, index) => {
            return {
              ...item,
              statDate: item.statDate + ' ' + item.statHour + '时',
              key: index
            }
          })
        } else {
          this.dataAllTableTwo = res[0]
          this.dataTableTwo = res[0].beComparedDetail
        }
      })
    },
    getReportList(checked, dateValue) {
      let params = {}
      params.type = checked
      if (this.active == 9) {
        params.startDate = dateValue[0]
        params.endDate = dateValue[1]
      }
      //   proportion
      this.loading = true
      if (this.active == 1) {
        getReportList(params).then(res => {
          if (res[0].now.length > 0) {
            for (let i = 0; i < res[0].now.length; i++) {
              for (let j = 0; j < res[0].yesterday.length; j++) {
                if (res[0].now[i].statHour == res[0].yesterday[j].statHour) {
                  res[0].now[i].yesCost =
                    (((res[0].now[i].cost - res[0].yesterday[j].cost) / res[0].yesterday[j].cost) * 100).toFixed(2) +
                    '%'
                  res[0].now[i].yesPhotoClick =
                    (
                      ((res[0].now[i].photoClick - res[0].yesterday[j].photoClick) / res[0].yesterday[j].photoClick) *
                      100
                    ).toFixed(2) + '%'
                  res[0].now[i].yesPhotoShow =
                    (
                      ((res[0].now[i].photoShow - res[0].yesterday[j].photoShow) / res[0].yesterday[j].photoShow) *
                      100
                    ).toFixed(2) + '%'
                  res[0].now[i].yesAclick =
                    (((res[0].now[i].aclick - res[0].yesterday[j].aclick) / res[0].yesterday[j].aclick) * 100).toFixed(
                      2
                    ) + '%'
                }
              }
            }
            this.dataTable = res[0].now.map((item, index) => {
              return {
                key: index,
                ...item,
                statDate:
                  this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
              }
            })
            this.dataAllTableYester = res[0].yesterday.map((item, index) => {
              return {
                key: index,
                ...item,
                statDate:
                  this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
              }
            })
            this.dataAllTable = this.dataTable
            this.loading = false
          } else {
            this.dataAllTable = null
            this.dataTable = []
            this.dataAllTableYester = res[0].yesterday
            this.loading = false
          }
        })
      } else {
        getReportList(params).then(res => {
          this.dataTable = res.map((item, index) => {
            return {
              key: index,
              ...item,
              statDate:
                this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
            }
          })
          this.loading = false
        })
      }
    },
    drawPieAll(data) {
      var colorList = ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', 'rgba(250,250,250,0.5)']
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },

        series: [
          {
            name: '总消耗对比',
            type: 'pie',
            radius: '35%',
            center: ['50%', '50%'],
            data: [{ value: 944332, name: '2019-09' }, { value: 6839241.89, name: '2019-10' }],
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      }
      var chart = echarts.init(document.getElementById('chart3'))
      chart.clear()
      chart.setOption(option, true)
    },
    drawSearchLine(type, data) {
      var dataLegend = []
      var dataLength = [] //小月份数据
      var dataLengthBig = [] //大月份数据
      var dataElse = []
      var dataDate = []
      var that = this
      var showName = null
      if (data) {
        if (this.value == 'month') {
          dataLegend = [moment(this.oneMonth._d).format('YYYY-MM'), moment(this.twoMonth._d).format('YYYY-MM')]
          dataDate = data.map(item => {
            return item.statDate.substring(item.statDate.length - 2, item.statDate.length)
          })
        } else if (this.value == 'day') {
          dataLegend = [
            moment(this.contrastValue[0]._d).format('YYYY-MM-DD'),
            moment(this.contrastValue[1]._d).format('YYYY-MM-DD')
          ]
          dataDate = data.map(item => {
            return item.statHour
          })
        }
        if (type == 'cost') {
          showName = '总消耗'
          dataLength = data.map(item => {
            return item.beComparedCost
          })
          dataLengthBig = data.map(item => {
            return item.cost
          })
          dataElse = data.map(item => {
            if (this.value == 'month') {
              return { proportion: (item.costProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
            } else {
              return { proportion: (item.costProportion * 100).toFixed(2) + '%', statHour: item.statHour }
            }
          })
        } else if (type == 'photoClick') {
          showName = '封面点击数'
          dataLength = data.map(item => {
            return item.beComparedPhotoClick
          })
          dataLengthBig = data.map(item => {
            return item.photoClick
          })
          dataElse = data.map(item => {
            if (this.value == 'month') {
              return { proportion: (item.photoClickProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
            } else {
              return { proportion: (item.photoClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
            }
          })
        } else if (type == 'photoShow') {
          showName = '封面曝光数'
          dataLength = data.map(item => {
            return item.beComparedPhotoShow
          })
          dataLengthBig = data.map(item => {
            return item.photoShow
          })
          dataElse = data.map(item => {
            if (this.value == 'month') {
              return { proportion: (item.showProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
            } else {
              return { proportion: (item.showProportion * 100).toFixed(2) + '%', statHour: item.statHour }
            }
          })
        } else if (type == 'aclick') {
          showName = '素材曝光数'
          dataLength = data.map(item => {
            return item.beComparedAClick
          })
          dataLengthBig = data.map(item => {
            return item.aClick
          })
          dataElse = data.map(item => {
            if (this.value == 'month') {
              return { proportion: (item.comparedAclick * 100).toFixed(2) + '%', statHour: item.beComparedDate }
            } else {
              return { proportion: (item.comparedAclick * 100).toFixed(2) + '%', statHour: item.statHour }
            }
          })
        }
      }
      var option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var index
            if (that.value == 'month') {
              index = dataElse.findIndex(
                v => v.statHour.substring(v.statHour.length - 2, v.statHour.length) == params[0].name
              )
            } else {
              index = dataElse.findIndex(
                v => v.statHour.substring(v.statHour.length - 2, v.statHour.length) == params[0].name
              )
            }
            var da = null
            if (index >= 0) {
              da = dataElse[index].proportion
            }
            if (that.value == 'month') {
              return `${params[0].marker}时间:${params[0].seriesName}-${params[0].name}:${showName}:${params[0].data}  <br/>
            ${params[1].marker}时间:${params[1].seriesName}-${params[0].name}:${showName}:${params[1].data}  <br/>
            环比:${da}<br/> `
            } else {
              return `${params[0].marker}时间:${params[0].seriesName}:${showName}:${params[0].data}  <br/>
            ${params[1].marker}时间:${params[1].seriesName}:${showName}:${params[1].data}  <br/>
            环比:${da}<br/> `
            }
          }
        },
        legend: {
          data: dataLegend
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          data: dataDate,
          boundaryGap: false,
          // 坐标轴线
          axisLine: {
            show: false,
            lineStyle: {
              color: '#999'
            }
          },
          // 分割线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#e5e5e5'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#e5e5e5'
            }
          }
        },
        series: [
          {
            name: dataLegend[0],
            type: 'line',
            color: '#0bcd74',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            lineStyle: {
              normal: {
                width: 2,
                color: '#0bcd74'
              }
            },
            itemStyle: {
              borderColor: '#ffffff',
              borderWidth: 3
            },
            data: dataLength
          },
          {
            name: dataLegend[1],
            type: 'line',
            color: '#9933ff',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            lineStyle: {
              normal: {
                width: 2,
                color: '#9933ff'
              }
            },
            itemStyle: {
              borderColor: '#ffffff',
              borderWidth: 3
            },
            data: dataLengthBig
          }
        ]
      }
      this.chart = echarts.init(document.getElementById('chart1'))
      this.chart.clear()
      this.chart.setOption(option, true)
      //   window.onresize = function() {
      //     chart.resize()
      //   }
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current > moment().endOf('day')
    },
    onTabChange(key, type) {
      console.log(key, type)
      this[type] = key
      if (type == 'noTitleKey') {
        this.drawPie(key, this.dataDetail)
      } else if (type == 'noTitleKeyTable') {
        this.dataTable = []
        if (key == 'now') {
          this.columns = [
            { title: '时间', dataIndex: 'statDate', align: 'center' },
            {
              title: '总消耗环比',
              dataIndex: 'yesCost',
              scopedSlots: { customRender: 'yesCost' },
              align: 'center'
            },
            { title: '总消耗', dataIndex: 'cost', align: 'center' },
            {
              title: '封面点击数环比',
              dataIndex: 'yesPhotoClick',
              scopedSlots: { customRender: 'photoClickProportion' },
              align: 'center'
            },
            { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
            {
              title: '封面曝光数环比',
              dataIndex: 'yesPhotoShow',
              scopedSlots: { customRender: 'photoShowProportion' },
              align: 'center'
            },
            { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
            {
              title: '素材曝光数环比',
              dataIndex: 'yesAclick',
              scopedSlots: { customRender: 'aclickProportion' },
              align: 'center'
            },
            { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
          ]
          this.dataTable = this.dataAllTable
        } else {
          this.columns = [
            { title: '时间', dataIndex: 'statDate', align: 'center' },
            { title: '总消耗', dataIndex: 'cost', align: 'center' },
            { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
            { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
            { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
          ]
          this.dataTable = this.dataAllTableYester.map((item, index) => {
            return {
              key: index,
              ...item,
              statDate: item.statDate
            }
          })
        }
      } else if (type == 'noTitleKeyTableTwo') {
        this.dataTableTwo = []
        if (key == 'small') {
          if (this.value == 'day') {
            this.dataTableTwo = this.dataAllTableTwo.beComparedDetail.map(item => {
              return {
                ...item,
                statDate: item.statDate + ' ' + item.statHour + '时'
              }
            })
          } else {
            this.dataTableTwo = this.dataAllTableTwo.beComparedDetail
          }
        } else {
          if (this.value == 'day') {
            this.dataTableTwo = this.dataAllTableTwo.comparedDetail.map(item => {
              return {
                ...item,
                statDate: item.statDate + ' ' + item.statHour + '时'
              }
            })
          } else {
            this.dataTableTwo = this.dataAllTableTwo.comparedDetail
          }
        }
      } else {
        this.drawSearchLine(key, this.contrastDataList)
      }
    },
    getAdd(checked) {
      if (checked == 9) {
        if (this.startValue.length > 0 && this.startValue[0]) {
          this.allValue[1] = moment(this.startValue[0]._d).format('YYYY-MM-DD')
          this.allValue[0] = moment(this.startValue[1]._d).format('YYYY-MM-DD')
        }
      } else {
        this.startValue = []
        this.allValue = []
      }
      this.active = checked
      var arr = [
        {
          key: 'now',
          tab: '今天'
        },
        {
          key: 'yesterday',
          tab: '昨天'
        }
      ]
      if (checked == 1) {
        this.columns = [
          { title: '时间', dataIndex: 'statDate', align: 'center' },
          {
            title: '总消耗环比',
            dataIndex: 'yesCost',
            scopedSlots: { customRender: 'yesCost' },
            align: 'center'
          },
          { title: '总消耗', dataIndex: 'cost', align: 'center' },
          {
            title: '封面点击数环比',
            dataIndex: 'yesPhotoClick',
            scopedSlots: { customRender: 'photoClickProportion' },
            align: 'center'
          },
          { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
          {
            title: '封面曝光数环比',
            dataIndex: 'yesPhotoShow',
            scopedSlots: { customRender: 'photoShowProportion' },
            align: 'center'
          },
          { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
          {
            title: '素材曝光数环比',
            dataIndex: 'yesAclick',
            scopedSlots: { customRender: 'aclickProportion' },
            align: 'center'
          },
          { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
        ]
      } else {
        this.columns = [
          { title: '时间', dataIndex: 'statDate', align: 'center' },
          { title: '总消耗', dataIndex: 'cost', align: 'center' },
          { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
          { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
          { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
        ]
      }
      switch (checked) {
        case 1:
          arr = [
            {
              key: 'now',
              tab: '今天'
            },
            {
              key: 'yesterday',
              tab: '昨天'
            }
          ]
          break
        case 2:
          arr = [
            {
              key: 'yesterday',
              tab: '昨天'
            }
          ]
          break
        case 3:
          arr = [
            {
              key: 'yesterday',
              tab: '近一周'
            }
          ]
          break
        case 4:
          arr = [
            {
              key: 'yesterday',
              tab: '近十五天'
            }
          ]
          break
        case 5:
          arr = [
            {
              key: 'yesterday',
              tab: '近一月'
            }
          ]
          break
        case 6:
          arr = [
            {
              key: 'yesterday',
              tab: '近三月'
            }
          ]
          break
        case 7:
          arr = [
            {
              key: 'yesterday',
              tab: '近半年'
            }
          ]
          break
        case 8:
          arr = [
            {
              key: 'yesterday',
              tab: '所有'
            }
          ]
          break
        case 9:
          arr = [
            {
              key: 'yesterday',
              tab: this.allValue[1] + ' ~ ' + this.allValue[0]
            }
          ]
          break
      }
      this.tableNowCard = arr
      this.getReportList(checked, this.allValue)
      this.drawLine(checked, this.allValue)
      this.getKsDetail(checked, this.allValue).then(res => {
        this.drawPie(this.noTitleKey, res)
      })
    },
    getKsDetail(type, dateValue) {
      var that = this
      return new Promise(function(resolve) {
        let params = {}
        params.type = type
        if (that.active == 9) {
          params.startDate = dateValue[0]
          params.endDate = dateValue[1]
        }
        getKsDetail(params).then(res => {
          that.dataDetail = res
          resolve(res)
        })
      })
    },
    drawLine(type, dateValue) {
      var that = this
      return new Promise(function(resolve) {
        let params = {}
        params.type = type
        if (that.active == 9) {
          params.startDate = dateValue[0]
          params.endDate = dateValue[1]
        }
        getKsAccountReport(params).then(res => {
          var dataNew = []
          var dataX = []
          if (res == '') {
            that.kuaishou.aclick = 0
            that.kuaishou.cost = 0
            that.kuaishou.photoClick = 0
            that.kuaishou.photoShow = 0
          } else {
            that.kuaishou = res
          }
          resolve()
        })
      })
    },
    drawPie(type, data) {
      var dataLegend = []
      var dataLength = []
      var dataElse = []
      var dataDate = []
      var that = this
      if (this.active == 1 || this.active == 2) {
        // data.sort(function(a, b) {
        //   return a.statHour - b.statHour
        // })
        dataDate = data.map(item => {
          return item.statHour
        })
      } else {
        // data.sort(function(a, b) {
        //   return a.statDate - b.statDate
        // })
        dataDate = data.map(item => {
          return item.statDate
        })
      }
      if (type == 'cost') {
        dataLegend = ['总消耗']
        dataElse = data.map(item => {
          if (item.now) {
            return { proportion: (item.now.costProportion * 100).toFixed(2) + '%', statHour: item.statHour }
          } else {
            return { proportion: 0, statHour: item.statHour }
          }
        })
      } else if (type == 'photoClick') {
        dataLegend = ['封面点击数']
        dataElse = data.map(item => {
          if (item.now) {
            return { proportion: (item.now.photoClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
          } else {
            return { proportion: 0, statHour: item.statHour }
          }
        })
      } else if (type == 'photoShow') {
        dataLegend = ['封面曝光数']
        dataElse = data.map(item => {
          if (item.now) {
            return { proportion: (item.now.showProportion * 100).toFixed(2) + '%', statHour: item.statHour }
          } else {
            return { proportion: 0, statHour: item.statHour }
          }
        })
      } else if (type == 'aclick') {
        dataLegend = ['素材曝光数']
        dataElse = data.map(item => {
          if (item.now) {
            return { proportion: (item.now.aClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
          } else {
            return { proportion: 0, statHour: item.statHour }
          }
        })
      }
      dataLength = data.map(item => {
        return item[type]
      })
      var series
      if (this.active == 1) {
        dataLegend = ['今天', '昨天']
        series = [
          {
            name: dataLegend[0],
            type: 'line',
            color: '#9933ff',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            lineStyle: {
              normal: {
                width: 2,
                color: '#9933ff'
              }
            },
            itemStyle: {
              borderColor: '#ffffff',
              borderWidth: 3
            },
            data: data.map(item => {
              if (item.now) {
                return item.now[type]
              } else {
                return 0
              }
            })
          },
          {
            name: dataLegend[1],
            type: 'line',
            color: '#0bcd74',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            lineStyle: {
              normal: {
                width: 2,
                color: '#0bcd74'
              }
            },
            itemStyle: {
              borderColor: '#ffffff',
              borderWidth: 3
            },
            data: dataLength
          }
        ]
      } else {
        series = [
          {
            name: dataLegend[0],
            type: 'line',
            color: '#0bcd74',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            lineStyle: {
              normal: {
                width: 2,
                color: '#0bcd74'
              }
            },
            itemStyle: {
              borderColor: '#ffffff',
              borderWidth: 3
            },
            data: dataLength
          }
        ]
      }

      var option = {
        backgroundColor: '#fff',
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false }
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var index = dataElse.findIndex(v => v.statHour == params[0].name)
            var da = null
            if (index >= 0) {
              da = dataElse[index].proportion
            }
            if (that.active == 1) {
              if (params.length > 1) {
                return `${params[0].marker}今天${params[0].name}时:${params[0].data}  <br/>
              ${params[1].marker}昨天${params[1].name}时:${params[1].data} <br/>
            环比:${da} <br/> `
              } else {
                return `${params[0].marker}时间:${params[0].name} <br/>
            数值:${params[0].data} `
              }
            } else {
              return `${params[0].marker}时间:${params[0].name} <br/>
            数值:${params[0].data} `
            }
          }
        },
        legend: {
          data: dataLegend
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          data: dataDate,
          boundaryGap: false,
          // 坐标轴线
          axisLine: {
            show: false,
            lineStyle: {
              color: '#999'
            }
          },
          // 分割线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#e5e5e5'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#e5e5e5'
            }
          }
        },
        series: series
      }
      var chart = echarts.init(document.getElementById('chart'))
      chart.clear()
      chart.setOption(option, true)
      window.onresize = function() {
        chart.resize()
      }
      // this.chart.on('click', param => {
      //   if (param.name == '总展示') {
      //     alert(123)
      //   }
      // })
    }
  },
  watch: {},
  computed: {
    newDate() {
      var myDate = new Date()
      myDate.getYear() //获取当前年份(2位)
      var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
      var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
      var d = myDate.getDate() //获取当前日(1-31)
      var day = myDate.getHours()
      return day
    }
  },
  activated: function() {
    this.$nextTick(() => {
      var that = this
      that.drawLine(1)
      that.getKsDetail(1).then(res => {
        that.drawPie('cost', res)
      })
      that.getReportList(1, that.allValue)
      upDate = window.setInterval(() => {
        setTimeout(() => {
          that.drawLine(1)
          that.getKsDetail(that.active).then(res => {
            that.drawPie('cost', res)
          })
          that.getReportList(that.active, that.allValue)
        }, 0)
      }, 120000)
    })
  }
}
</script>
