<style>
.materialReport .chart-card-content {
  display: none !important;
}
</style>
<style scoped>
.bg {
  width: 100%;
  height: 100%;
}
.bg:after {
  content: '';
  width: 110%;
  height: 110%;
  position: absolute;
  left: -5%;
  top: -5%;
  background: inherit;
  filter: blur(10px);
  z-index: 2;
  background: rgba(0, 0, 0, 0.8);
}
.top-ul-style {
  width: 100%;
  padding-left: 0;
}
.top-ul-style li {
  height: 100px;
  border: 1px solid #f2f2f2;
  margin-bottom: 5px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.li-cost {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-content: flex-end;
}
.li-cost span {
  font-size: 16px;
  font-weight: 500;
  min-width: 50px;
  text-align: right;
}
</style>
<template>
  <div class="materialReport">
    <div class="card-containers">
      <a-tabs type="card">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="unordered-list" />
            大盘
          </span>
        </a-tab-pane>
        <!-- <a-tab-pane key="2" disabled>
          <span slot="tab">
            <a-icon type="apple" />
            快手
          </span>
        </a-tab-pane>
        <a-tab-pane key="3" disabled>
          <span slot="tab">
            <a-icon type="apple" />
            头条
          </span>
        </a-tab-pane> -->
      </a-tabs>
      <div class="option" style="justify-content: space-between">
        <div class="option" style="padding: 0">
          <div class="item">
            <span>日期选择</span>
            <a-range-picker
              v-model="dateValue"
              :ranges="dateRanges"
              :disabled-date="disabledDate"
              style="width: 250px"
            />
          </div>
          <div class="item">
            <span>媒体维度</span>
            <a-radio-group v-model="mediaDimension" @change="mediaDimensionChange">
              <a-radio-button value="b">快手</a-radio-button>
              <a-radio-button value="a">头条</a-radio-button>
            </a-radio-group>
          </div>
          <div class="item">
            <span>数据维度</span>
            <a-radio-group v-model="dataDimension" @change="dataDimensionChange">
              <a-radio-button value="a">项目</a-radio-button>
              <a-radio-button value="b" disabled>设计组</a-radio-button>
            </a-radio-group>
            <a-select
              style="width: 300px; margin-left: 10px"
              mode="multiple"
              :maxTagCount="2"
              v-model="dataDimensionValue"
              allowClear
              :loading="specificLoading"
              showSearch
              :filterOption="filterOption"
            >
              <a-select-option value="no" disabled v-if="dataDimensionList.length == 0 && specificLoading">
                数据请求中，请稍后。。。
              </a-select-option>
              <a-select-option v-for="(item, index) in dataDimensionList" :key="index" :value="item.projectId">
                {{ item.projectName }}
              </a-select-option>
            </a-select>
          </div>
        </div>

        <div class="item" style="float: right">
          <a-button @click="handleSubmit" type="primary" :loading="searchLoading" :disabled="dateValue.length == 0"
            >搜索</a-button
          >
          <a-button @click="resetSubmit" style="margin-left: 15px" :disabled="spinning" :loading="resetLoading"
            >重置</a-button
          >
        </div>
      </div>
    </div>
    <a-spin :spinning="spinning">
      <a-row :gutter="24" style="margin-top: 20px">
        <a-col :sm="24" :md="12" :xl="6">
          <chart-card :loading="loading" title="总消耗" :total="cost | decimalsHandle">
            <a-tooltip title="筛选时段内总消耗数据" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <div slot="percentage">
              <!-- <trend flag="up" style="margin-right: 16px">
              <span slot="term">周同比</span>
              12%
            </trend> -->
              <trend :flag="costLink > 0 ? 'up' : 'down'">
                <span slot="term">环比</span>
                {{ (costLink * 100).toFixed(2) }}%
              </trend>
            </div>
            <!-- <template slot="footer">
            日均销售额
            <span>￥ 234.56</span>
          </template> -->
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <chart-card :loading="loading" title="视频总数" :total="videoTotal + ''">
            <a-tooltip title="筛选时段内上新视频总数" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <div slot="percentage">
              <!-- <trend flag="up" style="margin-right: 16px">
              <span slot="term">周同比</span>
              12%
            </trend> -->
              <trend flag="up">
                <span slot="term">上新</span>
                {{ newVideo }}
              </trend>
            </div>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <chart-card :loading="loading" title="爆款视频" total="-">
            <a-tooltip title="筛选时段内双周消耗大于等于5w的视频总数" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>

            <div slot="percentage">
              <!-- <trend flag="up" style="margin-right: 16px">
              <span slot="term">周同比</span>
              12%
            </trend> -->
              <!-- <trend flag="down">
                <span slot="term">新增</span>
                0
              </trend> -->
            </div>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <chart-card :loading="loading" title="有效视频" total="-">
            <a-tooltip title="筛选时段内一周消耗大于等于5000的视频总数" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <div slot="percentage">
              <!-- <trend flag="up" style="margin-right: 16px">
              <span slot="term">周同比</span>
              12%
            </trend> -->
              <!-- <trend flag="down">
                <span slot="term">新增</span>
                0
              </trend> -->
            </div>
          </chart-card>
        </a-col>
      </a-row>

      <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
        <a-col :xl="18">
          <a-card title="数据趋势" style="width: 100%" :bordered="false">
            <div class="echart">
              <div class="echartBody">
                <div
                  id="echart"
                  ref="echart"
                  style="height: 350px"
                  :style="{ width: (clientWidth / 24) * 18 - 48 - 24 + 'px' }"
                ></div>
                <a-empty
                  style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
                  v-if="chartList.length == 0"
                />
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :xl="6">
          <a-card title="标签占比" style="width: 100%" :bordered="false">
            <div class="echart">
              <div class="echartBody">
                <a-empty style="height: 350px; position: relative" />
                <!-- <div
                  id="echartCircular"
                  ref="echartCircular"
                  style="height: 350px"
                  :style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
                >
                 
                </div> -->
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <a-row :gutter="24" style="margin-top: 20px">
        <a-col :xl="12">
          <a-card title="top素材排行榜" style="width: 100%; min-height: 700px" :bordered="false">
            <a slot="extra" @click="getMoreVideoList">查看更多</a>
            <ul class="top-ul-style" v-if="videoList.length > 0">
              <li v-for="(item, index) in videoList" :key="index">
                <div style="display: flex; position: relative; width: 80%; cursor: pointer">
                  <span style="position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px"
                    ><img :src="require('./image/' + (index + 1) + '.png')" alt="" style="width: 25px; height: auto"
                  /></span>
                  <div
                    style="
                      width: 25%;
                      height: 100%;
                      text-align: center;
                      background: #f2f2f2;
                      margin-left: 40px;
                      border-radius: 5px;
                      position: relative;
                    "
                  >
                    <div
                      :style="{
                        backgroundImage: 'url(' + (item.coverUrl || noImg) + ')',
                        backgroundSize: 'cover',
                        backgroundRepeat: 'no-repeat',
                        backgroundPosition: 'center center',
                        overflow: 'hidden',
                        position: 'absolute',
                        top: '0',
                        zIndex: '0',
                      }"
                      class="showShare bg"
                      @click="
                        visibleVideo = true
                        videoUrlShow = item.url
                      "
                    ></div>
                    <img
                      :src="item.coverUrl || noImg"
                      style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
                      alt=""
                      srcset=""
                      @click="
                        visibleVideo = true
                        videoUrlShow = item.url
                      "
                    />
                  </div>

                  <div
                    style="display: flex; flex-flow: column; justify-content: space-between; width: 60%"
                    @click.stop="toDetail(item.signature)"
                  >
                    <p style="margin-left: 10px; color: #1890ff">
                      {{ item.materialName ? item.materialName : '无素材名称' }}
                    </p>
                    <p style="margin-left: 10px; margin-bottom: 0" v-if="item.tag">
                      <a-tag v-for="(items, index) in item.tag.split(',')" :key="index" style="margin-right: 5px" v-if="index<=3">{{
                        items
                      }}</a-tag>
                    </p>
                  </div>
                </div>
                <div class="li-cost">
                  <span>消耗</span>
                  <span>{{ (item.charge ? item.charge : item.cost) | decimalsHandle }}</span>
                </div>
              </li>
            </ul>
            <a-empty v-else style="margin-top: 20%" />
          </a-card>
        </a-col>
        <a-col :xl="12">
          <a-card title="top设计排行榜" style="width: 100%; min-height: 700px" :bordered="false">
            <a-table
              :columns="columns"
              :data-source="designTopList"
              bordered
              size="middle"
              :scroll="{ y: 600 }"
              :pagination="ipagination"
              :loading="designTopLoading"
              @change="sort"
            >
              <span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
    <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
      <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
        您的浏览器不支持 video 标签。
      </video>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import YoutTable from '@/components/youtTable/YoutTable'
import ChartCard from '@/components/ChartCard'
import Trend from '@/components/Trend'
import { mapGetters } from 'vuex'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
var echarts = require('echarts')

const columnsFixd = [
  {
    title: '排名',
    dataIndex: 'rowNumber',
    scopedSlots: { customRender: 'rowNumber' },
    align: 'center',
    key: 'date',
  },
  {
    title: '设计人员',
    dataIndex: 'userName',
    align: 'center',
    scopedSlots: { customRender: 'userName' },
  },
  {
    title: '角色',
    dataIndex: 'roleName',
    align: 'center',
  },
  {
    title: '消耗(元)',
    dataIndex: 'cost',
    align: 'center',
    scopedSlots: { customRender: 'cost' },
    sorter: () => {},
  },
]
export default {
  components: {
    YoutTable,
    ChartCard,
    Trend,
  },
  data() {
    return {
      designTopLoading: false,
      noImg: require('@/assets/noImg.png'),
      visibleVideo: false,
      videoUrlShow: '',
      cost: '0',
      costLink: 0,
      videoTotal: '0',
      newVideo: 0,
      hotTotal: '0',
      xiaoTotal: '0',
      spinning: false,
      loading: false,
      chartList: [],
      videoList: [],
      designTopList: [],
      columns: [...columnsFixd], //table的表头
      columnsFixd,
      ipagination: {
        current: 1,
        pageSize: 10,
        //   pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        // showSizeChanger: true,
        // pageSizeOptions: ['10', '30', '50'],
        total: 0,
        onChange: (current, pageSize) => {
          // 切换分页时的回调，
          // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
          this.ipagination.current = current
          this.ipagination.pageSize = pageSize
        },
      },

      dateRanges: {
        昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        // 今天: [moment(), moment()],

        近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
        近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
        近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
        近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
        近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
        近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
      },
      dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
      dataDimension: 'a',
      mediaDimension: 'b',
      dataDimensionValue: [],
      dataDimensionList: [],
      specificLoading: false,
      order: 'descend',
      target: 'cost',
      clientWidth: 0,
      resetLoading: false,
      searchLoading: false,
    }
  },
  watch: {
    visibleVideo(n, o) {
      if (!n) {
        stopOtherVideo()
        closeAllVideoFun()
      }
    },
    'ipagination.current': function (n, o) {
      if (n != o) {
        this.getDesignTopList()
      }
    },
  },
  methods: {
    ...mapGetters(['userInfo']),
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    sort(pagination, filters, sorter, { currentDataSource }) {
      // console.log(pagination, filters, sorter)
      this.ipagination.current = pagination.current
      this.ipagination.pageSize = pagination.pageSize
      if (sorter.order) {
        this.order = sorter.order ? sorter.order : 'descend'
        this.target = sorter.columnKey
        this.getDesignTopList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' })
      }
    },
    getData() {
      this.spinning = true
      // this.initEchart('echartCircular', this.handlerAgeOption([]))
      Promise.all([
        this.getSumData(),
        this.getChartDataList(),
        this.getVideoTopList(),
        this.getDesignTopList({ target: 'cost', order: 'descend' }),
        // this.getTagProportionAnalyseList(),
      ])
        .then((res) => {
          this.spinning = false
          this.resetLoading = false
          this.searchLoading = false
        })
        .catch((error) => {
          this.spinning = false
          this.resetLoading = false
          this.searchLoading = false
          this.$error({
            title: '页面数据加载出错',
            content: '请刷新重试或联系管理员查询',
          })
        })
    },
    getProjectList() {
      this.specificLoading = true
      var that = this
      return new Promise((resolve, reject) => {
        this.postDataAction(
          '/overView/getProjects?userId=' + this.userInfo().id + '&mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
        ).then((res) => {
          this.specificLoading = false
          if (res.success) {
            this.dataDimensionList = res.result
            resolve(res.result)
          } else {
            reject(res.message)
          }
        })
      })
    },
    getSumData() {
      var that = this
      return new Promise((resolve, reject) => {
        that
          .postDataAction('/overView/sumData', {
            mediaId: this.mediaDimension == 'a' ? 1 : 2,
            startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
            endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
            projects: this.dataDimensionValue,
          })
          .then((res) => {
            if (res.success) {
              this.cost = res.result.cost ? res.result.cost : '0'
              this.videoTotal = res.result.video ? res.result.video : '0'
              this.hotTotal = res.result.hot ? res.result.hot : '0'
              this.xiaoTotal = res.result.valid ? res.result.valid : '0'
              this.costLink = res.result.costLink ? res.result.costLink : '0'
              this.newVideo = res.result.newVideo ? res.result.newVideo : '0'
              resolve(res.result)
            } else {
              reject(res.message)
            }
          })
      })
    },
    getChartDataList() {
      return new Promise((resolve, reject) => {
        this.postDataAction('/overView/chartData', {
          mediaId: this.mediaDimension == 'a' ? 1 : 2,
          startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
          endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
          projects: this.dataDimensionValue,
        }).then((res) => {
          if (res.success) {
            this.chartList = res.result
            if (res.result.length == 0) {
              const myChart = echarts.init(document.getElementById('echart'))
              myChart.dispose()
            } else {
              this.initEchart('echart', this.handlerEchartOption(res.result))
            }

            resolve(res.result)
          } else {
            reject(res.message)
          }
        })
      })
    },
    getVideoTopList() {
      this.videoList = []
      return new Promise((resolve, reject) => {
        this.postDataAction('/overView/materialTop', {
          mediaId: this.mediaDimension == 'a' ? 1 : 2,
          startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
          endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
          projects: this.dataDimensionValue,
        }).then((res) => {
          if (res.success) {
            this.videoList = res.result
            resolve(res.result)
          } else {
            reject(res.message)
          }
        })
      })
    },
    getMoreVideoList() {
      // this.postDataAction('/overView/materialTopViewMore', {
      //   mediaId: this.mediaDimension == 'a' ? 1 : 2,
      //   startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
      //   endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
      //   projects: this.dataDimensionValue,
      //   channelType: null,
      //   md5: null,
      //   target: null,
      //   order: null,
      //   pageSize: '5',
      //   pageNo: '1',
      // }).then((res) => {
      //   console.log(res)
      // })
      var params = {
        mediaId: this.mediaDimension == 'a' ? 1 : 2,
        startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
        endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
        projects: this.dataDimensionValue,
      }
      params = JSON.stringify(params)

      if (this.mediaDimension == 'a') {
        localStorage.setItem('TtmaterialParams', params)
        this.$router.push({ path: '/materialReport/marterialTtList' })
      } else {
        localStorage.setItem('materialParams', params)
        this.$router.push({ path: '/materialReport/marterialList' })
      }
    },
    toDetail(md5) {
      // /materialReport/marterialDetail
      var params = { md5: md5, mediaId: this.mediaDimension == 'a' ? 1 : 2 }
      localStorage.setItem('videoInfo', JSON.stringify(params))
      this.$router.push({
        path: '/materialReport/marterialDetail',
      })
    },
    getDesignTopList(data) {
      this.designTopLoading = true
      return new Promise((resolve, reject) => {
        var params = {
          // startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
          // endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
          // userId: this.userInfo().id,
          // pageSize: this.ipagination.pageSize,
          // pageNo: this.ipagination.current,
          // target: 'cost',
          // order: 'desc',
        }
        params.startDate = this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
        params.endDate = this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
        params.userId = this.userInfo().id
        params.pageSize = this.ipagination.pageSize
        params.pageNo = this.ipagination.current

        if (data) {
          params.target = data.target
          if (data.order == 'descend') {
            params.order = 'desc'
          } else {
            params.order = 'asc'
          }
        } else {
          params.target = this.target
          params.order = this.order == 'descend' ? 'desc' : 'asc'
        }
        this.postDataAction('/overView/designTop', params).then((res) => {
          this.designTopLoading = false
          if (res.success) {
            this.designTopList = res.result.list
            this.ipagination.total = res.result.total
            resolve(res.result)
          } else {
            reject(res.message)
          }
        })
      })
    },
    getTagProportionAnalyseList() {
      return new Promise((resolve, reject) => {
        this.postDataAction('/overView/tagProportionAnalyse', {
          // mediaId: this.mediaDimension == 'a' ? 1 : 2,
          // startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
          // endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
          // projects: this.dataDimensionValue,
          // pageSize: '5',
          // pageNo: '1',
        }).then((res) => {
          if (res.success) {
            resolve(res.result)
          } else {
            reject(res.message)
          }
        })
      })
    },

    handleSubmit() {
      this.spinning = true
      this.searchLoading = true
      this.ipagination.current = 1
      this.getData()
    },
    resetSubmit() {
      this.resetLoading = true
      this.dateValue = [moment().subtract(7, 'days'), moment()]
      this.dataDimension = 'a'
      this.mediaDimension = 'b'
      this.dataDimensionValue = []
      this.ipagination.current = 1
      this.getData()
    },
    tableChange(data) {
      console.log(data)
    },
    //获取echart的值
    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()
        })
      }
    },
    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
    },
    handlerAgeOption(data) {
      var res = []

      const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
      var that = this
      var option = {
        color: colorList,
        backgroundColor: '#fff',

        tooltip: {
          formatter: '{b}：{c}',
        },

        legend: {
          orient: 'horizontal',
          top: 'top',
          icon: 'circle',
          width: '100%',
          data: ['形式标签', '场景标签', '基调标签', '其他'],
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            data: [
              { value: 0, name: '形式标签' },
              { value: 0, name: '基调标签' },
              { value: 0, name: '场景标签' },
              { value: 0, name: '其他' },
            ],
            labelLine: {
              length: 5,
              length2: 5,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: true,
            },
            itemStyle: {
              borderRadius: 5,
              color: (params) => {
                return colorList[params.dataIndex]
              },
            },
          },
        ],
      }

      return option
    },
    disabledDate(current) {
      return current && current > moment().endOf('day')
    },
    dataDimensionChange(e) {
      // console.log(`checked = ${e.target.value}`)
    },
    mediaDimensionChange(e) {
      this.dataDimensionList = []
      this.dataDimensionValue = []
      this.getProjectList()
    },
  },
  mounted() {
    this.clientWidth = document.documentElement.clientWidth - 224
    this.$nextTick(() => {
      this.getProjectList()
      this.getData()
      // this.getMoreVideoList()
      // this.initEchart('echartCircular', this.handlerAgeOption([]))
    })
  },
  activated() {
    this.$nextTick(() => {
      this.clientWidth = document.documentElement.clientWidth - 224
    })
  },
}
</script>

<style lang="scss" scoped>
.materialReport {
  .option {
    background: white;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .item {
      margin-right: 15px;
      margin-bottom: 15px;
      height: 32px;
      line-height: 32px;
      flex-shrink: 0;
      span {
        margin-right: 10px;
      }
    }
  }
  .echart {
    margin-top: 20px;
    padding: 0 20px 20px;
    background: white;
    .echart-header {
      padding: 20px 0;
      font-size: 15px;
      font-weight: 600;
    }
  }
  .tableBody {
    margin-top: 20px;
  }
}
</style>
<style>
.materialReport .card-containers {
  overflow: hidden !important;
  /* padding: 24px; */
}
.materialReport .card-containers > .ant-tabs-card > .ant-tabs-content {
  /* height: 120px; */
  margin-top: -16px !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff !important;
  /* padding: 16px; */
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent !important;
  background: transparent !important;
}

.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff !important;
  background: #fff !important;
}
</style>