<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)

      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) {
              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>