<template>
  <div>
    <!-- 第一部分 -->
    <div class="indexContainer">
      <div class="userDetail">
        <div class="userDetail-top">
          <div class="userDetail-info">
            <div class="avatarBox fl">
              <uploadAvatar class="uploadavatar" title="上传头像" @newAvatar='newAvatar'></uploadAvatar>
              <div class="userimg" title="上传头像">
                <img :src="manager_info.avatar"  onerror="this.src='../../../static/image/usericon.png'"   alt=''>
              </div>
            </div>
            <div class="welcomeText">
              <p class="welcomeContent">欢迎您回来！
                <span class="welcomeText-name">
                  <!-- <span v-if='manager_info.honor_name'>{{manager_info.honor_name}}</span> -->
                  <span >{{username}}</span>
                </span>
              </p>
              <div class="levelImg">
                <div class="togetherShow">
                  <img src="../../../static/image/icon_olg.png" alt="" class="loganImg">
                  <img src="../../../static/image/icon_olg.png" alt="" class="loganImg">
                  <img src="../../../static/image/icon_olg.png" alt="" class="loganImg">
                  <span class="showDayText">您已经奋斗 <span class="dayNum"> {{manager_info.entry_day}} </span> 天啦！加油！！</span>
                </div>
              </div>
              <div class="togetherShow">
                <img src="../../../static/image/icon_good.png" alt="" class="loganImg">
                <span class="encourageText">{{site_info.add_oil}}</span>
              </div>
            </div>
            <div class="honourValue">
              <p class="userNumber">{{manager_info.total_honor_num||0}} <span class="overUser">（已超过{{manager_info.exceed||0}}个用户）</span></p>
              <p class="owner">我的荣誉值</p>
            </div>
          </div>
        </div>
        <div  class="userDetail-bottom">
          <div class="levelUsedBox clearfix">
            <div class="fl levelUsed">
              <p>已使用</p>
              <p class="countNumber">{{manager_info.use_honor_num||0}}</p>
              <div class="fengexian"></div>
            </div>
            
            <div class="fl levelUsed">
              <p>未使用</p>
              <p class="countNumber">{{manager_info.current_honor_num||0}}</p>
              <div class="fengexian"></div>
            </div>
            <div class="fl levelUsed">
              <p>升级还需</p>
              <p class="countNumber">{{manager_info.need_honor_num||0}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="achievement">
        <p>累计业绩：</p>
        <div class="totalBox">
          <div class="totalAchievement"><span style="font-size:14px">¥</span> {{total_num}}</div>
        </div>
        <div class="clear"></div>
        <div style="position:relative">
          <div class="fl" style="width:50%;padding-top:20px;color:#999">
            <p>昨日业绩：</p>
            <p class="achievementList"><span style="font-size:14px"> ¥ </span><span>{{yesterday_num}}</span></p>
          </div>
          <div class="fengexianTwo"></div>
          <div class="fl" style="width:50%;padding-top:20px;color:#999;padding-left:30px">
            <p>本月业绩：</p>
            <p class="achievementList"><span style="font-size:14px"> ¥ </span> <span>{{month_num}}</span></p>
          </div>
        </div>
        <div>
          
        </div>
      </div>
      <div class="rank" v-if="isAdmin == 1">
        <div class="fl starTitle">
          <img src="../../assets/image/icon_titel_star.png" alt="">
        </div>
        <div class="starRank">
          <div class="lastBox" style="width:33.33%">
            <div class="lastDay">
              <img src="../../assets/image/boder_zrzx.png" alt="" class="borderDayImg">
              <img src="../../assets/image/zrzx.png" alt="" class="crownImg">
              <img :src="star_info.yesterday_star.logo ? star_info.yesterday_star.logo :startIcon" alt="" class="defaultPerson">
            </div>
            <p class="rankName">{{star_info.yesterday_star.manager_name}}</p>
            <p class="totalRankNum">{{star_info.yesterday_star.recharge_pay_sum}}</p>
          </div>
          <div class="weekBox" style="width:33.33%">
              <div class="lastDay">
                <img src="../../assets/image/zzx.png" alt="" class="borderDayImg">
                <img src="../../assets/image/boder_zzx.png" alt="" class="crownImg">
                <img :src="star_info.week_star.logo? star_info.week_star.logo: startIcon" alt="" class="defaultPerson">
              </div>
              <p class="rankName">{{star_info.week_star.manager_name}}</p>
              <p class="totalRankNum">{{star_info.week_star.recharge_pay_sum}}</p>
          </div>
          <div class="monthBox" style="width:33.33%">
                <div class="lastDay">
                  <img src="../../assets/image/yzx.png" alt="" class="borderDayImg">
                  <img src="../../assets/image/boder_yzx.png" alt="" class="crownImg">
                  <img :src="star_info.month_star.logo?star_info.month_star.logo :startIcon" alt="" class="defaultPerson">
                </div>
                <p class="rankName">{{star_info.month_star.manager_name}}</p>
                <p class="totalRankNum">{{star_info.month_star.recharge_pay_sum}}</p>
          </div>
        </div>
      </div>
      <div class="rank honorBox" v-else>
        <Button class="honor-index-look-more" @click="intoMorePower('power_apply')">更多&gt;</Button>
        <Tabs v-model="toggle_name" id="toggle_honor">
          <TabPane label="已获得特权" name="name1">
            <div class="honorPower">
              <div class="honorList" v-if="privilege.length">
                <div class="honorItem" v-for="(item,index) in privilege" :key="'item'+index">
                  <div class="honorCell">【{{item.type_name}}】</div>
                  <div class="honorCell">获得 <span>{{item.title}}</span></div>
                  <div class="honorCell">{{item.status}}</div>
                </div>
              </div>
              <div class="honorEmpty" v-else>
                <div>暂无数据</div>
              </div>
            </div>
          </TabPane>
          <TabPane label="即将获得特权" name="name2">
            <div class="honorPower">
              <div class="honorList" v-if="next_privilege.length">
                <div class="honorItem" v-for="(item,index) in next_privilege" :key="'item'+index">
                  <div class="honorCell">【{{item.type_name}}】</div>
                  <div class="honorCell">{{item.title}}</div>
                  <div class="honorCell" style=" cursor: pointer;" @click="goToApply">去申请&gt;</div>
                </div>
              </div>
              <div class="honorEmpty" v-else>
                <div>暂无数据</div>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
    </div>
    <!-- 中间部分 -->
    <div class="indexCenterBox">
      <div class="centerBoxSummary">
        <div class="summaryEach">
          <div class="fl summaryIcon">
            <img src="../../../static/image/icon_jrsj.png" alt="">
          </div>
          <div class="fl">
            <p class="summary-title">今日数据</p>
            <p class="xiabiao"></p>
            <div>
              <span class="summaryDetail">新增注册</span><span class="summaryNum">{{todayData.register_count}}</span>
            </div>
            <div>
              <span class="summaryDetail">注册IP数</span><span class="summaryNum">{{todayData.register_ip_count}}</span>
            </div>
            <div>
              <span class="summaryDetail">付费用户</span><span class="summaryNum">{{todayData.recharge_count}}</span>
            </div>
            <div>
              <span class="summaryDetailRecharge">充值金额</span><span class="summaryNum">￥{{this.numberFormat(todayData.recharge_pay_sum)}}</span>
            </div>
          </div>
      </div>
       <div class="summaryEach">
          <div class="fl summaryIcon">
            <img src="../../../static/image/icon_zrsj.png" alt="">
          </div>
          <div class="fl">
            <p class="summary-title">昨日数据</p>
            <p class="xiabiao"></p>
            <div>
              <span class="summaryDetail">新增注册</span><span class="summaryNum">{{yesterdayData.register_count}}</span>
            </div>
            <div>
              <span class="summaryDetail">注册IP数</span><span class="summaryNum">{{yesterdayData.register_ip_count}}</span>
            </div>
            <div>
              <span class="summaryDetail">付费用户</span><span class="summaryNum">{{yesterdayData.recharge_count}}</span>
            </div>
            <div>
              <span class="summaryDetailRecharge">充值金额</span><span class="summaryNum">￥{{this.numberFormat(yesterdayData.recharge_pay_sum)}}</span>
            </div>
          </div>
      </div>
       <div class="summaryEach">
          <div class="fl summaryIcon">
            <img src="../../../static/image/icon_j7rsj.png" alt="">
          </div>
          <div class="fl">
            <p class="summary-title">近7日数据</p>
            <p class="xiabiao"></p>
            <div>
              <span class="summaryDetail">新增注册</span><span class="summaryNum">{{sevenData.register_count}}</span>
            </div>
            <div>
              <span class="summaryDetail">注册IP数</span><span class="summaryNum">{{sevenData.register_ip_count}}</span>
            </div>
            <div>
              <span class="summaryDetail">付费用户</span><span class="summaryNum">{{sevenData.recharge_count}}</span>
            </div>
            <div>
              <span class="summaryDetailRecharge">充值金额</span><span class="summaryNum">￥{{this.numberFormat(sevenData.recharge_pay_sum)}}</span>
            </div>
          </div>
      </div>
       <div class="summaryEach">
          <div class="fl summaryIcon">
            <img src="../../../static/image/icon_j30tsj.png" alt="">
          </div>
          <div class="fl">
            <p class="summary-title">近30天数据</p>
            <p class="xiabiao"></p>
            <div>
              <span class="summaryDetail">新增注册</span><span class="summaryNum">{{thirtyData.register_count}}</span>
            </div>
            <div>
              <span class="summaryDetail">注册IP数</span><span class="summaryNum">{{thirtyData.register_ip_count}}</span>
            </div>
            <div>
              <span class="summaryDetailRecharge">付费用户</span><span class="summaryNum">{{thirtyData.recharge_count}}</span>
            </div>
            <div>
              <span class="summaryDetailRecharge">充值金额</span><span class="summaryNum">￥{{this.numberFormat(thirtyData.recharge_pay_sum)}}</span>
            </div>
          </div>
      </div>
       <div class="summaryEach">
          <div class="fl summaryIcon">
            <img src="../../../static/image/icon_qbsj.png" alt="">
          </div>
          <div class="fl">
            <p class="summary-title">全部数据</p>
            <p class="xiabiao"></p>
            <div>
              <span class="summaryDetail">新增注册</span><span class="summaryNum">{{allData.register_count}}</span>
            </div>
            <div>
              <span class="summaryDetail">注册IP数</span><span class="summaryNum">{{allData.register_ip_count}}</span>
            </div>
            <div>
              <span class="summaryDetailRecharge">付费用户</span><span class="summaryNum">{{allData.recharge_count}}</span>
            </div>
            <div>
              <span class="summaryDetailRecharge">充值金额</span><span class="summaryNum">￥{{this.numberFormat(allData.recharge_pay_sum)}}</span>
            </div>
          </div>
      </div>
      </div>
    </div>
    <!-- 下面的部分 -->
    <div class="indexBottomContainer" v-if="isAdmin == 1">
      <i class="recommendIcon"></i>
      <div class="headerSearch clearfix">
        <div class="fl">
         <span :class="[{tabItem:true },this.tabNumber == 1? 'current':'']"  id="shouyou" @click="changeShouyouTab(1)">手游</span>
         <span :class="[{tabItem:true },this.tabNumber == 2? 'current':'']" id="five" @click="changeShouyouTab(2)">H5</span>
         <span :class="[{tabItem:true },this.tabNumber == 3? 'current':'']"  id="bt" @click="changeShouyouTab(3)">页游</span>
         <!-- <a href="https://wpa.qq.com/msgrd?v=3&uin=3002905211&site=qq&menu=yes" target="_blank" class="advertisementIcon" ></a> -->
        </div>
         <a href="https://wpa.qq.com/msgrd?v=3&uin=3002905211&site=qq&menu=yes" target="_blank" class="advertisementBox" >
            <span style="margin-right:18px">广告位仅超管可见</span>
            <span>招租QQ：3002905211</span>
         </a>
       
      </div>
      <template v-if="this.tabNumber === 1">
          <div class="rightChangeDataClick">
            <div class="iconInputBox">
                <Input placeholder="请输入游戏名称" v-model="gameSearch.game_name" @on-enter="getSortListData(1)">
                    <Icon type="ios-search" slot="suffix" @click="getSortListData(1)" />
                </Input>
                <i class="leftIcon" @click="backToData(1)"></i>
                <!-- <i :class="[{rightIcon:true}, showNextPage? '':'diabledIcon']" @click="goToNextData(1)" ></i> -->
                <i class="rightIcon" @click="goToNextData(1)" v-if="this.sortList.length > 10"></i>
            </div>
          </div>
        <div class="sortDetailBox" id="shouyouSortBox">
          <div class="sortListBox">
            <div class="sortListItem" v-for="item in this.sortList" :key="item.id" @click="selectGame(item)">
                  <div class="sortListContent">
                      <div class="sortPic">
                      <img :src="item.icon" alt="">
                    </div>
                    <div class="sortContent-title">
                      <p class="title-name">{{item.title}}</p>
                      <p>
                        <img src="../../../static/image/icon_android.png" alt="" v-if="item.sdk_version == 1">
                        <img src="../../../static/image/icon_iphone.png" alt="" v-else>
                        <span> | </span>
                        <span> {{item.type_name}}</span>
                      </p>
                      <!-- <p>{{item.gameFrom}}</p> -->
                      <p v-if="item.ratio > 0 "><span>分成比例：</span><span>{{item.ratio}}%</span></p>
                    </div>
                    <template>
                    <!-- <div class="uploadRight">
                        <button class="applyBtnIndex">申请</button>
                    </div> -->
                    </template>
                  </div>
              </div>
          </div>
      </div>
      </template>
      <template v-else-if="this.tabNumber === 2">
         <div class="rightChangeDataClick">
            <div class="iconInputBox">
                <Input placeholder="请输入游戏名称" v-model="this.gameSearch.game_name" @on-enter="getSortListData(2)">
                <Icon type="ios-search" slot="suffix" @click="getSortListData(2)"/>
                </Input>
                  <i class="leftIcon" @click="backToData(2)"></i>
                <i class="rightIcon" @click="goToNextData(2)" v-if="this.fiveGameList.length > 10"></i>
                <!-- <i :class="[{rightIcon:true}, showNextPage? '':'diabledIcon']" @click="goToNextData(2)"></i> -->
            </div>
          </div>
        <div class="sortDetailBox" id="fiveSortBox">
          <div class="sortListBox">
            <div class="sortListItem" v-for="item in this.fiveGameList" :key="item.id" @click="selectGame(item)">
                  <div class="sortListContent">
                      <div class="sortPic">
                       <img :src="item.icon" alt="">
                    </div>
                    <div class="sortContent-title">
                      <p class="title-name">{{item.title}}</p>
                      <p>
                        <img src="../../../static/image/icon_H5.png" alt="">
                        <span> | </span>
                        <span> {{item.type_name}}</span>
                      </p>
                      <!-- <p>{{item.gameFrom}}</p> -->
                      <p v-if="item.ratio > 0 "><span>分成比例：</span><span>{{item.ratio}}%</span></p>
                    </div>
                    <template>
                    </template>
                  </div>
              </div>
          </div>
      </div>
      </template>
      <template v-else>
         <div class="rightChangeDataClick">
            <div class="iconInputBox">
                <Input placeholder="请输入游戏名称" v-model="this.gameSearch.game_name" @on-enter="getSortListData(3)">
                <Icon type="ios-search" slot="suffix" @click="getSortListData(3)"/>
                </Input>
                <i class="leftIcon" @click="backToData(3)"></i>
                <i class="rightIcon" @click="goToNextData(3)" v-if="this.yyList.length > 10"></i>
                <!-- <i :class="[{rightIcon:true}, showNextPage? '':'diabledIcon']" @click="goToNextData(3)"></i> -->
            </div>
          </div>
        <div class="sortDetailBox" id="fiveSortBox">
          <div class="sortListBox">
            <div class="sortListItem" v-for="item in this.yyList" :key="item.id" @click="selectGame(item)">
                  <div class="sortListContent">
                      <div class="sortPic">
                      <img :src="item.icon" alt="">
                    </div>
                    <div class="sortContent-title">
                      <p class="title-name">{{item.title}}</p>
                      <p>
                        <img src="../../../static/image/icon_yy.png" alt="" v-if="item.sdk_version == 4">
                        <span> | </span>
                        <span> {{item.type_name}}</span>
                      </p>
                      <!-- <p>{{item.gameFrom}}</p> -->
                      <p v-if="item.ratio > 0 "><span>分成比例：</span><span>{{item.ratio}}%</span></p>
                    </div>
                    <template>
                    </template>
                  </div>
              </div>
          </div>
      </div>
      </template>
    </div>
    <div class="bangdan" v-else>
      <div class="one">
        <div class="divheader">
          <span>公司福利</span>
        </div>
        <div class="divcon" v-if="!!welfare.length">
          <div class="table-header">
            <div class="first-cell">指标</div>
            <div class="second-cell">福利</div>
          </div>
          <div class="table-con-item" v-for="(item,index) in welfare" :key="'im'+index">
            <div class="first-cell">{{item.required}}</div>
            <div class="second-cell">{{item.name}}</div>
          </div>
        </div>
        <div v-else>
          <p style="margin-top:110px;text-align:center;color:#808f9d">暂无数据</p>
        </div>
      </div>
      <div class="two">
        <div class="divheader">
          <img class="image" src="../../assets/image/icon_titel_staryg.png" alt="">
        </div>
        <div class="starRank">
          <div class="lastBox" style="width:33.33%">
            <div class="lastDay">
              <img src="../../assets/image/boder_zrzx.png" alt="" class="borderDayImg">
              <img src="../../assets/image/zrzx.png" alt="" class="crownImg">
              <img :src="star_info.yesterday_star.logo?star_info.yesterday_star.logo:startIcon" alt="" class="defaultPerson">
            </div>
            <p class="rankName">{{star_info.yesterday_star.manager_name}}</p>
            <p class="totalRankNum">{{star_info.yesterday_star.recharge_pay_sum}}</p>
          </div>
          <div class="weekBox" style="width:33.33%">
              <div class="lastDay">
                <img src="../../assets/image/zzx.png" alt="" class="borderDayImg">
                <img src="../../assets/image/boder_zzx.png" alt="" class="crownImg">
                <img :src="star_info.week_star.logo?star_info.week_star.logo:startIcon" alt="" class="defaultPerson">
              </div>
              <p class="rankName">{{star_info.week_star.manager_name}}</p>
              <p class="totalRankNum">{{star_info.week_star.recharge_pay_sum}}</p>
          </div>
          <div class="monthBox" style="width:33.33%">
                <div class="lastDay">
                  <img src="../../assets/image/yzx.png" alt="" class="borderDayImg">
                  <img src="../../assets/image/boder_yzx.png" alt="" class="crownImg">
                  <img :src="star_info.month_star.logo?star_info.month_star.logo:startIcon" alt="" class="defaultPerson">
                </div>
                <p class="rankName">{{star_info.month_star.manager_name}}</p>
                <p class="totalRankNum">{{star_info.month_star.recharge_pay_sum}}</p>
          </div>
        </div>
      </div>
      <div class="three">
        <div class="divheader">
          <span>建议反馈</span>
        </div>
        <div class="honor-notice-div" v-if="!!managerList.length">
            <div v-for="(item,index) in managerList" :key="'admin'+index">
              <div class="honor-notice-userinfo">
              <div class="fl">
                <div style="width:55px;height:55px;border-radius:50%;background-color:#e2e2e2">
                  <img style="width:55px;height:55px;border-radius:50%" :src="item.avatar_url||startIcon" alt>
                </div>
                <p class="honor-admin-name" style="margin-top:5px">{{item.name}}</p>
              </div>
              <div class="fl honor-notice-userinfo-con">
                <p class="yichu">{{item.duty||item.role_name}}</p>
                <p class="yichu">{{item.realname}}</p>
                <a style="color:#FF8E32;text-decoration:underline" :href="'http://wpa.qq.com/msgrd?v=3&uin='+ item.qq+ '&site=qq&menu=yes'" target="_blank"><p class="yichu">{{item.qq}}</p></a>
              </div>
            </div>
            <div class="fl" v-show="index==0" style="width:1px;height:70px;background:rgba(236,236,236,1);position:relative;top:50px;"></div>
            <div class="clear" v-show="index==1" style="width:60%;height:1px;background-color:rgba(236,236,236,1);margin:0 auto;position:relative;top:20px;"></div>
            <div class="fl" v-show="index==2" style="width:1px;height:70px;background:rgba(236,236,236,1);position:relative;top:20px;" ></div>
          </div>
        </div>
        <div v-else>
          <p style="margin-top:110px;text-align:center;color:#808f9d">暂无数据</p>
        </div>
      </div>
    </div>
    <!-- 管理员显示推广平台信息 -->
    <div class="platformBox" v-if="isAdmin == 1">
      <i class="platformIcon"></i>
      <div class="platformInfo">
        <div class="platform-item" v-for="item in this.platformList" :key="item.id" @click="contactService(item)">
          <img :src="item.icon" alt="" class="platformImg">
          <p class="platformName">{{item.name}}</p>
        </div>
      </div>
    </div>
    <index-service :name="title" :show.sync="show" :value="value"></index-service>
  </div>
</template>
<script>
import uploadAvatar from "@@/base/upload_avatar";
import indexService from '@@/base/index_service'
import { getStore,setStore } from "@/utils/utils";
import { mapState } from "vuex";
export default {
  name: "data_index",
  components: { uploadAvatar,indexService },
  data() {
    return {
      startIcon:'../../../static/image/usericon.png',
      FirstLoginModal:false,
      toggle_name: "name1",
      manager_info: {
        manager_id: null,
        studio_name: '',
        department_name: '',
        honor_name: '',
        honor_num: '',
        manager_name: '',
        avatar: '',
        total_honor_num: '',
        use_honor_num: '',
        current_honor_num: '',
        need_honor_num: '',
        exceed: '',
      },
      star_info:{
        yesterday_star:{
          
        },
        week_star:{},
        month_star:{},
      },
      site_info:{
        add_oil:''
      },
      modalTitle:'',
      modal_con:'',
      lastTitle:'',
      curIndex:0,
      privilege: [],
      next_privilege: [],
      total_num: 0.00,
      yesterday_num: 0.00,
      month_num: 0.00,
      welfare:[],
      managerList:[],
      nextTitle:'',
      islisted:false,
      isdayed:false,
      isweeked:false,
      ismonthed:false,
      tabNumber:1,
      sortList: [],
      fiveGameList:[],
      yyList:[],
      isAdmin:getStore("userInfo").is_administrators,
      todayData: {register: 0, pay: 0, recharge: 0, earnings: 0},
      yesterdayData: {register: 0, pay: 0, recharge: 0, earnings: 0},
      sevenData: {register: 0, pay: 0, recharge: 0, earnings: 0},
      thirtyData: {register: 0, pay: 0, recharge: 0, earnings: 0},
      allData: {register: 0, pay: 0, recharge: 0, earnings: 0},
      gamePage:1,
      gameSearch:{
        game_name:'',
        page:1,
        limit:10,
        sys_type:1
      },
      show:false,
      value:{},
      title:'',
      showNextPage:false,
      platformList:[]
    };
  },
  computed: {
    username() {
      const user = getStore('userInfo');
      // return user.nickname || user.name;
      return user.name
    },
    ...mapState({
      isFirstLogin: state => state.isFirstLogin
    }),
    isloaded(){
      return this.islisted&&this.isdayed&&this.isweeked&&this.ismonthed
    },
  },
  watch: {
    toggle_name(n) {
      if (n == "name2") {
        this.$nextTick(() => {
          $("#toggle_honor .ivu-tabs-ink-bar")[0].style.left = "40px";
        });
      } else {
        this.$nextTick(() => {
          $("#toggle_honor .ivu-tabs-ink-bar")[0].style.left = "0px";
        });
      }
    },
    'isloaded'(n){
      if(n){
        this.$store.commit("changeloading", false);
      }
    }
  },
  methods: {
    getHonorIndex() {
      this.islisted=false
      this.$store.commit("changeloading", true);
      this.$api.getHonorIndex().then(data => {
        if (data.code == 200) {
          setStore('showClear',data.data.is_truncate)
          this.manager_info = data.data.manager_info;
          this.total_num = this.numberFormat(data.data.manager_info.achievements.total_achievements)
           this.month_num = this.numberFormat(data.data.manager_info.achievements.month_achievements)
          this.yesterday_num = this.numberFormat(data.data.manager_info.achievements.yesterday_achievements)
          this.privilege = data.data.manager_info.privilege || [];
          this.next_privilege = data.data.manager_info.next_privilege || [];
          this.welfare=data.data.welfare
          this.managerList=data.data.managerList
          this.todayData = data.data.chart.today
          this.yesterdayData = data.data.chart.yesterday
          this.sevenData = data.data.chart.seven_day
          this.thirtyData = data.data.chart.thirty_day
          this.allData = data.data.chart.all
          this.islisted=true
          this.site_info = data.data.site_info
           
        }else{
          this.islisted=true
        }
      });
    },
    intoNewInfo(ix,title){
      if(title==='无'){return false}
      document.getElementById('data_index_html_con').scrollTop=0
      let index=Number(this.curIndex+ix)
      this.modalTitle=this.newsData[index].title
      this.modal_con=this.newsData[index].content
      this.lastTitle=index!==0?this.newsData[index-1].title:'无'
      this.nextTitle=index+1<=Number(this.newsData.length)-1?this.newsData[index+1].title:'无'
      this.curIndex=index
    },
    getNewsInfo(){
      this.$api.getDataNewsInfo({limit:10,page:1}).then(data =>{
        if(data.code==200){
          this.newsData=data.data
          if(!!this.newsData.length){
            this.FirstLoginModal=true
            this.modalTitle=this.newsData[0].title
            this.modal_con=this.newsData[0].content
            this.lastTitle='无'
            this.nextTitle=this.newsData[1].title
          }
        }
      })
    },
    getThreeData(data){
      if(!!data&&!!data.length){
        if(data.length>3){
          this.privilege.push(data.slice(0,3))
          data.splice(0,3)
          this.getThreeData(data)
        }else{
          this.privilege.push(data)
        }
      }else{
        this.privilege=[]
      }
    },
    getThreeDatas(data){
      if(!!data.length){
        if(data.length>3){
          this.next_privilege.push(data.slice(0,3))
          let d=data.splice(0,3)
          this.getThreeDatas(d)
        }else{
          this.next_privilege.push(data)
        }
      }else{
        this.next_privilege=[]
      }
    },
    newAvatar(url){
      this.manager_info.avatar=url
    },
    intoMorePower(n){
      this.$router.push({path:n})
    },
    // 昨日之星
    getTheDayList(){
      this.isdayed=false
      this.$store.commit("changeloading", true);
      this.$api.getTheDayList({limit:1}).then(data=>{
        if(data){
          if(data.lists.length > 0) {
            this.star_info.yesterday_star=data.lists[0]
          }else {
            this.star_info.yesterday_star = {}
          }
          
          this.isdayed=true
        }else{
          this.isdayed=true
        }
      })
    },
    getTheWeekList(){
      this.isweeked=false
      this.$store.commit("changeloading", true);
      this.$api.getTheWeekList({limit:1}).then(data=>{
        if(data){
          if(data.lists.length > 0 ) {
            this.star_info.week_star=data.lists[0]
          }else {
            this.star_info.week_star = {}
          }
          
          this.isweeked=true
        }else{
          this.isweeked=true
        }
      })
    },
    getTheMonthList(){
      this.ismonthed=false
      this.$store.commit("changeloading", true);
      this.$api.getTheMonthList({limit:1}).then(data=>{
        if(data){
          if(data.lists.length > 0) {
            this.star_info.month_star=data.lists[0]
          }else {
             this.star_info.month_star = {}
          }
          
          this.ismonthed=true
        }else{
          this.ismonthed=true
        }
      })
    },
    getSiteInfo(){
      this.$api.getSiteInfo().then(data => {
        if(data.code==200){
          setStore('logoIco',{logo:data.data.admin_logo_url,ico:data.data.admin_icon_url})
        }else{
          setStore('logoIco',{logo:'',ico:''})
        }
      })
    },
    // 获取下方游戏的数据
    getSortListData(e) {
      this.$store.commit("changeloading", true);
      this.$api.getIndexGame(this.gameSearch).then(response=>{
        if(response.code == 200) {
          this.$store.commit("changeloading", false);
          if(e == 1) {
            this.sortList = response.data
            // if(this.sortList.length > 10) {
            //   this.showNextPage = true
            // }
          }else if(e == 2) {
            this.fiveGameList = response.data
            //  if(this.fiveGameList.length > 10) {
            //   this.showNextPage = true
            // }
          }else {
            this.yyList =response.data
            // if(this.yyList.length > 10) {
            //   this.showNextPage = true
            // }
          }
          
        }else {
            this.$store.commit("changeloading", false);
            this.$Message.error(response.msg)
            return
        }
      })
    },
    // 切换下方tab
    changeShouyouTab(e){
      if(e == 1) {
        this.tabNumber = 1
        this.gameSearch.sys_type = 1
        this.getSortListData(1)
      }else if(e == 2) {
        this.tabNumber = 2
        this.gameSearch.sys_type = 2
        this.getSortListData(2)
      }else {
        this.tabNumber = 3
        this.gameSearch.sys_type = 3
        this.getSortListData(3)
      }
      
    },
    // 点击左边的图片
    backToData(e){
      if(this.gameSearch.page == 1) {
          if(e == 1) {
             this.getSortListData(1)
          }else if( e == 2 ) {
            this.getSortListData(2)
          }else {
            this.getSortListData(3)
          }
      }else {
        this.gameSearch.page --
         if(e == 1) {
             this.getSortListData(1)
          }else if( e == 2 ) {
            this.getSortListData(2)
          }else {
            this.getSortListData(3)
          }
      }
    },
    // 点击右边的图片
    goToNextData(e){
       this.gameSearch.page ++
      if(e == 1) {
        this.getSortListData(1)
      }else if(e == 2) {
        this.getSortListData(2)
      }else {
        this.getSortListData(3)
      }
      
      
    },
    getOverviewData () {
      this.$api.getOverviewData()
        .then(response => {
          if (response.code == 200) {
            for(let [key, value] of Object.entries(response.data)) {
              this[key + 'Data'] = value
            }
          }
        })
    },
    numberFormat(num) {
      return num.toFixed(2)
    },
    selectGame(e) {
      this.show = true
      this.value = {
        name: e.linkman,
        mobile: e.tel,
        qq: e.qq
      }
      this.title = e.title
      this.$api.setClickGameNum({id:e.id}).then(response => {
        if(response.code == 200) {
        }else {
          this.$Message.error(response.msg)
          return
        }
      })
    },
    goToApply(){
      this.$router.push('/power_apply')
    },
    //获取下方推荐平台的数据
    getPlatformList(){
      this.$api.getSystemPlatformList().then(response => {
        if(response.code == 200) {
          response.data.forEach(item => {
            if(item.is_recommend == 1) {
              this.platformList.push(item)
            }
          })
        }else {
          this.$Message.error(response.msg)
          return 
        }
      })
    },
    // 推广平台调客服
    contactService(e) {
      this.show = true
      this.value = {
        name: e.linkman,
        mobile: e.tel,
        qq: e.qq
      }
      this.title = e.title
    },
  },
  created() {
    //this.getSiteInfo()
    this.getHonorIndex();
    this.getTheDayList();
    this.getTheWeekList();
    this.getTheMonthList();
    this.getSortListData(1)
    this.getPlatformList()
    //this.getOverviewData()
    if(this.isFirstLogin){
      this.getNewsInfo()
    }
  }
};
</script>
<style lang="less" scoped>
.honor-bddiv .yesterday-div {
  width: 33%;
}
.honor-bddiv .week-div {
  width: 33%;
}
.honor-bddiv .money-div {
  width: 32%;
}
.yichu{
  width:80px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis
}
.indexContainer {
  display: flex;
  justify-content: space-around;
}
.userDetail {
  width: 30%;
  height: 253px;
  background: #FFFFFF;
  border-radius: 6px;
  margin-right: 26px;
}
.achievement {
  width: 33%;
  height: 253px;
  background: #FFFFFF;
  border-radius: 6px;
  margin-right: 26px;
  padding: 19px 0 0 18px;
}
.rank {
  width: 40%;
  height: 253px;
  background: #FFFFFF;
  border-radius: 6px;
}
.clearfix:after,.clearfix:before{
  content: "";
  display: table;
}
.clearfix:after{
  clear: both;
}
.clearfix{
  *zoom: 1;
}
.userDetail-info {
  padding: 34px 0 0 26px;
}
.avatarBox {
  margin-right: 24px;
}
.welcomeText-name {
  color: #444444;
  font-size:18px;
  font-weight: bold;
}
.welcomeContent {
  font-size: 16px;
  color: #444444;
}
.levelImg {
  margin-top: 8px;
  margin-bottom: 8px;
}
.userNumber {
  font-weight: bold;
  margin-left: 10px;
  margin-top: 10px;
  color: #FF7900;
  font-size: 18px;
}
.honourValue {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.overUser {
  font-size: 12px;
  color: #999999;
  font-weight: normal;
}
.owner {
  margin-right: 28px;
  margin-top: 10px;
  width: 94px;
  height: 22px;
  background-image: url('../../../static/image/image_honor.png');
  background-size: 100% 100%;
  color: #9B743A;
  text-align: center;
}
.levelUsedBox{
  margin-top: 20px;
  color: #999999;

}
.levelUsed {
  width: 33.333%;
  text-align: center;
  position: relative;
}
.countNumber {
  font-weight: bold;
  color: #333333;
  font-size: 18px;
  margin-top: 10px;
}
.fengexian {
  width: 1px;
  height: 48px;
  position: absolute;
  right: 0;
  top: 12px;
  background: #EAEEF7;
}
.totalBox {
  margin-left: 188px;
  margin-top: 20px;
}
.totalAchievement{
  font-size:22px;
  color:#FF7900;
}
.clear {
  width: 466px;
  height: 1px;
  background: #EAEEF7;
  margin-top: 40px;
}
.achievementList {
  margin-left: 65px;
  font-size: 18px;
  color: #FF7900;
  margin-top: 10px;
}
.fengexianTwo {
  position: absolute;
  left: 48%;
  top: 22px;
  background: #EAEEF7;
  width: 1px;
  height: 80px;
}
.starTitle {
  width: 50px;
  height: 253px;
  background: #F7F9FE;
  text-align: center;
  padding-top: 82px;
}
.starTitle img {
  width: 17px;
  height: 89px;
}
.starRank {
  display: flex;
  align-items: center;
}
.lastDay {
  position: relative;
  margin: 33px auto 0;
  width: 126px;
  height: 113px;
}
.borderDayImg {
  position: absolute;
  left: 0;
  top: 43px;
  z-index: 2;
}
.crownImg {
  position: absolute;
  left: 24px;
  top: -5px;
}
.defaultPerson {
  position: absolute;
  left: 29px;
  top: 22px;
  width: 55%;
}
.rankName {
  font-size: 16px;
  color: #444444;
  margin: 16px 0 19px 0;
  text-align: center;
}
.totalRankNum{
  font-size: 30px;
  color: #FF7900;
 text-align: center;
}
.indexCenterBox{
  width: 100%;
  height: 230px;
  background-color: #fff;
  border-radius: 6px;
  margin-top: 24px;
}
.centerBoxSummary {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.summaryEach {
  padding: 10px 0 0 24px;
  width: 25%;
}
.summaryIcon {
  margin-right: 21px;
}
.summary-title {
  color: #3B82FF
}
.xiabiao {
  width: 80px;
  height: 1px;
  background: #3B82FF;
  margin: 9px 0 10px 0;
}
.summaryDetail {
  margin-right: 50px;
  line-height: 35px;
}
.summaryDetailRecharge{
  margin-right: 45px;
  line-height: 35px;
}
.summaryNum {
  font-size: 16px;
  color: #FF7900;
}
.indexBottomContainer {
  width: 100%;
  height: 350px;
  background: #fff;
  border-radius: 6px;
  margin-top: 24px;
  position: relative;
}
.recommendIcon{
  width: 80px;
  height: 80px;
  display: inline-block;
  position: absolute;
  top: 0;
  left:0;
  background: url('../../../static/image/image_recommend.png') no-repeat;
}
.headerSearch {
  padding: 15px 0 0 90px;
}
.tabItem {
  display: inline-block;
  width: 40px;
  text-align: center;
  padding-bottom: 14px;
  margin-right: 43px;
  cursor: pointer;
}
.current {
   border-bottom: 2px solid #3B82FF;
   color:#3B82FF ;
}
.leftIcon{
  width: 12px;
  height: 12px;
  display: inline-block;
  background: url('../../../static/image/btn_syy.png') no-repeat;
  position: absolute;
  top: 10px;
  right: -27px;
}
.rightIcon {
  width: 12px;
  height: 12px;
  display: inline-block;
  background: url('../../../static/image/btn_xyy.png') no-repeat;
  position: absolute;
  top: 10px;
  right: -62px;
}
.sortDetailBox {
  margin: 19px 0 30px 18px;
}
.sortListBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.sortListItem {
  width: 311px;
  height: 120px;
  background: #FFFFFF;
  border: 1px solid #E9EDF6;
  box-shadow: 11px 9px 24px 0px rgba(217, 217, 217, 0.1);
  border-radius: 6px;
  margin-right: 17px;
  margin-bottom: 16px;
}
.sortListItem:hover {
  border: 1px solid #3B82FF;
  box-shadow: 11px 9px 24px 0px rgba(217, 217, 217, 0.2);
}
.sortListItem:hover  .uploadRight{
  display: block;
}
.sortPic {
  width: 86px;
  height: 86px;
  border-radius: 14px;
  margin: 18px 0 16px 14px;
}
.sortPic img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}
.sortListContent{
  display: flex;
  align-items: center;
}
.sortContent-title {
  color: #999;
  font-size: 13px;
  margin-left: 20px;
}
.sortContent-title img {
  vertical-align: middle;
}
.title-name {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  max-width: 105px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.uploadRight {
  display: none;
  margin-left: 20px;
  margin-top: 40px;
}
.downLoadIcon {
  width: 20px;
  height: 20px;
  display: block;
  background-image: url('../../../static/image/btn_download.png');
}
.goToPlayIcon{
  width: 20px;
  height: 20px;
  display: block;
  background-image: url('../../../static/image/btn_demo.png');
}
.downLoadText {
  font-size: 13px;
  color: #3B82FF;
}
</style>

<style scoped>
.honorBox {
  width: 37%;
  padding: 0 18px;
  position: relative;
}
#toggle_honor {
  width: 100%;
  position: relative;
}
.honor-index-look-more, 
.honor-index-look-more:hover {
  text-align: center;
  line-height: 18px;
  padding: 0;
  position: absolute;
  top: 9px;
  right: 18px;
  color: #3B82FF;
  border: none;
  cursor: pointer;
  z-index: 100;
}
.honorPower {
  width: 102%;
  height: 192px;
  overflow: hidden;
  overflow-y: auto;
}
.honorEmpty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.honorItem {
  width: 100%;
  height: 49px;
  background: #F8F9FB;
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.honorCell {
  padding-left: 20px;
}
.honorCell:nth-child(1) {
  width: 120px;
}
.honorCell:nth-child(2) {
  width: 332px;
}
.honorCell:nth-child(2) span{
  color: #FF7900;
}
.honorCell:nth-child(3) {
  color: #3B82FF;
}
</style>

<style scoped>
.bangdan {
  padding-top: 26px;
  display: flex;
  justify-content:space-around;
}
.bangdan .one,
.bangdan .two,
.bangdan .three {
  height: 348px;
  background: #FFFFFF;
  border-radius: 6px;
}
.bangdan .one {
  width: 30%;
  margin-right: 15px;
}
.bangdan .two {
  width: 40%;
  margin-right: 15px;
}
.bangdan .three {
  width: 30%;
}
.bangdan .divheader{
  height: 36px;
  font-size: 14px;
  color: #1C2B45; 
  font-weight: bold;
  line-height: 1;
  padding-top: 20px;
  padding-left: 18px;
}
.two .divheader {
  height: 60px;
  background: #F7F9FE;
  border-radius: 6px 6px 0px 0px;
  height: 60px;
  background: #F7F9FE;
  border-radius: 6px 6px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.one .divcon {
  padding: 18px 18px 0;
  font-size: 14px;
  color: #333333;
}
.one .table-header,
.one .table-con-item {
  width: 100%;
  display: flex;
  height: 36px;
  align-items: center;
  color: #999999;
}
.one .table-con-item {
  height: 48px;
  border-radius: 4px;
  background: #F8F9FB;
  margin-top: 12px;
}
.one .table-con-item:first-child {
  margin-top: 6px;
}
.one .first-cell{
  width: 165px;
  padding-left: 20px;
}
.one .second-cell {
  padding-left: 20px;
  width: 156px;
}
.one .third-cell {
  padding-left: 20px;
}
.one .table-con-item .second-cell {
  color: #F34E15;
}
.one .table-con-item .third-cell {
  color: #3B82FF;
}
.two .divheader .image {
  width: 78px;
  height: 25px;
  margin: 0 auto;
  display: block;
}
.applyBtnIndex {
    width: 50px;
    height: 30px;
    background: #3B82FF;
    border-radius: 4px;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
}
.rightChangeDataClick{
  position: absolute;
  right: 79px;
  top: 12px;
}
.iconInputBox{
  width: 100%;
  height: 100%;;
  position: relative;
}
.diabledIcon{
  cursor: not-allowed;
}
.platformBox{
  width: 100%;
  height: 150px;
  background: #FFFFFF;
  border-radius: 6px;
  position: relative;
  margin-top: 24px;
}
.platformIcon {
  display: inline-block;
  width: 80px;
  height: 80px;
   position: absolute;
  top: 0;
  left:0;
  background: url('../../../static/image/image_tgpt.png') no-repeat;
}
.platformInfo {
  display: flex;
  align-items: center;
  padding: 30px 0 30px 18px;
}
.platform-item{
  width: 16%;
  height: 90px;
  background: #F8F9FB;
  border: 1px solid #E9EDF6;
  border-radius: 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 27px;
}
.platformImg{
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0 17px 0 26px;
  background: #FFFFFF;
  box-shadow: 1px 1px 6px 0px rgba(153, 153, 153, 0.16);
  border-radius: 25px;
}
.platformName {
  font-size: 17px;
  color: #333;
  font-weight: bold;
}
.advertisementIcon{
  display: inline-block;
  width: 426px;
  height: 38px;
  background-image: url('../../../static/image/image_AD.png');
  background-size: 100% 100%;
  vertical-align: middle;
  cursor: pointer;
}
.advertisementBox {
  float: right;
  margin-right: 272px;
  color:#999;
}
.dayNum{
  color: #FF7900;
  font-size: 18px;
}
.showDayText {
  color: #666;
  font-size: 15px;
  margin-left: 4px;
}
.loganImg{
  margin-right: 6px;
}
.encourageText{
  color: #EC5F65;
  font-size: 14px;
  display: inline-block;
  width: 310px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.togetherShow {
  display:flex;
  align-items:center
}
</style>
