<template>
	<el-dialog
      :close-on-click-modal="false"
      :visible.sync="guideCollection"
      :append-to-body="true"
      @closed="closeDlg"
      top="90px"
      :width="dlgWidth">
      <div class="gui-box" :style="{'min-height':dlgHeight,width:dlgWidth}">
        <span class="close-right" @click="guideCollection = false"><i style="font-size: 28px;color: #999;" class="el-icon-close"></i></span>
         <div class="gui-box-left" :style="{width:leftWidth}">
            <dl>
              <dt class="left-title">新功能查看</dt>
              <dd v-if="item.images.length>0" v-for="item in guideList" @click="showImg(item)">{{item.title}}</dd>
            </dl>
         </div>
         <div class="gui-box-right">
            <div id="guideBox" style="z-index:99;">
              <swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length">
                <swiper-slide  style="margin: 0 auto;" v-for="(item, idx ) in resonimg" :key="item.id" class="swiper-slide games">
                    <img class="banner-img" style=" margin: 0 auto;" :src="fileBaseUrl + item.img" alt="">
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
            </div>
            <p class="gui-text">{{description}}</p>
            <!-- <el-button type="primary" class="btn-one" @click="goHome()">进入首页</el-button> -->
            <el-button type="primary" class="btn-one"  @click="goHome()">进入首页</el-button>
         </div>
      </div>
    </el-dialog>
</template>
<script>
    import { mapGetters, mapActions } from 'vuex';
    // import apiUserhobby from "@/api/phase2/userhobby.js"
    import apiGuide from "@/api/phase2/guide.js"
    import { swiper, swiperSlide } from 'vue-awesome-swiper';
	export default {
		props:{
          // show:{
          //   type:Boolean,
          //   default:false
          // }
		},
    data(){
    	return {
            dlgHeight:'650px',
            dlgWidth:'688px',
            leftWidth:'160px',
            description:'',
            fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
            guideCollection:false,// 兴趣采集
            guideList:[],
            resonimg:[],
            swiperOption: {
                autoplay: {
                disableOnInteraction: false ,
                delay: 2000,
                },
                speed: 2000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
                loop:true, //循环切换
                observe:true,
                peed: 300,//循环速度
                scrollbar: '.swiper-scrollbar',
                pagination: {
                    el: '.swiper-pagination',
                    // type : 'progressbar', //分页器形状
                    clickable :true, //点击分页器的指示点分页器会控制Swiper切换
                },
                navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
                },
            },
    	}
    },
    created() {
      //这里的以后要去掉的，不应该是这样计算的
      let width = document.body.clientWidth;
      console.log(width,'width');
      if(width > 1921) {
        this.dlgWidth = '1088px';
        this.leftWidth='220px';
      }
      if(width > 1681 && width < 1921) {
        this.dlgWidth = '888px';
        this.leftWidth='200px';
      }
      if(width > 1367 && width < 1680) {
        this.dlgWidth = '848px';
        this.leftWidth='180px';
      }
      if(width < 1366) {
        this.dlgWidth = '688px';
        this.leftWidth='160px';
      }

      //这里必须放在当前的Session存储中，不能每次都调用
      // apiGuide.hasUser().then(res=>{
      //    if(res.result) {
      //     this.guideCollection = false;
      //    } else {
      //     this.guideCollection = true;

      //    }
      // });
      //只是在显示时才调用
    },
    mounted() {
        this.getlist();
    },
    methods:{
        show(){
          this.guideCollection=true;
        },
        closeDlg(){
           this.$emit('close');
        },
        goHome() {
          this.guideCollection = false;
          this.$router.push('/index')
        },
        getlist() {
            apiGuide.list().then(res=>{
                if(res.status == 200) {
                    this.guideList = res.result;
                    this.showImg(res.result[0]);
                }
            })
        },

        showImg(item) {
          this.resonimg = [];
          if(item){
            this.description = item.description;
            this.resonimg = item.images;
          }
        },
        notYet() {
            this.interestCollection = false;
            localStorage.setItem('notYet',new Date());
        },
    },
    watch:{

    },
    computed:{
      ...mapGetters(['userInfo','studyTaskCount']),
        swiper() {
            return this.$refs.mySwiper.swiper
        },
		},

	}
</script>

<style scoped lang="scss">
    ::v-deep.swiper-slide .games .swiper-slide-active{
  text-align: center !important;
}
    .gui-box{
        display: flex;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
        .close-right{
            position: absolute;
            right:28px;
            // top:45px;
        }

        ::v-deep .swiper-wrapper{
            padding-bottom: 60px;
        }
        // swiper-pagination-bullet swiper-pagination-bullet-active
        // .swiper-pagination-bullet
        ::v-deep .swiper-pagination-bullet-active{
            width: 48px !important;
            height: 6px !important;
            background: #387DF7 !important;
            border-radius: 8px !important;
        }
        ::v-deep .swiper-slide-prev{

        }
        ::v-deep .swiper-pagination-bullet{
            width: 12px;
            height: 6px;
            background: #387DF7;
            border-radius: 8px;
            // opacity: 0.36;
        }
        .gui-box-left{
          padding-top: 90px;
          // width: 190px;
        //   background: #387DF7;
          background: url('../../../public/images/homeWu/guide-bg.png') no-repeat;
          background-size: 100% 100%;
          border-radius: 10px 0 0 10px;
          .left-title{
            // width: 190px;
            margin-bottom: 42px;
            text-align: center;
            color: #FFFFFF;
            font-weight: 600;
            font-size: 20px;
          }
          dd{
            font-size: 16px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 22px;
            // margin-left: 20px;
            padding: 0 20px;
            margin-bottom: 27px;
            cursor: pointer;
          }
        }
        .gui-box-right{
          flex: 1;
          // width: 897px;
          background: #e6effb;
          padding: 74px 0 64px 0;
          border-radius:0 10px 10px 0;
          text-align: center;
          .gui-text{
            color: #387DF7;
            font-size: 16px;
            margin-top: 30px;
          }
          .btn-one{
            margin-top: 40px;
            width: 457px;
            height: 62px;
            background: #387DF7;
            border-radius: 8px;
            }
          .swiper-slide{
            //  width: 576px;
            //  height: 500px;
             text-align: center;
             .banner-img{
                // width: 576px;
                // height: 100%;
             }
          }
        }
    }
	::v-deep .el-dialog{
        // background: #fff url('/images/homeWu/interest.png') no-repeat;
        border-radius: 10px;
        .el-dialog__header{
            display: none;
        }
        .el-dialog__body {
            padding: 0;
        }
        .el-dialog__footer{
            display: none;
        }
        // height: 840px;
    }
// .el-checkbox.is-bordered.is-checked{
//     border-color: #4677F4;
// }
// ::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
//     color: #4677F4;
// }
// .el-checkbox{
//     font-size: 14px;
//     color: #333333;
// }

.dialog-footer{
    text-align: center;
    .btn-one{
        width: 473px;
        height: 59px;
        background: linear-gradient(146deg, #4D7BF6 0%, #2F65EC 100%);
        border-radius: 30px;
    }
    .btn-tow{
        font-size: 14px;
        color: #333333;
    }
}

@media screen and (max-width: 1366px){
  .gui-box-left{
    //width: 160px;
    .left-title{
      width: 160px;
    }
    dd{
      margin-left: 10px;
    }
  }
  .gui-box-right{//资源引导位宽度
    width: 497px;
    .swiper-slide{
      width: 376px;
      height: 300px;
      text-align: center;
      .banner-img{
         width: 376px;
         height: 100%;
      }
   }
  }
  .gui-box{
    .close-right{
        right:28px;
        top:25px;
    }
  }
}
@media screen and (max-width: 1680px) and (min-width:1367px){
  .gui-box-left{
    //width: 160px;
    .left-title{
      width: 160px;
    }
    dd{
      margin-left: 10px;
    }
  }
  .gui-box-right{//资源引导位宽度
    width: 658px;
    .swiper-slide{
       width: 476px;
       height: 400px;
       text-align: center;
       .banner-img{
          width: 476px;
          height: 100%;
       }
    }
  }
  .gui-box{
    .close-right{
        right:28px;
        top:25px;
    }
  }
}

@media screen and (max-width: 1920px) and (min-width: 1681px){
  .gui-box-left{
    //width: 160px;
    .left-title{
      width: 160px;
    }
    dd{
      margin-left: 10px;
    }
  }
  .gui-box-right{//资源引导位宽度
    width: 722px;
    .swiper-slide{
       width: 560px;
       height: 430px;
       text-align: center;
       .banner-img{
          width: 560px;
          height: 100%;
       }
    }
  }
  .gui-box{
    .close-right{
        right:28px;
        top:28px;
    }
  }
}

@media screen and (min-width: 1921px){
  .gui-box-left{
   // width: 190px;
    .left-title{
      width: 190px;
    }
    dd{
      margin-left: 20px;
    }
  }
  .gui-box-right{//资源引导位宽度
    width: 897px;
    .swiper-slide{
       width: 576px;
       height: 500px;
       text-align: center;
       .banner-img{
          width: 576px;
          height: 100%;
       }
    }
  }
  .gui-box{
    .close-right{
        right:28px;
        top:45px;
    }
  }
}

</style>
