<template>
  <div class="wrapper">
      <div class="bg-box">
        <img style="width:100%;height:100%" src="@/assets/BG.png" alt="">
      </div>
      <div class="btn-box">
          <div class="left-box" @click="goRoom()">
              <img src="@/assets/btn2-2.png" alt="">
              <span>保存</span>
          </div>
          <div class="right-box" @click="goOpen()">
              <img src="@/assets/btn2.png" alt="">
              <span>获得装扮</span>
          </div>
      </div>
     
      <div class="zhan-box">
          <img class="zhanshi" src="@/assets/zhanshitai.png" alt="">
          <div class="zhanshi-box">
            <img class="zhanshi-box0" :src="reverseStatus ? activeImg : reverseImg" alt="">
          </div>
          <div class="new-box" @click="reverse">
            <img class="new" src="@/assets/fanzhuan.png" alt="">
            <span class="text">{{reverseStatus ? '背面' : '正面'}}</span>
          </div>
      </div>
      <div class="bottom-box" :style="windowHeight<=750 ? 'height: 200px;' : ''">
          <div class="tab-box">
              <div class="tab-title">
                  <div :class="curIndex == index ? 'tab-item' : 'tab-item1'" v-for="(item,index) in tabList"  :key="index" @click="tabChange(index)">
                    {{item.name}}
                  </div>
              </div>
              <div class="tab-content" :style="windowHeight<=750 ? 'height: 100px;' : ''" v-if="skinList.length>0">
                  <div v-for="(ele,i) in skinList" :key="i" class="coln">
                    <div class="circle">
                        <img  class="relations" :src="ele.img_1" alt="" @click="itemChange(ele,i)">
                    </div>
                    <img  class="relations1" v-if="active == ele.attire_id" src="@/assets/xuanzhong.png" alt="">
                    <span>{{ele.name}}</span>
                  </div>
              </div>

          </div>
      </div>
  </div>
</template>

<script>
import overlay from '@/components/Overlay.vue'
export default {
   components: {
       overlay
   },
   props: {},
   data() {
       return {
           show:false,
           newShow:true,
           tabList:[
               {name:'皮肤'},
               {name:'套装'}
           ],
           curIndex:0,
           roomList:[],
           skinList:[],
           active:0,
           reverseStatus:true,
           activeImg:'',
           reverseImg:'',
           windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
           windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
       };
   },
   watch: {
        windowHeight(val) {
            let that = this;
            console.log("实时屏幕高度：",val, that.windowHeight );
        },
        windowWidth(val) {
            let that = this;
            console.log("实时屏幕宽度：",val, that.windowHeight );
        }
   },
   computed: {},
   methods: {
       reverse(){
           this.reverseStatus = !this.reverseStatus
       },
       itemChange(ele,i){
           this.reverseStatus = true
           this.activeImg = ele.img_1
           this.reverseImg = ele.img_2
           this.active = ele.attire_id
       },
       tabChange(index){
           this.reverseStatus = true
           this.curIndex = index
           if(this.curIndex == 0 ){
                this.skinList = this.roomList[0].relations
           }else{
                this.skinList = this.roomList[1].relations
           }

       },
       goRoom(){
           if(!this.active){
               this.$toast.fail('请选择皮肤或套装')
               return
           }
           let data ={
               attire_ids:[this.active]
           }
            this.$api.postSaveAPI(data).then(res => {
                if(res.data.errno == 10000){
                    this.boxList = res.data.data
                    localStorage.setItem('active',JSON.stringify({id:this.active, activeImg:this.activeImg,}))
                    this.$api.getUserinfoAPI().then(res => {
                        if(res.data.errno == 10000){
                            if(res.data.data.status==1){
                                this.$router.push({
                                    path:'/verification',
                                })
                            }else{
                                localStorage.setItem('userinfo',JSON.stringify(res.data.data))
                                // 跳转到上传页
                                this.$router.push({
                                    path:'/save',
                                    // query: {id:this.active,activeImg:this.activeImg,}
                                })
                            }
                        }else if(res.data.errno == 20000){
                            this.$toast.fail('登录已失效,请重新登录！')
                            localStorage.removeItem('userinfo')
                            this.$router.push(
                                {path: '/'},
                            )
                        }else{
                            this.$toast.fail(res.data.errmsg)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }else if(res.data.errno == 20000){
                    this.$toast.fail('登录已失效,请重新登录！')
                    localStorage.removeItem('userinfo')
                    this.$router.push(
                        {path: '/'},
                    )
                }else{
                    this.$toast.fail(res.data.errmsg)
                }
                
            }).catch(err => {
                console.log(err)
            })

       },
       goOpen(){
           this.$router.push({
                path:'/giftBox',
                // query: {id:'1'}
            })
       },
        getRoomList(){
            this.$api.getRoomListAPI().then(res => {
                if(res.data.errno == 10000){
                    this.roomList = res.data.data
                    this.skinList = this.roomList[0].relations
                    //
                    this.roomList[0].relations.forEach(ele => {
                        if(ele.curr_save==1){
                            this.activeImg = ele.img_1
                            this.reverseImg = ele.img_2
                            this.active = ele.attire_id
                        }
                    });
                    this.roomList[1].relations.forEach(ele => {
                        if(ele.curr_save==1){
                            this.activeImg = ele.img_1
                            this.reverseImg = ele.img_2
                            this.active = ele.attire_id
                        }
                    });
                }else if(res.data.errno == 20000){
                    this.$toast.fail('登录已失效,请重新登录！')
                    localStorage.removeItem('userinfo')
                    this.$router.push(
                        {path: '/'},
                    )
                }else{
                    this.$toast.fail(res.data.errmsg)
                }
                
            }).catch(err => {
                console.log(err)
                return
            })
        },
       showClose(val){
           this.show = val
       },
       pop(){
           this.show = true
       },
       newPop(){
           this.newShow = true
       },
       newClone(){
           this.newShow = false
       }
   },
   created() {
       this.getRoomList()
   },
   mounted() {
        var that = this;
        that.windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        that.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
   }
};
</script>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    height: 100%;
    position: relative;
    .bg-box{
        position: absolute;
    }
    .zhan-box{
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 163px;
        .zhanshi{
            width: 688px;
            display: block;
            margin: 0 auto;
        }
        .zhanshi-box{
            width: 100%;
            position: absolute;
            top: 0;
            .zhanshi-box0{
                width: 620px;
                height: auto;
                margin: 0 auto;
                display: block;
            }
        }
        .new-box{
            top: 141px;
            right: 10px;
            position: absolute;
            .new{
                width: 50px;
                height: 50px;
                display: block;
            }
            .text{
                margin-top: 3px;
                display: block;
                font-size: 24px;
                font-weight: 800;
                color: #FFFFFF;
                width: 80px;
            }
            
        }
        
    }
    .btn-box{
        position: absolute;
        display: flex;
        justify-content: space-between;
        width: 618px;
        margin: 0 66px;
        top: 41px;
        .left-box{
            width: 300px;
            img{
                margin: 0 auto;
                display: block;
                width: 300px;
                height: 100px;
            }
            span{
                width: 300px;
                position: absolute;
                text-align: center;
                top: 23px;
                font-size: 36px;
                letter-spacing: 2px;
                font-weight: 800;
                color: #FFFFFF;
            }
        }
        .right-box{
            width: 300px;
            img{
                margin: 0 auto;
                display: block;
                width: 300px;
                height: 100px;
            }
            span{
                width: 300px;
                position: absolute;
                text-align: center;
                top: 23px;
                font-size: 36px;
                letter-spacing: 2px;
                font-weight: 800;
                color: #000000;
            }
        }
    }
    .new-pop{
        width: 640px;
        border-radius: 70px;
        text-align: center;
        background: rgba(0,0,0,.7);
        .content{
            padding-top: 50px;
            padding-bottom: 39px;
            width: 640px;
            background: #FFFFFF;
            border-radius: 70px;
            font-size: 40px;
            letter-spacing: 2px;
            font-weight: 800;
            color: #000000;
            .new-img{
                height: 660px;
                overflow: auto;
                margin: 39px auto;
                img{
                    width: 552px;
                    height: 660px;
                    background: #BFBFBF;
                }
            }
        }
        .new-clone{
            img{
                width: 66px;
                height: 136px;
            }
        }
    }
    .bottom-box{
        width: 750px;
        height: 580px;
        position: fixed;
        bottom: 0;
        z-index: 2;
        .tab-box{
            height: 100%;
            background: #181818;
            border-radius: 70px 70px 0px 0px;
            opacity: 1;
            border: 4px solid #FFFFFF;
            .tab-title{
                margin: 32px auto;
                width: 680px;
                height: 70px;
                border-radius: 35px 35px 35px 35px;
                opacity: 1;
                display: flex;
                position: relative;
                z-index: 7;
                .tab-item{
                    text-align: center;
                    font-size: 30px;
                    font-weight: 800;
                    color: #000000;
                    line-height: 70px;
                    width: 340px;
                    height: 70px;
                    background: #FFFFFF;
                    border-radius: 35px 35px 35px 35px;
                    opacity: 1;
                }
                .tab-item1{
                    text-align: center;
                    font-size: 30px;
                    font-weight: 800;
                    color: #FFFFFF;
                    line-height: 70px;
                    width: 340px;
                    height: 70px;
                    background: #000000;
                    border-radius: 35px 35px 35px 35px;
                    opacity: 1;
                }
            }
            .tab-content:after {
                content: "";
                width: 180px;
                height: 0px;
                visibility: hidden;
            }
            .tab-content::-webkit-scrollbar {/*滚动条整体样式*/
                    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }
            .tab-content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                    border-radius: 10px;
                    // -webkit-box-shadow: inset 0 0 5px #D0D0D0;
                    background: #D0D0D0;
                }
            .tab-content::-webkit-scrollbar-track {/*滚动条里面轨道*/
                    // -webkit-box-shadow: inset 0 0 5px #D0D0D0;
                    border-radius: 10px;
                    background: #181818;
                }

            .tab-content{
                height: 429px;
                overflow: auto;
                padding: 0px 80px;
                margin-bottom: 50px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .coln {
                    // height: 228px;
                    // margin-right: 12px;
                }
                .coln:nth-child(3n+3){
                    margin-right: 0 !important;
                }
                div{
                    margin-bottom: 20px;
                    position: relative;
                    .circle {
                        width: 178px;
                        height: 178px;
                        border-radius: 50%;
                        border: 1px solid #ffffff;
                    }
                    .relations{
                        width: 164px;
                        height: 164px;
                        margin: 7px 0 0 7px;
                        background: #FFFFFF;
                        opacity: 1;
                        border-radius: 50%;
                        display: block;
                    }
                    .relations1{
                        left: 1px;
                        top: 1px;
                        position: absolute;
                        z-index: 99;
                        width: 180px;
                        height: 180px;
                    }
                    // img{
                    //     width: 180px;
                    // }
                    span{
                        display: block;
                        text-align: center;
                        font-size: 24px;
                        font-weight: 500;
                        color: #FFFFFF;
                        line-height: 24px;
                        height: 24px;
                        letter-spacing: 2px;
                        margin: 10px;
                    }
                }
            }
        }
    }
}
</style>