<style>
</style>
<template>
  <div class="admin-detail">
    <a-row :gutter="10" style="margin-top:10px">
      <a-col :span="24">
        <a-card style="width:100%;">
          <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle"
            :pagination="false">
            <span slot-scope="text" slot="url">
              <video class="video" :src="text" controls="controls" style="height:200px">
                您的浏览器不支持 video 标签。
              </video>
            </span>

          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </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: 'url',
      key: 'url',
      align: 'center',
      scopedSlots: {
        customRender: 'url'
      },
      width: 200
    },
    {
      title: '素材名称',
      dataIndex: 'materialName',
      key: 'materialName',
      align: 'center'
    },
    {
      title: '水印素材名称',
      dataIndex: 'watermarkMaterialName',
      key: 'watermarkMaterialName',
      align: 'center'
    },
    {
      title: 'md5',
      dataIndex: 'code',
      key: 'code',
      align: 'center'
    },
  ]

  export default {
    name: 'admin-info',
    components: {
      ATooltip,
      ACol,
    },

    data: function () {
      return {
        title: '工作台',
        loginfo: {},
        barData,
        visitInfo: [],
        visitFields: ['ip', 'visit'],
        loading: false,
        rankList: [],
        tabListNoTitle: [{
            key: 'kuaishou',
            tab: '快手'
          },
          {
            key: 'toutiao',
            tab: '头条'
          }
        ],
        noTitleKey: 'kuaishou',
        a: '',
        columns,
        dataList: [],
      }
    },
    methods: {
      ...mapGetters(['nickname', 'avatar', 'userInfo']),
    },
    created() {
      var userId = localStorage.getItem('detailUserId')
      var appType = localStorage.getItem('appType') == 'kuaishou' ? 2 : 1
      postAction('/ctop/performance2/getEffiVideoList', {
        "year": 2019,
        "quarter": 4,
        "userId": userId,
        "appType": appType
      }).then(res => {
        if (res.success) {
          this.dataList = res.result.map((item, index) => {
            return {
              ...item,
              key: index,
            }
          })
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
</script>