<template>
  <view>
    <pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
    <view class="listBox" :style="{'padding-top':(pageTop+'px')}">
    <view class="content">
    <!-- banner，标题 -->
    <view class="banner-title">
      <!-- banner -->
      <view class="banner">
        <swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000"
                duration="500">
          <swiper-item v-for="(item, index) in swiperList" :key="index">
            <image :src="Baseapi + info.productImage"></image>
          </swiper-item>
        </swiper>
      </view>
      <!-- 价格 -->
      <view class="price-info">
        <view class="price">
          <text class="min">￥</text>
          <text class="max">{{info.price}}.00</text>
        </view>
		<view class="">
			<u-number-box v-model="number">
				<view
					slot="minus"
					class="minus"
				>
					<u-icon
						name="minus"
						size="12"
					></u-icon>
				</view>
				<text
					slot="input"
					style="width: 50px;text-align: center;"
					class="input"
				>{{number}}</text>
				<view
					slot="plus"
					class="plus"
				>
					<u-icon
						name="plus"
						color="#FFFFFF"
						size="12"
					></u-icon>
				</view>
			</u-number-box>
		</view>
		<view class="serve">
			<view class="" style="font-size: 32rpx;font-weight: 600;display: flex;" @click="bspersonshow = true">{{bspersoninfo.name}} <u-icon name="arrow-down-fill" color="#2979ff" size="20"></u-icon></view>
		</view>
      </view>
	  <u-picker :show="bspersonshow"  @confirm="bspersonconfirm" @cancel="bspersonclose" :columns="bspersoncolumns"></u-picker>
      <!-- 标题 -->
      <view class="goods-title">
        <view class="big">{{info.productName}}</view>
		<view class="goods-icon">
			<view class="goods-icon-bg">{{info.specification}}</view>
		</view>
		<view>{{info.briefIntro}}</view>
      </view>
    </view>
    <!-- 商品介绍 -->
    <view class="products-introduction" ref="products">
      <view class="content-box">
		  <image :src="Baseapi + info.productImage"></image>
	  </view>
    </view>
    <!-- 底部 -->
    <view class="page-footer">
      <view class="footer-buy">
        <!-- <view class="cart-add">
			<image src="../../static/btn2.png"></image>
          <text><image src="../../static/phone.png"></image>联系电话</text>
        </view> -->
        <view style="width: 100%;" class="buy-at" @click="addproduct">
			<image src="../../static/btn1.png"></image>
          <text>立即购买</text>
        </view>
      </view>
    </view>
    </view>
    </view>
	<u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
		Baseapi:"http://8.130.38.56:2015",
      nvConfig:{
      	title:"商品详情",
      	bgColor:"#ffffff",
      	color:"#000000",
      	fixedAssist:{
      		hide:true,
      	},
      },
      swiperList: [
        {
          id: 0,
          type: 'image',
          url: '/static/img/01.jpg'
        },
      ],
	  info:{},
	  
	  bspersoninfo:{
	  	name:"",
	  	obituaryOrderNumber:"",
	  },
	  bspersonshow:false,
	  bspersonlist:[],
	  bspersoncolumns:[],
	  
	  // 数量
	  number:1,
    };
  },
	onPageScroll(e) {this.$refs.nv.pageScroll(e)},
	computed:{
		pageTop(){return parseInt(88*uni.getSystemInfoSync().windowWidth/750) + uni.getSystemInfoSync().statusBarHeight}
	},
	onLoad(item) {
		this.info = JSON.parse(item.info)
		console.log(this.info);
		this.getbsinfo();
	},
  methods: {
	  // 获取用户的报丧记录
	  getbsinfo(){
	  	console.log("userinfo",uni.getStorageSync("USERS_KEY"));
	  	var info = {
	  		userId:uni.getStorageSync("USERS_KEY").userId
	  	}
	  	this.API.getbsinfo(info).then(res=>{
	  		console.log("获取用户报丧信息",res);
	  		this.bzpersonlist = res.rows;
	  		this.bspersoninfo.name = res.rows[0].deceasedName
	  		this.bspersoninfo.obituaryOrderNumber = res.rows[0].orderNumber
	  		var info = []
	  		for(let i = 0;i < res.rows.length;i++){
	  			info.push(res.rows[i].deceasedName)
	  		}
	  		this.bspersoncolumns.push(info)
	  	})
	  },
	  // 报丧人确定
	  bspersonconfirm(e){
	  	this.bspersonshow = false
	  	this.bspersoninfo.name = e.value[0]
	  	this.bspersoninfo.obituaryOrderNumber = this.bspersonlist[e.indexs[0]].orderNumber
	  },
	  bspersonclose(){
	  	this.bspersonshow = false
	  },
	  addproduct(){
		  console.log(uni.getStorageSync('USERS_KEY'));
		  var info = {
			userId:0,
			productId:"",
			productTotal:this.number,
			orderNumber:"",
		  }
		  info.userId = uni.getStorageSync('USERS_KEY').userId;
		  info.productId = this.info.productId;
		  info.orderNumber = this.bspersoninfo.obituaryOrderNumber
		  console.log("提交数据",info);
		  // return
		  this.API.addproduct(info).then(res=>{
			  console.log("商品订单",res);
			  if(res.code == 200){
				  this.$refs.uToast.show({
				  	type: 'success',
				  	title: '成功主题(带图标)',
				  	message: "购买成功",
				  	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				  })
				  setTimeout(function () {
				      uni.navigateBack({
				          delta: 1
				      });
				  }, 2000);
			  }
		  })
	  },
  }
};
</script>

<style scoped lang="scss">
@import 'mallgoods.scss';
.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: rgb(84, 125, 255);
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>
