// pages/activity/detail/detail.js
const app = getApp();
var t = null;

Page({

    /**
     * 页面的初始数据
     */
    data: {
        current_swiper:0,
        slide: [],
        peopleList: [],
        num:1,
        actEndTimeList: [],
        is_zan:false,
        display:false,
        content:'',
        is_ask:false,
        is_reply:false,
        placeholder:'输入您的留言',
        is_join:false,
        img_heights: [], //图片宽度
        img_width: 750, //默认
        show_canvas: false,
        can_save:false,
    },
    //获取图片真实宽度
    imageLoad: function (e) {
        var img_width = e.detail.width,
           img_height = e.detail.height,
            //宽高比
            ratio = img_width / img_height;
        console.log(img_width, img_height);
        //计算的高度值
        var viewHeight = 750 / ratio;
        var img_height = viewHeight;
        var img_heights = this.data.img_heights;
        //把每一张图片的对应的高度记录到数组里
        img_heights[e.target.dataset.id] = img_height;
        console.log('img_heights',img_heights);
        this.setData({
            img_heights: img_heights
        })
    },
    //查看我的订单
    goMyRelease() {
        this.setData({is_showRelease_modal:false,});
        wx.navigateTo({url:'/pages/order/order-detail/order-detail?id=' + this.data.order_id})
    },
    //完成按钮
    goBack() {
        wx.redirectTo({url:'/pages/spell-list/spell-list?current=' + 0})
    },
    disableScroll() {
    },
    handleBackground() {
        this.setData({is_showRelease_modal:false,})
    },
    // 问一问
    ask(e) {
        console.log('前问一问-display', this.data.display);
        this.setData({
            display: !this.data.display,
            is_ask:true,is_reply:false,
            content:'' ,
            placeholder:'输入您的留言',
        });
        console.log('后问一问-display', this.data.display);
        // wx.navigateTo({
        //     url: '/pages/comment/comment?activity_id=' + this.data.detail_id
        //         + '&common_id=' + 0
        // })
        // console.log('问',e.detail.value);
        // this.setData({focus:true})
    },
    //输入评论内容
    inputComment(e) {
        this.setData({ content: e.detail.value });
    },
    //发送评论/回复
    clickComment(e) {
        console.log('评论', e);
        this.setData({ display: false });
        if(this.data.content === '' ) {
            wx.showToast({title:'请输入内容',icon:'none'})
        }else {
            let url = '/portal/Active/common';
            let params = {
                token:wx.getStorageSync('token'),
                activeId:this.data.detail_id,
                commonId: this.data.is_ask?0:this.data.commet_id,
                content:this.data.content,
                formId:e.detail.formId,
            };
            app.post(url,params,{}).then((res)=>{
                console.log('提交评论',res);
                if(+res.code === 1) {
                    wx.showToast({title:this.data.is_ask?'留言成功':'回复成功',icon:'none',});
                    this.getDetail();
                }
            })
        }
    },
    //评论input失去焦点
    blur() {
        this.setData({ display: false });
    },
    //点击键盘上的完成
    confirm() {
        this.setData({ display: false });
        this.clickComment();
    },
    //回复
    reply(e) {
        const id = e.currentTarget.dataset.id;
        this.setData({
            display: !this.data.display,
            is_ask:false,is_reply:true,
            commet_id:id,content:'' ,
            placeholder:'输入您的回复'
        });
        // wx.navigateTo({
        //     url: '/pages/comment/comment?is_reply=' + true
        //         + '&activity_id=' + this.data.detail_id + '&common_id=' + id
        // })
    },
    //收藏/取消收藏
    collect() {
        console.log('收藏');
        let self = this;
        let url = '/portal/Active/collection';
        let url_del = '/portal/Active/delCollection';
        let header = {
            "XX-Token": wx.getStorageSync('token')
        };
        let params = {
            token: wx.getStorageSync('token'),
            activeId: self.data.detail_id,
        };
        if(self.data.is_collect) {
            app.post(url_del, params, header).then((res) => {
                console.log('取消收藏',res);
                if(+res.code === 1) {
                    wx.showToast({title:res.message,icon:'none'});
                    self.setData({
                        is_collect: 0
                    });
                }
            })
        }else {
            app.post(url, params, header).then((res) => {
                console.log('收藏',res);
                if(+res.code === 1) {
                    wx.showToast({title:res.message,icon:'none'});
                    self.setData({
                        is_collect: 1
                    });
                }
            })
        }

    },
    //点赞
    clickZan(e) {
        let self = this;
        const id = e.currentTarget.dataset.id;
        const index = e.currentTarget.dataset.index;
        let url = '/portal/Active/perfect';
        let header = {
            "XX-Token": wx.getStorageSync('token')
        };
        let params = {
            token: wx.getStorageSync('token'),
            commonId: id,
        };
        app.post(url, params, {}).then((res) => {
            console.log('点赞', res);
            if (+res.code === 1) {  //
                wx.showToast({title:res.message,icon:'none'});
                self.setData({
                    [`commentList[${index}].is_prefect`]: true,
                    [`commentList[${index}].prefect`]: res.message == '该评论已赞'?+self.data.commentList[index].prefect:+self.data.commentList[index].prefect + 1,
                });
                // console.log('paise_user', paise_user);
            }
        })
    },
    swiperChange(e) {
        // console.log(e);
        this.setData({current_swiper: e.detail.current})
    },
    onPageScroll(e) {
        // console.log('页面滚动', e);
        if(e.scrollTop > 140) {
            this.setData({hidden_top:true})
        }else if(e.scrollTop <=140){
            this.setData({hidden_top:false})
        }
    },
    // 增加数量
    addCount(e) {
        // let k = e.currentTarget.dataset.idx;
        // let t = e.currentTarget.dataset.children_idx;
        // let cartslist = this.data.cartslist;
        // let num = cartslist[k].children[t].num;
        // let product_id = cartslist[k].children[t].product_id;
        let num = this.data.num;
        num ++;
        this.setData({
            num: num
        });
    },
    // 减少数量
    minusCount(e) {
        let num = this.data.num;
        if (num <= 1) {
            return false;
        }
        num --;
        this.setData({
            num: num
        });
    },
    //获取详情
    getDetail() {
        const self = this;
        console.log('city',self.data.city);
        let url = '/portal/Active/mealDetail';
        let params = {
            token:wx.getStorageSync('token'),
            activeId: self.data.detail_id,
        };
        let header = {
            "token": wx.getStorageSync('token')
        };
        app.post(url, params, {}).then((res) => {
            console.log('获取详情', res);
            if (+res.code === 1) {
                self.setData({
                    detail: res.data.active,
                    'detail.time': app.initTime(res.data.active.surplus),
                    end_time: res.data.active.time,
                    over_hours:res.data.active.over_time,//几小时截止
                    join_people: res.data.son,
                    commentList:res.data.common,
                    is_collect:res.data.is_collect,
                    count:res.data.count,
                    is_send:res.data.is_send,//能否参加1：不能2：能
                });
                self.getCode();//获取二维码(此二维码不能进入活动详情，已改为小程序码)
                // self.getImage();
                // self.getLocalImage();
                // self.countDown();
                // let newTime = new Date().getTime();//当前时间戳
                // let end_time = app.nextTime(this.data.end_time, this.data.over_hours);//截止时间
                // let endTime = new Date(end_time).getTime(); //截止时间戳
                // if (endTime - newTime > 0) {}
                // （0全部，2待拼成，3人数不足未拼成,4已拼成，5已取消，6已完成，7已评价，8已拼成（活动未结束）,9删除
                const status = res.data.active.status;
                if(status === 2 || status === 6 || status === 7 || status === 8) {
                    console.log('调用倒计时');
                    self.countDown();
                }else {
                    console.log('不调用倒计时');
                    let countDownArr = [];
                    let obj = null;
                    obj = {
                        day: '00',
                        hou: '00',
                        min: '00',
                        sec: '00'
                    };
                    countDownArr.push(obj);
                    this.setData({
                        'detail.time': countDownArr,
                    });
                }
                // this.drawCard();
            }
            // wx.hideLoading()
        })

    },
    //确认拼餐
    confirmJoin(e) {
        const self = this;
        if(+self.data.is_send === 2){ //1:不能参与2：可参与
            let url = '/portal/Active/join';
            let params = {
                token: wx.getStorageSync('token'),
                number: self.data.num,
                activeId: self.data.detail_id,
                formId: e.detail.formId,
            };
            let header = {
                "token": wx.getStorageSync('token')
            };
            app.post(url, params, {}).then((res) => {
                console.log('确认拼餐', res);
                if (+res.code === 1) {
                    // wx.showToast({title:'拼餐成功',icon:'success'});
                    self.setData({is_showRelease_modal:true,order_id:+res.data.orderId,is_join:true});
                    self.getDetail();
                }else if(+res.code === 0) { //参与失败按钮还是确认拼活动
                    self.setData({is_join:false});
                }
            })
        }
    },
    timeFormat(param) { //小于10的格式化函数
        return param < 10 ? '0' + param : param;
    },
    time() {
        const self = this;
        self.data.detail.surplus--;
        //定時器，每秒重新計算
        // setTimeout(function () {
        //     self.time();
        // },1000)
    },
    countDown() { //倒计时函数
        t = setTimeout(this.countDown, 1000);
        let countDownArr = [];
        let obj = null;
        if (this.data.detail.surplus > 0) { //未结束
            this.time();
            // console.log('surplus', this.data.detail.surplus);
            // t = setTimeout(this.countDown, 1000);
            const time = app.initTime(this.data.detail.surplus);
            // console.log('time', time);
            obj = {
                day: time[0].day,
                hou: time[0].hou,
                min: time[0].min,
                sec: time[0].sec
            };
            t;
            // this.setData({'detail.time': app.initTime(this.data.detail.surplus),})
        } else {
            obj = {
                day: '00',
                hou: '00',
                min: '00',
                sec: '00'
            };
            clearTimeout(t);
            this.end();
        }
        countDownArr.push(obj);
        // 渲染，然后每隔一秒执行一次倒计时函数
        this.setData({
            // countDownList: countDownArr,
            'detail.time': countDownArr,
        });
        // console.log('time',this.data.detail.time);
    },
    //倒计时结束
    end() {
        const self = this;
        let url = '/portal/Active/activity';
        let params = {
            activeId: self.data.detail_id,
        };
        let header = {
            "token": wx.getStorageSync('token')
        };
        app.post(url, params, {}).then((res) => {
            console.log('倒计时结束', res);
            if (+res.code === 1) {
                // wx.showToast({title:'拼活动结束',icon:'success'})
            }
        })
    },
    //导航
    getNavigate() {
        const self = this;
        const arr = self.data.detail.latng.split(',');
        console.log('arr',arr,arr[0],arr[1]);

        wx.openLocation({//​使用微信内置地图查看位置。
            latitude: +arr[0],//要去的纬度-地址
            longitude: +arr[1],//要去的经度-地址
            // lat:39.086437,
            // lng:117.122583,
            name: self.data.detail.address,
            address: self.data.detail.address
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log('详情options', options);
        this.setData({detail_id:+options.id?+options.id:''});
    },
    //获取活动二维码
    getCode() {
        const self = this;
        let url = '/portal/Index/qrCode';
        let params = {
            id: self.data.detail_id,
            token:wx.getStorageSync('token'),
            type:2,//1拼活动，2拼餐
        };
        app.post(url, params, {}).then((res) => {
            console.log('获取活动二维码', res);
            if (+res.code === 1) {
                self.setData({qr_code:res.data},() => {
                    // console.log('二维码',self.data.qr_code);
                    wx.getImageInfo({
                        src: 'http://' + self.data.qr_code,
                        success(res) {
                            // console.log('二维码本地路径',res);
                            self.setData({local_qr_code:res.path});
                            self.getLocalImage();
                        },
                        fail() {
                            console.log('失败');
                        }
                    })
                });
            }
        })
    },
    //点击分享
    share() {
        this.setData({show_canvas: true}, () => {
            this.drawCard();
        })
    },
    hideCanvasMask() {
        // this.setData({show_canvas: true});
    },
    //关闭分享卡片
    closeCanvas() {
        this.setData({show_canvas: false});
        // wx.navigateBack({delta:1})
    },
    //保存图片到手机相册
    saveToPhone() {
        this.getPower();
    },
    //详情图链接转成本地路径
    getLocalImage() {
        const self = this;
        wx.getImageInfo({
            src: self.data.detail.banner[0],
            success(res) {
                // console.log('详情图本地路径',res);
                self.setData({local_img:res.path});
                self.drawCard();
                // console.log(res.width)
                // console.log(res.height)
            }
        })
    },
    // 画圆角 ctx、x起点、y起点、w宽度、y高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
    roundRect(ctx, x, y, w, h, r, fillColor, strokeColor) {
        const self = this;
        // 开始绘制
        ctx.beginPath()

        // 绘制左上角圆弧 Math.PI = 180度
        // 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
        ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

        // 绘制border-top
        // 移动起点位置 x终点、y终点
        ctx.moveTo(x + r, y)
        // 画一条线 x终点、y终点
        ctx.lineTo(x + w - r, y)
        // self.data.ctx.lineTo(x + w, y + r)

        // 绘制右上角圆弧
        ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

        // 绘制border-right
        ctx.lineTo(x + w, y + h - r)
        // self.data.ctx.lineTo(x + w - r, y + h)

        // 绘制右下角圆弧
        ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

        // 绘制border-bottom
        ctx.lineTo(x + r, y + h)
        // self.data.ctx.lineTo(x, y + h - r)

        // 绘制左下角圆弧
        ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

        // 绘制border-left
        ctx.lineTo(x, y + r)
        // self.data.ctx.lineTo(x + r, y)

        if (fillColor) {
            // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
            ctx.setFillStyle(fillColor)
            // 对绘画区域填充
            ctx.fill()
        }

        if (strokeColor) {
            // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
            ctx.setStrokeStyle(strokeColor)
            // 画出当前路径的边框
            ctx.stroke()
        }
        // 关闭一个路径
        // self.data.ctx.closePath()

        // 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore
        ctx.clip()
    },
    drawCard() {
        console.log('开始画');
        const self = this;
        //先创建一个画布
        const ctx = wx.createCanvasContext("canvas");
        self.setData({ctx:ctx});
        // self.roundRect(ctx,0,0,300,302,10,'transparent','transparent');//画圆角
        // self.roundRect(ctx,0,0,350,402,10,'#000','#000');//画圆角
        // ctx.arc(150, 75, 50, 0, 2 * Math.PI);//剪切
        // ctx.setFillStyle('#ffffff');
        // ctx.fill();
        // ctx.clip();
        //填充背景色
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, 280, 400);
        console.log(self.data.local_img);
        console.log(self.data.qr_code);
        //将图片转化为画布
        ctx.drawImage(self.data.local_img, 0, 0, 280, 280);//详情图
        console.log(111);
        // ctx.drawImage(self.data.local_qr_code, 220, 209, 60, 60);//二维码
        ctx.drawImage('../../../images/qr_code.jpg', 180, 320, 60, 60);//小程序码
        //标题
        ctx.setFontSize(12);
        ctx.setFillStyle('#000');
        ctx.textAlign = "left";
        console.log(111);
        ctx.fillText(self.data.detail.title, 16, 306.5);
        ctx.fillText(self.data.detail.title, 15.5, 307);
        ctx.restore();
        //地点
        ctx.setFontSize(9);
        ctx.setFillStyle('#000000');
        ctx.fillText('地点：', 16, 325);
        const text = self.data.detail.name;
        var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
        var temp = "";
        var row = [];
        ctx.setFontSize(9);
        ctx.setFillStyle('#000000');
        for (var a = 0; a < chr.length; a++) {
            if (ctx.measureText(temp).width < 100) {
                temp += chr[a];
            }
            else {
                a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
                row.push(temp);
                temp = "";
            }
        }
        row.push(temp);

        //如果数组长度大于1 则截取前1个
        if (row.length > 1) {
            var rowCut = row.slice(0, 1);
            var rowPart = rowCut[0];
            var test = "";
            var empty = [];
            for (var a = 0; a < rowPart.length; a++) {
                if (ctx.measureText(test).width < 100) {
                    test += rowPart[a];
                }
                else {
                    break;
                }
            }
            empty.push(test);
            var group = empty[0] + "...";//这里只显示一行，超出的用...表示
            rowCut.splice(0, 1, group);
            row = rowCut;
        }
        for (var b = 0; b < row.length; b++) {
            ctx.fillText(row[b], 40, 325 + b * 16, 150);
        }
        ctx.restore();
        //时间
        ctx.setFontSize(9);
        ctx.setFillStyle('#333333');
        ctx.fillText('时间：', 16, 340);
        ctx.fillText(self.data.end_time, 40, 340);
        ctx.restore();
        // ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
        //成功执行，draw方法中进行回调
        ctx.draw(true, function () {
            // wx.hideLoading();
            console.log("draw callback success");
            self.setData({can_save: true,show_canvas: true});
            console.log(self.data.can_save);
        })
    },
    //获取保存到相册的权限
    getPower() {
        const that = this;
        //保存临时图片
        wx.getSetting({
            success(res) {
                if (!res.authSetting['scope.writePhotosAlbum']) {
                    wx.authorize({
                        scope: 'scope.writePhotosAlbum',
                        success() { //这里是用户同意授权后的回调
                            that.savePic();
                        },
                        fail() { //这里是用户拒绝授权后的回调
                            wx.showModal({
                                title: '提示',
                                content: '若不打开授权，则无法将图片保存在相册中！',
                                showCancel: true,
                                cancelText: '暂不授权',
                                cancelColor: '#000000',
                                confirmText: '去授权',
                                confirmColor: '#3CC51F',
                                success: function (res) {
                                    if (res.confirm) {
                                        wx.openSetting({
                                            //调起客户端小程序设置界面，返回用户设置的操作结果。
                                            success: function (ret) {
                                                if (ret.authSetting["scope.writePhotosAlbum"] == true) {
                                                    wx.showToast({
                                                        title: '授权成功',
                                                        icon: 'none',
                                                        duration: 1000
                                                    });
                                                    //再次授权，保存到相册
                                                    that.savePic();
                                                } else {
                                                    wx.showToast({
                                                        title: '授权失败',
                                                        icon: 'none',
                                                        duration: 1000
                                                    })
                                                }
                                            }
                                        })
                                    } else {
                                        wx.showToast({
                                            title: '授权失败',
                                            icon: 'none',
                                            duration: 1000
                                        })
                                        // console.log('用户点击取消')
                                    }
                                }
                            })
                        }
                    })
                } else { //用户已经授权过了
                    console.log('用户已经授权过了')
                    that.savePic();
                }
            }
        });

    },
    savePic() {
        console.log('是否能保存',this.data.can_save);
        if(this.data.can_save) {
            wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 280,
                height: 400,
                destWidth: 1120,
                destHeight: 1600,
                canvasId: 'canvas',
                fileType: 'jpg',
                quality:1,
                success: function (res) {
                    console.log("get tempfilepath(success) is:", res.tempFilePath);
                    //将图片保存在系统相册中(应先获取权限，)
                    wx.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success(res) {
                            wx.showToast({title:'保存成功',icon:'none'});
                            console.log("save photo is success")
                        },
                        fail: function () {
                            wx.showToast({title:'保存失败',icon:'none'});
                            console.log("save photo is fail")
                        }
                    })
                },
                fail: function () {
                    console.log('get tempfilepath is fail')
                }
            })
        }else {
            wx.showLoading({title:'加载中',icon:'loading',duration:1000})
        }

    },
    onShareAppMessage: function() {
        let self = this;
        self.setData({show_canvas:false,});
        // 设置菜单中的转发按钮触发转发事件时的转发内容
        var shareObj = {
            title: '火柴西路', // 默认是小程序的名称(可以写slogan等)
            path: '', // 默认是当前页面，必须是以‘/’开头的完整路径
            imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
            success: function(res) {
                if (res.errMsg == 'shareAppMessage:ok') {}
            },
            fail: function() {
                // 转发失败之后的回调
                if (res.errMsg == 'shareAppMessage:fail cancel') {
                    // 用户取消转发
                } else if (res.errMsg == 'shareAppMessage:fail') {
                    // 转发失败，其中 detail message 为详细失败信息
                }
            },
            complete: function() {
                // 转发结束之后的回调（转发成不成功都会执行）
            }
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getDetail();
    },

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

    },

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

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

    },

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

    },
})