<template>
    <div class="customerManage" style="display:flex;height:calc(100% - 20px);flex-direction:column;">
          <div class="tools" style="border:none;">
              <div class="tools-item">
                  <h1>{{title}}引流汇总统计</h1>
              </div>
              <div class="rightmenu">
                  <el-dropdown @command="handleCommand">
                      <el-button class="crm-btn crm-btn-more easy-btn margin-right0">
                          <i class="iconfont icongengduo"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command="1"><i class="iconfont icondaochu"></i> 导出</el-dropdown-item>
                      </el-dropdown-menu>
                  </el-dropdown>
              </div>
          </div>
          <div class="query-box">
            <el-row :gutter="20">
                <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px;flex-shrink: 0;">期数：</span>
                    <el-select size="mini" width="200" v-model="msg.PeriodsId" placeholder="请选择"
                        @change="init">
                        <el-option label="不限" :value="-1"></el-option>
                        <el-option v-for="item in PeroidsList" :key="item.Id" :label="item.Periods"
                            :value="item.Id"></el-option>
                    </el-select>
                </el-col>
                <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px">平台</span>
                    <el-select v-model="msg.PlatformType" size="small" placeholder="请选择平台" @change="init">
                        <el-option label='不限' value='0' key='0'></el-option>
                        <el-option
                            v-for="item in PlatformTypeList"
                            :key="item.Id"
                            :label="item.Name"
                            :value="item.Id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px">板块</span>
                    <el-select v-model="msg.ModuleTypeIds" size="small" placeholder="请选择板块" @change="init"
                    multiple filterable>
                        <el-option
                            v-for="item in ModuleTypeList"
                            :key="item.Id"
                            :label="item.Name"
                            :value="item.Id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>    
            
            
        </div>
          <el-tabs v-model="activeName" style="flex:1;height:100%;" class="diy-eltabs" tab-position="top">
              <el-tab-pane label="小红书汇总统计" name="monthdata" style="background:#000">
                  <div class="data-box-item">
                      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
                        <tr>
                            <th width="120">退款时间</th>
                            <th width="120">退款金额</th>
                            <th>退款单号</th>
                            <th>退款状态</th>
                            <th>收款单号</th>
                            <th>收款金额</th>
                            <th>收款日期</th>
                            <th>支付渠道</th>
                            <th>退款关联单据</th>
                          </tr>
                          <tr v-for="item in dataList">
                            <td>{{item.RefundTime}}</td>
                            <td>{{item.Refund_Amt}}</td>
                            <td>{{item.Refund_Order_No}}</td>
                          </tr>
                      </table>
  
                  </div>
              </el-tab-pane>
              <el-tab-pane label="微博汇总统计" name="monthrate">
                  <div class="data-box-item">
                      
                  </div>
              </el-tab-pane>
          </el-tabs>
          
      </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        ModuleTypeList:[],
        PlatformTypeList:[],
        tableListTwo:[
            '名称','粉丝数','近7天粉絲增长率','近七天关注','近七天关注增长率',
            '昨日阅读量','近七天阅读(播放)量','近七天阅读(播放)量增长率',
            '近一个月阅读(播放)量','近一个月阅读(播放)量增长率','总微博数',
            '总微博数增长率','运营人'
        ],
        tableListOne:[
            '名称','粉丝数','粉丝成长率','近七天新增粉絲率(8月24~31日)',
            '近7天粉絲增长率','获赞与收藏','获赞与收藏增长率','近七天主页访客',
            '近七天主页访客增长率','近七天观看数','近七天观看数增长率',
            '近七天互动数','近七天互动数增长率','近七天评论','近七天评论增长率',
            '近七天观看总时长(秒)','近七天观看总时长增长率','笔记数','笔记数增长率',
            '运营人'
        ],
        title:'小红书',
        total: 0,
        dataList: [],
        loading: false,
        rateLoading: false,
        activeName: "monthdata",
        rateData: [],
        msg: {
            PeriodsId: "",
            PlatformType: "",
            ModuleTypeIds:[]
        },
        PeroidsList:[]
      };
    },
    mounted() {
      this.init();
        this.getEnumerate()
    },
    methods: {
        getEnumerate(){
            // 期数下拉
            this.apipost(
                "/api/Commission/GetCommissionPeroidsList",{},res => {
                if (res.data.resultCode == 1) {
                    this.PeroidsList = res.data.data;
                } else {
                    this.Error(res.data.message);
                }
                }
            );
            // 平台枚举
            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;
        let EmpIds = JSON.parse(JSON.stringify(this.msg.ModuleTypeIds))
        EmpIds = EmpIds.split(',')
        let arr =[]
        EmpIds.forEach(item => {
            arr.push(Number(item))
        });
        this.apipost(
          "/api/IntroduceFlowStat/GetFlowStatList",
          {
            PeriodsId: this.msg.PeriodsId,
            PlatformType: this.msg.PlatformType,
            ModuleTypeIds: arr.join(',')
          },
          (res) => {
            this.loading = false;
            this.dataList = res.data.data.List;
          },
          (e) => {
            this.loading = false;
          }
        );
      },
      tableCellClassName({ row, column }) {
        try {
          if (
            row[column.property].toString().indexOf("-") != -1 &&
            column.property != "DateStr"
          ) {
            return "warning-col";
          }
        } catch (error) {}
      },
      changeMonthHandler(val) {
        this.msg.YearStr = val.getFullYear();
        this.init();
        this.initRate();
      },
      formatter(row, column) {
        return row[column.property] + "%";
      },
      handleCommand(command) {
        if (command == "1") {
          this.downloadHandler();
        }
      },
      downloadHandler() {
        this.GetLocalFile(
          "/api/ClueStatic/DownLoadClueDay",
          this.msg,
          "数据统计.xls",
          (res) => {
            this.$message({
              message: "导出成功",
              type: "success",
            });
          }
        );
      },
      handleCommand(command) {
        if (command == "1") {
          if (this.activeName == "monthdata") {
            this.downloadHandler(
              "/api/ClueStatic/DownLoadClueYear",
              "年度引流数据"
            );
          } else {
            this.downloadHandler(
              "/api/ClueStatic/DownLoadClueYearRate",
              "年度引流成长率"
            );
          }
        }
      },
      downloadHandler(url, name) {
        this.GetLocalFile(url, this.msg, `${name}.xls`, (res) => {
          this.$message({
            message: "导出成功",
            type: "success",
          });
        });
      },
    },
  };
  </script>
  
  <style>
  @import "../../assets/css/customerManage.css";
  
  .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>
  