<template>
    <div class="customerManage border" style="display:flex;height:calc(100% - 20px);flex-direction:column;">
        <div class="tools" style="border:none;">
            <div class="tools-item">
                <h1>引流排名统计</h1>
            </div>
            <div class="rightmenu">
                <el-button type="primary" size="mini" @click="download">导出</el-button>
            </div>
        </div>
        <div class="query-box">
            <el-row :gutter="20">
                <el-col :xs="14" :sm="12" :md="10" :lg="8" :xl="6">
                    <span class="font-size-12" style="padding-right: 10px;flex-shrink: 0;">期数：</span>
                    <el-date-picker
                    v-model="times"
                    clearable
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" @change="getTime">
                    </el-date-picker>
                </el-col>
            </el-row>
        </div>
        <div style="padding: 0 0 30px 0;background: #ffffff;">
            <el-table
            v-loading="loading"
            :data="dataList"
            style="width: 100%"
            border
            :span-method="objectSpanMethod"
            :default-sort = "{prop: 'date', order: 'descending'}">
            <el-table-column width="150" fixed prop="EmpName" label="姓名"></el-table-column>
            <el-table-column width="100" prop="RankName" label="排名"></el-table-column>
            <el-table-column :label="i.Name" align="center" v-for="i in PlatformTypeList">
                <el-table-column
                  v-for="(item,index) in ModuleTypeList" :key="index"
                  prop="province"
                  :label="item.Name"
                  width="80">
                  <template slot-scope="scope">
                    <template v-if="i.Name=='小红书'">
                        <span v-for="(itemOne,indexs) in scope.row.oneArr" :key="indexs">
                            <template v-if="index==indexs">
                                <span class="activeNum">
                                   {{itemOne>0?itemOne:''}} 
                                </span>
                            </template>
                        </span>
                    </template>
                    <template v-if="i.Name=='微博'">
                        <span v-for="(itemOne,indexs) in scope.row.twoArr" :key="indexs">
                            <template v-if="index==indexs">
                                <span class="activeNum">
                                    {{itemOne>0?itemOne:''}} 
                                 </span>
                            </template>
                        </span>
                    </template>
                    <template v-if="i.Name=='抖音'">
                        <span v-for="(itemOne,indexs) in scope.row.threeArr" :key="indexs">
                            <template v-if="index==indexs">
                                <span class="activeNum">
                                    {{itemOne>0?itemOne:''}} 
                                 </span>
                            </template>
                        </span>
                    </template>
                  </template>
                </el-table-column>
            </el-table-column>
            <el-table-column fixed="right" prop="TotalNum" label="合计">
                <template slot-scope="scope">
                    <span class="activeNumB">
                      {{scope.row.TotalNum>0?scope.row.TotalNum:''}}  
                    </span>
                    
                </template>
            </el-table-column>
          </el-table>

        </div>
      </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        formEdit:{
          Id:'',//	:'',//明细ID（以小红书为蓝本）	是	[string]		查看
          FansNum:'',//	粉丝数量	是	[string]		查看
          AddFansNum:'',//	添加分数数量	是	[string]		查看
          CollectNum:'',//	收藏数量	是	[string]		查看
          VisitorNum:'',//	访客数量	是	[string]		查看
          LookNum:'',//	观看数量	是	[string]		查看
          InteractionNum:'',//	互动数量	是	[string]		查看
          DiscussNum:'',//	评论数量	是	[string]		查看
          SecondsNum:'',//	观看总时长	是	[string]		查看
          NoteNum:'',//	笔记数量
        },
        errText:'',
        rankingTitle3:[
          '排名项目',
          '第一名',
          '第二名',
        ],
        rankingTitle:[
          '第一名',
          '第二名',
          '第三名',
        ],
        activeList:[
            {Name:'小红书',Id:1},
            {Name:'微博',Id:2},
            {Name:'抖音',Id:3},
        ],
        ModuleTypeList:[],
        PlatformTypeList:[],
        dataList: [
            // {
            //     name:'李四',
            //     ranking:'第一名',  
            //     xhs:[
            //         {
            //             name:'机票',
            //             num:1
            //         }
            //     ],
            //     wb:[
            //         {
            //             name:'机票',
            //             num:1
            //         }
            //     ],
            //     dy:[
            //         {
            //             name:'机票',
            //             num:1
            //         }
            //     ],
            //     hj: 3
            // },
            // {
            //     name:'李四',
            //     ranking:'第二名',  
            //     xhs:[
            //         {
            //             name:'机票',
            //             num:2
            //         }
            //     ],
            //     wb:[
            //         {
            //             name:'机票',
            //             num:3
            //         }
            //     ],
            //     dy:[
            //         {
            //             name:'机票',
            //             num:3
            //         }
            //     ],
            //     hj: 8
            // },
            // {
            //     name:'李四',
            //     ranking:'第三名',  
            //     xhs:[
            //         {
            //             name:'机票',
            //             num:2
            //         }
            //     ],
            //     wb:[
            //         {
            //             name:'机票',
            //             num:3
            //         }
            //     ],
            //     dy:[
            //         {
            //             name:'机票',
            //             num:3
            //         }
            //     ],
            //     hj: 8
            // },
            // {
            //     name:'张三',
            //     ranking:'第一名',  
            //     xhs:[
            //         {
            //             name:'机票',
            //             num:1
            //         }
            //     ],
            //     wb:[
            //         {
            //             name:'机票',
            //             num:1
            //         }
            //     ],
            //     dy:[
            //         {
            //             name:'机票',
            //             num:1
            //         }
            //     ],
            //     hj: 3
            // },
            // {
            //     name:'张三',
            //     ranking:'第二名',  
            //     xhs:[
            //         {
            //             name:'机票',
            //             num:2
            //         }
            //     ],
            //     wb:[
            //         {
            //             name:'机票',
            //             num:3
            //         }
            //     ],
            //     dy:[
            //         {
            //             name:'机票',
            //             num:3
            //         }
            //     ],
            //     hj: 8
            // },
            // {
            //     name:'张三',
            //     ranking:'第三名',  
            //     xhs:[
            //         {
            //             name:'机票',
            //             num:2
            //         }
            //     ],
            //     wb:[
            //         {
            //             name:'机票',
            //             num:3
            //         }
            //     ],
            //     dy:[
            //         {
            //             name:'机票',
            //             num:3
            //         }
            //     ],
            //     hj: 8
            // },
        ],
        loading: false,
        msg: {
            StartTime:'',
            EndTime:''
        },
        times:[]
      };
    },
    mounted() {
      this.getEnumerate()
      this.init();
    },
    methods: {
        getTime(){
            if(this.times){
                this.msg.StartTime = this.times[0]
                this.msg.EndTime = this.times[1]
            }else{
                this.msg.StartTime = ''
                this.msg.EndTime = ''
            }
            this.init()
        },
        getEnumerate(){
            // 平台枚举
            this.apipost(
                "/api/IntroduceFlowStat/GetPlatformTypeEnumList",{},
                (res) => {
                    this.PlatformTypeList = res.data.data
                },
                (e) => {
                    
                }
            );
            // 板块枚举
            this.apipost(
                "/api/IntroduceFlowStat/GetModuleTypeEnumList",{},
                (res) => {
                    this.ModuleTypeList = res.data.data
                },
                (e) => {
                
                }
            );
      },
      init() {
        if (this.loading) return;
        this.loading = true;
        this.apipost(
          "/api/IntroduceFlowStat/GetFlowRankStatList",
          this.msg,
          (res) => {
            this.loading = false;
            if(res.data.data){
                console.log(res.data.data)
                let List = JSON.parse(JSON.stringify(res.data.data))
                for(let j=0;j<List.length;j++){
                    List[j].oneArr = []
                    List[j].twoArr = []
                    List[j].threeArr = []
                    for(let i = 0;i<List[j].NumList.length;i++){
                        if(i<5){
                            List[j].oneArr.push(List[j].NumList[i])
                        }
                        if(i>4&&i<10){
                            List[j].twoArr.push(List[j].NumList[i])
                        }
                        if(i>9&&i<15){
                            List[j].threeArr.push(List[j].NumList[i])
                        }
                    }
                }
                this.dataList = List
            }
          },
          (e) => {
            this.loading = false;
          }
        );
      },
      download() {
        let text = '排名统计'
        this.downloadHandler(
            "/api/IntroduceFlowStat/DownLoadFlowRankStat",
            text
        );
      },
      // 导出
      downloadHandler(url, name) {
        this.GetLocalFile(url, this.msg, `${name}.xls`, (res) => {
          this.$message({
            message: "导出成功",
            type: "success",
          });
          
        });
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 3 === 0) {
            return {
              rowspan: 3,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
     }
    },
  };
  </script>
  <style>
  @import "../../assets/css/customerManage.css";
  .activeNumB{
    /* color: #66b1ff; */
    font-size: 16px;
  }
  .activeNum{
    /* color: red; */
    font-size: 16px;
  }
  .customerManage.border .el-table--border td{
        border-right: 1px solid #EBEEF5 !important;
  }
  .el-table__fixed-body-wrapper table {
    padding-bottom: 8px !important;
  }
  .el-table .xiaoji-row {
    background: #ffff00;
  }
  
  .el-table .sum-row {
    background: #00b0f0;
  }
  .el-table .warning-col {
    background: red;
  }
  .diy-eltabs .el-tabs__content {
    height: calc(100% - 40px);
  }
  .diy-eltabs .data-box-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  </style>
  