<template>
	<app-layout>
		<view class="bd-subtitle "  style="padding-left:30rpx;padding-right:30rpx;line-height:36rpx;">当前商品价格低于您设置的价格时，我们会以消息推送的方式通知您，只会通知一次，不会影响您正常使用。</view>
		
	    <view class="app-view margin-top" style="margin-top: 50upx;">

	        <view class="app-line app-border cross-center">
	            <text class="app-text box-grow-0">当前价格</text>
				<text class="address-input " style="color: #FF4544;">￥{{nowPrice}} </text>
	        </view>
	        <view class="app-line app-border  cross-center">
	            <text class="app-text box-grow-0">期望价格</text>
	            <input class="address-input" type="text" placeholder="低于此价格会通知你" v-model="form.price"/>
	        </view>
			<view class="app-line app-border  cross-center">
			    <text class="app-text box-grow-0">短信通知</text>
			    <input class="address-input" type="number" placeholder="输入电话号码" v-model="form.mobile"/>
			</view>
	     </view>
	    <view class="app-button">
	        <app-button @click="submit" :theme="getTheme" arrangement="row" type="important"  width="90%">
	            <text class="app-text">确定</text>
	        </app-button>
	    </view>
	</app-layout>
</template>

<script>
	import {mapGetters, mapState} from "vuex";
	
	export default {
		name: "priceTell",
		computed: {
		    ...mapGetters('mallConfig', {
		        getTheme: 'getTheme',
		    }),
		},
		data() {
			return {
				nowPrice:10,
				form: {
				    price: '',
				    mobile: ''
				},
				goods_id:0,
				attr_id:0
				
			};
		},
		onLoad(options){
			this.nowPrice=options.price
			this.goods_id=options.id
			this.attr_id=options.attrid
			this.getDetail(options.id,options.attrid);
		},
		methods:{
			getDetail(goods_id,attr_id){
				let user_id = 0;
				if (this.$user.isLogin() && this.$store.state.user.info) {
				    user_id = this.$store.state.user.info.options.user_id;
					let that=this;
					this.$request({
					    url: this.$api.goods.GetPriceTell,
					    data: {
					        goods_id: goods_id,
							attr_id:attr_id,
							user_id:user_id
					    }
					}).then(response => {
					    this.$hideLoading();
					    if (response.code === 0) {
							that.form.price=response.data.price
							that.form.mobile=response.data.mobile
					     
						  
					    } else {
			
							console.log( response.msg)
					    }
					}).catch(() => {
					    this.$hideLoading();
					});
					
				}
			},
		submit() {
			if(this.form.price===''){
				uni.showToast({
					title:"请输入期望价格",
					icon:"none"
				})
				return;
			}
			if(this.form.mobile===''||this.form.mobile.length!=11){
				uni.showToast({
					title:"请输入正确的手机价格",
					icon:"none"
				})
				return;
			}
			if (this.$user.isLogin() && this.$store.state.user.info) {
				console.log(this.$store.state.user.info)
			   let user_id = this.$store.state.user.info.options.user_id;
			   let	mall_id= this.$store.state.user.info.options.mall_id;
				let that=this;
				this.$request({
				    url: this.$api.goods.UpdatePriceTell,
				    data: {
				        goods_id: that.goods_id,
						attr_id:that.attr_id,
						user_id:user_id,
						mall_id:mall_id,
						mobile:that.form.mobile,
						price:String(that.form.price)
				    }
				}).then(response => {
				    this.$hideLoading();
				    if (response.code === 0) {
						uni.showToast({title: "提交成功", icon: 'none'});
						setTimeout(()=>{
							uni.navigateBack({delta: 1});
						},1000)
						
				     
					  
				    } else {
						uni.showToast({title: response.msg, icon: 'fail'});
				    }
				}).catch(() => {
				    this.$hideLoading();
				});
				
			}
			
			},
		}
	}
</script>

<style lang="scss">
 .bd-subtitle {
        margin-top: 23upx;
        font-size: 24upx;
        line-height: 34upx;
        color: #999999;
    }
	.address-input {
	    width: #{580rpx};
	    font-size: #{28rpx};
	    color: #353535;
	}
	.app-view {
	    background: #f7f7f7;
	    .app-line {
	        background-color: #ffffff;
	        height: #{99rpx};
	        line-height: #{99rpx};
	        padding: #{0 24upx};
	        text.app-text {
	            font-size: #{28rpx};
	            color: $uni-important-color-black;
	            width: #{124rpx};
	        }
	    }
	
	    .app-border {
	        border-bottom: #{1rpx} solid $uni-weak-color-one;
	    }
	
	    .c-address {
	        padding-right: #{24rpx};
	        font-size: #{28rpx};
	        color: #353535;
	    }
	
	    .icon-arrow-image {
	        width: #{12rpx};
	        height: #{24rpx};
	        background-image: url("../../static/image/icon/arrow-right.png");
	        background-size: 100% auto;
	        background-repeat: no-repeat;
	    }
	
	    .tip {
	        padding: #{0 24rpx 24rpx 24rpx};
	        background: #ffffff;
	        color: #b7b7b7;
	    }
	}
	.app-button {
	   bottom: 20upx;
	   position: absolute;
	   width: 100%;
	   
	}
</style>
