<template>
    <div class="customerManage padding0" 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" v-if="isPermission"><i class="iconfont icondaoru"></i> 导入</el-dropdown-item>
                        <el-dropdown-item command="2"><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 v-for="item in PeroidsList" :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>
        <div class="activeBox">
            <div v-for="item in PlatformTypeList" @click="clickActive(item)"
            :class="{'active':msg.PlatformType==item.Id}">
                {{item.Name}}
            </div>
        </div>
        <div style="padding: 0 0;background: #ffffff;">
          <el-table
            v-if="msg.PlatformType==1"
            :data="dataList"
            style="width: 100%"
            :border="true"
            :fit="true"
            v-loading="loading"
            :default-sort = "{prop: 'date', order: 'descending'}"
        >
            <el-table-column width="200" fixed prop="AccountName" label="账号名称"></el-table-column>
            <el-table-column width="130" prop="State" label="状态">
              <template slot-scope="scope">
                <template v-if="!scope.row.Show">
                  <span class="activeState" @click="isPermission?scope.row.Show=true:''">
                    <a v-if="scope.row.State==1" :style="{'text-decoration':!isPermission?'none':''}">正常</a>
                    <a v-if="scope.row.State==2" :style="{'text-decoration':!isPermission?'none':''}">限流</a>
                    <a v-if="scope.row.State==3" :style="{'text-decoration':!isPermission?'none':''}">封号</a>
                  </span>
                </template>
                <template v-if="scope.row.Show">
                  <el-select style="width: 80px;" size="mini" v-model="scope.row.State" placeholder="请选择"
                  @change="EditState($event,scope.row)">
                    <el-option v-for="item in scope.row.optionList" :key="item.Id" :label="item.Name"
                      :value="item.Id"></el-option>
                  </el-select>
                  <i class="iconfnt el-icon-close left10 activeState" @click="scope.row.Show=false"></i>
                </template>
                
              </template>
            </el-table-column>
            <el-table-column width="90" prop="FansNum" label="粉丝数" sortable></el-table-column>
            <el-table-column width="110" prop="FansRate" label="粉丝成长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.FansRate<0}">{{scope.row.FansRate}}%</span></template></el-table-column>
            <el-table-column width="150" prop="AddFansNum" label="近七天新增粉丝量" sortable></el-table-column>
            <el-table-column width="150" prop="AddFansRate" label="近7天粉丝增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.AddFansRate<0}">{{scope.row.AddFansRate}}%</span></template></el-table-column>
            <el-table-column width="110" prop="CollectNum" label="获赞与收藏" sortable></el-table-column>
            <el-table-column width="150" prop="CollectRate" label="获赞与收藏增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.CollectRate<0}">{{scope.row.CollectRate}}%</span></template></el-table-column>
            <el-table-column width="140" prop="VisitorNum" label="近七天主页访客" sortable></el-table-column>
            <el-table-column width="180" prop="VisitorRate" label="近七天主页访客增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.VisitorRate<0}">{{scope.row.VisitorRate}}%</span></template></el-table-column>
            <el-table-column width="130" prop="LookNum" label="近七天观看数" sortable></el-table-column>
            <el-table-column width="170" prop="LookRate" label="近七天观看数增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.LookRate<0}">{{scope.row.LookRate}}%</span></template></el-table-column>
            <el-table-column width="130" prop="InteractionNum" label="近七天互动数" sortable></el-table-column>
            <el-table-column width="170" prop="InteractionRate" label="近七天互动数增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.InteractionRate<0}">{{scope.row.InteractionRate}}%</span></template></el-table-column>
            <el-table-column width="110" prop="DiscussNum" label="近七天评论" sortable></el-table-column>
            <el-table-column width="150" prop="DiscussRate" label="近七天评论增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.DiscussRate<0}">{{scope.row.DiscussRate}}%</span></template></el-table-column>
            <el-table-column width="180" prop="SecondsNum" label="近七天观看总时长(秒)" sortable></el-table-column>
            <el-table-column width="190" prop="SecondsRate" label="近七天观看总时长增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.SecondsRate<0}">{{scope.row.SecondsRate}}%</span></template></el-table-column>
            <el-table-column width="90" prop="NoteNum" label="笔记数" sortable></el-table-column>
            <el-table-column width="130" prop="NoteRate" label="笔记数增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.NoteRate<0}">{{scope.row.NoteRate}}%</span></template></el-table-column>
            <el-table-column width="130" fixed="right" prop="EmpName" label="运营人"></el-table-column>
            <el-table-column width="130" fixed="right" label="操作" v-if="isPermission">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="editAccount(scope.row)"></el-button>
                <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="delAccount(scope.row)"></el-button>
              </template>
            </el-table-column>
        </el-table>
        <el-table
            v-if="msg.PlatformType==2"
            :data="dataList"
            style="width: 100%"
            :border="true"
            :fit="true"
            v-loading="loading"
            :default-sort = "{prop: 'date', order: 'descending'}"
        >
            <el-table-column width="200" fixed prop="AccountName" label="账号名称"></el-table-column>
            <el-table-column width="130" prop="State" label="状态">
              <template slot-scope="scope">
                <template v-if="!scope.row.Show">
                  <span class="activeState" @click="isPermission?scope.row.Show=true:''">
                    <a v-if="scope.row.State==1" :style="{'text-decoration':!isPermission?'none':''}">正常</a>
                    <a v-if="scope.row.State==2" :style="{'text-decoration':!isPermission?'none':''}">限流</a>
                    <a v-if="scope.row.State==3" :style="{'text-decoration':!isPermission?'none':''}">封号</a>
                  </span>
                </template>
                <template v-if="scope.row.Show">
                  <el-select style="width: 80px;" size="mini" v-model="scope.row.State" placeholder="请选择"
                  @change="EditState($event,scope.row)">
                    <el-option v-for="item in scope.row.optionList" :key="item.Id" :label="item.Name"
                      :value="item.Id"></el-option>
                  </el-select>
                  <i class="iconfnt el-icon-close left10 activeState" @click="scope.row.Show=false"></i>
                </template>
                
              </template>
            </el-table-column>
            <el-table-column width="90" prop="FansNum" label="粉丝数" sortable></el-table-column>
            <el-table-column width="150" prop="FansRate" label="近七天粉丝成长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.FansRate<0}">{{scope.row.FansRate}}%</span></template></el-table-column>
            <el-table-column width="110" prop="AddFansNum" label="近七天关注" sortable></el-table-column>
            <el-table-column width="150" prop="AddFansRate" label="近7天关注增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.AddFansRate<0}">{{scope.row.AddFansRate}}%</span></template></el-table-column>
            <el-table-column width="110" prop="CollectNum" label="昨日阅读量" sortable></el-table-column>
            <el-table-column width="160" prop="VisitorNum" label="近七天阅读(播放)量" sortable></el-table-column>
            <el-table-column width="200" prop="VisitorRate" label="近七天阅读(播放)量增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.VisitorRate<0}">{{scope.row.VisitorRate}}%</span></template></el-table-column>
            <el-table-column width="180" prop="LookNum" label="近一个月阅读(播放)量" sortable></el-table-column>
            <el-table-column width="220" prop="LookRate" label="近一个月阅读(播放)量增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.LookRate<0}">{{scope.row.LookRate}}%</span></template></el-table-column>
            <el-table-column width="100" prop="InteractionNum" label="总微博数" sortable></el-table-column>
            <el-table-column width="140" prop="InteractionRate" label="总微博数增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.InteractionRate<0}">{{scope.row.InteractionRate}}%</span></template></el-table-column>
            <el-table-column width="130" fixed="right" prop="EmpName" label="运营人"></el-table-column>
            <el-table-column width="130" fixed="right" label="操作" v-if="isPermission">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="editAccount(scope.row)"></el-button>
                <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="delAccount(scope.row)"></el-button>
              </template>
            </el-table-column>
        </el-table>
        <el-table
            v-if="msg.PlatformType==3"
            :data="dataList"
            :border="true"
            :fit="true"
            v-loading="loading"
            :default-sort = "{prop: 'date', order: 'descending'}"
        >
            <el-table-column width="200" fixed prop="AccountName" label="账号名称"></el-table-column>
            <el-table-column width="130" prop="State" label="状态">
              <template slot-scope="scope">
                <template v-if="!scope.row.Show">
                  <span class="activeState" @click="isPermission?scope.row.Show=true:''">
                    <a v-if="scope.row.State==1" :style="{'text-decoration':!isPermission?'none':''}">正常</a>
                    <a v-if="scope.row.State==2" :style="{'text-decoration':!isPermission?'none':''}">限流</a>
                    <a v-if="scope.row.State==3" :style="{'text-decoration':!isPermission?'none':''}">封号</a>
                  </span>
                </template>
                <template v-if="scope.row.Show">
                  <el-select style="width: 80px;" size="mini" v-model="scope.row.State" placeholder="请选择"
                  @change="EditState($event,scope.row)">
                    <el-option v-for="item in scope.row.optionList" :key="item.Id" :label="item.Name"
                      :value="item.Id"></el-option>
                  </el-select>
                  <i class="iconfnt el-icon-close left10 activeState" @click="scope.row.Show=false"></i>
                </template>
                
              </template>
            </el-table-column>
            <el-table-column width="90" prop="FansNum" label="粉丝数" sortable></el-table-column>
            <el-table-column width="110" prop="FansRate" label="粉丝成长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.FansRate<0}">{{scope.row.FansRate}}%</span></template></el-table-column>
            <el-table-column width="110" prop="AddFansNum" label="近七天关注" sortable></el-table-column>
            <el-table-column width="110" prop="AddFansRate" label="关注成长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.AddFansRate<0}">{{scope.row.AddFansRate}}%</span></template></el-table-column>
            <el-table-column width="110" prop="CollectNum" label="近七天获赞" sortable></el-table-column>
            <el-table-column width="110" prop="CollectRate" label="获赞增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.CollectRate<0}">{{scope.row.CollectRate}}%</span></template></el-table-column>
            <el-table-column width="150" prop="VisitorNum" label="近七天内播放总量" sortable></el-table-column>
            <el-table-column width="140" prop="VisitorRate" label="播放总量成长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.VisitorRate<0}">{{scope.row.VisitorRate}}%</span></template></el-table-column>
            <el-table-column width="140" prop="LookNum" label="近七天主页访问" sortable></el-table-column>
            <el-table-column width="140" prop="LookRate" label="主页访问成长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.LookRate<0}">{{scope.row.LookRate}}%</span></template></el-table-column>
            <el-table-column width="150" prop="InteractionNum" label="近七天作品点赞数" sortable></el-table-column>
            <el-table-column width="150" prop="InteractionRate" label="作品点赞数成长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.InteractionRate<0}">{{scope.row.InteractionRate}}%</span></template></el-table-column>
            <el-table-column width="150" prop="DiscussNum" label="近七天新增粉丝数" sortable></el-table-column>
            <el-table-column width="150" prop="DiscussRate" label="新增粉丝成长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.DiscussRate<0}">{{scope.row.DiscussRate}}%</span></template></el-table-column>
            <el-table-column width="150" prop="SecondsNum" label="近七天作品评论数" sortable></el-table-column>
            <el-table-column width="150" prop="SecondsRate" label="作品评论数成长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.SecondsRate<0}">{{scope.row.SecondsRate}}%</span></template></el-table-column>
            <el-table-column width="130" prop="NoteNum" label="近七天作品数" sortable></el-table-column>
            <el-table-column width="110" prop="NoteRate" label="作品增长率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.NoteRate<0}">{{scope.row.NoteRate}}%</span></template></el-table-column>
            <el-table-column width="130" fixed="right" prop="EmpName" label="运营人"></el-table-column>
            <el-table-column width="130" fixed="right" label="操作" v-if="isPermission">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="editAccount(scope.row)"></el-button>
                <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="delAccount(scope.row)"></el-button>
              </template>
            </el-table-column>
        </el-table>
        
        <div class="ranking-form" v-if="msg.PlatformType!=2">
          <div class="ranking-content">
            <ul>
              <template v-if="msg.PlatformType==1">
                <li v-for="item in rankingTitle">
                  {{item}}
                </li>
              </template>
              <template v-else>
                <li v-for="(item,index) in RateList.FansRank.length+1" :key="index">
                  <template v-if="index==0">项目名称</template>
                  <template v-else>
                    第<span v-if="index==1">一</span>
                    <span v-if="index==2">二</span>名
                  </template>
                </li>
              </template>
            </ul>
            <ul>
              <li>粉丝数</li>
              <li v-for="item in RankList.FansRank">{{item.EmpName}}({{item.FansNum}})</li>
            </ul>
            <ul>
              <li>近七天增加粉丝数</li>
              <li v-for="item in RankList.AddFansRank">{{item.EmpName}}({{item.AddFansNum}})</li>
            </ul>
            <ul>
              <li>近七天获赞与收藏</li>
              <li v-for="item in RankList.CollectRank">{{item.EmpName}}{{item.CollectNum}})</li>
            </ul>
            <ul>
              <li>近七天主页访客</li>
              <li v-for="item in RankList.VisitorRank">{{item.EmpName}}({{item.VisitorNum}})</li>
            </ul>
            <ul>
              <li>近七天观看数</li>
              <li v-for="item in RankList.LookRank">{{item.EmpName}}({{item.LookNum}})</li>
            </ul>
            <ul>
              <li>近七天互动数</li>
              <li v-for="item in RankList.InteractionRank">{{item.EmpName}}({{item.InteractionNum}})</li>
            </ul>
            <ul>
              <li>近七天评论</li>
              <li v-for="item in RankList.DiscussRank">{{item.EmpName}}({{item.DiscussNum}})</li>
            </ul>
            <ul>
              <li>近七天观看总时长</li>
              <li v-for="item in RankList.SecondsRank">{{item.EmpName}}({{item.SecondsNum}})</li>
            </ul>
            <ul>
              <li>笔记数</li>
              <li v-for="item in RankList.NoteRank">{{item.EmpName}}({{item.NoteNum}})</li>
            </ul>

          </div>
          <div class="ranking-content" style="margin-left: 30px;">
            <ul>
              <template v-if="msg.PlatformType==1">
                <li v-for="item in rankingTitle">
                  {{item}}
                </li>
              </template>
              <template v-else>
                <li v-for="(item,index) in RateList.FansRank.length+1" :key="index">
                  <template v-if="index==0">项目名称</template>
                  <template v-else>
                    第<span v-if="index==1">一</span>
                    <span v-if="index==2">二</span>名
                  </template>
                </li>
              </template>
            </ul>
            <ul>
              <li>粉丝数成长率</li>
              <li v-for="item in RateList.FansRank">{{item.EmpName}}({{item.FansRate}}%)</li>
            </ul>
            <ul>
              <li>近七天新增粉丝数成长率</li>
              <li v-for="item in RateList.AddFansRank">{{item.EmpName}}({{item.AddFansRate}}%)</li>
            </ul>
            <ul>
              <li>近七天获赞与收藏成长率</li>
              <li v-for="item in RateList.CollectRank">{{item.EmpName}}({{item.CollectRate}}%)</li>
            </ul>
            <ul>
              <li>近七天主页访客成长率</li>
              <li v-for="item in RateList.VisitorRank">{{item.EmpName}}({{item.VisitorRate}}%)</li>
            </ul>
            <ul>
              <li>近七天观看数成长率</li>
              <li v-for="item in RateList.LookRank">{{item.EmpName}}({{item.LookRate}}%)</li>
            </ul>
            <ul>
              <li>近七天互动数成长率</li>
              <li v-for="item in RateList.InteractionRank">{{item.EmpName}}({{item.InteractionRate}}%)</li>
            </ul>
            <ul>
              <li>近七天评论成长率</li>
              <li v-for="item in RateList.DiscussRank">{{item.EmpName}}({{item.DiscussRate}}%)</li>
            </ul>
            <ul>
              <li>近七天观看总时长成长率</li>
              <li v-for="item in RateList.SecondsRank">{{item.EmpName}}({{item.SecondsRate}}%)</li>
            </ul>
            <ul>
              <li>笔记数成长率</li>
              <li v-for="item in RateList.NoteRank">{{item.EmpName}}({{item.NoteRate}}%)</li>
            </ul>
          </div>
        </div>
        <div class="ranking-form" v-if="msg.PlatformType==2">
          <div class="ranking-content">
            <ul>
              <li v-for="item in rankingTitle">
                {{item}}
              </li>
            </ul>
            <ul>
              <li>粉丝数</li>
              <li v-for="item in RankList.FansRank">{{item.EmpName}}({{item.FansNum}})</li>
            </ul>
            <ul>
              <li>近七天关注</li>
              <li v-for="item in RankList.AddFansRank">{{item.EmpName}}({{item.AddFansNum}})</li>
            </ul>
            <ul>
              <li>昨日阅读量</li>
              <li v-for="item in RankList.CollectRank">{{item.EmpName}}({{item.CollectNum}})</li>
            </ul>
            <ul>
              <li>近七天阅读(播放)量</li>
              <li v-for="item in RankList.VisitorRank">{{item.EmpName}}({{item.VisitorNum}})</li>
            </ul>
            <ul>
              <li>近一个月总阅读(播放)量</li>
              <li v-for="item in RankList.LookRank">{{item.EmpName}}({{item.LookNum}})</li>
            </ul>
            <ul>
              <li>总微博数</li>
              <li v-for="item in RankList.InteractionRank">{{item.EmpName}}({{item.InteractionNum}})</li>
            </ul>

          </div>
          <div class="ranking-content" style="margin-left: 30px;">
            <ul>
              <li v-for="item in rankingTitle">
                {{item}}
              </li>
            </ul>
            <ul>
              <li>近七天粉丝数成长率</li>
              <li v-for="item in RateList.FansRank">{{item.EmpName}}({{item.FansRate}}%)</li>
            </ul>
            <ul>
              <li>近七天关注数成长率</li>
              <li v-for="item in RateList.AddFansRank">{{item.EmpName}}({{item.AddFansRate}}%)</li>
            </ul>
            <ul>
              <li>昨日阅读量成长率</li>
              <li v-for="item in RateList.CollectRank">{{item.EmpName}}({{item.CollectRate}}%)</li>
            </ul>
            <ul>
              <li>近七天阅读(播放)量成长率</li>
              <li v-for="item in RateList.VisitorRank">{{item.EmpName}}({{item.VisitorRate}}%)</li>
            </ul>
            <ul>
              <li>近一个月阅读(播放)量成长率</li>
              <li v-for="item in RateList.LookRank">{{item.EmpName}}({{item.LookRate}}%)</li>
            </ul>
            <ul>
              <li>总微博数成长率</li>
              <li v-for="item in RateList.InteractionRank">{{item.EmpName}}({{item.InteractionRate}}%)</li>
            </ul>
          </div>
        </div>

        </div>
        <el-dialog :visible.sync="dialogTableVisible" @closed="closedDialog" :close-on-click-modal="false"
          class="add-box add-box1 importDialogBox" width="450px" v-loading="loading" 
          :element-loading-text="loadingText">
          <div class="add-tit" slot="title">
            <p><span></span>导入引流</p>
            <span icon="el-icon-close"></span>
          </div>
          <div class="form-box">
            <p class="form-box-tit"><span class="radius"></span> 上传文件
              <a style="margin-left: 20px;font-weight: 100;text-decoration: none;">
                选择历史期数或者新建期数
              </a>
            </p>
            <el-form :model="form" ref="form" :rules="rules" class="MyEditForm">
              <el-row :gutter="30">
                  <el-col :span="8">
                    <div class="MyEditForm-item label-pad-left">
                        <el-form-item label="平台" prop="PlatformType">
                          <el-select v-model="form.PlatformType" placeholder="请选择平台">
                            <el-option v-for="item in PlatformTypeList" :key="item.Id" :label="item.Name" :value="item.Id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                  </el-col>
                  <el-col :span="8" v-if="!form.PeriodsName">
                      <div class="MyEditForm-item label-pad-left">
                          <el-form-item label="期数" prop="PeriodsId" :rules="[{ required: form.PeriodsName==''?true:false, message: '请选择期数' }]">
                            <el-select v-model="form.PeriodsId" placeholder="选择期数" clearable @change="form.PeriodsId?form.PeriodsName='':''">
                              <el-option v-for="item in PeroidsList" :key="item.Id" :label="item.Name" :value="item.Id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8" v-if="!form.PeriodsId">
                      <div class="MyEditForm-item">
                        <el-form-item label="期数名称" prop="PeriodsName" :rules="[{ required: form.PeriodsId==''?true:false, message: '输入期数名称新建期数' }]">
                          <el-input placeholder="输入期数名称新建期数" v-model="form.PeriodsName" clearable @change="form.PeriodsName?form.PeriodsId='':''"></el-input>
                        </el-form-item>
                      </div>
                    </el-col>
              </el-row>
          </el-form>
            <div class="up-img-box">
              <div class="uib-item" style="margin:0 auto;margin-bottom:20px;">
                <div class="up-ctrl">
                  <el-upload :limit="1" :http-request="UploadClue" :multiple="false" accept="*.xls,*.xlsx"
                    :show-file-list="false" action="">
                    <img src="../../assets/img/cust/upimg.png" alt="">
                    
                  </el-upload>
                  <span v-if="errText" style="width: 400px; position: absolute;right: -150px;top:40px; color: red;white-space: wrap;">
                    {{errText}}
                  </span>
                </div>
                
              </div>
            </div>
            <p style="text-align: center;">
              <span v-for="item in urlList" style="margin-left: 10px;margin-right: 10px;">
                <a :href="item.url" style="cursor:pointer;color:blue;text-decoration:underline;">{{item.Name}}模版下载</a>
              </span>
            </p>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button class="add-box-btn add-box-cancel" @click="dialogTableVisible = false">关 闭
            </el-button>
          </div>
        </el-dialog>
        <el-dialog @closed="closedDialogEdit" :modal="true" :visible.sync="dialogTableVisibleEdit" width="900px"  :close-on-click-modal="false" class="addCustomer">
          <div class="add-tit" slot="title">
              <p><span></span>修改账号数据</p>
              <span icon="el-icon-close"></span>
          </div>
          <div class="form-box" >
              <el-form :model="form" ref="form" :rules="rules" class="MyEditForm">
                  <el-row :gutter="30">
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="粉丝数量" prop="FansNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入粉丝数量" v-model="formEdit.FansNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="新增粉丝数量" prop="AddFansNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入新增粉丝数量" v-model="formEdit.AddFansNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="收藏数量" prop="CollectNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入收藏数量" v-model="formEdit.CollectNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="访客数量" prop="VisitorNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入访客数量" v-model="formEdit.VisitorNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="观看数量" prop="LookNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入观看数量" v-model="formEdit.LookNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="互动数量" prop="InteractionNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入互动数量" v-model="formEdit.InteractionNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="评论数量" prop="DiscussNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入评论数量" v-model="formEdit.DiscussNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="观看总时长" prop="SecondsNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入观看总时长" v-model="formEdit.SecondsNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="笔记数量" prop="NoteNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入笔记数量" v-model="formEdit.NoteNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                  </el-row>
              </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
              <el-button type="primary" class="add-box-btn" @click="submitForm">确 定</el-button>
              <el-button class="add-box-btn add-box-cancel" @click="dialogTableVisibleEdit = false">取 消</el-button>
          </div>
      </el-dialog>
      </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:[],
        title:'小红书',
        total: 0,
        RateList:{},//排名率
        RankList:{},//排名
        dataList: [],
        loading: false,
        loadingB: false,
        activeName: "1",
        rateData: [],
        msg: {
            PeriodsId: '',
            PlatformType: 1,
            ModuleTypeIds:[]
        },
        form:{
          PlatformType: '',
          PeriodsId: '',
          PeriodsName: '',
        },
        rules: {
          PeriodsName: [{
            required: true,
            message: "请输入期数名称",
            trigger: "blur"
          }, ],
          PlatformType: [{
            required: true,
            message: "请选择平台",
            trigger: "blur"
          }, ],
          PeriodsId: [{
            required: true,
            message: "请选择期数",
            trigger: "change"
          }, ],
        },
        PeroidsList:[],
        dialogTableVisible: false,
        loadingText:'',
        dialogTableVisibleEdit: false,
        urlList:[
          {Name:'小红书',url:'http://crm.oytour.com/ExportFile/小红书导入模板.xlsx'},
          {Name:'微博',url:'http://crm.oytour.com/ExportFile/微博导入模板.xlsx'},
          {Name:'抖音',url:'http://crm.oytour.com/ExportFile/抖音导入模板.xlsx'},
        ],
        isPermission:false,//是否有操作权限
      };
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      if(userInfo.PostName=='总经理'  || 
        userInfo.PostName=='技术开发'  || 
        userInfo.PostName=='开发经理'){
        this.isPermission = true
      }else{
        this.isPermission = false
      }
      this.getEnumerate()
    },
    methods: {
      clickActive(item){
        this.msg.PlatformType = item.Id
        if(this.msg.PlatformType==1){
          this.title = '小红书'
        }if(this.msg.PlatformType==2){
          this.title = '微博'
        }if(this.msg.PlatformType==3){
          this.title = '抖音'
        }
        this.init()
      },
      EditState(e,row) {
        let datas = {
          AccountId:row.AccountId,
          State:row.State
        }
        this.$confirm('此操作将修改该账号状态否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          this.apipost('/api/IntroduceFlowStat/SetFlowAccountState',datas, res=>{
              if (res.data.resultCode == 1) {
                  this.init()
                  this.$message.success(res.data.message)
              } else {
                  this.init()
                  this.$message.error(res.data.message)
              }
          })
        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            }); 
            this.init()         
        });
        
      },
      delAccount(row){
        this.$confirm('此操作将删除该账号数量是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              let msg = {
                DetailId: row.Id
              }
              this.apipost('/api/IntroduceFlowStat/DelFlowPeriodsDetial', msg, res=>{
              if (res.data.resultCode == 1) {
                  this.$message.success('操作成功')
                  this.init()
              }
              })
          }).catch(() => {
              this.$message({
              type: 'info',
              message: '已取消'
              });          
            });
      },
      // 修改引流账号
      editAccount(row){
          this.formEdit = JSON.parse(JSON.stringify(row))
          this.dialogTableVisibleEdit = true
      },
      submitForm(addMsg) {
        this.$confirm('此操作将修改该账号数量是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          this.addData();
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消'
            });          
        });
        
      },
      addData(){
          if (!this.formEdit.Id) {
              return
          }
          let datas = {
            Id:this.formEdit.Id,//	:'',//明细ID（以小红书为蓝本）	是	[string]		查看
            FansNum:this.formEdit.FansNum,//	粉丝数量	是	[string]		查看
            AddFansNum:this.formEdit.AddFansNum,//	添加分数数量	是	[string]		查看
            CollectNum:this.formEdit.CollectNum,//	收藏数量	是	[string]		查看
            VisitorNum:this.formEdit.VisitorNum,//	访客数量	是	[string]		查看
            LookNum:this.formEdit.LookNum,//	观看数量	是	[string]		查看
            InteractionNum:this.formEdit.InteractionNum,//	互动数量	是	[string]		查看
            DiscussNum:this.formEdit.DiscussNum,//	评论数量	是	[string]		查看
            SecondsNum:this.formEdit.SecondsNum,//	观看总时长	是	[string]		查看
            NoteNum:this.formEdit.NoteNum,//	笔记数量
          }
          this.apipost('/api/IntroduceFlowStat/SetFlowPeriodsDetial',datas, res=>{
              if (res.data.resultCode == 1) {
                  this.init()
                  this.resetForm("formEdit");
                  this.dialogTableVisibleEdit = false;
                  this.$message.success(res.data.message)
                  
              } else {
                  this.$message.error(res.data.message)
              }
          })
      },
      closedDialogEdit(){
        this.dialogTableVisibleEdit = false
      },
      closedDialog() {
        this.dialogTableVisible = false
        this.resetForm('form')
      },
      //导入引流汇总
      UploadClue(file) {
        this.errText = ''
        if(this.form.PlatformType==''){
          return this.$message.error('请选择平台')
        }
        if(this.form.PeriodsName==''&&this.form.PeriodsId==''){
          return this.$message.error('请选择期数或者输入期数名称新建期数')
        }
        if(this.form.PeriodsId){
          this.form.PeriodsName = ''
        }
        if(this.form.PeriodsName){
          this.form.PeriodsId = ''
        }
        var userInfo = this.getLocalStorage();
        var params = {
          EmployeeId: userInfo.EmployeeId,
          PlatformType: this.form.PlatformType,
          PeriodsId: this.form.PeriodsId?this.form.PeriodsId:0,
          PeriodsName: this.form.PeriodsName,
        };
        this.loadingB=true;
        this.loadingText="正在上传文件,请稍后...";
        this.UploadFlowStat(params, file.file, (res) => {
          this.loadingB=false;
          this.loadingText="";
          if (res.data.resultCode == 1) {
            this.dialogTableVisible = false;
            this.Success("导入引流成功!");
            this.resetForm('form')
            this.getEnumerate()
          } else {
            this.errText = res.data.message
            this.Error(res.data.message);
          }
        });
      },
      resetFormEdit(formName) { // 重置表单
          this.formEdit =  {
            Id:'',//	:'',//明细ID（以小红书为蓝本）	是	[string]		查看
            FansNum:'',//	粉丝数量	是	[string]		查看
            AddFansNum:'',//	添加分数数量	是	[string]		查看
            CollectNum:'',//	收藏数量	是	[string]		查看
            VisitorNum:'',//	访客数量	是	[string]		查看
            LookNum:'',//	观看数量	是	[string]		查看
            InteractionNum:'',//	互动数量	是	[string]		查看
            DiscussNum:'',//	评论数量	是	[string]		查看
            SecondsNum:'',//	观看总时长	是	[string]		查看
            NoteNum:'',//	笔记数量
          }
          this.$refs[formName].resetFields();
      },
      resetForm(formName) { // 重置表单
            this.form =  {
                PlatformType:'',
                PeriodsId:'',
                PeriodsName:'',
            }
            this.$refs[formName].resetFields();
        },
        getEnumerate(){
            // 期数下拉
            this.apipost(
                "/api/IntroduceFlowStat/GetFlowPeriodsList",{},res => {
                if (res.data.resultCode == 1) {
                    this.PeroidsList = res.data.data;
                    this.msg.PeriodsId = res.data.data[0].Id
                    this.init();
                } 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;
        let EmpIds = JSON.parse(JSON.stringify(this.msg.ModuleTypeIds))
        this.loading = true;
        this.apipost(
          "/api/IntroduceFlowStat/GetFlowStatList",
          {
            PeriodsId: this.msg.PeriodsId,
            PlatformType: this.msg.PlatformType,
            ModuleTypeIds: EmpIds.join(',')!==''?EmpIds.join(','):''
          },
          (res) => {
            this.loading = false;
            let datas = res.data.data&&res.data.data.List
            let addList = function (arr) {
                arr.forEach(item => {
                  item.Show = false
                  item.optionList = [
                    {Name:'正常',Id:1},
                    {Name:'限流',Id:2},
                    {Name:'封号',Id:3},
                  ]
                });
            };
            addList(datas);
            if(res.data.data){
              if(res.data.data.List){
                this.dataList = res.data.data.List;
              }if(res.data.data.RankList){
                this.RankList = res.data.data.RankList;
              }if(res.data.data.RateList){
                this.RateList = res.data.data.RateList;
              }
            }
          },
          (e) => {
            this.loading = false;
          }
        );
      },
      handleCommand(command) {
        if (command == "1") {
          this.dialogTableVisible = true
        }
        if (command == "2") {
          let text = ''
          let PeriodsName = ''
          this.PeroidsList.forEach(item=>{
            if(this.msg.PeriodsId==item.Id){
              PeriodsName = item.Name
            }
          })
          if(this.msg.PlatformType==1){
            text = '小红书'+ '-' + PeriodsName
          }
          if(this.msg.PlatformType==2){
            text = '微博'+ '-' + PeriodsName
          }
          if(this.msg.PlatformType==3){
            text = '抖音'+ '-' + PeriodsName
          }
          
          this.downloadHandler(
              "/api/IntroduceFlowStat/DownLoadFlowStat",
              text
            );
        }
      },
      // 导出
      downloadHandler(url, name) {
        this.GetLocalFile(url, {
          PeriodsId: this.msg.PeriodsId,
          PlatformType: this.msg.PlatformType,
          ModuleTypeIds:this.msg.ModuleTypeIds?this.msg.ModuleTypeIds.join(','):''
        }, `${name}.xls`, (res) => {
          this.$message({
            message: "导出成功",
            type: "success",
          });
          
        });
      },
    },
  };
  </script>
  <style>
  @import "../../assets/css/customerManage.css";
  .left10{
    margin-left: 10px;
  }
  .activeState{
    color: #00b0f0;
    cursor: pointer;
  }
  .customerManage.padding0 .el-table td{
      padding: 2px 0 !important;
    }
  .activeRed{
    color: red;
  }
  .ranking-content+.ranking-content ul li:nth-child(4){
    background: #FFCCFF;
  }
  .ranking-content+.ranking-content ul li:nth-child(3){
    background: #FF99FF;
  }
  .ranking-content+.ranking-content ul li:nth-child(2){
    background: #FF66FF;
  }
  .ranking-content+.ranking-content ul li:first-child{
    background: #F2DCDB;
  }
  .ranking-content ul li:nth-child(4){
    background: #FDE9D9;
  }
  .ranking-content ul li:nth-child(3){
    background: #FCD5B4;
  }
  .ranking-content ul li:nth-child(2){
    background: #FABF8F;
  }
  .ranking-content ul li:first-child{
    background: #F2DCDB;
  }
  .ranking-content ul:first-child li:first-child,.ranking-content+.ranking-content ul:first-child li:first-child{
    border: 0;
  }
  .ranking-content ul:first-child li,.ranking-content+.ranking-content ul:first-child li{
    background: #dddddd;
    border-left: 1px solid #ffffff;
  }
  .ranking-content ul li{
    flex: 1;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 10px 0;
  }
  .ranking-content ul:first-child{
    border: 0;
  }
  .ranking-content ul{
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #dedede;
  }
  .ranking-content{
    flex: 1;
    display: flex;
    flex-direction: column;
    /* border: 1px solid #dedede; */
  }
  .ranking-form{
    display: flex;
    padding: 30px 20px;
    font-size: 14px;
  }
  .activeBox div.active{
    border-bottom: 2px solid #00b0f0;
  }
  .activeBox div{
    width: 80px;
    padding: 0 0 15px 0;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
  }
  .activeBox{
    display: flex;
    border-bottom: 1px solid #dedede;
    background: #ffffff;

  }
  .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>
  