<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"
                    size="small"
                    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;">
          <!-- :style="{'height':screenHeight}" -->
            <el-table
            v-loading="loading"
            :data="dataList"
            style="width: 100%;"
            :height="screenHeight+'px'"
            border
            :span-method="objectSpanMethod"
            :default-sort = "{prop: 'date', order: 'descending'}">
            <el-table-column fixed prop="EmpName" label="姓名"></el-table-column>
            <el-table-column prop="RankName" label="排名">
                <template slot-scope="scope">
                    <span :class="{'activeOne':scope.row.RankName=='第一名',
                    'activeTwo':scope.row.RankName=='第二名',
                    'activeThree':scope.row.RankName=='第三名'}">{{scope.row.RankName}}</span>
                </template>
            </el-table-column>
            <el-table-column :label="i.Name" align="center" v-for="i in PlatformTypeList">
                <el-table-column
                  width="50"
                  v-for="(item,index) in ModuleTypeList" :key="index"
                  prop="province"
                  :label="item.Name">
                  <template slot-scope="scope">
                    <template v-if="i.Name=='小红书'">
                        <span v-for="(obj,indexs) in scope.row.RedBookList" :key="indexs">
                            <template v-if="obj.ModuleName==item.Name">
                                <span class="activeNum" @click="details(obj,scope.row.EmpName)">
                                   {{obj.Number>0?obj.Number:''}} 
                                </span>
                            </template>
                        </span>
                    </template>
                    <template v-if="i.Name=='微博'">
                        <span v-for="(obj,indexs) in scope.row.MicroBlogList" :key="indexs">
                            <template v-if="obj.ModuleName==item.Name">
                                <span class="activeNum" @click="details(obj,scope.row.EmpName)">
                                    {{obj.Number>0?obj.Number:''}} 
                                 </span>
                            </template>
                        </span>
                    </template>
                    <template v-if="i.Name=='抖音'">
                        <span v-for="(obj,indexs) in scope.row.TikTokList" :key="indexs">
                            <template v-if="obj.ModuleName==item.Name">
                                <span class="activeNum" @click="details(obj,scope.row.EmpName)">
                                    {{obj.Number>0?obj.Number:''}} 
                                 </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="">
                      {{scope.row.TotalNum>0?scope.row.TotalNum:''}}  
                    </span>
                    
                </template>
            </el-table-column>
          </el-table>

        </div>
        <el-dialog @closed="closedDialog" :modal="true" :visible.sync="dialogTableVisible" width="900px"  :close-on-click-modal="false" class="addCustomer">
            <div class="add-tit" slot="title">
                <p><span></span>{{title}}排名详情</p>
                <span icon="el-icon-close"></span>
            </div>
                <div v-if="detailsObj&&detailsObj.Remark.length>0">
                    <div class="orderlog-box-center" v-for="(item,index) in detailsObj.Remark" :key="index">
                        <div class="form-box-log">
                        <div class="form-log-title">
                            <span class="log-radius"></span>
                            <div class="form-log-text">
                            <span>
                                {{item.PlatformName}}
                            </span>
                            <span>
                                {{item.PeriodsName}}
                            </span>
                            </div>
                        </div>
                        <div class="form-log-center">
                            {{item.StatName}}:
                            <span class="activeNumB">{{item.Value}}</span>
                        </div>
                        </div>
                    </div>
                    </div>
                    <div v-else class="noData">暂无数据</div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="add-box-btn" @click="dialogTableVisible = false">确 定</el-button>
                <el-button class="add-box-btn add-box-cancel" @click="dialogTableVisible = false">取 消</el-button>
            </div>
        </el-dialog>
      </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        title:'',
        detailsObj:null,
        dialogTableVisible: false,
        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:'第一名',  
                小红书:{
                    list:[
                        {
                            name:'机票',
                            num:'1次',
                            numList:[//次数详情

                            ]
                        },
                        {
                            name:'日语',
                            num:'2次',
                            numList:[//次数详情

                            ]
                        }
                    ]
                },
                微博:{
                    list:[
                        {
                            name:'机票',
                            num:'1次',
                            numList:[//次数详情

                            ]
                        },
                        {
                            name:'日语',
                            num:'2次',
                            numList:[//次数详情

                            ]
                        }
                    ]
                },
                抖音:{
                    list:[
                        {
                            name:'机票',
                            num:'1次',
                            numList:[//次数详情

                            ]
                        },
                        {
                            name:'日语',
                            num:'2次',
                            numList:[//次数详情

                            ]
                        }
                    ]
                },
                合计: 3
            },
        ],
        loading: false,
        msg: {
            StartTime:'',
            EndTime:''
        },
        times:[],
        screenHeight:'',//获取显示器高度
      };
    },
    mounted() {
      const that = this;
      that.screenHeight = (window.innerHeight-300)
      // console.log(window.innerHeight);

      this.getEnumerate()
      this.init();
    },
    methods: {
        details(row,EmpName){
            this.dialogTableVisible = true
            this.title = EmpName
            this.detailsObj = row
        },
        closedDialog(){
            this.dialogTableVisible = false
        },
        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){
                // 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
                this.dataList = res.data.data
            }
          },
          (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";
  /* .activeThree{
    color: #B97234;
  }
  .activeTwo{
    color: #C7CED7;
  }
  .activeOne{
    color: #F9AE0E;
  } */
  .activeNumB{
    color: red;
  }
  .activeNum{
    color: #409EFF;
    font-size: 16px;
    cursor: pointer;
  }
  .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>
  