<template>
    <view style="height: 100vh;background: #fff;">
        <loading-state ref="pageView" @request="request">
            <view style="height: 100vh;overflow: hidden;overflow-y: auto;">
                <image :src="data.picUrl" style="width: 100vw;height: 80vw;" mode="aspectFill"></image>

                <view style="display: flex;flex-direction: column;background: #fff;padding: 20px 20px 0px 20px;margin-top: 10px;
			 border-top-left-radius: 20px;border-top-right-radius: 20px;height: 100%;">

                    <view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
                        <text
                            style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: #333;">{{data.name}}</text>
                        <text style="font-size: 13px;color: #FF7A11;">￥{{data.price}}</text>
                    </view>

                    <view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;">
                        <text style="font-size: 13px;color: #666;">单&ensp;&ensp;&ensp;&ensp;价</text>
                        <text
                            style="font-size: 13px;color: #999;">{{data.weight}}{{data.specificationUnit}}/{{data.unitName}}</text>
                    </view>
                    <view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;">
                        <text style="font-size: 13px;color: #666;">规&ensp;&ensp;&ensp;&ensp;格</text>
                        <text style="font-size: 13px;color: #999;">{{data.remarks}}</text>
                    </view>

                    <view style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;">

                        <view style="width: 2px;height: 15px;background: #FF7A11;margin-right: 10px;"></view>
                        <text style="font-size: 14px;font-weight: 600;font-family: sans-serif;color: #333;">商品详情</text>

                    </view>

                    <view style="margin-top: 10px;" v-show="!data.appContent==''">
                        <rich-text :nodes="data.appContent | formatRichText"></rich-text>
                    </view>

                </view>

            </view>
        </loading-state>

        <!-- 	<view style="position: absolute; bottom: 0px; display: flex;flex-direction: column;width: 100%;
	box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 13vh;">

			<view
				style="display: flex;flex-direction: row;align-items: center; justify-content: center; margin-top:10px;">

				<view id="bomView" style="display: flex;flex-direction: row;align-items: center;">
					<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
						温馨提示：已订</view>
					<view style="color: #FF5006;font-size: 15px;height: 15px;line-height: 15px;font-weight: bold;">
						{{page.weight}}斤
					</view>

					<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
						，{{data.qssl}}斤起订。</view>

					<view style="display: flex;flex-direction: row;align-items: center;" @click="showPop2()">
						<text
							style="color: #6190D8;font-size: 13px;height: 10px;line-height: 10px;margin-top: 5px;text-decoration:underline;font-style:oblique;">
							起订说明</text>
						<text
							style="color: #6190D8;font-size: 13px;height: 10px;line-height: 10px;margin-top: 5px;margin-left: 2px;">
							>></text>
					</view>

				</view>
			</view>

			<view
				style="display: flex;flex-direction: row; justify-content: center;align-items: center;margin-top: 10px;padding: 0px 10px;margin-bottom: 20px;">

				<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px;
					border: 1px #FF5006 solid; border-top-left-radius: 25px; border-bottom-left-radius: 25px;flex-shrink: 0;"
					@click="inCart()">加入购物车</text>

				<view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 0px 5px;height: 42px;flex: 1;
					display: flex;flex-direction: row;align-items: center;box-sizing: border-box;" @click="gotoCart()">
					<image src="../../static/shoppCart_icon.png" mode="aspectFill"
						style="height: 20px;width: 20px;flex-shrink: 0;">
					</image>
					<view style="display: flex;flex-direction: column;flex: 1;">
						<text
							style="font-size: 15px;color: #FF5006;margin-left: 5px;height: 20px;line-height: 20px;margin-top: 5px;font-weight: bold;">￥{{page.price}}</text>
						<text v-if="page.remarks!=''"
							style="font-size: 10px;color: #666;margin-left: 5px; height: 10px;line-height: 10px;margin-bottom: 5px;">{{page.remarks}}</text>
					</view>
				</view>

				<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px;
					border: 1px #FF5006 solid; border-top-right-radius: 25px; border-bottom-right-radius: 25px;flex-shrink: 0;"
					@click="settlement()">结算</text>

			</view>
		</view>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="more" title="订购协议" :showConfirm="true"
				:beforeClose="dialogBeforeClose" @confirm="dialogInputConfirm" :content="data.dgxy"
				:confirm-text="confirmText"></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="inputDialog2" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="more" title="起订说明" :showConfirm="true"
				:beforeClose="dialogBeforeClose2" @confirm="dialogInputConfirm2"
				:content="data.qdxy"></uni-popup-dialog>
		</uni-popup> -->

    </view>

</template>

<script>
    export default {
        data() {
            return {
                page: {
                    sid: '',
                    weight: "",
                    remarks: "",
                    price: ""
                },
                data: {
                    picUrl: '',
                    name: '',
                    price: '',
                    remarks: '',
                    appContent: ""
                },

                dialogContent: "这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容这里是协议内容，这里是协议内容",
                confirmText: "我知道了（5s）",
                dialogBeforeClose: false,
                dialogBeforeClose2: false,
                countdown: 5,

            }
        },
        onLoad(options) {
            this.page.sid = options.sid
        },
        onShow() {
            this.request()
        },
        filters: {
            /**
             * 处理富文本里的图片宽度自适应
             * 1.去掉img标签里的style、width、height属性
             * 2.img标签添加style属性：max-width:100%;height:auto
             * 3.修改所有style里的width属性为max-width:100%
             * 4.去掉<br/>标签
             * @param html
             * @returns {void|string|*}
             */
            formatRichText(html) {
                //控制小程序中图片大小
                if (html) {
                    let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
                        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
                        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
                        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
                        return match;
                    });
                    newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
                        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
                            'max-width:100%;');
                        return match;
                    });
                    newContent = newContent.replace(/<br[^>]*\/>/gi, '');
                    newContent = newContent.replace(/\<img/gi,
                        '<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"');
                    return newContent;
                } else {
                    return '暂无商品详情';
                }
            },
        },
        methods: {
            request() {

                var params = {
                    customerSid: getApp().globalData.sid,
                    sid: this.page.sid,
                }

                console.log("request", params);


                let _this = this

                _this.$api.goodsDetail(params).then((resp) => {
                    // console.log(resp);
                    _this.data = resp

                    _this.getAllPriceOrWeight()

                    // _this.$nextTick(() => {
                    // 	_this.$refs.pageView.setLoadState(2)
                    // })
                }).catch(e => {
                    _this.$nextTick(() => {
                        _this.$refs.pageView.setLoadState(1)
                    })
                })
            },

            getAllPriceOrWeight() {
                let _this = this

                var params = {
                    customerSid: getApp().globalData.sid,
                    brandId: _this.data.brandId,
                }

                console.log("getGoodsWeight", params);

                _this.$api.getGoodsWeight(params).then((resp) => {

                    console.log("getGoodsWeight", resp);

                    _this.page.price = resp.totalPrice
                    _this.page.weight = resp.totalWeight
                    _this.page.remarks = resp.remarks


                    _this.$nextTick(() => {
                        _this.$refs.pageView.setLoadState(2)
                    })

                }).catch(e => {
                    _this.$nextTick(() => {
                        _this.$refs.pageView.setLoadState(1)
                    })
                })
            },

            inCart() {

                this.data.goodsNumber = Number(this.data.goodsNumber) + 1

                this.upDateShoppCart()
            },
            upDateShoppCart() {
                var good = {
                    goodsSid: this.data.sid,
                    goodsName: this.data.name,
                    goodsNumber: this.data.goodsNumber,
                    affiliation: this.data.brandId,
                    price: this.data.mefenPrice,
                    weight: this.data.weight,
                    customerSid: getApp().globalData.sid
                }

                let _this = this
                _this.$api.addShoppingCart(good).then((resp) => {
                    _this.shortToast('已加入购物车。')
                    _this.getAllPriceOrWeight()
                }).catch(e => {

                })
            },
            settlement() {
                // 支付

                if (this.page.weight < parseInt(this.data.qssl)) {
                    this.shortToast('满' + this.data.qssl + '斤才可定制云菜窖哦，请继续选菜吧。')
                    return
                }

                this.showPop()

            },
            showPop() {

                this.$refs.inputDialog.open()

                let timeOut = setInterval(() => {

                    if (this.countdown == 1) {
                        this.confirmText = "确定"
                        this.countdown = 5
                        this.dialogBeforeClose = false
                        clearInterval(timeOut)

                    } else {
                        this.dialogBeforeClose = true
                        this.countdown = this.countdown - 1;
                        this.confirmText = "我知道了" + "（" + this.countdown + "s）"
                    }
                }, 1000)
            },
            saveGoods() {


                var params = {
                    customerSid: getApp().globalData.sid,
                    // cardNumber: 1,
                    brandId: this.data.brandId,
                    totalTee: this.page.price,

                    // ordOrderDetailsVoList: list
                }
                console.log("params", params);

                let _this = this
                _this.$api.createVegeOrder(params).then((resp) => {

                    // console.log("resp", resp);
                    this.$pay(resp)
                }).catch(e => {})


            },

            gotoCart() {
                uni.navigateTo({
                    url: 'shoppCart?affiliation=' + this.data.brandId + "&weight=" + this.data.qssl + "&qdxy=" +
                        this.data.qdxy
                })
            },
            showPop2() {

                this.$refs.inputDialog2.open()

            },
            dialogInputConfirm(val) {
                if (this.confirmText == "确定") {
                    this.confirmText = "我知道了（5s）",
                        this.dialogBeforeClose = true,
                        this.countdown = 5
                    this.saveGoods()
                }

            },

            dialogInputConfirm2(val) {
                console.log(">>>>>>>>>>>", this.dialogBeforeClose2);
                this.dialogBeforeClose2 = false
            },


        }
    }
</script>

<style>
    uni-page-body,
    page {
        background: #f3f4f6;
    }
</style>