<template>
    <view style="display: flex;flex-direction: column;background-color: #fff;height: 100%;">

        <view class="top">
            <NavBar ref="nav" navTitle=" " :showIcon="true" :start-change-height="page.startHeight"
                :end-change-height="page.endHeight">
            </NavBar>
            <view>
                <image src="https://ordermall.yxtsoft.com/lpkui/image/bind_bj_new1.png" mode="scaleToFill"
                    style="width: 100%;height: 70vw"></image>
            </view>

        </view>

        <view
            style="height: calc(100vh - 75vw - 98px); overflow: scroll; padding-left: 12px;padding-right: 12px;padding-bottom: 24px;box-sizing: border-box;">
            <view style="display: flex;flex-direction: row;align-items: center;">
                <view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
                <view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
                <text style="margin-left: 8px;font-size: 18px;color: #333;">好友赠与的礼品</text>
            </view>
            <view v-for="(item,index) in data.list"
                style="display: flex;flex-direction: row;width: 100%;margin-top: 5px;">

                <view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;
								padding-left: 20px;padding-right: 20px;margin-top: 8px;">
                    <!-- <text style="font-size: 12px;color: #666;">{{item.goodsName}}</text>
									<text style="font-size: 12px;color: #666;">{{item.remarks}}</text> -->

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

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

                        <view style="display: flex;flex-direction: column;margin-left:16px;box-sizing: border-box;">

                            <text style="color: #000;font-size: 14px;font-weight: 600;font-family: sans-serif;"
                                @click="itemClick(item.goodsSid)">{{item.goodsName}}</text>
                            <text style="margin-top: 6px;color: #999;font-size: 12px;">{{item.goodsContent}}</text>

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

                                <text style="color: #E36443;font-size: 12px;">{{item.goodsFs}}</text>
                                <text style="color: #E36443;margin-left: 10px;font-size: 12px;">{{item.goodsJs}}</text>
                                <!-- 	<text
									style="margin-left: 10px;color: #E36443;border: 1px #E36443 solid;border-radius: 8px;padding: 1px 10px;font-size: 12px;">{{item.price}}</text> -->


                            </view>


                        </view>

                    </view>
                </view>

            </view>

            <view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;"
                v-if="data.remarks!=''">
                <view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
                <view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
                <text style="margin-left: 8px;font-size: 18px;color: #333;">转赠留言</text>
            </view>

            <text v-if="data.remarks!=''"
                style="margin-top: 12px; padding-left: 20px;padding-right: 20px;text-indent: 2em;font-size: 16px;color: #333;
				overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{data.remarks}}</text>


        </view>

        <view v-if="codeType" style="position: absolute; bottom: 24px; display: flex;flex-direction: column;width: 100%;
		padding-left: 21.5px;padding-right: 21.5px;box-sizing: border-box;border-top: 1px solid #EFEFEF; ">

            <text
                style=" text-align: center;width: 100%;color: #4F4F4F;font-size: 12px;margin-top: 12px;">温馨提示:您的好友赠送您一份心意，请接收。</text>
            <view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B);
				width: 100%;border-radius: 25px;height: 50px;text-align: center; 
				margin-top: 12px;line-height: 50px;color: #FFFFFF;font-size: 16px;" @click="save">
                接收</view>
        </view>


        <!-- 恢复预约提货弹框 -->
        <view class="model" catchtouchmove='preventTouchMove' v-if='showModal'></view>
        <view class="modalDlg2" catchtouchmove='preventTouchMove' v-if='showModal'>

            <view style="display: flex;flex-direction: column;justify-content: center;align-items: center;
				 width: 80%; border-radius: 20px; background: linear-gradient(#FFF4E4, #fff);">

                <image src="../../static/notices.png" style="width: 60px;height: 60px; margin-top: -30px;"
                    mode="scaleToFill"></image>

                <text
                    style="margin-top: 16px;font-size: 18px;color: #101010;font-weight: 600;font-family: sans-serif;">温馨提示</text>
                <text
                    style="margin-top: 12px;font-size: 14px;color: #333;padding-left: 30px;padding-right: 30px;">您好，此卡已被领取。</text>

                <text style="margin-top: 25px;margin-bottom: 20px;border: 1px #FF9900 solid; color: #FF9900;font-size: 14px;
					border-radius: 20px;height: 40px; line-height: 40px;padding-left: 30px;padding-right: 30px;"
                    @click="colseDialog()">确定</text>

            </view>


        </view>
    </view>
</template>

<script>
    //引入bus
    import bus from '@/common/bus';
    export default {
        data() {
            return {
                page: {
                    code: '',
                    codeKey: '',
                    customerSid: '',
                    startHeight: 0,
                    endHeight: 0
                },
                data: {
                    remarks: ""
                },
                codeType: false,
                showModal: false
            }
        },
        onLoad(options) {

            this.page.code = options.code
            this.page.codeKey = options.codeKey


            this.page.customerSid = getApp().globalData.sid

            let info = uni.getSystemInfoSync();

            this.page.startHeight = info.windowWidth * 0.6
            this.page.endHeight = info.windowWidth * 0.8
            this.getData()
        },
        methods: {
            colseDialog() {
                this.showModal = false
                uni.redirectTo({
                    url: '/pages/login/login'
                })
            },
            itemClick(goodsSid) {
                uni.navigateTo({
                    url: '/pages/good/goodsDetail2?sid=' + goodsSid
                })
            },
            getData() {
                let _this = this
                _this.$api.getTransferByCode(this.page.code).then((resp) => {

                    // 1 未领取  2 已绑定  

                    // 已绑定
                    if ('2' == resp.state) {

                        if (resp.recipientSid == _this.page.customerSid) {
                            uni.redirectTo({
                                url: '/pages/login/login'
                            })
                        } else {
                            _this.showModal = true
                        }

                    } else {
                        _this.data = resp
                        _this.codeType = true
                    }



                }).catch(e => {
                    _this.longToast(e.msg)
                })
            },

            onKeyInput1(event) {
                this.page.code = event.target.value
            },
            onKeyInput2(event) {
                this.page.codeKey = event.target.value
            },
            scan() {
                // 只允许通过相机扫码
                let _this = this
                uni.scanCode({
                    onlyFromCamera: true,
                    success(res) {
                        _this.page.code = res.result.substring(res.result.length - 20, res.result.length)
                    }
                });
            },
            save() {
                if (this.stringIsEmpty(this.page.code) || this.page.code.length != 20) {
                    this.shortToast('请输入20位转赠单号')
                    return
                }

                // if (this.stringIsEmpty(this.page.codeKey) || this.page.codeKey.length != 6) {
                // 	this.shortToast('请输入6位提货密码')
                // 	return
                // }
                let _this = this

                var params = {
                    customerSid: this.page.customerSid,
                    transferSid: this.page.codeKey
                }

                console.log("params+++++++++++++++", params);

                _this.$api.receiveTransferGoods(params).then((resp) => {
                    // bus.$emit('order', "监听回调");
                    // setTimeout(() => {
                    // 	uni.$emit('order', "监听回调")
                    // }, 500)
                    const pages = getCurrentPages()
                    // 有可返回的页面则直接返回，uni.navigateBack 默认返回失败之后会自动刷新页面 ，无法继续返回
                    if (pages.length > 1) {
                        uni.navigateBack(1)
                        return;
                    } else {
                        uni.redirectTo({
                            url: '/pages/login/login'
                        })
                    }


                }).catch(e => {
                    _this.longToast(e.msg)
                })
            }
        }
    }
</script>

<style>
    .top {
        width: 100vw;
        height: 70vw;
    }


    /* 弹窗样式 */
    .model {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 100000;
        opacity: 0.7;
        top: 0;
        left: 0;

    }

    .modalDlg2 {
        /* 设置超出滚动 */
        overflow: auto;
        position: fixed;
        z-index: 100000;
        display: flex;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>