<template>
  <div>
    <p class="honor-index-title">
      Hi，亲爱的
      <span v-if="manager_info.studio_name||manager_info.department_name">
        <span style="color:#4B97E4"><span v-if="manager_info.studio_name">{{manager_info.studio_name}}</span> <span v-if="!!manager_info.department_name">- {{manager_info.department_name}}</span></span> 的
      </span>
      <span style="color:#FF8E32"><span v-if='manager_info.honor_name'>{{manager_info.honor_name}}</span><span v-if="manager_info.honor_name&&username">-</span>{{username}}</span> 同学
    </p>
    <div class="right_con pad_TB_6040" style="box-shadow:3px 4px 13px 0px rgba(185,185,185,0.17);">
      <div class="fl" style="width:33%;display:inline;">
        <div class="fl">
          <uploadAvatar class="uploadavatar" title="上传头像" @newAvatar='newAvatar'></uploadAvatar>
          <div class="userimg" title="上传头像">
            <img :src="manager_info.avatar||startIcon" alt=''>
          </div>
          <img src="../../../static/image/bg_lever.png" alt class="bg_lever">
          <p class="honor-rank">{{manager_info.honor_name}}</p>
        </div>
        <div class="fl honor-left-info">
          <div class="clear">
            <p class="first">
              <span>￥</span>
              {{Number(yesterday_num)/100}}
            </p>
            <p class="second">昨日业绩</p>
          </div>
          <div style="margin-left:12px">
            <p class="first">
              <span>￥</span>
              {{Number(month_num)/100}}
            </p>
            <p class="second">本月业绩</p>
          </div>
          <div style="margin-top:15px">
            <p class="first">
              <span>￥</span>
              {{Number(total_num)/100}}
            </p>
            <p class="second">累计业绩</p>
          </div>
        </div>
      </div>
      <div class="fl right_bor"></div>
      <div class="fl" style="width:28%">
        <div class="fl honor-index-info">
          <p class="first">{{manager_info.total_honor_num||0}}</p>
          <p class="second">我的荣誉值</p>
          <p class="third">
            （已超过
            <span>{{manager_info.exceed||0}}</span> 用户）
          </p>
        </div>
        <div class="fl honor-index-middle-info">
          <p>
            已使用：
            <span>{{manager_info.use_honor_num||0}}</span>
          </p>
          <p>
            未使用：
            <span>{{manager_info.current_honor_num||0}}</span>
          </p>
          <p>
            升级还需：
            <span>{{manager_info.need_honor_num||0}}</span>
          </p>
        </div>
      </div>
      <div class="fl right_bor"></div>
      <div class="fl" style="width:35%">
        <Tabs v-model="toggle_name" id="toggle_honor">
          <TabPane label="已获得特权" name="name1">
            <Button class="honor-index-look-more" @click="intoMorePower('power_apply')">查看更多+</Button>
            <Carousel :height="100" arrow="always" dots="none" id="honorpower">
              <div v-if='privilege.length'>
                <CarouselItem style="height:130px" v-for="(item,index) in privilege" :key="'item'+index">
                  <div class="demo-carousel" >
                    <div class="power_item" v-for="(it,ix) in item" :key="'it'+ix">
                      <img :src="it.icon_url" alt>
                      <p>{{it.title}}</p>
                    </div>
                  </div>
                </CarouselItem> 
              </div>
              <div v-else>
                <CarouselItem style="height:130px;text-align:center;padding-top:60px">
                  <div>暂无数据</div>
                </CarouselItem>
              </div>
            </Carousel>
          </TabPane>
          <TabPane label="即将获得特权" name="name2">
            <Button class="honor-index-look-more" @click="intoMorePower('power_apply')">查看更多+</Button>
            <Carousel :height="100" arrow="always" dots="none" id="honorpower">
              <div v-if="next_privilege.length">
                <CarouselItem style="height:130px" v-for="(item,index) in next_privilege" :key="'item'+index">
                <div class="demo-carousel">
                  <div class="power_item" v-for="(it,ix) in item" :key="'it'+ix">
                    <img :src="it.icon_url" alt>
                    <p>{{it.title}}</p>
                  </div>
                </div>
              </CarouselItem>
              </div>
              <div v-else>
                <CarouselItem style="height:130px;text-align:center;padding-top:60px">
                  <div>暂无数据</div>
                </CarouselItem>
              </div>
            </Carousel>
          </TabPane>
        </Tabs>
      </div>
      <div class="clear"></div>
    </div>
    <div class="bangdan">
      <div class="fl one">
        <div class="divheader">
          <img src="../../../static/image/honorbag.png" alt>
          <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 class="third-cell">状态</div>
          </div>
          <div class="table-con-item clear" v-for="(item,index) in welfare" :key="'im'+index">
            <div class="first-cell">{{item.required}}</div>
            <div class="second-cell colorFF994A">{{item.name}}</div>
            <div class="third-cell">可申请</div>
            <div class="clear"></div>
          </div>
        </div>
        <div v-else>
          <p style="margin-top:110px;text-align:center;color:#808f9d">暂无数据</p>
        </div>
      </div>
      <div class="fl two">
        <div class="divheader">
          <img src="../../../static/image/honorstar.png" alt>
          <span>星之榜</span>
        </div>
        <div class="honor-bddiv">
          <div class="fl yesterday-div">
            <div v-if="star_info.yesterday_star">
              <div class="border-image-div">
                <img style="width:60px;height:60px;border-radius:50%;" :src="star_info.yesterday_star.logo||startIcon" alt=''>
              </div>
              <div style="margin:0 auto;position:relative;top:-10px">
                <img src="../../../static/image/yesterdaybd.png" alt>
                <p class="honor-yeji-text">业绩</p>
                <p class="honor-yeji-num">{{star_info.yesterday_star.total_amount/100}}</p>
                <p class="honor-yeji-name">{{star_info.yesterday_star.name}}</p>
              </div>
            </div>
            <div v-else> &nbsp;</div>
          </div>
          <div class="fl honor-bddiv-fgx"></div>
          <div class="fl week-div">
            <div v-if="star_info.week_star">
              <div class="border-image-div">
                <img style="width:60px;height:60px;border-radius:50%;" :src="star_info.week_star.logo||startIcon" alt=''>
              </div>
              <div style="margin:0 auto;position:relative;top:-10px">
                <img src="../../../static/image/weekbd.png" alt>
                <p class="honor-yeji-text">业绩</p>
                <p class="honor-yeji-num">{{star_info.week_star.total_amount/100}}</p>
                <p class="honor-yeji-name">{{star_info.week_star.name}}</p>
              </div>
            </div>
            <div v-else> &nbsp;</div>
          </div>
          <div class="fl honor-bddiv-fgx"></div>
          <div class="fl money-div">
            <div v-if="star_info.month_star">
              <div class="border-image-div">
                <img style="width:60px;height:60px;border-radius:50%;" :src="star_info.month_star.logo||startIcon" alt=''>
              </div>
              <div style="margin:0 auto;position:relative;top:-10px">
                <img src="../../../static/image/monthbd.png" alt>
                <p class="honor-yeji-text">业绩</p>
                <p class="honor-yeji-num">{{star_info.month_star.total_amount/100}}</p>
                <p class="honor-yeji-name">{{star_info.month_star.name}}</p>
              </div>
            </div>
            <div v-else> &nbsp;</div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="fr three">
        <div class="divheader">
          <img src="../../../static/image/honornotice.png" alt style="top:0px">
          <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 class="clear"></div>
    </div>
    <Modal v-model="FirstLoginModal" :title="modalTitle" id="login_new_modal" class-name="vertical-center-modal" :width="776">
      <div class="nmodal_con" id="data_index_html_con" style="height:340px;overflow:auto">
        <p v-html="modal_con"></p>
      </div>
      <div class="modal_footer">
        <p class="fl">上一篇：<span class="lasttitle" @click="intoNewInfo(-1,lastTitle)">{{lastTitle}}</span></p>
        <p class="fr">下一篇：<span class="nexttitle" @click="intoNewInfo(1,nextTitle)">{{nextTitle}}</span></p>
      </div>
    </Modal>
  </div>
</template>
<script>
import uploadAvatar from "@@/base/upload_avatar";
import { getStore,setStore } from "@/utils/utils";
import { mapState } from "vuex";
export default {
  name: "data_index",
  components: { uploadAvatar },
  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:{},
      },
      modalTitle:'',
      modal_con:'',
      lastTitle:'',
      curIndex:0,
      privilege: [],
      next_privilege: [],
      total_num: 0,
      yesterday_num: 0,
      month_num: 0,
      welfare:[],
      managerList:[],
      nextTitle:'',
      islisted:false,
      isdayed:false,
      isweeked:false,
      ismonthed:false,
    };
  },
  computed: {
    username() {
      return getStore("userInfo").nickname;
    },
    ...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) {
          this.manager_info = data.data.manager_info;
          for (let i of data.data.manager_info.achievements.total_achievements) {
            this.total_num += Number(i.total_amount);
          }
          for (let i of data.data.manager_info.achievements.month_achievements) {
            this.month_num += Number(i.total_amount);
          }
          for (let i of data.data.manager_info.achievements.yesterday_achievements) {
            this.yesterday_num += Number(i.total_amount);
          }
          this.getThreeData(data.data.manager_info.privilege||[])
          this.getThreeDatas(data.data.manager_info.next_privilege||[])
          this.welfare=data.data.welfare
          this.managerList=data.data.managerList
          this.islisted=true
        }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.code==200){
          this.star_info.yesterday_star=data.data.lists.length?data.data.lists[0]:''
          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.code==200){
          this.star_info.week_star=data.data.lists.length?data.data.lists[0]:''
          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.code==200){
          this.star_info.month_star=data.data.lists.length?data.data.lists[0]:''
          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:''})
        }
      })
    },
  },
  created() {
    //this.getSiteInfo()
    this.getHonorIndex();
    this.getTheDayList();
    this.getTheWeekList();
    this.getTheMonthList();
    if(this.isFirstLogin){
      this.getNewsInfo()
    }
  }
};
</script>
<style>
.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
}
</style>


