<style lang="scss" scoped>
#office-iframe {
  height: 800px;
}
</style>
<style>
.info-detail .ant-descriptions-item-content {
  font-weight: bold;
}
.info-detail .ant-descriptions-item-label {
  color: darkgray;
  min-width: 80px;
}
.info-detail table tr td {
  border: 0;
}
.show-data p {
  color: black;
  font-weight: 600;
}
.show-data p span {
  display: inline-block;
  width: 85px;
  color: slategrey;
  font-weight: 500;
}
.chouzhen {
  border-style: solid;
  border-width: 1px;
  border-color: #e4e4e4;
  width: calc(20% - 10px);
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: left;
  flex-direction: column;
  background: #fff;
  position: relative;
  z-index: 99;
  float: left;
}
.chouzhen p {
  
  margin-bottom: 0;
  line-height: 30px;

}
</style>
<template>
  <a-row :gutter="10">
    <a-spin :spinning="spinning">
      <a-col :sm="6" style="margin-bottom: 20px; z-index: 10">
        <a-card
          style="min-height: 100px"
          :style="{
            width: (clientWidth / 24) * 6 - 10 + 'px',
          }"
        >
          <video class="video" :src="materialInfo.url" controls="controls" style="width: 100%" v-if="materialInfo">
            您的浏览器不支持 video 标签。
          </video>
          <img :src="noImg" alt="" v-else style="width: 100%" />
        </a-card>
      </a-col>
    </a-spin>
    <a-col :sm="18" style="margin-bottom: 20px; z-index: 10">
      <a-spin :spinning="spinning">
        <a-card class="info-detail" style="min-height: 300px">
          <a-descriptions title="视频信息" v-if="materialInfo">
            <a-descriptions-item label="素材标题" :span="3">
              {{ materialInfo.materialName ? materialInfo.materialName : '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="素材ID" >
              {{ materialInfo.materialId ? materialInfo.materialId : '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="上线时间">
              {{ materialInfo.createTime ? materialInfo.createTime.split(' ')[0] : '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="视频大小">
              {{ materialInfo.size ? materialInfo.size : '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="视频尺寸">
              {{ materialInfo.width ? materialInfo.width + '*' + materialInfo.height : '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="投放媒体">
              {{ materialInfo.madia || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="素材渠道">
              {{ materialInfo.channelType || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="供应商">
              {{ materialInfo.supplier || '-' }}
            </a-descriptions-item>
            <!-- style="width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" -->
            <a-descriptions-item label="关联项目"   class="cang">
              <!-- <a-tooltip>
                <template slot="title">
                  {{ materialInfo.projectName || '-' }}
                </template>
                {{ materialInfo.projectName || '-' }}
              </a-tooltip> -->
              {{ materialInfo.projectName || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="唯一编码">
              {{ materialInfo.code || '-' }}
            </a-descriptions-item>

            <a-descriptions-item label="设计组长" :span="3" style="margin-top: 10px">
              {{ materialInfo.leaderName || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="编导">
              {{ materialInfo.planName ? (materialInfo.planName == '' ? '无' : materialInfo.planName) : '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="拍摄">
              {{ materialInfo.shotName ? (materialInfo.shotName == '' ? '无' : materialInfo.shotName) : '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="剪辑">
              {{ materialInfo.clipName ? (materialInfo.clipName == '' ? '无' : materialInfo.clipName) : '-' }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-spin>
      <a-spin :spinning="spinningData">
        <a-card style="min-height: 200px; margin: 10px 0" v-if="mediaId == 2">

          <div
            style="
              margin-bottom: 20px;
              color: rgba(0, 0, 0, 0.85);
              font-weight: bold;
              font-size: 16px;
              line-height: 1.5;
            "
          >
            数据概览
          </div>
          <a-row :gutter="15" v-if="dataView&&dataView.charge[0]&&dataView.activation[0]&&dataView.play3sRate[0]&&dataView.aclick[0]">
            <a-col :xl="6" class="show-data" v-if="dataView.charge[0]">
              <h3>素材消耗</h3>
              <p
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.charge[0].charge | decimalsHandle }}
              </p>
              <p><span>项目top</span>{{ dataView.charge[1].charge | decimalsHandle }}</p>
            </a-col>
            <a-col :xl="6" class="show-data"  v-if="dataView.activation[0]">
              <h3>激活数</h3>
              <p
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.activation[0].activation }}
              </p>
              <p><span>项目top</span>{{ dataView.activation[1].activation }}</p>
            </a-col>
            <a-col :xl="6" class="show-data"  v-if="dataView.play3sRate[0]">
              <h3>3s播放率</h3>
              <p
                style="font-size: 18px; font-weight: 700"
              >
                {{ (dataView.play3sRate[0].play3sRate * 100).toFixed(2) + '%' }}
              </p>
              <p><span>项目top</span>{{ (dataView.play3sRate[1].play3sRate * 100).toFixed(2) + '%' }}</p>
            </a-col>
            <a-col :xl="6" class="show-data"  v-if="dataView.aclick[0]">
              <h3>素材曝光数</h3>
              <p
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.aclick[0].aclick }}
              </p>
              <p><span>项目top</span>{{ dataView.aclick[1].aclick }}</p>
            </a-col>
          </a-row>
          <a-empty v-else/>
        </a-card>

      <a-card style="min-height: 200px; margin: 10px 0" v-if="mediaId == 1">
        <div
          style="
            margin-bottom: 20px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: bold;
            font-size: 16px;
              
            line-height: 1.5;
          "
        >
          数据概览
        </div>
        <a-row :gutter="15" v-if="dataView">
          <a-col :xl="6" class="show-data">
            <h3>素材消耗</h3>
            <p
              style="font-size: 18px; font-weight: 700"
            >
              {{ dataView.cost[0].cost | decimalsHandle }}
            </p>
            <p><span>项目top</span>{{ dataView.cost[1].cost | decimalsHandle }}</p>
          </a-col>
          <a-col :xl="6" class="show-data">
            <h3>点击数</h3>
            <p
              style="font-size: 18px; font-weight: 700"
            >
              {{ dataView.click[0].click }}
            </p>
            <p><span>项目top</span>{{ dataView.click[1].click }}</p>
          </a-col>
          <a-col :xl="6" class="show-data">
            <h3>曝光数</h3>
            <p
              style="font-size: 18px; font-weight: 700"
            >
              {{ dataView.materialShow[0].materialShow }}
            </p>
            <p><span>项目top</span>{{ dataView.materialShow[1].materialShow }}</p>
          </a-col>
          <a-col :xl="6" class="show-data">
            <h3>完播率</h3>
            <p
              style="font-size: 18px; font-weight: 700"
            >
              {{ (dataView.play100Rate[0].play100Rate * 100).toFixed(2) + '%' }}
            </p>
            <p><span>项目top</span>{{ (dataView.play100Rate[1].play100Rate * 100).toFixed(2) + '%' }}</p>
          </a-col>
        </a-row>

        <a-row :gutter="15" style="margin-top: 20px" v-if="dataView">
          <a-col :xl="6" class="show-data">
            <h3>点赞数</h3>
            <p
              style="font-size: 18px; font-weight: 700"
            >
              {{ dataView.likeMaterial[0].likeMaterial }}
            </p>
            <p><span>项目top</span>{{ dataView.likeMaterial[1].likeMaterial }}</p>
          </a-col>
          <a-col :xl="6" class="show-data">
            <h3>评论数</h3>
            <p
              style="font-size: 18px; font-weight: 700"
            >
              {{ dataView.commentMaterial[0].commentMaterial }}
            </p>
            <p><span>项目top</span>{{ dataView.commentMaterial[1].commentMaterial }}</p>
          </a-col>
          <a-col :xl="6" class="show-data">
            <h3>转发数</h3>
            <p
              style="font-size: 18px; font-weight: 700"
            >
              {{ dataView.shareMaterial[0].shareMaterial }}
            </p>
            <p><span>项目top</span>{{ dataView.shareMaterial[1].shareMaterial }}</p>
          </a-col>
          <a-col :xl="6" class="show-data">
            <h3>关注数</h3>
            <p
              style="font-size: 18px; font-weight: 700"
            >
              {{ dataView.follow[0].follow }}
            </p>
            <p><span>项目top</span>{{ dataView.follow[1].follow }}</p>
          </a-col>
        </a-row>
        <a-empty v-else/>
      </a-card>
      </a-spin>
      <a-card style="min-height: 300px; margin: 10px 0">
        <div
          style="
            margin-bottom: 20px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: bold;
            font-size: 16px;
            line-height: 1.5;
          "
        >
          数据消耗趋势
        </div>
        <a-tabs v-model="active" @change="callback">
          <a-tab-pane key="cost" tab="消耗">
          </a-tab-pane>
          <a-tab-pane key="activation" tab="激活数">
          </a-tab-pane>
          <a-tab-pane key="aclick" tab="曝光数">
          </a-tab-pane>
          <!-- <a-tab-pane key="play_duration_3s" tab="3S播放率">
          </a-tab-pane> -->
        </a-tabs>
        <div
          id="echartCircular"
          ref="echartCircular"
          style="height: 350px"
          :style="{ width: (clientWidth / 24) * 18 - 48 - 24 + 'px' }"
        ></div
      ></a-card>
      <a-spin :spinning="spinningSimilar">
        <a-card style="min-height: 300px">
          <div
            style="
              margin-bottom: 20px;
              color: rgba(0, 0, 0, 0.85);
              font-weight: bold;
              font-size: 16px;
              line-height: 1.5;
            "
          >
            相似素材
            <a-tooltip>
              <template slot="title">
                根据数据模型抽象算出素材间的距离，取距离最近的素材为相似素材;
              </template>
              <a-icon type="question-circle" />
            </a-tooltip>
          </div>
          <div  
            style="
              margin-bottom: 20px;
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
              line-height: 1.5;
            "
          >
            最优相似素材Top5
            <a-tooltip>
              <template slot="title">
                与当前素材相似的素材中，最优的5个素材，若不足5个，则有几个取几个;
              </template>
              <a-icon type="question-circle" />
            </a-tooltip>
          </div>
          <div style="width:100%;" v-if="similarList.length>0">
            <div v-for="(item, index) in similarList" :key="index" class="chouzhen">
              <video :src="item.url" v-if="item.url!=''"  controls="controls" style="width: 100%;height:auto"></video>
              <p @click="toDetail(item.signature)"  style="width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
              :title="item.photoName">素材名称：<a>{{item.photoName}}</a></p>
              <p>消耗：{{item.charge}}</p>
            </div>
          </div>
          <a-empty v-else/>
        </a-card>
      </a-spin>

      <a-card style="min-height: 300px; margin: 10px 0">
        <div
          style="
            margin-bottom: 20px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: bold;
            font-size: 16px;
            line-height: 1.5;
          "
        >
          素材人群分析
        </div>
        <a-tabs v-model="activeScatter"  @change="callbackScatter">
          <a-tab-pane key="scatter" tab="素材人群数据展示">
          </a-tab-pane>
          <a-tab-pane key="table" tab="素材人群数据列表">
          </a-tab-pane>
          <!-- <a-tab-pane key="play_duration_3s" tab="3S播放率">
          </a-tab-pane> -->
        </a-tabs>
        <a-spin :spinning="spinningEcharts">
          <div
            v-if="activeScatter == 'scatter'"
            id="echartScatter"
            ref="echartScatter"
            style="height: 350px;width:100%"
          
          >
            <a-empty />
          </div>
          <div  v-if="activeScatter == 'scatter'&&dataArr.length>0">
            注：1.此处点的大小代表该素材人群的用户量；
            <br>
            <span style="visibility:hidden;">注：</span>2.若该素材人群的转化率与点击率相同，此时点重叠展示；</div>
        </a-spin>
         <!-- && tableData -->
        <div v-if="activeScatter == 'table'">
          <div style="display:flex;margin-bottom:15px">
            <div style="width:50%" v-if="tableData">
              <p>当前素材投放数据</p>
              <span>点击率：{{tableData.actionRatio?tableData.actionRatio:'-'}}</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span>转化率：{{tableData.convertRatio?tableData.convertRatio:'-'}}</span>
            </div>
            <div  style="width:50%">
              <p>最优定向组合推荐</p>
              <span>最优点击率组合：{{optimalGroup&&optimalGroup.actionRatio?optimalGroup.actionRatio:'无最优推荐'}}</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span>最优转化率组合：{{optimalGroup&&optimalGroup.convertRatio?optimalGroup.convertRatio:'无最优推荐'}}</span>
            </div>
          </div>
          <div>
            <p>不同人群定向组合及相关数据预估：</p>
          </div>
       
          <a-table
						:columns="columns"
						:data-source="tableData.dataList?tableData.dataList:[]"
						:loading="tableDataLoading"
						:pagination="false"
						bordered
						size="middle"
            style="margin:10px 0"
					>
					</a-table>
        </div>
       
      </a-card>
    </a-col>

  </a-row>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'
import $ from 'jquery'
import qs from 'qs'
import UploadToAli from '@femessage/upload-to-ali'
import uploadFile from '@/components/uploadFile.vue'
import { mapActions, mapGetters, mapState } from 'vuex'
var echarts = require('echarts')
const columns = [
	{
		title: '性别',
		dataIndex: 'gender',
		align: 'center'
	},
	{
		title: '年龄',
		dataIndex: 'age',
		align: 'center'
	},
	{
		title: '点击率',
		dataIndex: 'actionRatio',
		align: 'center',
	},
	{
		title: '转化率',
		dataIndex: 'convertRatio',
		align: 'center'
  }
];
export default {
  name: 'online-training-list',
  inject: ['reload'],
  data() {
    return {
      noImg: require('@/assets/noImg.png'),
      chartList:[],
      active:'cost',
      materialInfo: null,
      dataView: null,
      clientWidth: 1920,
      spinning: false,
      spinningData:false,
      scrollTopAll: 0,
      scrollTop: 124,
      mediaId: 0,
      similarList:[],
      activeScatter:'scatter',
      tableData:{actionRatio:null,convertRatio:null,dataList:[]},
      columns,
      tableDataLoading:false,
      optimalGroup:null,
      spinningSimilar:false,
      dataArr:[],
      spinningEcharts:false
    }
  },
  components: {
    UploadToAli,
    uploadFile,
  },
  watch: {
    $route: function (n, o) {
      if (n.query.md5 != o.query.md5 || n.path != o.path) {
        this.getMaterialInfo()
      }
    },
  },
  methods: {
    toDetail(md5) {
      var data = JSON.parse(localStorage.getItem('videoInfo'))
			let params = {md5: md5, mediaId:data.mediaId};
			localStorage.setItem('videoInfo', JSON.stringify(params));
			// this.$router.push({
			// 	path: '/materialReport/marterialDetail'
			// });
      this.mediaId = JSON.parse(localStorage.getItem('videoInfo')).mediaId
      window.addEventListener('scroll', this.handleScroll)
      document.body.scrollTop = document.documentElement.scrollTop = 0
      this.clientWidth = document.documentElement.clientWidth - 224
      this.active = 'cost'
      this.activeScatter = 'scatter'
      //   this.$route.query.mediaId
      //   this.$route.query.md5
      this.getMaterialInfo()
      this.getSimilarList()
      this.getMaterialChartList()
      this.getOptimal()
		},
    callback(){
      console.log(this.chartList)
      this.initEchart('echartCircular', this.handlerEchartOption(this.chartList, this.active));
    },
    callbackScatter(){
      if(this.activeScatter == 'scatter'){
        this.$nextTick(()=>{
          this.getMaterialChartList();
        })
      }else{
        this.getMaterialTableList()
      }
    },
    handlerEchartOption(data, typeShow) {
      var option = {
        noDataLoadingOption: {
          text: '暂无数据',
          effect: 'bubble',
          effectOption: {
            effect: {
              n: 0,
            },
          },
        },
        // title: {
        //     text: '折线图堆叠'
        // },
        tooltip: {
          trigger: 'axis',
        },
        // legend: {
        //     data: ['邮件营销', '联盟广告', ]
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {
          icon: 'circle',
          top: '5%',
          right: '5%',
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: '#556677',
          },
        },
        toolbox: {
          // feature: {
          //     saveAsImage: {}
          // }
        },
        xAxis: {
          type: 'category',
          data: data.map((item) => {
            return item.statDate
          }),
          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: [
          {
            smooth: true,
            name: typeShow == 'cost'?'消耗':typeShow == 'aclick'?'曝光数':typeShow == 'activation'?'激活数':'3S播放率',
            type: 'line',
            stack: '总量',
            data: data.map((item) => {
              switch (typeShow) {
								case 'cost':
									return item.cost.toFixed(3);
									break;
								case 'aclick':
									return item.aclick
									break;
								case 'activation':
									return item.activation
									break;           
								case 'play_duration_3s':
									return item.play_duration_3s.slice(0,item.play_duration_3s.length-1)
									break;
							}
            }),
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              normal: {
                width: 2,
                // color: '#0bcd74'
              },
            },
            itemStyle: {
              borderColor: '#ffffff',
              borderWidth: 0,
            },
          },
        ],
      }

      return option
    },
    handlerEchartScatter(data) {
      // console.log(data)
      // var data1 = [
      //   [221, 20.44, '服饰内衣', 110, '221.73亿', '2.39亿'],
      //   [602, 14.71, '食品饮料', 30, '60.21亿', '1.48亿'],
      //   [585, 7.84, '家居用品', 29, '58.59亿', '1.37亿'],
      //   [646, 13.16, '美妆', 32, '64.69亿', '1.05亿'],
      //   [243, 21.8, '个护家清', 20, '24.34亿', '7886.8w'],
      //   [322, 38.69, '母婴宠物', 20, '32.24亿', '7672.1w'],
      //   [180, 39.12, '生鲜', 20, '18.03亿', '3809.0w'],
      //   [360, 16.11, '鞋靴箱包', 20, '36.03亿', '3708.1w'],
      //   [696, 54.56, '珠宝文玩', 34, '69.70亿', '3212.2w'],
      //   [131, -20.62, '钟表配饰', 20, '13.14亿', '2889.6w'],
      // ];
      if(data.length>0){
        var option = {
        grid: {
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true,
        },
        tooltip: {
          formatter: function (params) {
            // console.log(params);
            if (params.componentType == 'series') {
              return (
                params.value[2] +
                '<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                params.color +
                ';"></span>' +
                '点击率: ' +
                params.value[4] +
                '<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                params.color +
                ';"></span>' +
                '转化率: ' +
                params.value[5] +
                '<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                params.color +
                ';"></span>' +
                '用户量: ' +
                params.value[3]
              );
            }
          },
        },
        xAxis: [{
          name: '点击率',
          type: 'value',
          // min: 0,
          // max: 2000,
          splitLine: {
            show: false,
          },
          // 坐标轴刻度
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: function (params) {
              // console.log(params)
              return ('' + params).slice(0, 4)
            },
          },
          axisLine: {
            show: true,
            onZero: false,
            symbol: ['none', 'path://M 512 124 L 64 900 h 896 Z'],
            lineStyle: {
              color: '#000',
            },
          },
        }, ],
        yAxis: [{
          name:'转化率',
          type: 'value',
          min:0,
          splitLine: {
            show: false,
          },
          // 坐标轴刻度
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            onZero: false,
            symbol: ['none', 'path://M 512 124 L 64 900 h 896 Z'],
            lineStyle: {
              color: '#000',
            },
          },
          axisLabel: {
            show: true,
          },
        }, ],
        series: [{
            type: 'scatter',
            zlevel: 2,
            data: data,
            symbolSize: function (d) {
              // console.log(d);
              return d[3]/8000000;
            },
            label: {
              normal: {
                width: 50,
                overflow: 'truncate',
                show: false,
                formatter: function (params) {
                  console.log(params)
                  return params.value[2];
                },
                position: 'bottom',
                distance: 12,
                color: '#52C41A',
                textStyle: {
                  fontSize: 13,
                  lineHeight: 13,
                },
              },
            },
            itemStyle: {
              opacity: 1,
              color: 'rgba(149, 178, 232, 0.6)',
            },
            emphasis: {
              itemStyle: {
                color: 'rgba(149, 178, 232)',
              },
            },
          },
          {
            type: 'scatter',
            zlevel: 3,
            // data: data,
            markLine: {
              silent: true, //鼠标悬停事件  true没有，false有
              symbol: 'none', //去掉箭头

              label: {
                show: false,
              },
              lineStyle: {
                color: '#919AAA',
                type: 'dashed',
              },
              data: [
                {
                  // yAxis: 10,
                  yAxis: 5 / 2,
                },
                {
                  xAxis: data[data.length-1][0] / 2,
                },
              ],
            },
          },
        ],
        };
        return option
      }

    },
    initEchart(idName, optionName) {
      var that = this
      const chart = this.$refs[idName]
      //   console.log(chart)
      if (chart) {
        const myChart = echarts.init(document.getElementById(idName))
        // myChart.showLoading({
        //     text: "图表数据正在努力加载..."
        // });

        myChart.setOption(optionName)
        window.addEventListener('resize', function () {
          that.clientWidth = document.documentElement.clientWidth - 224
          myChart.resize()
        })
      }
    },
    getKuaishou() {
      var data = JSON.parse(localStorage.getItem('videoInfo'))
      var params = {
        mediaId: data.mediaId,
        md5: data.md5,
      }
      var that = this
      this.spinningData = true
      var getProjectIdByMd5 = new Promise(function (resolve, reject) {
        that.postDataAction('/overView/getProjectIdByMd5', params).then((res) => {
          if (res.success) {
            var materialDetailCharge = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailCharge', { md5: data.md5, projectId: res.result })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            // var materialDetailPhotoShow = new Promise(function (resolve, reject) {
            //   that
            //     .postDataAction('/overView/materialDetailPhotoShow', {
            //       md5: data.md5,
            //       projectId: res.result,
            //     })
            //     .then((res) => {
            //       if (res.success) {
            //         resolve(res.result)
            //       }
            //     })
            // })
            // var materialDetailPhotoClick = new Promise(function (resolve, reject) {
            //   that
            //     .postDataAction('/overView/materialDetailPhotoClick', {
            //       md5: data.md5,
            //       projectId: res.result,
            //     })
            //     .then((res) => {
            //       if (res.success) {
            //         resolve(res.result)
            //       }
            //     })
            // })
            var materialDetailAClick = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailAClick', { md5: data.md5, projectId: res.result })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            // var materialDetailBClick = new Promise(function (resolve, reject) {
            //   that
            //     .postDataAction('/overView/materialDetailBClick', { md5: data.md5, projectId: res.result })
            //     .then((res) => {
            //       if (res.success) {
            //         resolve(res.result)
            //       }
            //     })
            // })
            var materialDetailActivation = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailActivation', {
                  md5: data.md5,
                  projectId: res.result,
                })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            var materialDetailPlay3sRate = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailPlay3sRate', {
                  md5: data.md5,
                  projectId: res.result,
                })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            Promise.all([
              materialDetailPlay3sRate,
              materialDetailCharge,
              // materialDetailPhotoShow,
              // materialDetailPhotoClick,
              materialDetailAClick,
              // materialDetailBClick,
              materialDetailActivation,
            ]).then((item) => {
              // dataView
              that.spinningData = false
              that.dataView = {}
              for (let i = 0; i < item.length; i++) {
                for (const key in item[i]) {
                  that.dataView[key] = item[i][key]
                }
              }
            }).catch(()=>{
              that.spinningData = false
            })
          }
        })
      })
    },
    getToutiao() {
      var data = JSON.parse(localStorage.getItem('videoInfo'))
      var params = {
        mediaId: data.mediaId,
        md5: data.md5,
      }
      var that = this
      this.spinningData = true
      var getProjectIdByMd5 = new Promise(function (resolve, reject) {
        that.postDataAction('/overView/getProjectIdByMd5', params).then((res) => {
          if (res.success) {
            var materialDetailMaterialShow = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailMaterialShow', {
                  md5: data.md5,
                  projectId: res.result,
                })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            var materialDetailCost = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailCost', { md5: data.md5, projectId: res.result })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            var materialDetailClick = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailClick', {
                  md5: data.md5,
                  projectId: res.result,
                })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            var materialDetailPlay100Rate = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailPlay100Rate', {
                  md5: data.md5,
                  projectId: res.result,
                })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            var materialDetailLikeMaterial = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailLikeMaterial', {
                  md5: data.md5,
                  projectId: res.result,
                })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            var materialDetailCommentMaterial = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailCommentMaterial', {
                  md5: data.md5,
                  projectId: res.result,
                })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            var materialDetailShareMaterial = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailShareMaterial', {
                  md5: data.md5,
                  projectId: res.result,
                })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            var materialDetailFollow = new Promise(function (resolve, reject) {
              that
                .postDataAction('/overView/materialDetailFollow', {
                  md5: data.md5,
                  projectId: res.result,
                })
                .then((res) => {
                  if (res.success) {
                    resolve(res.result)
                  }
                })
            })
            Promise.all([
              materialDetailCost,
              materialDetailClick,
              materialDetailMaterialShow,
              materialDetailPlay100Rate,
              materialDetailLikeMaterial,
              materialDetailCommentMaterial,
              materialDetailShareMaterial,
              materialDetailFollow,
            ]).then((item) => {
              // dataView
              console.log(item)
              that.spinningData = false
              that.dataView = {}
              for (let i = 0; i < item.length; i++) {
                for (const key in item[i]) {
                  that.dataView[key] = item[i][key]
                }
              }
            }).catch(()=>{
              that.spinningData = false
            })
          }
        })
      })
    },
    getMaterialInfo() {
      var data = JSON.parse(localStorage.getItem('videoInfo'))
      this.spinning = true
      var params = {
        mediaId: data.mediaId,
        md5: data.md5,
      }
      this.postDataAction('/overView/materialDetailInfo', params).then((res) => {
        this.spinning = false
        if (res.success) {
          if (res.result) {
            this.materialInfo = res.result
          } else {
            // this.$error({
            //   title: '页面数据加载出错',
            //   content: '该视频未上传公司素材库,请重新上传之后,可展示视频信息',
            // })
          }
        }
      })
      if (data.mediaId == 1) {
        this.getToutiao()
      } else if (data.mediaId == 2) {
        this.getKuaishou()
      }

      this.postDataAction('/overView/materialDetailChat', params).then((res) => {
        if (res.success) {
          this.chartList = res.result
          this.initEchart('echartCircular', this.handlerEchartOption(res.result, this.active))
        }
      })
    },
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scrollTop = scrollTop
    },
    getSimilarList(){
      this.spinningSimilar = true
      var data = JSON.parse(localStorage.getItem('videoInfo'))
      var params = {}
      params.signature = data.md5
      this.getAction('/overView/similarMaterial', params).then(res=>{
        this.spinningSimilar = false
        if(res.success){
          this.similarList = res.result
        }
      })
    },
    getMaterialChartList(){
      this.spinningEcharts = true
      var data = JSON.parse(localStorage.getItem('videoInfo'))
      var params = {}
      params.signature = data.md5
      this.getAction('/overView/populationAnalysisChart', params).then(res=>{
        this.spinningEcharts = false
        if(res.success){
          var dataArr = []
          dataArr = res.result.map(item=>{
            return [
              item.actionRatio.slice(0,item.actionRatio.length-1),
              item.convertRatio.slice(0,item.convertRatio.length-1),
              '年龄:'+item.age+';性别:'+item.gender,
              item.crowdCoverageCnt,
              item.actionRatio, 
              item.convertRatio
            ]
          })
          this.dataArr = dataArr
          if(dataArr.length>0){
            this.initEchart('echartScatter', this.handlerEchartScatter(dataArr));
          }else{
            this.$nextTick(()=>{
              var html = '<div class="ant-empty"><div class="ant-empty-image"><svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg"><g fill="none" fillRule="evenodd"><g transform="translate(24 31.67)"><ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse><path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path><path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path><path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path><path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path></g><path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path><g transform="translate(149.65 15.383)" fill="#FFF"><ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse><path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path></g></g></svg></div><p class="ant-empty-description">暂无数据</p></div>'          
              document.getElementById('echartScatter').innerHTML = html
              document.getElementById('echartScatter').removeAttribute('_echarts_instance_')
            })
           
          }
         
        }else{
          this.dataArr = []
        }
      })
    },
    getMaterialTableList(){
      this.tableDataLoading = true
      var data = JSON.parse(localStorage.getItem('videoInfo'))
      var params = {}
      params.signature = data.md5
      this.getAction('/overView/populationAnalysisList', params).then(res=>{
        this.tableDataLoading = false
        if(res.success){
          this.tableData = res.result == []?{actionRatio:null,convertRatio:null,dataList:[]}:res.result
        }
      })
    },
    getOptimal(){
      var data = JSON.parse(localStorage.getItem('videoInfo'))
      var params = {}
      params.signature = data.md5
      this.getAction('/overView/optimalCombination', params).then(res=>{
        if(res.success){
          this.optimalGroup = res.result
        }
      })
    }

  },
  mounted() {
    this.$nextTick(() => {
      this.mediaId = JSON.parse(localStorage.getItem('videoInfo')).mediaId
      window.addEventListener('scroll', this.handleScroll)
      this.clientWidth = document.documentElement.clientWidth - 224
      //   this.$route.query.mediaId
      //   this.$route.query.md5
      this.getMaterialInfo()
      this.getSimilarList()
      this.getMaterialChartList()
      this.getOptimal()
      
    })
  },
  created() {},
}
</script>