<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;
}
</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-col :sm="18" style="margin-bottom: 20px; z-index: 10">
        <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.materialType ? (materialInfo.materialType == '' ? '无' : materialInfo.materialType) : '-'
              }}
            </a-descriptions-item>
            <a-descriptions-item label="视频时长">
              <span v-if="materialInfo.second">
                {{ materialInfo.second | formatS }}
              </span>
              <span v-else>-</span>
            </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>
            <a-descriptions-item label="关联项目">
              {{ materialInfo.projectName || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="唯一编码" :span="2">
              {{ 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-card style="min-height: 300px; margin: 10px 0" v-if="dataView && 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">
            <a-col :xl="6" class="show-data">
              <h3>素材消耗</h3>
              <p
                :style="{ color: dataView.charge[0].charge >= dataView.charge[2].charge ? '#F66C6D' : '#67C239' }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.charge[0].charge | decimalsHandle }}
              </p>
              <p><span>项目top</span>{{ dataView.charge[1].charge | decimalsHandle }}</p>
              <p><span>素材库均值</span>{{ dataView.charge[2].charge | decimalsHandle }}</p>
            </a-col>
            <a-col :xl="6" class="show-data">
              <h3>封面曝光数</h3>
              <p
                :style="{
                  color: dataView.photoShow[0].photoShow >= dataView.photoShow[2].photoShow ? '#F66C6D' : '#67C239',
                }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.photoShow[0].photoShow }}
              </p>
              <p><span>项目top</span>{{ dataView.photoShow[1].photoShow }}</p>
              <p><span>素材库均值</span>{{ dataView.photoShow[2].photoShow }}</p>
            </a-col>
            <a-col :xl="6" class="show-data">
              <h3>封面点击数</h3>
              <p
                :style="{
                  color: dataView.photoClick[0].photoClick >= dataView.photoClick[2].photoClick ? '#F66C6D' : '#67C239',
                }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.photoClick[0].photoClick }}
              </p>
              <p><span>项目top</span>{{ dataView.photoClick[1].photoClick }}</p>
              <p><span>素材库均值</span>{{ dataView.photoClick[2].photoClick }}</p>
            </a-col>
            <a-col :xl="6" class="show-data">
              <h3>素材曝光数</h3>
              <p
                :style="{ color: dataView.aclick[0].aclick >= dataView.aclick[2].aclick ? '#F66C6D' : '#67C239' }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.aclick[0].aclick }}
              </p>
              <p><span>项目top</span>{{ dataView.aclick[1].aclick }}</p>
              <p><span>素材库均值</span>{{ dataView.aclick[2].aclick }}</p>
            </a-col>
          </a-row>
          <a-row :gutter="15" style="margin-top: 20px">
            <a-col :xl="6" class="show-data">
              <h3>行为数</h3>
              <p
                :style="{ color: dataView.bclick[0].bclick >= dataView.bclick[2].bclick ? '#F66C6D' : '#67C239' }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.bclick[0].bclick }}
              </p>
              <p><span>项目top</span>{{ dataView.bclick[1].bclick }}</p>
              <p><span>素材库均值</span>{{ dataView.bclick[2].bclick }}</p>
            </a-col>
            <a-col :xl="6" class="show-data">
              <h3>激活数</h3>
              <p
                :style="{
                  color: dataView.activation[0].activation >= dataView.activation[2].activation ? '#F66C6D' : '#67C239',
                }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.activation[0].activation }}
              </p>
              <p><span>项目top</span>{{ dataView.activation[1].activation }}</p>
              <p><span>素材库均值</span>{{ dataView.activation[2].activation }}</p>
            </a-col>
            <a-col :xl="6" class="show-data">
              <h3>3s播放率</h3>
              <p
                :style="{
                  color: dataView.play3sRate[0].play3sRate >= dataView.play3sRate[2].play3sRate ? '#F66C6D' : '#67C239',
                }"
                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>
              <p><span>素材库均值</span>{{ (dataView.play3sRate[2].play3sRate * 100).toFixed(2) + '%' }}</p>
            </a-col>
          </a-row>
        </a-card>
        <a-card style="min-height: 300px; margin: 10px 0" v-if="dataView && 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">
            <a-col :xl="6" class="show-data">
              <h3>素材消耗</h3>
              <p
                :style="{ color: dataView.cost[0].cost >= dataView.cost[2].cost ? '#F66C6D' : '#67C239' }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.cost[0].cost | decimalsHandle }}
              </p>
              <p><span>项目top</span>{{ dataView.cost[1].cost | decimalsHandle }}</p>
              <p><span>素材库均值</span>{{ dataView.cost[2].cost | decimalsHandle }}</p>
            </a-col>
            <a-col :xl="6" class="show-data">
              <h3>点击数</h3>
              <p
                :style="{
                  color: dataView.click[0].click >= dataView.click[2].click ? '#F66C6D' : '#67C239',
                }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.click[0].click }}
              </p>
              <p><span>项目top</span>{{ dataView.click[1].click }}</p>
              <p><span>素材库均值</span>{{ dataView.click[2].click }}</p>
            </a-col>
            <a-col :xl="6" class="show-data">
              <h3>曝光数</h3>
              <p
                :style="{
                  color:
                    dataView.materialShow[0].materialShow >= dataView.materialShow[2].materialShow
                      ? '#F66C6D'
                      : '#67C239',
                }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.materialShow[0].materialShow }}
              </p>
              <p><span>项目top</span>{{ dataView.materialShow[1].materialShow }}</p>
              <p><span>素材库均值</span>{{ dataView.materialShow[2].materialShow }}</p>
            </a-col>
            <a-col :xl="6" class="show-data">
              <h3>完播率</h3>
              <p
                :style="{
                  color:
                    dataView.play100Rate[0].play100Rate >= dataView.play100Rate[2].play100Rate ? '#F66C6D' : '#67C239',
                }"
                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>
              <p><span>素材库均值</span>{{ (dataView.play100Rate[2].play100Rate * 100).toFixed(2) + '%' }}</p>
            </a-col>
          </a-row>
          <a-row :gutter="15" style="margin-top: 20px">
            <a-col :xl="6" class="show-data">
              <h3>点赞数</h3>
              <p
                :style="{
                  color:
                    dataView.likeMaterial[0].likeMaterial >= dataView.likeMaterial[2].likeMaterial
                      ? '#F66C6D'
                      : '#67C239',
                }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.likeMaterial[0].likeMaterial }}
              </p>
              <p><span>项目top</span>{{ dataView.likeMaterial[1].likeMaterial }}</p>
              <p><span>素材库均值</span>{{ dataView.likeMaterial[2].likeMaterial }}</p>
            </a-col>
            <a-col :xl="6" class="show-data">
              <h3>评论数</h3>
              <p
                :style="{
                  color:
                    dataView.commentMaterial[0].commentMaterial >= dataView.commentMaterial[2].commentMaterial
                      ? '#F66C6D'
                      : '#67C239',
                }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.commentMaterial[0].commentMaterial }}
              </p>
              <p><span>项目top</span>{{ dataView.commentMaterial[1].commentMaterial }}</p>
              <p><span>素材库均值</span>{{ dataView.commentMaterial[2].commentMaterial }}</p>
            </a-col>
            <a-col :xl="6" class="show-data">
              <h3>转发数</h3>
              <p
                :style="{
                  color:
                    dataView.shareMaterial[0].shareMaterial >= dataView.shareMaterial[2].shareMaterial
                      ? '#F66C6D'
                      : '#67C239',
                }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.shareMaterial[0].shareMaterial }}
              </p>
              <p><span>项目top</span>{{ dataView.shareMaterial[1].shareMaterial }}</p>
              <p><span>素材库均值</span>{{ dataView.shareMaterial[2].shareMaterial }}</p>
            </a-col>
            <a-col :xl="6" class="show-data">
              <h3>关注数</h3>
              <p
                :style="{
                  color: dataView.follow[0].follow >= dataView.follow[2].follow ? '#F66C6D' : '#67C239',
                }"
                style="font-size: 18px; font-weight: 700"
              >
                {{ dataView.follow[0].follow }}
              </p>
              <p><span>项目top</span>{{ dataView.follow[1].follow }}</p>
              <p><span>素材库均值</span>{{ dataView.follow[2].follow }}</p>
            </a-col>
          </a-row>
        </a-card>
        <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;
            "
          >
            数据消耗趋势
          </div>
          <div
            id="echartCircular"
            ref="echartCircular"
            style="height: 350px"
            :style="{ width: (clientWidth / 24) * 18 - 48 - 24 + 'px' }"
          ></div
        ></a-card>
        <!-- <a-card class="search-box" style="min-height: 300px; margin: 20px 0"> </a-card> -->
      </a-col>
    </a-spin>
  </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')
export default {
  name: 'online-training-list',
  data() {
    return {
      noImg: require('@/assets/noImg.png'),
      materialInfo: null,
      dataView: null,
      clientWidth: 1920,
      spinning: false,
      scrollTopAll: 0,
      scrollTop: 124,
      mediaId: 0,
    }
  },
  components: {
    UploadToAli,
    uploadFile,
  },
  watch: {
    $route: function (n, o) {
      if (n.query.md5 != o.query.md5 || n.path != o.path) {
        this.getMaterialInfo()
      }
    },
  },
  methods: {
    handlerEchartOption(data) {
      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: '消耗',
            type: 'line',
            stack: '总量',
            data: data.map((item) => {
              return item.cost.toFixed(3)
            }),
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              normal: {
                width: 2,
                // color: '#0bcd74'
              },
            },
            itemStyle: {
              borderColor: '#ffffff',
              borderWidth: 0,
            },
          },
        ],
      }

      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
      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.spinning = false
              that.dataView = {}
              for (let i = 0; i < item.length; i++) {
                for (const key in item[i]) {
                  that.dataView[key] = item[i][key]
                }
              }
            })
          }
        })
      })
    },
    getToutiao() {
      var data = JSON.parse(localStorage.getItem('videoInfo'))
      var params = {
        mediaId: data.mediaId,
        md5: data.md5,
      }
      var that = this
      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.spinning = false
              that.dataView = {}
              for (let i = 0; i < item.length; i++) {
                for (const key in item[i]) {
                  that.dataView[key] = item[i][key]
                }
              }
            })
          }
        })
      })
    },
    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) => {
        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.initEchart('echartCircular', this.handlerEchartOption(res.result))
        }
      })
    },
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scrollTop = scrollTop
    },
  },
  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()
    })
  },
  created() {},
}
</script>