<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="getData"
          >
            <a-select-option :value="1">设计</a-select-option>
            <a-select-option :value="2">优化</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 :disabled="record.effiVideoCount == 0" @click="toDetail(record)">查看详情</a>
            </span>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'

import { getAction, postAction } from '@/api/manage'
import { mapGetters } from 'vuex'

import qs from 'qs'

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: 'effiVideoCount',
    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: '工作台',
      loading: false,
      rankList: [],
      tabListNoTitle: [
        {
          key: 'kuaishou',
          tab: '快手'
        },
        {
          key: 'toutiao',
          tab: '头条'
        }
      ],
      noTitleKey: 'kuaishou',
      a: '',
      columns: columns,
      dataList: []
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    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()
        }
      }
    },
    getData(data) {
      this.dataList = []
      this.loading = false
    },
    onTabChange(key, type) {
      console.log(key, type)
      this.type = 1
      this.columns = columns
      this[type] = key
      this.dataList = []
      this.loading = false
      // if (key == 'kuaishou') {
      //   this.getKuaishouList()
      // } else if (key == 'toutiao') {
      //   this.getToutiaoList()
      // }
    },
    toDetail(item) {
      localStorage.setItem('detailUserId', item.userId)
      localStorage.setItem('appType', this.noTitleKey)
      localStorage.setItem('roleData', this.type)
      this.$router.replace({
        path: '/achievements/adminDetail'
      })
    },
    getKuaishouList() {
      postAction('/ctop/performance2/kuaishouPerformanceInfoNow', '').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() {
      postAction('/ctop/performance2/toutiaoPerformanceInfoNow', '').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() {
      postAction('/ctop/performance2/kuaishouYouhuaPerformanceInfoNow', '').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() {
      postAction('/ctop/performance2/toutiaoYouhuaPerformanceInfoNow', '').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()
  }
}
</script>
