<style></style>
<template>
  <div class="admin-detail">
    <a-row :gutter="10" style="margin-top:10px">
      <a-col :span="24">
        <a-card style="width:100%;">
          <h3 style="margin:20px 0">当前账户总消耗为：{{ sumAll }}</h3>

          <a-table
            :columns="columns"
            :dataSource="dataList"
            bordered
            :loading="loading"
            size="middle"
            :pagination="true"
          >
            <span slot-scope="text" slot="creativeUrl">
              <video class="video" :src="text" controls="controls" style="height:200px" v-if="text">
                您的浏览器不支持 video 标签。
              </video>
              <div v-else>
                暂无视频
              </div>
            </span>
            <span slot="shot" slot-scope="text">{{ text ? text : '-' }}</span>
            <span slot="plan" slot-scope="text">{{ text ? text : '-' }}</span>
            <span slot="plane" slot-scope="text">{{ text ? text : '-' }}</span>
            <span slot="clip" slot-scope="text">{{ text ? text : '-' }}</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: 'creativeUrl',
    key: 'creativeUrl',
    align: 'center',
    scopedSlots: {
      customRender: 'creativeUrl'
    },
    width: 200
  },
  {
    title: '账户消耗',
    dataIndex: 'charge',
    key: 'charge',
    align: 'center',
    scopedSlots: {
      customRender: 'charge'
    }
  },
  {
    title: '拍摄',
    dataIndex: 'shot',
    key: 'shot',
    align: 'center',
    scopedSlots: {
      customRender: 'shot'
    }
  },
  {
    title: '编导',
    dataIndex: 'plan',
    key: 'plan',
    align: 'center',
    scopedSlots: {
      customRender: 'plan'
    }
  },
  {
    title: '平面',
    dataIndex: 'plane',
    key: 'plane',
    align: 'center',
    scopedSlots: {
      customRender: 'plane'
    }
  },
  {
    title: '剪辑',
    dataIndex: 'clip',
    key: 'clip',
    align: 'center',
    scopedSlots: {
      customRender: 'clip'
    }
  }
]
function sum(arr) {
  var len = arr.length
  if (len == 0) {
    return 0
  } else if (len == 1) {
    return arr[0]
  } else {
    return arr[0] + sum(arr.slice(1))
  }
}
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: columns,
      dataList: [],
      sumAll: null
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo'])
  },
  filters: {
    roleName: function(value) {
      var status = {
        clip: '剪辑',
        shot: '拍摄',
        plan: '策划',
        plane: '平面'
      }
      return status[value]
    }
  },
  created() {
    var userId = localStorage.getItem('videoAccountId')
    var appType = localStorage.getItem('videoAppType')
    //  == 'kuaishou' ? 2 : 1
    var type = localStorage.getItem('videoYear')
    var weekDate = localStorage.getItem('videoQuarter')
    if (appType == '2') {
      // /ctop/performance2/getKuaishouQuarterVideoInfoByAccountId
      postAction('/ctop/performance2/getKuaishouQuarterVideoInfoByAccountId', {
        year: type,
        quarter: weekDate,
        accountId: userId
      }).then(res => {
        if (res.success) {
          this.dataList = res.result.map((item, index) => {
            return {
              ...item,
              key: index
            }
          })

          var sumAll = this.dataList.map(item => {
            return item.charge
          })
          this.sumAll = sum(sumAll)
        } else {
          this.$message.error(res.message)
        }
      })
    } else {
      postAction('/ctop/performance2/getToutiaoQuarterVideoInfoByAccountId', {
        year: type,
        quarter: weekDate,
        accountId: userId
      }).then(res => {
        if (res.success) {
          this.dataList = res.result.map((item, index) => {
            return {
              ...item,
              key: index
            }
          })
          var sumAll = this.dataList.map(item => {
            return item.charge
          })
          this.sumAll = sum(sumAll)
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
