<template>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" flexd> </el-table-column>
        <el-table-column prop="title" label="直播名称"  width="250"> </el-table-column>
        <el-table-column prop="videoTime" label="直播时长" width="120">
        <template slot-scope="scope">
          {{ scope.row.videoTime ? timeFormat(scope.row.videoTime * 1000) : scope.row.videoTime }}
        </template>
        </el-table-column>
        <el-table-column prop="readCount" label="观看人次" width="120">
          </el-table-column>
          <el-table-column prop="totalReadCount" label="观看人数" width="120">
          </el-table-column>
          <el-table-column prop="maxOnline" label="最高在线人数">
            <template slot-scope="scope">
            {{ scope.row.maxOnline ? scope.row.maxOnline : 0 }}
          </template>
        </el-table-column>
          <el-table-column prop="totalReadTime" label="总观看时长">
          <template slot-scope="scope">
            {{ scope.row.totalReadTime? timeFormatTwo(scope.row.totalReadTime ) : scope.row.totalReadTime }}
          </template>
        </el-table-column>
        <el-table-column prop="avgReadTime" label="人均观看时长">
          <template slot-scope="scope">
            {{ scope.row.avgReadTime? timeFormatTwo(scope.row.avgReadTime) : scope.row.avgReadTime }}
          </template>
        </el-table-column>
        <el-table-column prop="incFollowCount" label="新增粉丝数" width="120">
        </el-table-column>
        <el-table-column prop="msgCount" label="评论互动数" width="120">
        </el-table-column>
        <el-table-column prop="favorCount" label="点赞数" width="120">
        </el-table-column>
        <el-table-column prop="shareCount" label="分享数"> </el-table-column>
        <el-table-column prop="orderCount" label="直播订单成交数" width="200">
            <template slot-scope="scope">
              {{ scope.row.orderCount ? scope.row.orderCount : 0 }}
            </template>
        </el-table-column>
        <el-table-column prop="orderAmount" label="直播成交金额" width="120">
          <template slot-scope="scope">
              {{ (scope.row.orderAmount / 100).toFixed(2) }}
            </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :total="total"
        @current-change="pageChangeTwo"
      >
      </el-pagination>
    </div>
  </template>
  <script>
  import downloadTable from '@/utils/exportExcel'
  import { liveRankDataListTg } from '@/api/index'
  import { timeFormat,timeFormatTwo } from "@/utils/index"
  import moment from 'moment'
  export default {
    props: {
      rankType: {
        type: Number,
        default: 1
      },
      startTime: {
        type: String,
        default: ''
      },
      endTime: {
        type: String,
        default: ''
      },
      timeType1: {
        type: Number,
        default:1
      }
    },
    data() {
      return {
        rankTypeObj: {
          '1': '观看用户数榜单',
          '2': '观看时长榜单',
          '3': '带货订单数榜单',
          '4': '带货订单金额榜单',
        },
        current: 1,
        tableData: [],
        total: 0
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      timeFormat,
      timeFormatTwo,
      pageChange(e,startTime,endTime) {
        if(this.timeType1 != '1'){
          this.startTime = startTime
          this.endTime = endTime
        }else{
          this.startTime = ''
          this.endTime = ''
        }

        this.current = e
        this.getList()
      },
      pageChangeTwo(e){
        this.current = e
        this.getList()
      },
      async getList() {
        if(this.timeType1 !== 1 && (!this.endTime || !this.startTime)){
          this.$message.warning('请选择时间')
          return
        }
        const ret = await liveRankDataListTg({
          current: this.current,
          endTime: this.endTime,
          rankType: this.rankType,
          size: 10,
          startTime: this.startTime,
          userType: 1 // "用户类型 1 投顾 2 营销 3 运营 4 合规风控"
        })
        if (ret.code === 0) {
          this.tableData = ret.data.list
          console.log('this.tableData', this.tableData)
          this.total = ret.data.total
        }
      },
      async handleExport() {
        const data = await await liveRankDataListTg({
          current: this.current,
          endTime: this.endTime,
          rankType: this.rankType,
          size: 1000,
          startTime: this.startTime,
          userType: 1 // "用户类型 1 投顾 2 营销 3 运营 4 合规风控"
        })
        if (data.code === 0 && data.data.list.length !== 0) {
          const sheetData = data.data.list.map((item) => ({
            直播名称: item.title,
            直播时长: item.videoTime ? timeFormatTwo(item.videoTime) : item.videoTime,
            观看人次: item.readCount,
            观看人数: item.totalReadCount,
            最高在线人数: item.maxOnline ? item.maxOnline : 0,
            总观看时长: item.totalReadTime ? timeFormatTwo(item.totalReadTime) : item.totalReadTime,
            人均观看时长: item.avgReadTime ? timeFormatTwo(item.avgReadTime) : item.avgReadTime,
            新增粉丝数: item.incFollowCount,
            评论互动数: item.msgCount,
            点赞数: item.favorCount,
            分享数: item.shareCount,
            直播订单成交数: item.orderCount ? item.orderCount : 0,
            直播成交金额: (item.orderAmount / 100).toFixed(2)
          }))
          downloadTable(
            sheetData,
            `${this.rankTypeObj[this.rankType]}+${moment(new Date()).format('YYYY-MM-DD')} `
          )
        } else if (data.data.list.length === 0) {
          this.$message.warning('暂无数据可导出')
        }
      },
    }
  }
  </script>
  <style scoped lang="scss"></style>
