<template>
    <view>
        <view style="background: #fff">
            <view style="font-size: 28rpx; color: #181818; padding: 20rpx 0 0 40rpx">场次：{{ data1.show_info.show_date }}</view>

            <view class="seat_grade">
                <view
                    :class="'seat_grade_info  ' + (item.tkt_num == 0 ? 'null_tic' : '') + ' ' + (select_grade == item.grade ? 'select' : '')"
                    :data-num="item.tkt_num"
                    :data-select_grade="item.grade"
                    @tap="select_gradeFun"
                    v-for="(item, index) in data1.grade_list"
                    :key="index"
                >
                    <image :src="'/images/seats/' + item.grade + '/static/pages/make_order/choose_sit/.png'" custom-style="margin-left: 10rpx;" />

                    <view style="margin: 0 10rpx 0 10rpx">¥{{ item.price }}</view>
                </view>
            </view>
        </view>
        <!-- 
<canvas disable-scroll="true"  bindtouchstart="b" bindtouchmove="c" bindtouchend="d" canvas-id="myCanvas" style="height:{{screenHeight-200}}px;width:1500rpx;"></canvas> -->
        <view
            :style="'background:yellow; left: ' + move.x + 'px;top:' + (200 + move.y) + 'px;    position: fixed;'"
            @touchstart.stop.prevent="touch1.start"
            @touchmove.stop.prevent="touch1.move"
            @touchend.stop.prevent="touch1.end"
            @touchcancel.stop.prevent="touch1.cancel"
        >
            <canvas
                :disable-scroll="true"
                canvas-id="myCanvas"
                :style="'height:' + maxCanvasH * scaleNum * newScale + 'px;width:' + maxCanvasW * scaleNum * newScale + 'px;'"
            ></canvas>
        </view>

        <view class="bottom">
            <!-- <view v-if="{{ !sel_ticket.length }}">一次最多选6个座位</view> -->
            <view class="seat_tips" v-if="!!sel_ticket.length">
                <view class="loc" v-for="(item, index) in sel_ticket" :key="index">
                    <view class="info">
                        <image src="/static/images/seats/00.png" />
                        <text :decode="true" style="font-size: 24rpx">&nbsp;{{ item.seat_info }}</text>
                    </view>

                    <text :data-ticket_id="item.ticket_id" @tap="cancel_sel">x</text>
                </view>
            </view>
            <view class="submit">
                <view class="cacu" v-if="total_price">
                    <view class="text">共计</view>
                    <view class="info">
                        <view class="price">
                            ¥
                            <text style="font-size: 44rpx; font-weight: bold">{{ total_price }}.00</text>
                        </view>
                        <view class="num" v-if="sel_ticket.length">已选择{{ sel_ticket.length }}个座位</view>
                    </view>
                </view>
                <button class="button" :disabled="!total_price" @tap="make_order">下一步</button>
            </view>
        </view>
    </view>
</template>

<script>
// pages/make_order/choose_sit/choose_sit.js
import { httpUtil, http } from '../../../utils/util';
import MinaTouch from './mina-touch'; // 1. 引入mina-touch

export default {
    data() {
        return {
            selected_seats: [],
            max_select: 6,

            baseSpace: {
                x: 10,
                y: 10
            },

            //座位间的距离
            baseSize: {
                x: 22,
                y: 20
            },

            //图片默认尺寸
            scaleNum: 1,

            //默认缩放比例（画布宽度适应屏幕）
            newScale: 1,

            //手动缩放比例
            //手动挪动偏移距离
            move: {
                x: 0,
                y: 0
            },

            drama_id: '',

            data1: {
                show_info: {
                    show_date: ''
                },

                grade_list: []
            },

            scaleListen: false,
            select_grade: '',
            total_price_list: '',
            total_price: '',
            maxCanvasW: '',
            maxCanvasH: '',

            sel_ticket: {
                length: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let drama_id = options.drama_id;
        let that = this;
        uni.getSystemInfo({
            success(res) {
                //获取屏幕的宽成功
                that.screenWidth = res.screenWidth;
                that.screenHeight = res.screenHeight;
            }
        });
        this.setData({
            drama_id
        });
        httpUtil('/api/v1/seat-list', 'get', {
            drama_id: 75787
        }).then((res) => {
            this.setData({
                data1: res
            });
            this.init1();
        }); // 2. onload实例化mina-touch
        //会创建this.touch1指向实例对象

        new MinaTouch(this, 'touch1', {
            touchStart: function () {},
            touchMove: function () {},
            touchEnd: function () {},
            touchCancel: function () {},
            multipointStart: function () {
                console.log('multipointStart');
                that.setData({
                    scaleListen: true
                });
            },
            //一个手指以上触摸屏幕触发
            multipointEnd: function () {
                console.log('multipointEnd');
                let newScale = that.newScale;

                if (that.scaleListen == 1) {
                    debugger;
                    newScale = newScale + 1;
                } else {
                    if (that.scaleListen == -1) {
                        debugger;
                        newScale = newScale - 1;
                    }
                }

                that.setData({
                    scaleListen: false
                });

                if (newScale >= 1) {
                    that.setData({
                        newScale
                    });
                }
            },
            //当手指离开，屏幕只剩一个手指或零个手指触发(一开始只有一根手指也会触发)
            tap: function () {
                console.log('Tap');
            },
            //点按触发，覆盖下方3个点击事件，doubleTap时触发2次
            doubleTap: function () {
                // _this.setData({scaleNum:2})
                console.log('doubleTap');
            },
            //双击屏幕触发
            longTap: function () {
                console.log('longTap');
            },
            //长按屏幕750ms触发
            singleTap: function (e) {
                console.log('singleTap：选座');
                let seat_list = that.data1.seat_list;
                let selected_seats = that.selected_seats;
                let scaleNum = that.scaleNum;
                let newScale = that.newScale;
                let move = that.move;
                let maxCanvasW = that.maxCanvasW;
                let maxCanvasH = that.maxCanvasH;
                let baseSize = that.baseSize;
                let baseSpace = that.baseSpace;
                let max_select = that.max_select;
                let select_position = {
                    x: e.changedTouches[0].pageX,
                    y: e.changedTouches[0].pageY
                };
                let x = (select_position.x - move.x) / scaleNum;
                let y = (select_position.y - move.y - 200) / scaleNum;
                let cur_seat = {
                    x: Math.floor(x / (baseSize.x + baseSpace.x)),
                    y: Math.floor(y / (baseSize.y + baseSpace.y))
                };
                /* 选座 */
                // 判断是否已选中

                let a = 0;
                selected_seats.forEach((v, k) => {
                    if (cur_seat.x == v.x && cur_seat.y == v.y) {
                        selected_seats.splice(k, 1);
                        v.select = 0;
                        a = 1;
                        return;
                    }
                });

                if (a == 0) {
                    // 将坐标放入选中座位的数组中
                    seat_list.forEach((v, k) => {
                        if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status == 0) {
                            // 判断是否超过最大可选
                            if (selected_seats.length >= max_select) {
                                selected_seats.splice(max_select);
                                uni.showToast({
                                    title: '单次最多选座6个',
                                    icon: 'fail',
                                    duration: 1000
                                });
                            } else {
                                selected_seats.push(v);
                                v.select = 1;
                            }

                            return;
                        }
                    });
                }

                that.price_cac(selected_seats);
                that.init1();
            },
            //单击屏幕触发，包括长按
            rotate: function (evt) {
                //evt.angle代表两个手指旋转的角度
                console.log('rotate:' + evt.angle);
            },
            pinch: function (evt) {
                //evt.zoom代表两个手指缩放的比例(多次缩放的累计值),evt.singleZoom代表单次回调中两个手指缩放的比例
                console.log('singleZoom,' + evt.singleZoom);
                let singleZoom = evt.singleZoom;
                let newScale = that.newScale;

                if (that.scaleListen == true) {
                    if (singleZoom > 1.6) {
                        debugger;
                        that.scaleListen = 1;
                    } else {
                        if (singleZoom < 0.6) {
                            debugger;
                            that.scaleListen = -1;
                        }
                    }
                }
            },
            pressMove: function (evt) {
                //evt.deltaX和evt.deltaY代表在屏幕上移动的距离,evt.target可以用来判断点击的对象
                that.setData({
                    move: {
                        x: that.move.x + evt.deltaX,
                        y: that.move.y + evt.deltaY
                    }
                });
            },
            swipe: function (evt) {
                //在touch结束触发，evt.direction代表滑动的方向 ['Up','Right','Down','Left']
                console.log('swipe:' + evt.direction);
            }
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        select_gradeFun(e) {
            if (e.currentTarget.dataset.num !== 0) {
                if (this.select_grade == e.currentTarget.dataset.select_grade) {
                    this.setData({
                        select_grade: ''
                    });
                } else {
                    this.setData({
                        select_grade: e.currentTarget.dataset.select_grade
                    });
                }
            }

            this.init1();
        },

        // 计算票总价 '含多买折扣'
        price_cac(selected_seats) {
            const p = [];
            const grade_price = [];
            grade_price.push(this.data1.grade_price); // Object.prototype.fun = () => {};
            // console.log(Object.values(grade_price[0]))

            for (var x in grade_price[0]) {
                let a = 0;
                let arr = [];

                for (let i of selected_seats) {
                    if (i.grade == x) {
                        a++;
                        arr.push({
                            row: i.row,
                            col: i.col,
                            floor: i.floor
                        });
                    }
                }

                if (grade_price[0][x][a]) {
                    p.push({
                        tkt_grade: x,
                        tkt_num: a,
                        tkt_pirce: grade_price[0][x][a],
                        tkt_loc: arr
                    });
                }
            }

            let ii = 0;

            for (let i in p) {
                ii += parseInt(p[i].tkt_pirce);
            }

            this.setData({
                total_price_list: p,
                total_price: ii
            });
        },

        init1() {
            const ctx = uni.createCanvasContext('myCanvas');
            const baseSpace = this.baseSpace;
            const baseSize = this.baseSize;
            const maxCanvasW = (baseSize.x + baseSpace.x) * (this.data1.max_x + 1); //画布最大宽度

            const maxCanvasH = (baseSize.y + baseSpace.y) * (this.data1.max_y + 1); //画布最大高度

            this.setData({
                maxCanvasW,
                maxCanvasH
            });

            if (this.screenWidth < maxCanvasW) {
                var scaleNum = this.screenWidth / maxCanvasW; //缩放比例

                this.setData({
                    scaleNum
                });
                ctx.scale(scaleNum, scaleNum);
            }

            const img = {
                '00': {
                    name: 'default',
                    url: '/static/images/seats/00.png'
                },
                '01': {
                    name: 'checked',
                    url: '/static/images/seats/01.png'
                },
                A: {
                    name: 'A',
                    url: '/static/images/seats/A.png'
                },
                B: {
                    name: 'B',
                    url: '/static/images/seats/B.png'
                },
                C: {
                    name: 'C',
                    url: '/static/images/seats/C.png'
                },
                D: {
                    name: 'D',
                    url: '/static/images/seats/D.png'
                },
                E: {
                    name: 'E',
                    url: '/static/images/seats/E.png'
                },
                F: {
                    name: 'F',
                    url: '/static/images/seats/F.png'
                },
                G: {
                    name: 'G',
                    url: '/static/images/seats/G.png'
                },
                H: {
                    name: 'H',
                    url: '/static/images/seats/H.png'
                },
                I: {
                    name: 'I',
                    url: '/static/images/seats/I.png'
                },
                J: {
                    name: 'J',
                    url: '/static/images/seats/J.png'
                },
                K: {
                    name: 'K',
                    url: '/static/images/seats/K.png'
                },
                L: {
                    name: 'L',
                    url: '/static/images/seats/L.png'
                },
                M: {
                    name: 'M',
                    url: '/static/images/seats/M.png'
                },
                N: {
                    name: 'N',
                    url: '/static/images/seats/N.png'
                },
                O: {
                    name: 'O',
                    url: '/static/images/seats/O.png'
                },
                P: {
                    name: 'P',
                    url: '/static/images/seats/P.png'
                },
                Q: {
                    name: 'Q',
                    url: '/static/images/seats/Q.png'
                },
                R: {
                    name: 'R',
                    url: '/static/images/seats/R.png'
                },
                S: {
                    name: 'S',
                    url: '/static/images/seats/S.png'
                },
                T: {
                    name: 'T',
                    url: '/static/images/seats/T.png'
                },
                U: {
                    name: 'U',
                    url: '/static/images/seats/U.png'
                },
                V: {
                    name: 'V',
                    url: '/static/images/seats/V.png'
                },
                W: {
                    name: 'W',
                    url: '/static/images/seats/W.png'
                },
                X: {
                    name: 'X',
                    url: '/static/images/seats/X.png'
                },
                Y: {
                    name: 'Y',
                    url: '/static/images/seats/Y.png'
                },
                Z: {
                    name: 'Z',
                    url: '/static/images/seats/Z.png'
                }
            }; //默认图片

            ctx.scale(this.newScale, this.newScale);
            this.data1.seat_list.forEach((item) => {
                // 可售座位颜色处理
                if (this.select_grade) {
                    if (item.select == 1) {
                        ctx.drawImage(
                            img['01'].url,
                            0,
                            0,
                            baseSize.x,
                            baseSize.y,
                            item.x * (baseSize.x + baseSpace.x),
                            item.y * (baseSize.y + baseSpace.y),
                            baseSize.x,
                            baseSize.y
                        );
                    } else {
                        if (item.grade == this.select_grade) {
                            if (item.ticket_status === 0) {
                                ctx.drawImage(
                                    img[item.grade].url,
                                    0,
                                    0,
                                    baseSize.x,
                                    baseSize.y,
                                    item.x * (baseSize.x + baseSpace.x),
                                    item.y * (baseSize.y + baseSpace.y),
                                    baseSize.x,
                                    baseSize.y
                                );
                            } else {
                                ctx.drawImage(
                                    img['00'].url,
                                    0,
                                    0,
                                    baseSize.x,
                                    baseSize.y,
                                    item.x * (baseSize.x + baseSpace.x),
                                    item.y * (baseSize.y + baseSpace.y),
                                    baseSize.x,
                                    baseSize.y
                                );
                            }
                        }
                    }
                } else {
                    if (item.select == 1) {
                        ctx.drawImage(
                            img['01'].url,
                            0,
                            0,
                            baseSize.x,
                            baseSize.y,
                            item.x * (baseSize.x + baseSpace.x),
                            item.y * (baseSize.y + baseSpace.y),
                            baseSize.x,
                            baseSize.y
                        );
                    } else {
                        if (item.ticket_status === 0) {
                            ctx.drawImage(
                                img[item.grade].url,
                                0,
                                0,
                                baseSize.x,
                                baseSize.y,
                                item.x * (baseSize.x + baseSpace.x),
                                item.y * (baseSize.y + baseSpace.y),
                                baseSize.x,
                                baseSize.y
                            );
                        } else {
                            ctx.drawImage(
                                img['00'].url,
                                0,
                                0,
                                baseSize.x,
                                baseSize.y,
                                item.x * (baseSize.x + baseSpace.x),
                                item.y * (baseSize.y + baseSpace.y),
                                baseSize.x,
                                baseSize.y
                            );
                        }
                    }
                }
                /*       if (this.data.selected_seats) {
              this.data.selected_seats.forEach((item) => {
                ctx.drawImage(img["01"].url, 0, 0, baseSize.x, baseSize.y, item.x * (baseSize.x + baseSpace.x) - maxCanvasW / 2, item.y * (baseSize.y + baseSpace.y) - maxCanvasH / 2,
                  baseSize.x, baseSize.y);
                 //    ( Math.floor( item.x / ( baseSize.x + baseSpace.x ) ) + Math.floor( maxCanvasW / 2 * ( 1 - 1 / this.data.newScale ) / ( baseSize.x + baseSpace.x ) ) ) *(baseSize.x+baseSpace.x)-maxCanvasW/2
              })
            } */
            });
            ctx.draw();
        },

        make_order() {
            var selected_seats = this.selected_seats;
            var tid = '';
            selected_seats.forEach((v, k) => {
                tid = tid + ',' + String(v.ticket_id);
            });
            tid = tid.substring(1);
            uni.navigateTo({
                url: '../make_order/make_order?tid=' + tid + '&drama_id=' + this.drama_id
            });
        },

        cancel_sel() {
            console.log('占位：函数 cancel_sel 未声明');
        }
    }
};
</script>
<style></style>
