<style>
.design .ant-list-item-content {
  display: flex;
  justify-content: space-around;
}
.design .ant-table-middle tr.ant-table-expanded-row td > .ant-table-wrapper {
  margin: -12px -9px -13px;
}
</style>
<template>
  <div class="design">
    <a-row :gutter="10" style="margin-top:10px">
      <a-col :span="24">
        <a-card
          style="width:100%;"
          :tabList="tabListNoTitle"
          :activeTabKey="noTitleKey"
          @tabChange="key => onTabChange(key, 'noTitleKey')"
        >
          <a-row :gutter="24" style="margin-top:15px">
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <chart-card
                :loading="loading"
                title="上季度有效数"
                :total="dataCount.effiVideoCount + ''"
                style="border: 1px solid #e8e8e8;"
              >
                <template slot="footer"> </template>
              </chart-card>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <chart-card
                :loading="loading"
                title="上季度素材总数"
                :total="dataCount.videoCount + ''"
                style="border: 1px solid #e8e8e8;"
              >
                <template slot="footer"> </template>
              </chart-card>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <chart-card
                :loading="loading"
                title="上季度有效率"
                :total="
                  dataCount.effiVideoCount && dataCount.videoCount
                    ? (dataCount.effiVideoCount / dataCount.videoCount).toFixed(4) * 100 + '%'
                    : '0%'
                "
                style="border: 1px solid #e8e8e8;"
              >
                <template slot="footer"> </template>
              </chart-card>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <chart-card
                :loading="loading"
                title="上季度绩效"
                :total="dataCount.performance ? dataCount.performance.toFixed(2) + '' : '0'"
                style="border: 1px solid #e8e8e8;"
              >
                <!-- <div>
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">周同比</span>
              12%
            </trend>
            <trend flag="down">
              <span slot="term">日同比</span>
              11%
            </trend>
          </div> -->
                <template slot="footer"> </template>
              </chart-card>
            </a-col>
          </a-row>
          <a-table
            :columns="columns"
            :dataSource="dataList"
            bordered
            :loading="loading"
            size="middle"
            :pagination="false"
            @expand="expand"
          >
            <span slot-scope="text" slot="videoUrl">
              <video class="video" :src="text" controls="controls" style="height:200px">
                您的浏览器不支持 video 标签。
              </video>
            </span>
            <a-table
              slot="expandedRowRender"
              slot-scope="record"
              :columns="innerColumns"
              :dataSource="record.innerData"
              :pagination="false"
              :loading="record.showDetail"
            >
            </a-table>
          </a-table>
          <template class="ant-card-actions" slot="actions" v-if="dataList.length > 3">
            <div @click="getAll('visibleVideo')">查看更多</div>
          </template>
        </a-card>
      </a-col>
    </a-row>
    <a-modal
      title="有效视频"
      :visible="visibleVideo"
      @ok="handleOk('visibleVideo')"
      @cancel="handleCancel('visibleVideo')"
    >
      <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle" :pagination="false">
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'

import { getAction, postAction } from '@/api/manage'
import { mapGetters } from 'vuex'

import qs from 'qs'

const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

const columns = [
  {
    title: '素材',
    dataIndex: 'videoUrl',
    key: 'videoUrl',
    align: 'center',
    scopedSlots: { customRender: 'videoUrl' },
    width: 200
  },
  {
    title: '素材跑量',
    dataIndex: 'totalCost',
    key: 'totalCost',
    align: 'center'
  },
  {
    title: '封面点击数',
    dataIndex: 'pageClickCount',
    key: 'pageClickCount',
    align: 'center'
  },
  {
    title: '封面曝光数',
    dataIndex: 'pageExposureCount',
    key: 'pageExposureCount',
    align: 'center'
  },
  {
    title: '素材曝光数',
    dataIndex: 'materialExposureCount',
    key: 'materialExposureCount',
    align: 'center'
  },
  {
    title: '行为数',
    dataIndex: 'behaviorCount',
    key: 'behaviorCount',
    align: 'center'
  }
]

export default {
  name: 'design',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo
  },

  data: function() {
    return {
      title: '工作台',
      loginfo: {},
      barData,
      visitInfo: [],
      visitFields: ['ip', 'visit'],
      loading: false,
      rankList: [],
      tabListNoTitle: [
        {
          key: 'kuaishou',
          tab: '快手'
        },
        {
          key: 'toutiao',
          tab: '头条'
        }
      ],
      noTitleKey: 'kuaishou',
      dataCount: {
        effiVideoCount: 0, //有效数
        videoCount: 0, //素材总数
        effiRate: 0, //有效率
        performance: 0, //当前绩效
        cost: 0 // 总消耗
      },
      a: '',
      columns,
      dataList: [],
      innerColumns: [
        {
          title: '素材账户',
          dataIndex: 'accountName',
          key: 'accountName',
          align: 'center'
        },
        {
          title: '跑量',
          dataIndex: 'totalCost',
          key: 'totalCost',
          align: 'center',
          width: 400
        }
      ],
      innerData: [],
      data: [],
      dataTop: [],
      visible: false,
      visibleVideo: false,
      childrenLoading: false,
      performance: 0,
      loadingList: false
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    getAll(item) {
      this[item] = true
      if (item == 'visible') {
        this.loadingList = true
        this.getTopMany(10, 'dataTop')
      }
      //   dataTop
    },
    handleOk(item) {
      this[item] = false
    },
    handleCancel(item) {
      console.log('Clicked cancel button')
      this[item] = false
    },
    onTabChange(key, type) {
      console.log(key, type)
      this[type] = key
      if (key == 'kuaishou') {
        this.getToutiaoList()
      } else if (key == 'toutiao') {
        this.dataCount = {
          effiVideoCount: 0, //有效数
          videoCount: 0, //素材总数
          effiRate: 0, //有效率
          performance: 0 // 总消耗
        }
        this.dataList = []
      }
    },
    expand(expanded, record) {
      var params = qs.stringify({
        materialId: record.id
      })
      record.showDetail = true
      if (expanded) {
        postAction('/ctop/performance2/materialAccountInfo', params).then(res => {
          if (res.success) {
            record.innerData = res.result.designMaterialInfoList.map((item, index) => {
              return {
                ...item,
                key: index
              }
            })
            record.showDetail = false
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          record.showDetail = false
        })
      } else {
        record.innerData = []
      }
    },
    getTopMany(size, list) {
      var params = qs.stringify({
        pageSize: size
      })
      postAction('/ctop/performance2/effiRateRank', params).then(res => {
        if (res.success) {
          this[list] = res.result.userRoleList
          this.performance = res.result.performance
          this.loadingList = false
        }
      })
    },
    getToutiaoList() {
      postAction('/ctop/performance2/kuaishouDesignerLastQuarterPerformanceInfo').then(res => {
        console.log(res)
        if (res.success) {
          this.dataCount = res.result
          this.dataList = res.result.materialInfoList.map((item, index) => {
            return {
              ...item,
              key: index,
              innerData: [],
              showDetail: false
            }
          })
        } else {
          this.$message.error(res.message)
        }
      })
    }
  },
  created() {
    this.getToutiaoList()
  }
}
</script>
