<style>
th div {
  white-space: nowrap;
}
</style>
<template>
  <div class="data-display-statistics">
    <a-modal title="环比展示" v-model="visible" @ok="handleOk" width="90%" :footer='null'>
      <div v-if="url">
        <video class="video" :src="url" controls="controls" style="height:200px;" v-show="showVideo">
          您的浏览器不支持 video 标签。
        </video>
      </div>
      <a-button type="primary" @click="showVideo = !showVideo">{{
        !showVideo ? '点击查看视频' : '点击收起视频'
      }}</a-button>
      <a-card style="width:100%;">
        <a-table
          :columns="columnsDetail"
          :dataSource="dataDetail"
          bordered
          id="outTable"
          :pagination="false"
          :loading="loading"
          :scroll="{ x: true }"
        >
          <span slot="photoClickRatio" slot-scope="photoClickRatio">{{ photoClickRatio | getBo }}</span>
          <span slot="actionRatio" slot-scope="actionRatio">{{ actionRatio | getBo }}</span>
          <span slot="impression1kCost" slot-scope="impression1kCost, record">
            <span v-if="record.statDate == '环比'">{{ impression1kCost | getBo }}</span>
            <span v-else>{{ impression1kCost | toFixtwo }}</span>
          </span>
          <span slot="photoClickCost" slot-scope="photoClickCost, record">
            <span v-if="record.statDate == '环比'">{{ photoClickCost | getBo }}</span>
            <span v-else>{{ photoClickCost | toFixtwo }}</span>
          </span>
          <span slot="actionCost" slot-scope="actionCost, record">
            <span v-if="record.statDate == '环比'">{{ actionCost | getBo }}</span>
            <span v-else>{{ actionCost | toFixtwo }}</span>
          </span>
          <span slot="conversionPrice" slot-scope="conversionPrice, record">
            <span v-if="record.statDate == '环比'">{{ conversionPrice | getBo }}</span>
            <span v-else>{{ conversionPrice | toFixtwo }}</span>
          </span>
           <span slot="play3sRate" slot-scope="play3sRate,record">
             <span v-if="record.statDate == '环比'">{{ play3sRate }}</span>
            <span v-else>{{ play3sRate | getBo }}</span>
           </span>
        </a-table>
      </a-card>
    </a-modal>
  </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 { getKuaiShouChainRatio } from '@api/statistics'
import axios from 'axios'
import { mapGetters } from 'vuex'

var length = 0
var active = 1
const columnsDetail = [
  {
    title: '日期',
    dataIndex: 'statDate',
    key: 'statDate',
    align: 'center',
    fixed: 'left',
    width: 130
  },
  {
    title: '花费',
    dataIndex: 'cost',
    key: 'cost',
    align: 'center'
  },
  {
    title: '封面曝光数',
    dataIndex: 'photoShow',
    key: 'photoShow',
    align: 'center'
  },
  {
    title: '封面点击数',
    dataIndex: 'photoClick',
    key: 'photoClick',
    align: 'center'
  },
  {
    title: '素材曝光数',
    dataIndex: 'aclick',
    key: 'aclick',
    align: 'center'
  },
  {
    title: '行为数',
    dataIndex: 'bclick',
    key: 'bclick',
    align: 'center'
  },
  {
    title: '封面点击率',
    dataIndex: 'photoClickRatio',
    key: 'photoClickRatio',
    align: 'center',
    scopedSlots: { customRender: 'photoClickRatio' }
  },
  {
    title: '行为率',
    dataIndex: 'actionRatio',
    key: 'actionRatio',
    align: 'center',
    scopedSlots: { customRender: 'actionRatio' }
  },

  {
    title: '均千次封面曝光花费(元)',
    dataIndex: 'impression1kCost',
    key: 'impression1kCost',
    scopedSlots: { customRender: 'impression1kCost' },
    align: 'center'
  },
  {
    title: '平均封面点击单价(元)',
    dataIndex: 'photoClickCost',
    key: 'photoClickCost',
    scopedSlots: { customRender: 'photoClickCost' },
    align: 'center'
  },
  {
    title: '平均行为单价(元)',
    dataIndex: 'actionCost',
    key: 'actionCost',
    scopedSlots: { customRender: 'actionCost' },
    align: 'center'
  },
  {
    title: '转化数',
    dataIndex: 'conversions',
    key: 'conversions',
    align: 'center'
  },
  {
    title: '转化单价(元)',
    dataIndex: 'conversionPrice',
    key: 'conversionPrice',
    scopedSlots: { customRender: 'conversionPrice' },
    align: 'center'
  },
  {
    title: '3s播放率',
    dataIndex: 'play3sRate',
    key: 'play3sRate',
    scopedSlots: { customRender: 'play3sRate' },
    align: 'center',
    
  },
]
export default {
  name: 'ration-modal',
  components: {
    ACol,
    ARow
  },

  data: function() {
    return {
      columnsDetail,
      showVideo: false,
      dataDetail: [],
      url: '',
      visible: false,
      loading: true
    }
  },
  filters: {
    toFixtwo: function(value) {
      if (value) {
        return value.toFixed(2)
      } else {
        return 0.0
      }
    },
    getBo: function(value) {
      if (value) {
        return (value * 100).toFixed(2) + '%'
      } else {
        return '0.00%'
      }
    }
  },
  methods: {
    moment,
    getMineList(md5, active) {
      this.visible = true
      this.loading = true
      this.url = md5.url
      this.dataDetail = []
      this.showVideo = false
      var params = {}
      params.type = active
      params.signature = md5.signature
      if (md5.accountId) {
        params.accountId = md5.accountId
      }
      getKuaiShouChainRatio(params).then(res => {
        if (res.success) {
          if (res.result.contrast) {
            var now = {
              key: 1,
              ...res.result.contrast,
              statDate:
                active == 1 || active == 2
                  ? res.result.contrast.statDate
                  : res.result.contrast.startDate + ' ~ ' + res.result.contrast.endDate
            }
            var yesterday = {
              key: 2,
              ...res.result.beContrast,
              statDate:
                active == 1 || active == 2
                  ? res.result.beContrast.statDate
                  : res.result.beContrast.startDate + ' ~ ' + res.result.beContrast.endDate
            }
            var chainRatio = {
              key: 3,
              statDate: '环比',
              photoClickRatio: res.result.chainRatio.photoClickRatioProportion,
              conversions: (res.result.chainRatio.conversionsProportion * 100).toFixed(2) + '%',
              cost: (res.result.chainRatio.costProportion * 100).toFixed(2) + '%',
              impression1kCost: res.result.chainRatio.impression1kCostProportion,
              photoClick: (res.result.chainRatio.photoClickProportion * 100).toFixed(2) + '%',
              bclick: (res.result.chainRatio.bClickProportion * 100).toFixed(2) + '%',
              aclick: (res.result.chainRatio.aClickProportion * 100).toFixed(2) + '%',
              photoClickCost: res.result.chainRatio.photoClickCostProportion,
              conversionPrice: res.result.chainRatio.conversionPriceProportion,
              actionRatio: res.result.chainRatio.actionRatioProportion,
              actionCost: res.result.chainRatio.actionCostProportion,
              photoShow: (res.result.chainRatio.showProportion * 100).toFixed(2) + '%',
              play3sRate: (res.result.chainRatio.conversionPlay3sRate * 100).toFixed(2) + '%'
            }
            this.dataDetail.push(now)
            this.dataDetail.push(yesterday)
            this.dataDetail.push(chainRatio)
          } 
          this.loading = false
        } else {
          this.visible = true
          this.loading = false
        }
      })
    },
    handleOk() {
      this.visible = true
    }
  },
  watch: {},
  distoryed() {}
}
</script>
