// pages/info/roadInfo/index.js
let device = wx.getSystemInfoSync();
const ratio = device.windowWidth / 750;
import commonApi from "../../utils/https/common"
import QRCode from '../../utils/weapp-qrcode.js'
import {pagePoint, gotoDetail} from '../../utils/util'
let app = getApp()
Page({

    /**
     * 页面的初始数据
     */
    data: {
        autoPlay: false,
        fixed: false,
        type: 1,
        top: 0,
        isLike: 0,

        info: null,
        skuFlag: null,
        producNum: 1,
        skuIndex: 0,
        aniSkuIndex: -1,

        cartTop: 0,
        cartImgInfo: null,
        cartCount: 0,
        shareImg: null,
        showShareFlag: false,
    

        showQrCode: false,
        wxqrcode: null,

        ZTPoint:'',
        swiperCurrent: 0,
        swiperRange: {
            video: {min:0,max:0},
            picture: {min:0,max:0},
            sku: {min:0,max:0}
        },
        otherInfoShow: 0,

        supplierInfo: null,
        showShopInfo: false,
        idIndex: 0,

        lon: null,
        lat: null,
        scrollLeft: 0,
        windowWidth: 375,
        prod_phone: "",
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log(options)
        //删除临时存储的联系人
        wx.removeStorageSync('linkMan')
        let rect = wx.getMenuButtonBoundingClientRect(),
            that = this;
        let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight;
        this.setData({top: height,id: options.id})
        // 获取购物车按钮的位置
        wx.createSelectorQuery().select('#cart').boundingClientRect(function (res) {
            console.log(res)
            that.setData({
                cartTop: res.top
            })
        }).exec()
        if (options.ZTPoint) {
            this.setData({
                ZTPoint: options.ZTPoint
            })
        }

        wx.getLocation({
            type: 'gcj02',
            success: function (res) {
              that.setData({lat:res.latitude,lon:res.longitude})
              that.getShopInfo(options.id)
            },
            fail:function(){
              that.getShopInfo(options.id)
            }
        })

        const { windowWidth } = wx.getSystemInfoSync();
        this.setData({ windowWidth });
        console.log(windowWidth)
    },

    getShopInfo (id) {
        commonApi._post("/supplier/get_supplier_products", 
        {supplier_id: id, lon: this.data.lon,lat: this.data.lat}
        ).then(res => {
            if (res.code == 0) { 
                wx.showToast({title: res.msg,icon:'none'})
                setTimeout(() => { wx.navigateBack()}, 1000);
                return
            } else {
                // res.data.products = [...res.data.products,...res.data.products,...res.data.products,...res.data.products]
                this.setData({ supplierInfo: res.data})

                if (res.data.products.length>0) {
                    let id = res.data.products[0].id
                    this.getProductInfo(id)
                }
            }
        })
    },

    changeProduct (e) {
        let _this = this;
        let index = e.currentTarget.dataset.index;
        let prod = e.currentTarget.dataset.item;
        this.setData({
            idIndex: index
        })
        this.getProductInfo(prod.id)

        let windowWidth = this.data.windowWidth;
        let domId = e.currentTarget.id
        wx.createSelectorQuery().select(`#${domId}`).boundingClientRect(rect => {
            console.log(rect)
            if (rect) {
                let targetScrollLeft = rect.left + (rect.width / 2) - (windowWidth / 2)+_this.data.scrollLeft;
                console.log(e, targetScrollLeft)
                this.setData({
                    scrollLeft: targetScrollLeft
                });
            }
        }).exec()

    },


    getProductInfo (id) {
        commonApi._post("product/get_product_detail", {id: id}).then(res => {
            res.data.flag = res.data.sku.find(item => item.flag == 'on') ? res.data.flag : 0;
            let resData = res.data
            try {
                resData.shipment_tag_arr = []
                if (resData.shipment_tag) {
                    resData.shipment_tag_arr = resData.shipment_tag.split(',')
                    resData.shipment_tag_str = resData.shipment_tag_arr.join(' | ')
                }
                if (resData.service_tag) {
                    resData.service_tag_str = resData.service_tag.split(',').join(' | ')
                }
                if (resData.parameter_tag) {
                    resData.parameter_tag_str = resData.parameter_tag.split(',').join(' | ')
                }
                if (resData.supplier_headimg) {
                    resData.supplier_headimg = that.showImg(resData.supplier_headimg)
                }

            } catch(e) {} 

            // let swiperRange = this.data.swiperRange;
            // swiperRange.video = resData.videourl? { min: 0, max: 0 } : { min: -1, max: -1 }
            // swiperRange.picture = {min:swiperRange.video.max+1, max:swiperRange.video.max+1+resData.listimg.length-1}
            // swiperRange.sku = {min:swiperRange.picture.max+1,max:swiperRange.picture.max+1+resData.sku.length-1}
            this.setData({
                info: resData,
                // swiperRange: swiperRange,
                shareImg: null,
                prod_phone: resData.scene_tel
            })

            this.drawImg()
        })
    },

    showImg (img) {
        if (!img) { return img }
        if (img.indexOf('https://') != -1 || img.indexOf('http://') != -1) {
            return img;
        } else {
            // return "https://test.api.cloud.sz-trip.com"+img
            return "https://static.ticket.sz-trip.com" + img;
        }
    },


    BroswerRecord: function () {
        setTimeout(() => {
            if (app.globalData.uuid) {
                commonApi._post('browse/browse_record', {
                    type: "goods",
                    title: this.data.info.title,
                    drive: "mini",
                    source_id: this.data.info.id,
                    url: "/pages/info/postProductInfo/index?id=" + this.data.info.id,
                    uuid: app.globalData.uuid
                }).then(res => {})
            } else {
                this.BroswerRecord();
            }
        }, 500)
    },

    onPageScroll: function (e) {
        let that = this,
            height = this.data.top;
        let topHeight = height;
        wx.createSelectorQuery().select('#menus').boundingClientRect(function (rect) {
            console.log(rect,height, e.scrollTop)
            if (rect.top < topHeight) {
                // 此时应该把menus固定在顶部
                that.setData({ fixed: true})
            }
            if (e.scrollTop<100) {
                that.setData({fixed: false})
            }
        }).exec()

    },
    showCart: function () {
        commonApi.user_post('wx/get_user_keep', {
            jumpurl: '/pages/info/postProductInfo/index?id=' + this.data.id,
            title: this.data.info.title,
            type: 'mini'
        }).then(res => {
            if (res.data.subscribe == 0) {
                this.setData({
                    wxqrcode: res.data.qrcode,
                    showQrCode: true
                })
            } else {
                if (this.data.info.sku.length == 0) {
                    wx.showToast({
                        title: '该产品未设置规格，不能加购',
                        icon: 'none'
                    })
                    return;
                }
                this.setData({
                    skuFlag: "cart"
                })
                let that = this
                wx.createSelectorQuery().select('#skuImg').boundingClientRect(function (res) {
                    console.log(res)
                    that.setData({
                        cartImgInfo: 'top:' + res.top + 'px;left:' + res.left + 'px;'
                    })
                }).exec()
            }
        })
    },
    hideSku: function () {
        this.setData({
            skuFlag: null,
            cartImgInfo: null
        })
    },
    minus: function () {
        if (this.data.producNum == 1) return;
        this.setData({
            producNum: this.data.producNum - 1
        })
    },
    add: function () {
        this.setData({
            producNum: this.data.producNum + 1
        })
    },
    selectSku: function (e) {
        let index = e.currentTarget.dataset.index;
        this.setData({
            skuIndex: index,
            swiperCurrent: index+this.data.swiperRange.picture.max+1
        })
    },
    showOrder: function () {
        commonApi.user_post('wx/get_user_keep', {
            jumpurl: '/pages/info/postProductInfo/index?id=' + this.data.id,
            title: this.data.info.title,
            type: 'mini'
        }).then(res => {
            if (res.data.subscribe == 0) {
                this.setData({
                    wxqrcode: res.data.qrcode,
                    showQrCode: true
                })
            } else {
                if (this.data.info.sku.length == 0) {
                    wx.showToast({
                        title: '该产品未设置规格，不能购买',
                        icon: 'none'
                    })
                    return;
                }
                let swiperCurrent = this.data.swiperCurrent;
                let skuIndex = swiperCurrent - this.data.swiperRange.sku.min
                console.log(swiperCurrent, skuIndex)
                if (skuIndex<0) {skuIndex=0}
                this.setData({
                    skuFlag: 'order',
                    skuIndex: skuIndex,
                    swiperCurrent: skuIndex+this.data.swiperRange.picture.max+1
                })
            }
        })
    },
    order: function (e) {
        let skuFlag = e.currentTarget.dataset.type
        app.globalData.postProduct = []
        app.globalData.list = []
        commonApi.user_post("/product/checkStock", {
            sku_id: this.data.info.sku[this.data.skuIndex].id,
        }).then(res => {
            if (res && res.code != 1) {
                return;
            } else {
                if (skuFlag == 'order') {
                    pagePoint({
                        event: 'product_order',
                        param: {
                            id: this.data.info.id,
                            type: this.data.info.type
                        }
                    }, 1)
                    wx.setStorageSync('login_from', 'product_order_login')
                    wx.setStorageSync('order_from', 'product_order_submit')
                    app.globalData.couponInfo = null;
                    // 购买
                    let product = [{
                        product: {...this.data.info,ZTPoint:this.data.ZTPoint},
                        sku: this.data.info.sku[this.data.skuIndex],
                        productNum: this.data.producNum
                    }];

                    app.globalData.listName = null
                    app.globalData.product = product[0];
                    wx.navigateTo({
                        url: '/pages/order/food/index',
                    })
                } else {
                    let tag_id = this.data.info.tag_id,type = ''
                    if (tag_id.includes(20) || tag_id.includes(19)) {  //文创
                      type = '1'
                    }else if (tag_id.includes(5)) { //非遗
                      type = '2'
                    }else {
                      type = ''
                    }
                    commonApi.user_post("cart/add_sku", {
                        sku_id: this.data.info.sku[this.data.skuIndex].id,
                        num: this.data.producNum,
                        type:type
                    }).then(res => {
                        if (res.code == 1) {
                            commonApi.user_post('cart/get_list', {}).then(res => {
                                this.setData({
                                    cartCount: res.data.length
                                })
                            })
                            // 加动效
                            this.setData({
                                skuFlag: null,
                                aniSkuIndex: this.data.skuIndex,
                                cartImgInfo: null
                            })
                            setTimeout(() => {
                                this.setData({
                                    aniSkuIndex: -1
                                })
                                wx.showModal({
                                    title: "提示",
                                    content: "去购物车结算？",
                                    success: function (res) {
                                        if (res.confirm) {
                                            wx.navigateTo({
                                                url: '/pages/user/cartlist/list',
                                            })
                                        }
                                    }
                                })
                            }, 650)
                        }
                    })
                }
            }
        })

    },
    // 分享
    share: function () {
        if (!wx.getStorageSync("jstrip_token")) {
            pagePoint({
                event: 'product_share_login',
                type: this.data.info.type,
                id: this.data.info.id
            }, 1)
            commonApi.user_post("user/getMyInfo", {}).then(res => {

            })
            return;
        }
        if (!this.data.shareImg) {
            wx.showToast({
                title: '图片生成中，稍后再试',
                icon: 'none'
            })
            return;
        }
        this.setData({
            showShareFlag: !this.data.showShareFlag
        })
    },
    // 保存
    save() {
        let url = this.data.shareImg,
            that = this;
        wx.authorize({
            /* 这个就是保存相册的 */
            scope: 'scope.writePhotosAlbum',
            success() {
                wx.saveImageToPhotosAlbum({
                    filePath: url,
                    success(res) {
                        wx.showToast({
                            title: '保存成功',
                            icon: "success"
                        })
                        that.setData({
                            showShareFlag: !this.data.showShareFlag
                        })
                        pagePoint({
                            event: 'product_share_save',
                            type: that.data.info.type,
                            id: that.data.info.id
                        }, 1)
                    },
                    fail(res) {
                        wx.showToast({
                            title: '保存失败',
                            icon: 'none'
                        })
                    }
                })
            },
            complete(res) {
                console.log(res);
                /* 这里判断一下如果没有授权重新打开设置选项 */
                wx.getSetting({
                    success(res) {
                        if (!res.authSetting['scope.writePhotosAlbum']) {
                            /* 打开设置的方法 */
                            // opensit();
                            wx.showToast({
                                title: '请打开权限后再试',
                                icon: 'none'
                            })
                        }
                    }
                });
            }
        });

    },
    pagePoint: function (e) {
        pagePoint(e)
    },
    // 绘制海报
    drawImg: function () {
        var that = this,
            userinfo = wx.getStorageSync('jstrip_userInfo');
        if (!userinfo) {
            // 去登录
            return false;
        }
        const ctx = wx.createCanvasContext('imageCanvas');
        // const device = wx.getSystemInfoSync();
        // const ratio = device.screenWidth / 750;

        // 先获取到图片信息
        let promise2 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
                src: that.data.info.headimg,
                success: function (res) {
                    resolve(res);
                },
                fail: function (res) {
                    reject(res);
                }
            })
        })
        let promise3 = new Promise(function (resolve, reject) {
            let userid = wx.getStorageSync('jstrip_userid')
            new QRCode('myQrcode', {
                text: 'https://m.cloud.sz-trip.com/FoodShopDetail?id=' + that.data.info.id + '&sharedUserId=' + userid + '&channel=-1',
                width: 500,
                height: 500,
                padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
                correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
                callback: (res) => {
                    resolve(res);
                }
            })
        })
        //成功得到图片信息后，开始绘图
        Promise.all([promise2, promise3]).then(imgs => {
            ctx.save();
            ctx.beginPath(); //开始绘制
            that.handleBorderRect(ctx, 0, 0, 551 * ratio, 407 * ratio, 25 * ratio, '#ccc')
            ctx.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
            ctx.drawImage(imgs[0].path, 0, 0, 551 * ratio, 407 * ratio);
            ctx.restore();
            ctx.save();
            that.handleBorderRect2(ctx, 0, 407 * ratio, 551 * ratio, 236 * ratio, 25 * ratio, '#fff')
            ctx.restore();
            // 绘制二维码
            ctx.drawImage(imgs[1].path, 373 * ratio, 495 * ratio, 137 * ratio, 137 * ratio);
            // 开始文字绘制
            ctx.setFillStyle("#000");
            ctx.setFontSize(30 * ratio); //字大小
            ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
            that.drawText(ctx, that.data.info.title, 25 * ratio, 450 * ratio, 480 * ratio, ratio);
            // 售价
            ctx.setFillStyle("#D62828");
            ctx.setFontSize(40 * ratio); //字大小
            ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
            let price = "￥" + (that.data.info.price / 100);
            let width = ctx.measureText(price).width;
            ctx.fillText(price, 25 * ratio, 620 * ratio);
            // 副标题
            ctx.setFillStyle("#999999");
            ctx.setFontSize(28 * ratio); //字大小
            ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
            let subtitle = that.data.info.subtitle;
            if (that.data.info.subtitle.length > 10) {
                subtitle = that.data.info.subtitle.substr(0, 10) + '...'
            }
            ctx.fillText(subtitle, 25 * ratio, 540 * ratio);
            // ctx.draw();
            // 划线价
            ctx.setFillStyle("#999999");
            ctx.setFontSize(32 * ratio); //字大小
            ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
            let market_price = "￥" + (that.data.info.market_price / 100)
            ctx.fillText(market_price, 40 * ratio + width, 620 * ratio);
            let market_price_width = ctx.measureText(market_price).width;
            // 划线
            ctx.beginPath()
            ctx.setLineWidth(1)
            ctx.moveTo(40 * ratio + width, 608 * ratio)
            ctx.lineTo(45 * ratio + width + market_price_width, 608 * ratio)
            ctx.stroke();
            // 长按识别二维码
            // ctx.setFillStyle("#666");
            // ctx.setFontSize(22 * ratio); //字大小
            // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
            // ctx.fillText("长按识别二维码", 404*ratio, 710*ratio);
            // 长按图片转发或保存
            // ctx.setFillStyle("#000");
            // ctx.setFontSize(24 * ratio); //字大小
            // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
            // ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio);
            ctx.draw();
            // 转为图片
            setTimeout(() => {
                wx.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    canvasId: 'imageCanvas',
                    success: function (res) {
                        that.setData({
                            shareImg: res.tempFilePath
                        })
                    },
                    fail(err) {
                        console.log('agdgjgdajhg', err)
                    }
                })
            }, 500)
            return false;
        }).catch(err => {
            console.log("this err", err)
        })
    },
    // 圆角矩形
    handleBorderRect(ctx, x, y, w, h, r, color) {
        ctx.beginPath();
        ctx.moveTo(x + w, y + h);
        ctx.lineTo(x, y + h)
        // 左上角
        ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
        ctx.moveTo(x + r, y);
        ctx.lineTo(x + w - r, y);
        ctx.lineTo(x + w, y + r);
        // 右上角
        ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
        ctx.lineTo(x + w, y + h);
        ctx.lineTo(x + w - r, y + h);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.closePath();
    },
    handleBorderRect2(ctx, x, y, w, h, r, color) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + w, y)
        // 右下角
        ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
        ctx.lineTo(x + r, y + h);
        ctx.lineTo(x, y + h - r);
        // 左下角
        ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
        ctx.lineTo(x, y);
        ctx.lineTo(x, y);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.closePath();
    },
    // 绘制两行文字
    drawText: function (ctx, str, x, y, canvasWidth, ratio) {
        let row = [],
            temp = "",
            chr = str.split("");
        for (var a = 0; a < chr.length; a++) {
            if (ctx.measureText(temp).width < canvasWidth) {
                temp += chr[a];
            } else {
                a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
                row.push(temp);
                temp = "";
            }
        }
        row.push(temp);

        //如果数组长度大于2 则截取前两个
        if (row.length > 2) {
            var rowCut = row.slice(0, 2);
            var rowPart = rowCut[1];
            var test = "";
            var empty = [];
            for (var a = 0; a < rowPart.length; a++) {
                if (ctx.measureText(test).width < canvasWidth - 30 * ratio) {
                    test += rowPart[a];
                } else {
                    break;
                }
            }
            empty.push(test);
            var group = empty[0] + "..." //这里只显示两行，超出的用...表示
            rowCut.splice(1, 1, group);
            row = rowCut;
        }
        for (var b = 0; b < row.length; b++) {
            ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth);
        }
    },
    gotoDetail: function (e) {
        let item = e.currentTarget.dataset.item;
        pagePoint({
            event: 'recommend_click',
            param: {
                id: item.id,
                type: item.type
            }
        }, 1)
        if (item.type == 'travels') {
            // 游记做特殊处理 其他都按照原来的来
            wx.navigateTo({
                url: '/pages/info/strategyInfo/index?id=' + item.s_id,
            })
        } else {
            gotoDetail(item);
        }
    },

    gotolocation: function () {
        let info = this.data.supplierInfo;
        wx.openLocation({
          latitude: Number(info.lat),
          longitude: Number(info.lon),
          name:info.shop_name,
          address:info.address
        })
    },

    callPhone :function () {
        wx.makePhoneCall({
            phoneNumber: this.data.prod_phone,
        })
    },

    viewImg:function(e){
        let item = e.currentTarget.dataset.item;
        if (item.img_list.length>0) {
            wx.previewImage({
                urls: item.img_list
            })
        }
    },

    swiperChange (e) {
        if(e.detail.source == "touch") {
        let index = e.detail.current
        this.setData({
            swiperCurrent: index
        })
        }
        console.log(e, this.data.swiperCurrent)
    },
    changeSwiperCurrent (e) {
        let index = e.currentTarget.dataset.index
        this.setData({
            swiperCurrent: index
        })
    },
    changeSimpleVal (e) {
        let keyname = e.currentTarget.dataset.keyname;
        let val = e.currentTarget.dataset.val;
        let param = {}
        param[keyname] = val
        this.setData(param)
        console.log(this.data)
    },


    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        app.globalData.postProduct = []
        if (!wx.getStorageSync('jstrip_token')) {
            return;
        }
       
        commonApi.user_post('cart/get_count', {noLogin: true}).then(res => {
            this.setData({
                cartCount: res.data //1
            })
            })
        
    },
    playVideo() {
        // 播放视频需要把autoplay暂停
        this.setData({
            autoPlay: false
        })
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})