<template>
  <view class="shopdetail">
    <shopdetailToppic :picarr="list.imgs" v-on:btnchange="change0"></shopdetailToppic>
    <view class="btn">
      <shopdetailBtn :ifsp="ifsp" btn1="视频"></shopdetailBtn>
      <shopdetailBtn btn1="图片" :ifsp="!ifsp"></shopdetailBtn>
    </view>
    <!-- <view class="pri">
       <shopdetailPri pri="45" ></shopdetailPri>
    </view>-->
    <view class="detail">
      <view class="seckilldetail">
        <seckillshopdetailname
          :price="list.price"
          :price_y="list.price_y"
          :yp_kp_bfb="list.yp_kp_bfb"
          :times="list.endtime"
        ></seckillshopdetailname>
      </view>
      <shopdetailShopinfo :shopname="list.goods_name" :shopdesc="list.goods_ms"></shopdetailShopinfo>
    </view>
    <view class="servicelist" v-if="ifservice">
      <shopdetailServicelist ifservice="ifservice" v-on:turnoff="off"></shopdetailServicelist>
    </view>

    <shopdetailLine></shopdetailLine>
    <shopdetailEnsure
      ensurepic="../../static/img/ensure.png"
      ensures="全正品,价格低,放心购,快送达"
      v-on:more="more"
    ></shopdetailEnsure>
    <shopdetailLine></shopdetailLine>

    <shopdetailCommentstop left="商品评论" right="好评率99.2%" ifarrow="true"></shopdetailCommentstop>
    <!-- <view class="pinglun">
      <shopdetailPinglun content="产品好 正品 43,下次还来 13,价格低 5,性价比高 4,服务好 3,性价比高 4"></shopdetailPinglun>
    </view>-->
    <view v-for="(item,j) in list.pingjia" :key="j">
      <assessList
        :pingfen="item.xing"
        :username="item.uname"
        :userpic="item.avatar_url"
        proname
        :date="item.pingjia_time"
        :detail="item.comment"
        :buydate="item.pay_time"
        shoppic="../../static/img/shoppic1.png"
        :stars="item.xing"
        :pinglunpic="item.imgs"
      ></assessList>
    </view>

    <!-- <assessList
      pingfen="5.01"
      username="M***A"
      proname="大众 途观"
      date="2019.08.22"
      detail="维修师傅态度很好，问的问题多余给你解释很棒，维修师傅态度很好，问的问题多余给你解释很棒，下次保养还回来！维修师傅态度很好，问的问题多余···"
      shop="养车工厂店"
      shoppic="../../static/img/shoppic1.png"
      stars="4"
    ></assessList>
    <assessList
      pingfen="5.01"
      username="M***A"
      proname="大众 途观"
      date="2019.08.22"
      detail="维修师傅态度很好，问的问题多余给你解释很棒，维修师傅态度很好，问的问题多余给你解释很棒，下次保养还回来！维修师傅态度很好，问的问题多余···"
      shop="养车工厂店"
      shoppic="../../static/img/shoppic1.png"
      stars="4"
    ></assessList>
    <assessList
      pingfen="5.01"
      username="M***A"
      proname="大众 途观"
      date="2019.08.22"
      detail="维修师傅态度很好，问的问题多余给你解释很棒，维修师傅态度很好，问的问题多余给你解释很棒，下次保养还回来！维修师傅态度很好，问的问题多余···"
      shop="养车工厂店"
      shoppic="../../static/img/shoppic1.png"
      stars="4"
    ></assessList>-->
    <shopdetailAllcomments :shopid="list.goods_id"></shopdetailAllcomments>
    <shopdetailCommentstop left="规格参数"></shopdetailCommentstop>
    <view v-for="(i,j) in list.type_guige" :key="j">
      <shopdetailAttr :left="i.guige_name" :right="i.guige_val"></shopdetailAttr>
    </view>

    <!-- <shopdetailAttr left="基础油级别 " right="888421"></shopdetailAttr>
    <shopdetailAttr left="粘稠度 " right="喷油嘴清洗"></shopdetailAttr>
    <shopdetailAttr left="幅宽 " right="888421"></shopdetailAttr>
    <shopdetailAttr left="折数 " right="喷油嘴清洗"></shopdetailAttr>-->
    <shopdetailCommentstop left="商品详情"></shopdetailCommentstop>
    <shopdetailDetail :strings="list.goods_details"></shopdetailDetail>
    <view class="bottom">
      <shopdetailbottom @buy="goumai"></shopdetailbottom>
    </view>
    <view class="choosesize">
      <shopdetailchoosesize
        :ifchoose="ifchoose"
        @close="guanbi"
        :shoppic="list.imgs[0].img_path"
        :price="list.price"
        :huaxian="item.price_y"
        :tags="guige"
         shoptype=1
        :msid="list.goods_ms_id"
        :max="list.pay_num"
      ></shopdetailchoosesize>
    </view>
  </view>
</template>

<script>
import shopdetailToppic from "../../components/shopdetail/shopdetail-toppic";
import shopdetailBtn from "../../components/shopdetail/shopdetail-btn";
import shopdetailPri from "../../components/shopdetail/shopdetail-pri";
import shopdetailShopinfo from "../../components/shopdetail/shopdetail-shopname";
import shopdetailLine from "../../components/shopdetail/shopdetail-line";
import shopdetailEnsure from "../../components/shopdetail/shopdetail-ensure";
import shopdetailCommentstop from "../../components/shopdetail/shopdetail-commentstop";
import assessList from "../../components/assess/assess-list";
import shopdetailAllcomments from "../../components/shopdetail/shopdetai-allcomments";
import shopdetailAttr from "../../components/shopdetail/shopdetail-attr";
import shopdetailDetail from "../../components/shopdetail/shopdetail-detail";
import shopdetailPinglun from "../../components/shopdetail/shopdetail-pinglun";
import shopdetailServicelist from "../../components/shopdetail/shopdetail-servicelist";
import shopdetailbottom from "../../components/shopdetail/shopdetail-bottom";
import shopdetailchoosesize from "../../components/shopdetail/shopdetail-choosesize";
import seckillshopdetailname from "../../components/seckill/seckilldetailname";
import { requestP } from "../../static/js/request";
export default {
  components: {
    shopdetailToppic,
    shopdetailBtn,
    shopdetailPri,
    shopdetailShopinfo,
    shopdetailLine,
    shopdetailEnsure,
    shopdetailCommentstop,
    assessList,
    shopdetailAllcomments,
    shopdetailAttr,
    shopdetailDetail,
    shopdetailPinglun,
    shopdetailServicelist,
    shopdetailbottom,
    shopdetailchoosesize,
    seckillshopdetailname
  },
  data() {
    return {
      ifsp: "",
      ifservice: false,
      ifchoose: "",
      list: {},
      pingjia: [],
      guige:[]
    };
  },
  methods: {
    shijian(completeTime) {
      console.log(completeTime);
      var stime = Date.parse(new Date());
      var etime = Date.parse(new Date(completeTime));
      console.log(stime, etime);
      // 两个时间戳相差的毫秒数
      var usedTime = etime - stime;
      // 计算相差的天数
      var days = Math.floor(usedTime / (24 * 3600 * 1000));
      // var daysy = Math.floor(usedTime / (24 * 3600 * 1000));
      //  var leave1 = usedTime % (24 * 3600 * 1000);
      // 计算天数后剩余的毫秒数
      var leave1 = usedTime % (24 * 3600 * 1000);
      // 计算出小时数
      var hours = Math.floor(leave1 / (3600 * 1000));
      // 计算小时数后剩余的毫秒数
      var leave2 = leave1 % (3600 * 1000);
      // 计算相差分钟数
      var minutes = Math.floor(leave2 / (60 * 1000));
      var leave3 = leave2 % (60 * 1000);
      var s = Math.floor(leave3 / 1000);
      var time = [days, hours, minutes, s];
      console.log(time);
      return time;
    },
    change0(e) {
      // console.log(e)
      this.ifsp = e;
    },
    off(e) {
      console.log(e);
      this.ifservice = e;
    },
    more(e) {
      this.ifservice = e;
    },
    goumai(e) {
      console.log(e);
      this.ifchoose = e;
    },
    guanbi(e) {
      this.ifchoose = e;
    }
  },
  onLoad(e) {
    console.log(e, "adsfad");
    requestP({
      url: "miaosha/get_goods_info",
      data: {
        goods_ms_id: e.msid
      }
    }).then(res => {
      res.data.data.endtime = this.shijian(res.data.data.endtime);
      console.log(res);
      this.list = res.data.data;
      this.pinglun = res.data.data.pingjia;
      let guige = [];
      for (let i in res.data.data.type_guige) {
        if (res.data.data.type_guige[i].isuserxz) {
          guige.push(res.data.data.type_guige[i]);
        }
      }
      
      this.guige=guige;
      console.log(this.guige,"mmn")
    });
  }
};
//视频距离顶部tabbar 165   如果图片尺寸不够就空白，如果够就不留白
</script>

<style lang="scss">
.shopdetail {
  padding-bottom: 200upx;
}
.btn {
  width: 227upx;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  position: absolute;
  top: 680upx;
  left: 261upx;
  bottom: 76upx;
}
.pri {
  margin-bottom: 57upx;
  margin-left: 26upx;
}
.detail {
  margin: 0 auto;
  margin-bottom: 46upx;
  width: 100%;
}
.pinglun {
  padding-left: 32upx;
  padding-top: 29upx;
  padding-bottom: 48upx;
}
.servicelist {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 999;
}
// .seckilldetail{
//     // float:right
// }
.shopdetailShopinfo {
  margin-left: 25upx;
  // padding-bottom:  100upx;
}
</style>