<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>账户投放统计</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 collapse-tags>
                        <el-option
                            v-for="item in ModuleTypeList"
                            :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.DeptId" size="small" placeholder="请选择分组" 
                    @change="init">
                        <el-option key="0" label="不限" value="0"></el-option>
                        <el-option
                            v-for="item in departMentList"
                            :key="item.DepartmentID"
                            :label="item.DepartmentName"
                            :value="item.DepartmentID">
                        </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.State" size="small" placeholder="请选择状态" 
                  @change="init">
                      <el-option key="0" label="不限" value="0"></el-option>
                      <el-option
                          v-for="item in statusList"
                          :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 
                size="mini"
                filterable
                v-model="msg.UpdateBy" 
                @change="init" 
                placeholder="运营人">
                   <el-option key="0" label="不限" value="0"></el-option>
                    <el-option 
                        v-for="item in EmployeeList"
                        :label='item.EmName'
                        :value='item.EmployeeId'
                        :key='item.EmployeeId'>
                    </el-option>
                </el-select>
            </el-col>
            </el-row>
        </div>
        <div style="padding: 0 0;background: #ffffff;">
          <el-table
            :data="dataList"
            style="width: 100%"
            :border="true"
            :fit="true"
            v-loading="loading"
            :default-sort = "{prop: '', order: 'descending'}"
            :sort-by="['Consumption','ToShowNum','ClickNum','ClickRate','AVClickCost','AVToShowCost','LikeNum',
            'DiscussNum','CollectNum','FollowNum','ShareNum','InteractionNum',
            'AVInteractionCost','MoveAboutNum','MoveAboutRate','ScreenshotNum','SavePicNum',
            'ConsultPeopleNum','ConsultStripNum','ConsultNum','AVResponse','MinuteRate','SecondRate',
            'OpeningNum','ConsultRate','OpeningRate',]"
        >
            <el-table-column width="200" fixed prop="AccountName" label="账号名称"></el-table-column>
            <el-table-column width="100" prop="" label="消费金额">
              <template slot-scope="scope">
                {{scope.row.Consumption}}
              </template>
            </el-table-column>
            <el-table-column width="90" prop="ToShowNum" label="展现量" sortable></el-table-column>
            <el-table-column width="90" prop="ClickNum" label="点击量" sortable></el-table-column>
            <el-table-column width="90" prop="" label="点击率" sortable>
              <template slot-scope="scope">
                {{scope.row.ClickRate}}%
              </template>
            </el-table-column>
            <el-table-column width="125" prop="AVClickCost" label="平均点击成本" sortable></el-table-column>
            <el-table-column width="150" prop="AVToShowCost" label="平均千次展示费用" sortable></el-table-column>
            <el-table-column width="75" prop="LikeNum" label="点赞" sortable></el-table-column>
            <el-table-column width="100" prop="DiscussNum" label="评论数量" sortable></el-table-column>
            <el-table-column width="100" prop="CollectNum" label="收藏数量" sortable></el-table-column>
            <el-table-column width="90" prop="FollowNum" label="关注数量" sortable></el-table-column>
            <el-table-column width="90" prop="ShareNum" label="分享数量" sortable></el-table-column>
            <el-table-column width="100" prop="InteractionNum" label="互动量" sortable>
              <template slot-scope="scope">
                  {{scope.row.InteractionNum}}
              </template>
            </el-table-column>
            <el-table-column width="130" prop="AVInteractionCost" label="平均互动成本" sortable></el-table-column>
            <el-table-column width="140" prop="MoveAboutNum" label="行动按钮点击量" sortable></el-table-column>
            <el-table-column width="140" prop="MoveAboutRate" label="行动按钮点击率" sortable><template slot-scope="scope">
              <span :class="{'activeRed':scope.row.MoveAboutRate<0}">{{scope.row.MoveAboutRate}}%</span></template></el-table-column>
            <el-table-column width="80" prop="ScreenshotNum" label="截图数" sortable></el-table-column>
            <el-table-column width="100" prop="SavePicNum" label="保存图片数" sortable></el-table-column>
            <el-table-column width="125" prop="ConsultPeopleNum" label="私信咨询人数" sortable></el-table-column>
            <el-table-column width="125" prop="ConsultStripNum" label="私信咨询条数" sortable></el-table-column>
            <el-table-column width="90" prop="ConsultNum" label="私信咨询数"></el-table-column>

            <el-table-column width="100" prop="AVResponse" label="平均响应时长"></el-table-column>
            <el-table-column width="100" prop="MinuteRate" label="3分钟回复率"><template slot-scope="scope">
                <span :class="{'activeRed':scope.row.MinuteRate<0}">{{scope.row.MinuteRate}}%</span></template></el-table-column>
            <el-table-column width="80" prop="SecondRate" label="45s首响率"><template slot-scope="scope">
                <span :class="{'activeRed':scope.row.SecondRate<0}">{{scope.row.SecondRate}}%</span></template></el-table-column>
            <el-table-column width="100" prop="OpeningNum" label="私信开口数"></el-table-column>
            <el-table-column width="100" prop="ConsultRate" label="私信咨询成本"></el-table-column>
            <el-table-column width="100" prop="OpeningRate" label="私信开口成本"><template slot-scope="scope">
                <span :class="{'activeRed':scope.row.OpeningRate<0}">{{scope.row.OpeningRate}}%</span></template></el-table-column>
            <el-table-column width="100" fixed="right" prop="EmpName" label="运营人"show-overflow-tooltip></el-table-column>
            <el-table-column width="70" fixed="right" prop="State" label="状态">
                <template slot-scope="scope">
                    <span class="activeState">
                      <a v-if="scope.row.State==1" :style="{'text-decoration':!isPermission?'none':'none'}">正常</a>
                      <a v-if="scope.row.State==2" :style="{'text-decoration':!isPermission?'none':'none'}">限流</a>
                      <a v-if="scope.row.State==3" :style="{'text-decoration':!isPermission?'none':'none'}">封号</a>
                      <a v-if="scope.row.State==4" :style="{'text-decoration':!isPermission?'none':'none'}">重启</a>
                    </span>
                </template>
            </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>
            <!-- <template slot="append">
              <div style="display: flex;padding: 5px;color: black;text-indent: 5px;font-weight: bold;" v-if=" totalObj">
                <div style="width: 200px;color: black;">{{totalObj.AccountName}}</div>
                <div style="width: 130px;"></div>
                <div style="width: 90px;color: black;">{{totalObj.FansNum}}</div>
                <div style="width: 110px;color: black;">{{totalObj.FansRate}}%</div>
                <div style="width: 0px;color: black;">{{totalObj.AddFansNum?totalObj.AddFansNum:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.AddFansRate?totalObj.AddFansRate:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.CollectNum?totalObj.CollectNum:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.CollectRate?totalObj.CollectRate:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.VisitorNum?totalObj.VisitorNum:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.VisitorRate?totalObj.VisitorRate:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.LookNum?totalObj.LookNum:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.LookRate?totalObj.LookRate:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.InteractionNum?totalObj.InteractionNum:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.InteractionRate?totalObj.InteractionRate:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.DiscussNum?totalObj.DiscussNum:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.DiscussRate?totalObj.DiscussRate:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.SecondsNum?totalObj.SecondsNum:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.SecondsRate?totalObj.SecondsRate:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.NoteNum?totalObj.NoteNum:''}}</div>
                <div style="width: 0px;color: black;">{{totalObj.NoteRate?totalObj.NoteRate:''}}</div>
                <div style="width: 0px;"></div>
              </div>
            </template> -->
        </el-table>
      

        </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">
                    <div class="MyEditForm-item label-pad-left">
                        <el-form-item label="账户" prop="AccountId">
                          <el-select v-model="form.AccountId" placeholder="请选择账户" filterable>
                            <el-option v-for="item in AccountList" :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="Consumption">
                          <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入消费金额" v-model="formEdit.Consumption"></el-input-number>
                        </el-form-item>
                      </div>
                    </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="展现量" prop="ToShowNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入展现量" v-model="formEdit.ToShowNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="点击量" prop="ClickNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入点击量" v-model="formEdit.ClickNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="点击率(%)" prop="ClickRate">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入点击率" v-model="formEdit.ClickRate"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="平均点击成本" prop="AVClickCost">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入平均点击成本" v-model="formEdit.AVClickCost"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="平均千次展示费用" prop="AVToShowCost">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入平均千次展示费用" v-model="formEdit.AVToShowCost"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="点赞数" prop="LikeNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入点赞数量" v-model="formEdit.LikeNum"></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="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="FollowNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入关注数量" v-model="formEdit.FollowNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="分享数量" prop="ShareNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入分享数量" v-model="formEdit.ShareNum"></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="AVInteractionCost">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入平均互动成本" v-model="formEdit.AVInteractionCost"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="行动按钮点击量" prop="MoveAboutNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入行动按钮点击量" v-model="formEdit.MoveAboutNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="行动按钮点击率(%)" prop="MoveAboutRate">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入行动按钮点击率" v-model="formEdit.MoveAboutRate"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="截图数" prop="ScreenshotNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入截图数" v-model="formEdit.ScreenshotNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="保存图片数" prop="SavePicNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入保存图片数" v-model="formEdit.SavePicNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="私信咨询人数" prop="ConsultPeopleNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入私信咨询人数" v-model="formEdit.ConsultPeopleNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="私信咨询条数" prop="ConsultStripNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入私信咨询条数" v-model="formEdit.ConsultStripNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="私信咨询数" prop="ConsultNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入私信咨询数" v-model="formEdit.ConsultNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="平均响应时长" prop="AVResponse">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入平均响应时长" v-model="formEdit.AVResponse"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="3分钟回复率(%)" prop="MinuteRate">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入" v-model="formEdit.MinuteRate"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="45s首响率(%)" prop="SecondRate">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入45s首响率" v-model="formEdit.SecondRate"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="私信开口数" prop="OpeningNum">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入私信开口数" v-model="formEdit.OpeningNum"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="私信咨询成本" prop="ConsultRate">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入私信咨询成本" v-model="formEdit.ConsultRate"></el-input-number>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="MyEditForm-item">
                          <el-form-item label="私信开口成本" prop="OpeningRate">
                            <el-input-number :min="0" style="margin-top: 10px;" placeholder="请输入私信开口成本" v-model="formEdit.OpeningRate"></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" :loading="loadingB">确 定</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 {
        AccountList: [],
        EmployeeList:[],
        statusList:[
          {Name:'正常',Id:1},
          {Name:'限流',Id:2},
          {Name:'封号',Id:3},
          {Name:'重启',Id:4},
        ],
        layerDepartMentList:[],
        departMentList:[],
        getDepartmentMsg: {
          RB_Group_Id: "0",
          RB_Branch_Id: "-1",
          Status: "0"
        },
        getCompanyMsg: {
          RB_Group_Id: "0",
          Status: "0"
        },
        outerVisible: false,
        layerCompanyList: [],
        companyList: [],
        formEdit:{},
        errText:'',
        rankingTitle3:[
          '排名项目',
          '第一名',
          '第二名',
        ],
        rankingTitle:[
          '排名项目',
          '第一名',
          '第二名',
          '第三名',
        ],
        activeList:[
            {Name:'小红书',Id:1},
            {Name:'微博',Id:2},
            {Name:'抖音',Id:3},
        ],
        ModuleTypeList:[],
        PlatformTypeList:[],
        title:'小红书',
        total: 0,
        RateList:{},//排名率
        RankList:{},//排名
        dataList: [],
        primitiveData: [],
        totalObj:null,
        loading: false,
        loadingB: false,
        activeName: "1",
        rateData: [],
        msg: {
            PeriodsId: '',
            PlatformType: 1,
            ModuleTypeIds:[],
            DeptId: '0',
            // State: '0',
            UpdateBy: '0'
        },
        form:{
          AccountId: null,
          PeriodsId: '',
          PeriodsName: '',
        },
        rules: {
          PeriodsName: [{
            required: true,
            message: "请输入期数名称",
            trigger: "blur"
          }, ],
          AccountId: [{
            required: true,
            message: "请选择账户",
            trigger: "change"
          }, ],
          PeriodsId: [{
            required: true,
            message: "请选择期数",
            trigger: "change"
          }, ],
        },
        PeroidsList:[],
        dialogTableVisible: false,
        loadingText:'',
        dialogTableVisibleEdit: false,
        urlList:[
          {Name:'账户投放',url:'http://crm.oytour.com/ExportFile/账户投放模板.xls'},
        ],
        isPermission:false,//是否有操作权限
      };
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      if(userInfo.PostName=='总经理'  || 
        userInfo.PostName=='副总经理' ||
        userInfo.PostName=='技术开发'  || 
        userInfo.PostName=='开发经理'  || 
        userInfo.PostName=='票务经理'){
        this.isPermission = true
      }else{
        this.isPermission = false
      }
      this.getEnumerate()
      this.getDerpartMent()
      this.Employee()
    },
    methods: {
      // 获取业务员
      Employee() {
        let userInfo = this.getLocalStorage();
        let msg = {
          RB_Group_id: userInfo.RB_Group_id,
          BranchId: -1,
          DepartmentId: 0,
          PostId: 0,
          IsLeave: 0,
        };
        this.apipost2(
          "admin_get_EmployeeGetList",
          msg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.EmployeeList = res.data.data;
            } else {
            }
          },
          (err) => {}
        );
      },
      getDerpartMent() {
        this.getDepartmentMsg = {
          RB_Branch_Id: "1245",
          RB_Group_Id: "2",
          Status: "0"
        }
        //获取部门
        this.apipost2(
          "admin_get_DepartmentGetList",
          this.getDepartmentMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.departMentList = res.data.data
              return
              if (this.outerVisible) {
                this.layerDepartMentList = res.data.data;
              } else {
                res.data.data.forEach(item=>{
                  if(item.DepartmentName.indexOf('引流')!=-1){
                    this.departMentList.push(item)
                  }
                })
              }
            } else {}
          },
          err => {}
        );
      },
      // 获取公司
      getCompany() {
        this.apipost2(
          "admin_get_BranchGetList",
          this.getCompanyMsg,
          res => {
            if (res.data.resultCode == 1) {
              if (this.outerVisible) {
                this.layerCompanyList = res.data.data;
              } else {
                this.companyList = res.data.data;
              }
            } else {}
          },
          err => {}
        );
      },
      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/DelPutInPeriodsDetial', 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))
          delete this.formEdit.AccountName
          delete this.formEdit.EmpName
          delete this.formEdit.State
          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 = this.formEdit
          this.loadingB = true
          this.apipost('/api/IntroduceFlowStat/SetPutInPeriodsDetial',datas, res=>{
              if (res.data.resultCode == 1) {
                  this.dialogTableVisibleEdit = false;
                  this.init()
                  this.resetForm("form");
                  this.$message.success(res.data.message)
                  
              } else {
                  this.$message.error(res.data.message)
              }
              this.loadingB = false
          })
      },
      closedDialogEdit(){
        this.dialogTableVisibleEdit = false
      },
      closedDialog() {
        this.dialogTableVisible = false
        this.resetForm('form')
      },
      //导入引流汇总
      UploadClue(file) {
        this.errText = ''
        if(this.form.AccountId==''||!this.form.AccountId){
          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,
          AccountId: this.form.AccountId,
          PeriodsId: this.form.PeriodsId?this.form.PeriodsId:0,
          PeriodsName: this.form.PeriodsName,
        };
        this.loadingB=true;
        this.loadingText="正在上传文件,请稍后...";
        this.UploadFlowStat('/api/Upload/UploadPutInFlowStat',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);
          }
        });
      },
      resetForm(formName) { // 重置表单
            this.form =  {}
            this.$refs[formName].resetFields();
        },
        getEnumerate(){
            // 期数下拉
            this.apipost(
                "/api/IntroduceFlowStat/GetPutInPeriodsList",{},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) => {
            
            }
            );
            // 账户
            this.apipost(
            "/api/IntroduceFlowStat/GetFlowAccountDropList",{
                RB_Group_Id: 2,
                State: 1
            },
            (res) => {
                this.AccountList = 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/GetPutInStatList",
          {
            PeriodsId: this.msg.PeriodsId,
            PlatformType: this.msg.PlatformType,
            ModuleTypeIds: EmpIds.join(',')!==''?EmpIds.join(','):'',
            DeptId: this.msg.DeptId,
            // State: this.msg.State,
            UpdateBy: this.msg.UpdateBy
          },
          (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},
                    {Name:'重启',Id:4},
                  ]
                });
            };
            addList(datas);
            this.dataList = datas
          },
          (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
            }
          })
          text = '账户投放'+ '-' + PeriodsName
          
          this.downloadHandler(
              "/api/IntroduceFlowStat/DownLoadPutInStat",
              text
            );
        }
      },
      // 导出
      downloadHandler(url, name) {
        this.GetLocalFile(url, {
          PeriodsId: this.msg.PeriodsId,
          PlatformType: this.msg.PlatformType,
          ModuleTypeIds:this.msg.ModuleTypeIds?this.msg.ModuleTypeIds.join(','):'',
          DeptId: this.msg.DeptId,
          // State: this.msg.State,
          UpdateBy: this.msg.UpdateBy
        }, `${name}.xls`, (res) => {
          this.$message({
            message: "导出成功",
            type: "success",
          });
          
        });
      },
    },
  };
  </script>
  <style scoped>
  @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;
  }
  /deep/.el-input-number__decrease,/deep/.el-input-number__increase{
    border: 0 !important;
  }
  </style>
  