<style>
.admin-info .ant-list-item-content {
  display: flex;
  justify-content: space-around;
}

.admin-info .ant-table-middle tr.ant-table-expanded-row td > .ant-table-wrapper {
  margin: -12px -9px -13px;
}
</style>
<template>
  <div class="admin-info">
    <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-select
            style="width:300px;margin-bottom:30px"
            placeholder="请选择角色类型"
            v-model="type"
            @change="clearData"
          >
            <a-select-option :value="1">设计</a-select-option>
            <a-select-option :value="2">优化</a-select-option>
          </a-select>
          季度选择:
          <a-select style="width:100px;margin-bottom:30px" placeholder="选择年" v-model="year">
            <a-select-option :value="item" v-for="item of options" :key="item">{{ item }}</a-select-option>
          </a-select>
          <a-select style="width:100px;margin-bottom:30px" placeholder="选择季度" v-model="dateRange">
            <a-select-option :value="item" v-for="item of 4" :key="item">{{ item }}</a-select-option>
          </a-select>
          <a-button type="primary" style="margin-left:10px" @click="addUser">搜索</a-button>
          <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle">
            <span slot-scope="text" slot="videoUrl">
              <video class="video" :src="text" controls="controls" style="height:200px">
                您的浏览器不支持 video 标签。
              </video>
            </span>
            <span slot="action" slot-scope="text, record">
              <a @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 moment from 'moment'

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: 'realname',
    key: 'realname',
    align: 'center',
    width: 200
  },
  {
    title: '角色',
    dataIndex: 'roleName',
    key: 'roleName',
    align: 'center'
  },
  {
    title: '有效视频数量',
    dataIndex: 'effiVideoCount',
    key: 'effiVideoCount',
    align: 'center'
  },
  {
    title: '总视频数量',
    dataIndex: 'videoCount',
    key: 'videoCount',
    align: 'center'
  },
  {
    title: '消耗',
    dataIndex: 'cost',
    key: 'cost',
    align: 'center'
  }
  // {
  //   title: '操作',
  //   dataIndex: 'action',
  //   key: 'action',
  //   align: 'center',
  //   scopedSlots: {
  //     customRender: 'action'
  //   },
  // },
]
const columnsYou = [
  {
    title: '姓名',
    dataIndex: 'realname',
    key: 'realname',
    align: 'center',
    width: 200
  },
  {
    title: '角色',
    dataIndex: 'roleName',
    key: 'roleName',
    align: 'center'
  },
  {
    title: '总消耗',
    dataIndex: 'cost',
    key: 'cost',
    align: 'center'
  },
  {
    title: '绩效',
    dataIndex: 'effiRate',
    key: 'effiRate',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
    scopedSlots: {
      customRender: 'action'
    }
  }
]

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

  data: function() {
    return {
      type: 1,
      title: '工作台',
      loginfo: {},
      barData,
      visitInfo: [],
      visitFields: ['ip', 'visit'],
      loading: false,
      rankList: [],
      options: [],
      dateRange: null,
      year: new Date().getFullYear(),
      tabListNoTitle: [
        {
          key: 'kuaishou',
          tab: '快手'
        },
        {
          key: 'toutiao',
          tab: '头条'
        }
      ],
      noTitleKey: 'kuaishou',
      a: '',
      columns: columns,
      dataList: []
    }
  },
  methods: {
    disabledDate(current) {
      // Can not select days before today and today
      return current && current > moment().endOf('day')
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    clearData() {
      this.dataList = []
    },
    addUser() {
      this.loading = true
      if (this.noTitleKey == 'kuaishou') {
        if (this.type == 1) {
          this.columns = columns
          this.getKuaishouList()
        } else if (this.type == 2) {
          this.columns = columnsYou
          this.getKuaishouYouHuaList()
        }
      } else if (this.noTitleKey == 'toutiao') {
        if (this.type == 1) {
          this.columns = columns
          this.getToutiaoList()
        } else if (this.type == 2) {
          this.columns = columnsYou
          this.getToutiaoYouHuaList()
        }
      }
    },
    onTabChange(key, type) {
      console.log(key, type)
      this.type = 1
      this.dateRange = null
      this.year = '2020'
      this.options = []
      this.dataList = []
      this.columns = columns
      this[type] = key
    },
    toDetail(item) {
      localStorage.setItem('quarterUserId', item.userId)
      localStorage.setItem('quarterAppType', this.noTitleKey)
      localStorage.setItem('quarterYear', this.year)
      localStorage.setItem('quarterNow', this.dateRange)
      this.$router.replace({
        path: '/Statistics/quarterDetail'
      })
    },
    getKuaishouList() {
      var params = {}
      params.year = this.year
      params.quarter = this.dateRange
      postAction('/ctop/performance2/kuaishouQuarterReport', params).then(res => {
        console.log(res)
        if (res.success) {
          this.loading = false
          this.dataList = res.result.map((item, index) => {
            return {
              ...item,
              key: index
            }
          })
        } else {
          this.loading = false
          this.$message.error(res.message)
        }
      })
    },

    getToutiaoList() {
      var params = {}
      params.year = this.year
      params.quarter = this.dateRange
      postAction('/ctop/performance2/toutiaoQuarterReport', params).then(res => {
        console.log(res)
        if (res.success) {
          this.loading = false
          this.dataList = res.result.map((item, index) => {
            return {
              ...item,
              key: index
            }
          })
        } else {
          this.loading = false
          this.$message.error(res.message)
        }
      })
    },
    getKuaishouYouHuaList() {
      var params = {}
      params.year = this.year
      params.quarter = this.dateRange
      postAction('/ctop/performance2/kuaishouYouhuaQuarterReport', params).then(res => {
        console.log(res)
        if (res.success) {
          this.loading = false
          this.dataList = res.result.map((item, index) => {
            return {
              ...item,
              key: index
            }
          })
        } else {
          this.loading = false
          this.$message.error(res.message)
        }
      })
    },
    getToutiaoYouHuaList() {
      var params = {}
      params.year = this.year
      params.quarter = this.dateRange
      postAction('/ctop/performance2/toutiaoYouhuaQuarterReport', params).then(res => {
        console.log(res)
        if (res.success) {
          this.loading = false
          this.dataList = res.result.map((item, index) => {
            return {
              ...item,
              key: index
            }
          })
        } else {
          this.loading = false
          this.$message.error(res.message)
        }
      })
    }
  },
  created() {
    //   this.getKuaishouList()
    var myDate = new Date()
    var startYear = myDate.getFullYear() - 5 //起始年份
    var endYear = myDate.getFullYear() + 5 //结束年份
    for (var i = startYear; i <= endYear; i++) {
      this.options.push(i)
    }
  }
}
</script>
