<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="advisorName" label="投顾名称"> </el-table-column>
      <!-- <el-table-column prop="" label="分公司" width="120"> </el-table-column> -->
      <el-table-column prop="deptName" label="营业部"> </el-table-column>
      <el-table-column prop="videoCount" label="直播次数"> </el-table-column>
      <el-table-column prop="columnCount" label="直播专栏次数" width="120">
      </el-table-column>
      <el-table-column prop="videoTime" label="直播时长" width="120">
        <template slot-scope="scope">
          {{ scope.row.videoTime ? timeFormatTwo(scope.row.videoTime) : scope.row.videoTime }}
        </template>
      </el-table-column>
      <el-table-column prop="totalReadCount" label="观看人数" width="120">
      </el-table-column>
      <el-table-column prop="avgReadCount" label="场均观看人数">
      </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="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 { liveRankDataList } from '@/api/index'
import moment from 'moment'
import { timeFormat ,timeFormatTwo} from "@/utils/index"
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 liveRankDataList({
        current: this.current,
        endTime: this.endTime,
        rankType: this.rankType,
        size: 10,
        startTime: this.startTime,
        userType: 3 // 用户类型 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 liveRankDataList({
        current: this.current,
        endTime: this.endTime,
        rankType: this.rankType,
        size: 1000,
        startTime: this.startTime,
        userType: 3 // 用户类型 1 投顾 2 营销 3 运营 4 合规风控
      })
      if (data.code === 0 && data.data.list.length !== 0) {
        const sheetData = data.data.list.map((item) => ({
          投顾名称: item.advisorName,
          营业部: item.deptName,
          直播次数: item.videoCount,
          直播专栏次数: item.columnCount,
          直播时长: item.videoTime ? timeFormatTwo(item.videoTime) : item.videoTime,
          观看人数: item.totalReadCount,
          场均观看人数: item.avgReadCount,
          观看时长: item.totalReadTime ? timeFormatTwo(item.totalReadTime) : item.totalReadTime,
          新增粉丝数: 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>
