<template>
  <div class="compareData">
    <!-- /展示的对比数据的模态框 -->
    <a-modal v-model="compVisiable" title="数据对比" @ok="handleOk" width="65%" border :footer="null">
      <div class="clickHandle">
        <a-radio-group v-model="value"  @change="radioChange" name="dateGroup">
          <a-radio-button value="month" defaultChecked>月对比</a-radio-button>
          <a-radio-button value="day">天对比</a-radio-button>
        </a-radio-group>

        <span v-if="compareSign=='month'" class="selectDate">
          <a-range-picker
            v-model="monthValue"
            :placeholder="['选择月份', '选择月份']"
            format="YYYY-MM"
            :value="value"
            :mode="mode2"
            @panelChange="handlePanelChange2"
            @change="handleChange"
          />
        </span>
        <span v-else class="selectDate">
          <a-range-picker v-model="dateValue" @change="onChange" :disabled-date="disabledDate" />
        </span>

        <span class="searchBtn">
          <a-button type="primary" @click="searchHandle">查询</a-button>
        </span>
      </div>
      <div class="showbox">
        <div class="costcompare">
          <div>总消耗对比</div>
          <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
            <span>  {{costcompare.prev|decimalsHandle}}</span>
            </p>
          <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
            <span>  {{costcompare.next|decimalsHandle}} </span>
            </p>
          <p>环比：
            <span class="huanbi">  {{(costcompare.next-costcompare.prev)/costcompare.prev| toPercentage}}
                <span
                  class="greenIcon"
                  v-if="(costcompare.next-costcompare.prev)/costcompare.prev >0"
                ></span>
                <span class="redIcon" v-else></span>
            </span>
            
            </p>
        </div>
        <div class="costcompare">
          <div>点击数对比</div>
          <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
             <span> {{clickcompare.prev |formatCurrency}}</span>
            </p>
          <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
            <span>  {{clickcompare.next |formatCurrency}}</span>
            </p>
          <p >环比：
            <span class="huanbi">  {{
                (clickcompare.next-clickcompare.prev)/clickcompare.prev| toPercentage}}
                 <span
                  class="greenIcon"
                  v-if="(clickcompare.next-clickcompare.prev)/clickcompare.prev >0"
                ></span>
                <span class="redIcon" v-else></span>
                </span>
               
            </p>
        </div>
        <div class="costcompare">
          <div>展示数对比</div>
          <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
             <span> {{showNumcompare.prev|formatCurrency}} </span>
              </p>
          <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
            <span>  {{showNumcompare.prev|formatCurrency}}</span>
              </p>
          <p>环比：
            <span class="huanbi">  {{(showNumcompare.next-showNumcompare.prev)/showNumcompare.prev| toPercentage}}
                <span
                  class="greenIcon"
                  v-if="(showNumcompare.next-showNumcompare.prev)/showNumcompare.prev>0"
                ></span>
                <span class="redIcon" v-else></span>
            </span>
            
              </p>
        </div>
      </div>
      <div class="compareChart">
        <a-tabs default-active-key="Tcost" @change="compareTab">
          <a-tab-pane key="Tcost" tab="总消耗"></a-tab-pane>
          <a-tab-pane key="Tclick" tab="点击数"></a-tab-pane>
          <a-tab-pane key="TshowNum" tab="展示数"></a-tab-pane>
        </a-tabs>
        <div id="compareChart" style="width:100%;height:300px" ref="compareChart"></div>
      </div>
      <div class="tableCompare">
        <div class="time">
          <a-radio-group v-model="tableTab" @change="tableTabChange">
            <a-radio-button
              :value="1"
              defaultChecked
            >{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}</a-radio-button>
            <a-radio-button
              :value="2"
            >{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}</a-radio-button>
          </a-radio-group>
        </div>
        <a-table
          size="middle"
          :columns="columns"
          :dataSource="tableData"
          :pagination="false"
          bordered
          id="outTable"
          :loading="loading"
          style="word-break: break-all;"
        >
          <span
            slot="costProportion"
            slot-scope="costProportion"
          >{{ costProportion | toPercentage }}</span>
          <!-- <span slot="statDatetime" slot-scope>{{ dateValue[0].format('YYYY-MM-DD')+'~'+dateValue[1].format('YYYY-MM-DD')}}</span> -->
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
// 引入基本模板
var echarts = require('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')

let compareOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'line' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data: ['']
  },
  grid: {
    left: '1%',
    right: '0%',
    bottom: '5%',
    top: '10%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      show: true
    }
  ],
  series: [
    {
      name: '',
      type: 'line',
      smooth: true,
      data: [],
      color: '#32CD32'
    },
    {
      name: '',
      type: 'line',
      smooth: true,
      data: [],
      color: '#8A2BE2'
    }
  ]
}

let columns = [
  {
    title: '日期/时间',
    dataIndex: 'statDate',
    scopedSlots: { customRender: 'statDate' },
    align: 'center',
    key: 'statDate'
  },
  {
    title: '消耗(元)',
    dataIndex: 'cost',
    scopedSlots: { customRender: 'cost' },
    align: 'center',
    key: 'cost'
  },
  {
    title: '消耗环比',
    dataIndex: 'costProportion',
    scopedSlots: { customRender: 'costProportion' },
    align: 'center',
    key: 'costProportion'
  },
  {
    title: '点击数',
    dataIndex: 'click',
    align: 'center',
    scopedSlots: { customRender: 'click' },
    key: 'click'
  },
  {
    title: '点击率',
    dataIndex: 'clickRate',
    align: 'center',
    scopedSlots: { customRender: 'clickRate' },
    key: 'clickRate'
  },

  {
    title: '展示数',
    dataIndex: 'showNum',
    align: 'center',
    scopedSlots: { customRender: 'showNum' },
    key: 'showNum'
  },
  {
    title: '平均千次展现费用(元)',
    dataIndex: 'cpm',
    align: 'center',
    scopedSlots: { customRender: 'cpm' },
    key: 'cpm'
  },
  {
    title: '平均点击单价(元)',
    dataIndex: 'cp',
    align: 'center',
    scopedSlots: { customRender: 'cp' },
    key: 'cp'
  }
]
let initDay = {
  today: {
    x: [
      '00:00',
      '01:00',
      '02:00',
      '03:00',
      '04:00',
      '05:00',
      '06:00',
      '07:00',
      '08:00',
      '09:00',
      '10:00',
      '11:00',
      '12:00',
      '13:00',
      '14:00',
      '15:00',
      '16:00',
      '17:00',
      '18:00',
      '19:00',
      '20:00',
      '21:00',
      '22:00',
      '23:00'
    ],
    y: [],
    name: ''
  },
  yesterday: {
    x: [
      '00:00',
      '01:00',
      '02:00',
      '03:00',
      '04:00',
      '05:00',
      '06:00',
      '07:00',
      '08:00',
      '09:00',
      '10:00',
      '11:00',
      '12:00',
      '13:00',
      '14:00',
      '15:00',
      '16:00',
      '17:00',
      '18:00',
      '19:00',
      '20:00',
      '21:00',
      '22:00',
      '23:00'
    ],
    y: [],
    name: ''
  }
}
let initMonth = {
  today: {
    x: [],
    y: [],
    name: ''
  },
  yesterday: {
    x: [],
    y: [],
    name: ''
  }
}
export default {
  props: ['compareVisiable'],
  data() {
    return {
      moment,
      compareOption: JSON.parse(JSON.stringify(compareOption)),
      //对比的模态框
      compVisiable: false,
      compareSign: 'month',
      //日期选择器
      mode2: ['month', 'month'],
      value: "month",
      dateValue: [],
      monthValue: [],
      //tab的选中key
      tabKey: '',
      tabCost: {},
      tabClick: {},
      tabShowNum: {},
      //table
      loading: false,
      columns,
      tableData: [],
      tableTab: 1,
      smallDate: [],
      bigDate: [],
      //showbox里的数据
      costcompare: {
        prev: 0,
        next: 0
      },
      clickcompare: {
        prev: 0,
        next: 0
      },
      showNumcompare: {
        prev: 0,
        next: 0
      }
    }
  },
  watch: {
    compareVisiable() {
      this.compVisiable = this.compareVisiable
    },
    compVisiable(n) {
    //   console.log(n)
      this.$emit('close_modal', n)
    }
  },
  methods: {
    //单选框选择
    radioChange(e) {
      this.compareSign = e.target.value
    //   console.log(this.compareSign)
      if (this.compareSign == 'day') {

        this.sectionHttp({
          type: 10,
          sign: this.compareSign,
          smallDate: this.dateValue[0].format('YYYY-MM-DD'),
          bigDate: this.dateValue[1].format('YYYY-MM-DD')
        })
      } else {
        this.sectionHttp({
          type: 10,
          sign: this.compareSign,
          smallDate: this.monthValue[0].format('YYYY-MM'),
          bigDate: this.monthValue[1].format('YYYY-MM')
        })
      }
    },
    tableTabChange(e) {
      this.tableTab = e.target.value
      if (e.target.value == '1') {
        this.tableData = this.smallDate
      } else {
        this.tableData = this.bigDate
      }
      
    },
    //获取echart的值
    getEchartData(idName, optionName) {
      const chart = this.$refs[idName]
      //   console.log(chart)
      if (chart) {
        const myChart = echarts.init(document.getElementById(idName))
        myChart.setOption(optionName)
        window.addEventListener('resize', function() {
          myChart.resize()
        })
      }
    },

    //处理echart
    sectionHttp(params) {
      this.loading = true
      this.compareOption = JSON.parse(JSON.stringify(compareOption))
      return new Promise((resolve, reject) => {
        postAction('/ctop/byteDance/homePage/report/compare', params).then(res => {
        //   console.log(res)
          if (res.success) {
            this.loading = false
            if (this.compareSign == 'day') {
              this.tabCost = JSON.parse(JSON.stringify(initDay))
              this.tabClick = JSON.parse(JSON.stringify(initDay))
              this.tabShowNum = JSON.parse(JSON.stringify(initDay))
              this.compareOption.legend.data = [
                this.dateValue[0].format('YYYY-MM-DD'),
                this.dateValue[1].format('YYYY-MM-DD')
              ]
              this.compareOption.series[0].name = this.dateValue[1].format('YYYY-MM-DD')
              this.compareOption.series[1].name = this.dateValue[0].format('YYYY-MM-DD')
            } else {
              this.tabCost = JSON.parse(JSON.stringify(initMonth))
              this.tabClick = JSON.parse(JSON.stringify(initMonth))
              this.tabShowNum = JSON.parse(JSON.stringify(initMonth))
              this.compareOption.legend.data = [
                this.monthValue[0].format('YYYY-MM'),
                this.monthValue[1].format('YYYY-MM')
              ]
              this.compareOption.series[0].name = this.monthValue[1].format('YYYY-MM')
              this.compareOption.series[1].name = this.monthValue[0].format('YYYY-MM')
              res.result.chart.compare.forEach((item, index) => {
                this.tabClick.yesterday.x.push(item.statDate.split('-')[2])
                this.tabCost.yesterday.x.push(item.statDate.split('-')[2])
                this.tabShowNum.yesterday.x.push(item.statDate.split('-')[2])
              })
            }
            res.result.chart.compare.forEach((item, index) => {
              this.tabClick.yesterday.y.push(item.click)
              this.tabCost.yesterday.y.push(item.cost)
              this.tabShowNum.yesterday.y.push(item.showNum)
              if (item.afterData) {
                this.tabClick.today.y.push(item.afterData.click)
                this.tabCost.today.y.push(item.afterData.cost)
                this.tabShowNum.today.y.push(item.afterData.showNum)
              } else {
                this.tabClick.today.y.push(0)
                this.tabCost.today.y.push(0)
                this.tabShowNum.today.y.push(0)
              }
            })

            this.compareOption.xAxis[0].data = this.tabCost.yesterday.x
            this.compareOption.series[0].data = this.tabCost.today.y
            this.compareOption.series[1].data = this.tabCost.yesterday.y
            this.getEchartData('compareChart', this.compareOption)

            //处理表格数据
            res.result.list.smallDate.forEach((ele,index) => {
              if (!ele.costProportion) {
                ele.costProportion = '-'
              }
              if (ele.statHour || ele.statHour == 0) {
                ele.statHour = ele.statHour > 9 ? `${ele.statHour}:00` : ` 0${ele.statHour}:00`
                ele.statDate = ele.statDate + ' ' + ele.statHour
              }
              ele.key=index+1
            })

            this.smallDate = [...res.result.list.smallDate]
            res.result.list.bigDate.forEach((ele,index) => {
              if (!ele.costProportion) {
                ele.costProportion = '-'
              }
              if (ele.statHour || ele.statHour == 0) {
                ele.statHour = ele.statHour > 9 ? `${ele.statHour}:00` : ` 0${ele.statHour}:00`
                ele.statDate = ele.statDate + ' ' + ele.statHour
              }
              ele.key=index+1
              // console.log(ele)
              this.costcompare.next += ele.cost
              this.clickcompare.next += ele.click
              this.showNumcompare.next += ele.showNum
            })
            if(res.result.list.bigDate.length<res.result.list.smallDate.length){
                for (let i = 0; i < res.result.list.bigDate.length; i++) {
                    this.costcompare.prev += res.result.list.smallDate[i].cost
                    this.clickcompare.prev += res.result.list.smallDate[i].click
                    this.showNumcompare.prev += res.result.list.smallDate[i].showNum
                }
            }else{
                for (let i = 0; i < res.result.list.smallDate.length; i++) {
                    this.costcompare.prev += res.result.list.bigDate[i].cost
                    this.clickcompare.prev += res.result.list.bigDate[i].click
                    this.showNumcompare.prev += res.result.list.bigDate[i].showNum
                }
            }
            

            this.bigDate = [...res.result.list.bigDate]
            this.tableData = this.smallDate
          }
        })
      })
    },
    //对比模块的tab事件
    compareTab(key) {
      // this.compareOption=JSON.parse(JSON.stringify(compareOption))
      if (key == 'Tcost') {
        this.compareOption.xAxis[0].data = this.tabCost.yesterday.x
        this.compareOption.series[0].data = this.tabCost.today.y
        this.compareOption.series[1].data = this.tabCost.yesterday.y
      } else if (key == 'Tclick') {
        this.compareOption.xAxis[0].data = this.tabClick.yesterday.x
        this.compareOption.series[0].data = this.tabClick.today.y
        this.compareOption.series[1].data = this.tabClick.yesterday.y
      } else {
        this.compareOption.xAxis[0].data = this.tabShowNum.yesterday.x
        this.compareOption.series[0].data = this.tabShowNum.today.y
        this.compareOption.series[1].data = this.tabShowNum.yesterday.y
      }
      this.getEchartData('compareChart', this.compareOption)
    },
    //motaikuang
    handleOk(e) {
      // console.log(e);
      this.compVisiabled = false
      // this.$emit('update', this.compareVisiabled);
      // this.$parent.compareVisiable=false;
    },
    onChange(date, dateString) {
    
      this.dateValue = date
    },
    handleChange(value) {
      console.log(value)
      this.monthValue = value
    },

    handlePanelChange2(value, mode) {
      
   
      this.monthValue =value
      this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
    },

    //按钮查询事件
    searchHandle() {
      if (this.compareSign == 'day') {
        this.sectionHttp({
          type: 10,
          sign: this.compareSign,
          smallDate: this.dateValue[0].format('YYYY-MM-DD'),
          bigDate: this.dateValue[1].format('YYYY-MM-DD')
        })
      } else {
        this.sectionHttp({
          type: 10,
          sign: this.compareSign,
          smallDate: this.monthValue[0].format('YYYY-MM'),
          bigDate: this.monthValue[1].format('YYYY-MM')
        })
      }
    },
    disabledDate(current) {
      return current && current > moment().subtract(1, 'day')
    },
  },

  mounted() {
    this.monthValue = [moment().subtract(1, 'months'), moment()]
    this.dateValue = [moment().subtract(1, 'days'), moment()]
  },
  // activated() {
  //     this.monthValue=[moment().subtract(1,'months'),moment()]
  //     this.sectionHttp({
  //         type:10,
  //         sign:this.compareSign,
  //         smallDate:moment().subtract(1,'months').format('YYYY-MM'),
  //         bigDate:moment().format('YYYY-MM'),
  //     })
  // },
  filters: {
      //变成百分比
    toPercentage(val) {
      if (typeof val != 'string') {
        return (val * 100).toFixed(2) + '%'
      } else {
        return val
      }
    },
    //保留两位小数并且变成货币格式
    decimalsHandle(val){
        
        val=val.toFixed(2);
        let numberStr = val.toString()
        let str = numberStr.split('.')
        
        let str0=str[0].split('').reverse();
        for (let i = 0; i < str0.length; i++) {
        if ((i + 1) % 4 === 0) {
          str0.splice(i, 0, ',')
            }
        }
        str0.reverse()
        let handleResult = ''
        for (let j = 0; j < str0.length; j++) {
            handleResult += str0[j]
        }
        
        return handleResult+'.'+str[1]
        
    },
    //变成货币格式
    formatCurrency(val){
        let numberStr = val.toString()
        let str = numberStr.split('').reverse()
        for (let i = 0; i < str.length; i++) {
            if ((i + 1) % 4 === 0) {
            str.splice(i, 0, ',')
            }
        }
        str.reverse()
        let handleResult = ''
        for (let j = 0; j < str.length; j++) {
            handleResult += str[j]
        }
        return handleResult
    }
  }
}
</script>

<style lang="scss" scoped>
.clickHandle {
  position: relative;
  top: -24px;
  left: 0px;
  .selectDate {
    margin-left: 2rem;
  }
  .searchBtn {
    position: absolute;
    top: 5px;
    right: 0;
  }
}
.time {
  margin-bottom: 10px;
}
.showbox {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  .costcompare {
    width: 30%;
    border: 1px solid #e0e0e0;
    padding-bottom: 20px;
    div {
      border-bottom: 1px solid #e0e0e0;
      padding: 5px 10px;
      font-size: 16px;
      font-weight: 600;
    }
    p {
      padding: 15px 15px 5px;
      margin-bottom: 0;
      span{
          font-weight: 500;
          font-size: 16px;
          margin-left: 15px;
      }
      .huanbi{
          font-weight: 500;
          font-size: 16px;
         
          position: relative;
          display: inline-block;
          padding: 0 15px  0;
      }
      .greenIcon {
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 8px solid green;
      position: absolute;
      top: 40%;
      right: 0;
    }
    .redIcon {
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 8px solid red;
      position: absolute;
      top: 40%;
      right: 0;
    }
    }
  }
}
.compareChart {
  border: 1px solid #e0e0e0;
  margin-bottom: 20px;
}
.tableCompare {
  border: 1px solid #e0e0e0;
  padding: 1px 20px 15px;
}
</style>