<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="mediaId">
              {{ text == 1 ? '头条' : '快手' }}
            </span>
            <span slot="quarter" slot-scope="text, record">
              {{ record.year + '年第' + record.quarter + '季度' }}
            </span>
            <span slot="startDate" slot-scope="text, record">
              {{ record.startDate + '~' + record.endDate }}
            </span>
            <span slot="action" slot-scope="text, record">
              <a :disabled="record.cost == 0 || record.cost == null" @click="toDetail(record)">查看详情</a>
            </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: 'projectName',
    key: 'projectName',
    align: 'center'
  },
  {
    title: '账户id',
    dataIndex: 'accountId',
    key: 'accountId',
    align: 'center'
  },
  {
    title: '账户运营',
    dataIndex: 'userName',
    key: 'userName',
    align: 'center'
  },
  {
    title: '广告主名称',
    dataIndex: 'advertiserName',
    key: 'advertiserName',
    align: 'center'
  },
  {
    title: '授权名称',
    dataIndex: 'authName',
    key: 'authName',
    align: 'center'
  },
  {
    title: '季度消耗',
    dataIndex: 'cost',
    key: 'cost',
    align: 'center'
  },
  {
    title: '媒体类型',
    dataIndex: 'mediaId',
    key: 'mediaId',
    align: 'center',
    scopedSlots: { customRender: 'mediaId' }
  },
  {
    title: '绩效年度',
    dataIndex: 'quarter',
    key: 'quarter',
    align: 'center',
    scopedSlots: { customRender: 'quarter' }
  },
  {
    title: '运营所属时间段',
    dataIndex: 'startDate',
    key: 'startDate',
    align: 'center',
    scopedSlots: { customRender: 'startDate' }
  },
  {
    title: '视频详情',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
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: []
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    toDetail(item) {
      localStorage.setItem('videoAccountId', item.accountId)
      localStorage.setItem('videoAppType', item.mediaId)
      localStorage.setItem('videoYear', item.year)
      localStorage.setItem('videoQuarter', item.quarter)

      this.$router.replace({
        path: '/Statistics/projectVideo'
      })
    }
  },
  filters: {
    roleName: function(value) {
      var status = {
        clip: '剪辑',
        shot: '拍摄',
        plan: '策划',
        plane: '平面'
      }
      return status[value]
    }
  },
  created() {
    var userId = localStorage.getItem('projectStatisticsId')
    var appType = localStorage.getItem('projectAppType') == 'kuaishou' ? 2 : 1
    var type = localStorage.getItem('projectYear')
    var weekDate = localStorage.getItem('projectQuarter')

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