<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')"
        >
          媒体任务：{{ dataCount.mediaTask }}元
          <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.totalCost + ''"
                style="border: 1px solid #e8e8e8;"
              >
                <a-tooltip title="指标说明" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <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.personalTask + ''"
                style="border: 1px solid #e8e8e8;"
              >
                <a-tooltip title="指标说明" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <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.royaltyRatio ? dataCount.royaltyRatio : '0‰'"
                style="border: 1px solid #e8e8e8;"
              >
                <a-tooltip title="指标说明" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <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.totalRoyalty + ''"
                style="border: 1px solid #e8e8e8;"
              >
                <a-tooltip title="指标说明" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <template slot="footer"> </template>
              </chart-card>
            </a-col>
          </a-row>
          <a-table
            :columns="columns"
            :dataSource="dataList"
            bordered
            :loading="loading"
            size="middle"
            :pagination="false"
          >
            <span slot-scope="text" slot="videoUrl">
              <video class="video" :src="text" controls="controls" style="height:200px">
                您的浏览器不支持 video 标签。
              </video>
            </span>
            <a-table slot="expandedRowRender" :columns="innerColumns" :dataSource="innerData" :pagination="false">
            </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-row :gutter="24">
      <!-- <a-col :span="8">
        <a-card :loading="loading" :bordered="false" title="当前可获得绩效" :style="{ marginTop: '24px' }">
          <div style="height:250px;text-align:center;line-height:230px;font-size:80px">
            {{ dataCount.performance }}
          </div>
        </a-card>
      </a-col> -->
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="消耗排行" :style="{ marginTop: '24px' }">
          <div style="height:200px">
            <a-list itemLayout="horizontal" :dataSource="dataRanking">
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-list-item-meta style="width:50%">
                  <div slot="description"></div>
                  <a slot="title" style="font-size:16px"
                    ><span style="display:inline-block;width:100px">{{ item.realName }}</span
                    ><span style="margin-left:20px">总消耗：{{ item.totalCost }}</span></a
                  >
                  <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                </a-list-item-meta>
                <div></div>
                <div style="text-align:center">
                  <img
                    v-if="index == 0"
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576727589&di=a65392c20b9187cab794c2d5c0bb836b&imgtype=jpg&er=1&src=http%3A%2F%2F58pic.ooopic.com%2F58pic%2F12%2F83%2F98%2F42R58PICEnd.jpg"
                    alt=""
                    style="height:40px;"
                  />
                  <img
                    v-if="index == 1"
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576137652175&di=d648da94b779e32a96233faa7b6ae64b&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2017%2F05%2F31%2F14c7fdd5e99d7159b9fc21dbba2d5583.png"
                    alt=""
                    style="height:40px;"
                  />
                  <img
                    v-if="index == 2"
                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=748734891,2113250735&fm=26&gp=0.jpg"
                    alt=""
                    style="height:40px"
                  />
                </div>
              </a-list-item>
            </a-list>
          </div>
          <template class="ant-card-actions" slot="actions">
            <div @click="getAll('visible')">查看更多</div>
          </template>
        </a-card>
      </a-col>
    </a-row>
    <a-modal title="人员排名" :visible="visible" @ok="handleOk('visible')" @cancel="handleCancel('visible')">
      <a-list itemLayout="horizontal" :dataSource="dataRanking">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-list-item-meta style="width:50%">
            {{ item }}
            <div slot="description">总消耗：{{ item.totalCost }}</div>
            <a slot="title" href="https://vue.ant.design/">{{ item.realName }}</a>
            <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
          </a-list-item-meta>
          <div></div>
        </a-list-item>
      </a-list>
    </a-modal>
    <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 } from '@/api/manage'
import { mapGetters } from 'vuex'
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: 'videoCost',
    key: 'videoCost',
    align: 'center'
  },
  {
    title: '封面点击数',
    dataIndex: 'pageClickCount',
    key: 'pageClickCount',
    align: 'center'
  },
  {
    title: '封面曝光数',
    dataIndex: 'pageExposureCount',
    key: 'pageExposureCount',
    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: 70, //有效数
        videoCount: 200, //素材总数
        effiRate: 40, //有效率
        performance: 20000, //当前绩效
        cost: 20000 // 总消耗
      },
      a: '',
      columns,
      dataList: [
        {
          key: 1,
          videoUrl:
            'https://ctop-media.oss-cn-beijing.aliyuncs.com/video/2019-12-14/%E9%AB%98%E6%B8%85-1576318874426.mp4',
          videoCost: 34.56,
          pageClickCount: 1200,
          pageExposureCount: 3939,
          behaviorCount: 5000
        }
      ],
      innerColumns: [
        {
          title: '素材账户',
          dataIndex: 'videoAccount',
          key: 'videoAccount',
          align: 'center'
        },
        {
          title: '投放账户',
          dataIndex: 'servingAccount',
          key: 'servingAccount',
          align: 'center'
        },
        {
          title: '跑量',
          dataIndex: 'cost',
          key: 'cost',
          align: 'center'
        }
      ],
      innerData: [
        { key: 1, videoAccount: 'aabbcc', servingAccount: 'ttyyhh', cost: 34234.43 },
        { key: 2, videoAccount: 'aabbcc', servingAccount: 'ttyyhh', cost: 34234.43 }
      ],
      dataRanking: [],
      visible: false,
      visibleVideo: false
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    getAll(item) {
      this[item] = true
    },
    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
    }
  },
  created() {
    getAction('/ctop/performanceOptimizer/detail', { mediaType: 2 }).then(res => {
      console.log(res)
      this.dataCount = res.userDetail
    })
    getAction('/ctop/performanceOptimizer/ranking/list').then(res => {
      console.log(res)
      if (res.success) {
        this.dataRanking.push(...res.data)
      }
    })

    //   /ctop/materialInfo/report
  }
}
</script>
