<template>
  <div class="buyUser" v-if="show">
    <div class="buyUserChild">
      <div class="userData">
        <div class="userHead">
          <img class="userHeadimg"
            :src="item.headPortrait"
            alt
          />
          <span class="nickNamespan">{{item.nickName}}</span>
        </div>
        <div class="closeBtn" @click="closeClick">X</div>
      </div>
      <div class="lookImg">
        <div class="swiperIndex" :key="imageIndex">
          {{imageIndex}} / {{userImages.length}}
        </div>
        <van-swipe
          class="my-swipe"
          :show-indicators="false"
          indicator-color="white"
          autoplay="none"
          @change="onChange"
          :loop="false"
        >
          <van-swipe-item class="nowImg" v-for="(data,index) in userImages" :key="index">
            <img :src="`${firstImg + data.imgUrl}`" alt v-if="data.imgUrl" class="buyImg" />
            <video :src="data.videoUrl" loop class="buyVideo" controls autoplay v-else></video>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="star">
        <van-rate v-model="item.score" icon="like" void-icon="like-o" :readonly="true" :size="12" />
        <div class="friden">
          <div  class="sharediv" @click="share(item,0)">分享</div>
          <div @click="shareImg(item,1)">生成海报</div>
        </div>
      </div>
      <div class="userUpNum">
        <div class="userSpeak">{{item.content}}</div>
        <div class="userUp">
          <div class="userUpdiv">
            {{data.clicks}}
          </div>
          <img class="userUpimg"
            src="https://img10.360buyimg.com/imgzone/jfs/t1/47470/22/16858/711/5ddcf76aE0432520f/01167ed29fa3bc29.png"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Swipe, SwipeItem, Rate } from "vant";
import { buysharePopComService } from "../../../util/comCreate.js";
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Rate);
export default {
  data() {
    return {
      userImages:[],
      imageIndex:1,
      firstImg:'https://img10.360buyimg.com/imgzone/',
    };
  },
  created() {
    console.log(this.item);
  },
  mounted() {
    this.initdata();
  },
  methods: {
    closeClick() {
      this.submit();
    },
    share(item ,id){
      buysharePopComService.create(item,this.alldata,id,(submit)=>{
        buysharePopComService.close()
      })
    },
    onChange(index){
      this.imageIndex = index + 1
    },
    shareImg(item ,id){
      buysharePopComService.create(item,this.alldata,id,(submit)=>{
        buysharePopComService.close()
      })
    },
    initdata() {
      console.log()
      this.userImages = [...this.item.images]
      if (this.item.videos != null) {
        this.item.videos.forEach((v) => {
          this.userImages.push(v)
        });
      }
      console.log(this.item,"asdasdasd");
    },
  },
};
</script>
<style lang="scss" scoped>
body{
  overflow-y:hidden ;
}
.userData {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.userHead {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.closeBtn {
  font-size: 0.24rem;
  color: rgb(102, 102, 102);
}
.buyUserChild {
  padding: 0.3rem;
  background: rgb(255, 255, 255);
}
.nowImg {
  width: 335px;
  height: 6.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.buyVideo {
  width: 6.7rem;
  max-height: 6.7rem;
  display: block;
}
.buyImg {
  width: 3.8rem;
  display: block;
  margin: 0px auto;
}
.star {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.2rem;
}
.friden {
  font-size: 0.2rem;
  color: rgb(0, 131, 255);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.userSpeak {
  width: 5.94rem;
  max-height: 1.3rem;
  font-size: 0.2rem;
  color: rgb(102, 102, 102);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-align: justify;
}
.userUp{
  display: flex;
}
.userUpNum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.2rem;
}
.swiperIndex{
  line-height: .5rem;
  text-align: center;
  font-size: .24rem;
  color: #fff;
  width: 1rem;
  height: .5rem;
  position: relative;
  left: 6rem;
  border-radius: 20px;
  background: rgba($color: #000000, $alpha: 1);
}
.buyUser {
  width: 100%;
  min-height: 100%;
  background: #f2f2f2;
  position: fixed;
  z-index: 2000;
  top: 0rem;
}
.nickNamespan{
  font-size:.24rem;
}
.userHeadimg{
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.sharediv{
  margin-right:.15rem;
}
.userUpdiv{
  font-size: 0.2rem;
  color: rgb(252, 60, 44);
  width: 0.78rem;
  text-align: right;
}
.userUpimg{
  width: 0.27rem;
  height: 0.27rem;
  margin-left: 0.1rem;
}
</style>