<template>
    <view style="width: 100%;height: 100%;background: #60CA2C;display: flex;flex-direction: column;">

        <!-- 	<NavBar ref="nav" navTitle="转赠亲友" :showIcon="true" :supportChange="false">
		</NavBar> -->

        <view
            style="display: flex;flex-direction: column;background: #f7f7f7;padding: 10px;border-radius: 15px; height: 100vh;width: 100%; box-sizing: border-box;">

            <scroll-view scroll-y="true" style="height: calc(100vh - 150px); width: 100%; background: #fff;padding: 10px; box-sizing: border-box;
			" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
                <view style="display: flex;flex-direction: column;">

                    <view v-for="(item,index) in pickingUpGoods"
                        style=" display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;">

                        <view style="display: flex;flex-direction: row;align-items: center;width: 100%;  ">

                            <image :src="item.iconUrl" style="width: 90px;height: 90px; border-radius: 10px; "
                                mode="aspectFill" @click="itemClick(item.goodsSid)"></image>

                            <view
                                style="display: flex;flex-direction: column;flex: 1;  padding-bottom: 15px; margin-left: 10px;"
                                :style="{'border-bottom':(index == goods.length-1 ? 'none' : '1px #EFEFEF solid')}">

                                <text style="font-size: 14px;color: #000; font-weight: 600;"
                                    @click="itemClick(item.goodsSid)">{{item.name}}</text>

                                <!-- <text style="font-size: 10px;color: #999;margin-top: 5px;">{{item.remark}}</text> -->

                                <view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
                                    <text style="border: 1px #EE752F solid; border-radius: 5px;	padding: 0px 8px;
							font-size: 10px;color: #EE752F;">{{item.weight}}{{item.specificationUnit}}/{{item.unitName}}</text>

                                    <text v-show="item.remarks!=''" style="margin-left: 10px; border: 1px #EE752F solid; border-radius: 5px;	padding: 0px 8px;
                                            font-size: 10px;color: #EE752F;">{{item.remarks}}</text>
                                    <text
                                        style="border: 1px #EE752F solid; background: #FF9900;margin-left: 10px; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
                                        v-if="item.type=='0'">百姓菜!</text>
                                    <text
                                        style="border: 1px #3AA15F solid; background: #40C772;margin-left: 10px; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
                                        v-if="item.type=='1'">精品菜!</text>
                                    <text
                                        style="border: 1px #1D60C7 solid; background: #2489F7;margin-left: 10px; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
                                        v-if="item.type=='2'">企业菜!</text>
                                </view>

                                <view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; margin-top: 15px;
						margin-right: 15px;">
                                    <view style="display: flex;flex-direction: row;align-items: center;">
                                        <text style="font-size: 10px;color: #FF5006;">存量：</text>
                                        <text style="font-size: 14px;color: #FF5006;">{{item.goodsNumber}}</text>
                                    </view>

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

                                        <image src="../../static/jian_icon.png" mode="aspectFill"
                                            style="width: 20px;height: 20px;" @click.stop="jian(item)"></image>

                                        <text
                                            style="font-size: 14px;margin-left: 8px;margin-right: 8px;">{{item.count}}</text>
                                        <image src="../../static/jia_icon.png" mode="aspectFill"
                                            style="width: 20px;height: 20px;" @click.stop="jia(item)"></image>

                                    </view>
                                </view>

                            </view>

                        </view>

                    </view>


                    <view v-if="transferNotData"
                        style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 5vw;">

                        <image src="https://nhx.yxtsoft.com/image/supplementing.png" mode="aspectFit"
                            style="width: 50vw;height: 50vw;"></image>
                        <view style="display: flex;flex-direction: row;align-items: center;margin-top: -15px;">
                            <text style=" border-radius: 8px; padding: 3px 8px; color: #999;">没有商品咯,请添加~</text>
                        </view>
                    </view>


                </view>


            </scroll-view>


        </view>


        <view style="position: fixed;bottom: 0;display: flex;flex-direction: column;
			border-top: 1px solid #f7f7f7;
			justify-content: center;background: #fff; width: 100%;box-sizing:border-box;">
            <view style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;
			padding-left: 15px;padding-right: 15px;">
                <text style="font-size: 14px;margin-right: 10px;font-weight: 600;">转赠留言</text>
                <input placeholder="可以写下您对亲友的祝福"
                    style="font-size: 30rpx;flex: 1;background: #F2F2F2;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;"
                    :value="transferInfo.remarks" @input="onKeyInput" />
            </view>

            <button open-type="share" :disabled="transferNotData">确认</button>
        </view>


    </view>
</template>

<script>
    export default {
        data() {
            return {
                affiliation: "",
                transferNotData: false,
                transferInfo: {

                },
                pickingUpGoods: [],
            }
        },
        onLoad(options) {


            this.pickingUpGoods = JSON.parse(decodeURIComponent(options.pickingUpGoods))
            this.affiliation = options.affiliation

            console.log(">>>>>", options);
            console.log(">>>>>", this.pickingUpGoods);
            console.log(">>>>>", this.affiliation);

        },
        onPageScroll(res) {
            // 渐变
            this.$refs.nav.defaultColorBgAlpha(res)
        },
        methods: {
            itemClick(goodsSid) {
                uni.navigateTo({
                    url: '/pages/good/goodsDetail?sid=' + goodsSid
                })
            },
            onKeyInput(event) {
                this.transferInfo.remarks = event.target.value
            },
            jian(item) {
                console.log("item》》》》", item)
                const that = this
                if (Number(item.count) == 1) {

                    wx.showModal({
                        content: '确定不要了吗',
                        cancelText: "再想想",
                        confirmText: "删除",
                        confirmColor: "#FF9900",
                        success(res) {
                            if (res.confirm) {
                                console.log('用户点击确定')
                                item.count = 0
                                const index = that.pickingUpGoods.findIndex((info) => info.goodsSid === item
                                    .goodsSid)
                                console.log("index》》》》", index)
                                that.pickingUpGoods.splice(index, 1)

                                that.transferNotData = that.pickingUpGoods.length == 0

                            } else if (res.cancel) {

                            }
                        }
                    })

                } else {
                    if (Number(item.count) > 0) {
                        item.count = Number(item.count) - 1
                    }

                }
            },
            jia(item) {
                if (item.count < item.goodsNumber)
                    item.count = Number(item.count) + 1
            },

            onShareAppMessage: function(res) {

                let _this = this
                const promise = new Promise(resolve => {
                    // 模拟网络请求
                    setTimeout(() => {

                        var list = []
                        for (var i = 0; i < this.pickingUpGoods.length; i++) {
                            var item = this.pickingUpGoods[i]

                            if (item.count > 0) {
                                list.push({
                                    goodsSid: item.goodsSid,
                                    select: item.count
                                })
                            }

                        }

                        var params = {
                            customerSid: getApp().globalData.sid,
                            brandId: _this.affiliation,
                            remarks: _this.transferInfo.remarks,
                            vos: list
                        }

                        // console.log("=========0", params);

                        _this.$api.transSubmission(params).then((resp) => {
                            uni.navigateBack()
                            // console.log("=========", resp);

                            let shareData = JSON.stringify({
                                params: {
                                    code: resp.transferCode,
                                    codeKey: resp.sid
                                },
                                functionName: 'bindCard',
                                url: '/pages/bind/bind_cloudCard?code=' + resp
                                    .transferCode + "&codeKey=" + resp.sid

                                // url: '/pages/home/cloudCard2?shareSid=' + getApp().globalData.sid,
                                // functionName: 'share'
                            })
                            // 转码传输
                            let value = encodeURIComponent(shareData)

                            resolve({
                                // title: '汇融农链-云菜窖',
                                // ②
                                path: '/pages/login/login?data=' + value,
                                imageUrl: 'https://nhx.yxtsoft.com/image/share_transfer.png', //自定义图片路径，显示图片长宽比是 5:4。

                            })

                        }).catch(e => {
                            _this.shortToast('发生错误,请稍后再试.')
                            return
                        })

                    }, 0)
                })

                return promise

            },


        }
    }
</script>

<style>
    button {
        background: #60CA2C;
        color: #fff;
        margin-top: 20px;
        height: 40px;
        width: 80%;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        margin-bottom: 20px;
    }
</style>