<template>
    <view class="new_years">
        <view class="img" @tap="onChange" :data-router="item.router_path" v-for="(item, index) in straddlen_list" :key="index">
            <image :src="item.url" mode="widthFix"></image>
        </view>
        <view class="img positRel">
            <image mode="widthFix" src="https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61ca7d5d743994756ea894f7ac294c303a549f3eaf4c0.jpg"></image>
            <view class="input input1" :style="'top:' + input1_top + 'rpx'">
                <input type="text" class="input1" @input="bindUserName" />
                <!-- <input type="text" class="input2" bindinput='bindNumber' />
      <textarea name="" id="" cols="30" class="input3"  rows="10"  bindinput='bindOpinion'></textarea> -->
            </view>
            <view class="input input2" :style="'top:' + input2_top + 'rpx'">
                <input type="text" class="input2" @input="bindNumber" />
            </view>
            <view class="input input3">
                <textarea name="" class="text3" @input="bindOpinion"></textarea>
            </view>
            <image
                src="https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61ca7e7498337f91897c7e1bd41041b3c57643d4da926.png"
                class="submit"
                @tap.stop.prevent="onSubmit"
                mode="widthFix"
            />
        </view>
    </view>
</template>

<script>
const app = getApp();
import { http, httpUtil, login_check } from '../../../utils/util';
import { host } from '../../../Gdata';
export default {
    data() {
        return {
            straddlen_list: [
                {
                    id: 1,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ad5dd76ec9ccbf0d9d2160aa9df5baed8fd5236.jpg'
                },
                {
                    id: 2,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ad9b188ec9ccbf0d9d2160aa9df5baed8fd5236.jpg'
                },
                {
                    id: 3,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6adc235bec9ccbf0d9d2160aa9df5baed8fd5236.jpg',
                    router_path: '/pages/opera/show/show_detail?cycle_id=4266'
                },
                {
                    id: 4,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6adf10ecec9ccbf0d9d2160aa9df5baed8fd5236.jpg'
                },
                {
                    id: 5,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae147744ea45ce96dac01e01bd1272c5e0a212d.jpg',
                    router_path: '/pages/opera/show/show_detail?cycle_id=4191'
                },
                {
                    id: 6,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae3fe584ea45ce96dac01e01bd1272c5e0a212d.jpg'
                },
                {
                    id: 7,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae5bfb74ea45ce96dac01e01bd1272c5e0a212d.jpg',
                    router_path: '/pages/opera/show/show_detail?cycle_id=4265'
                },
                {
                    id: 8,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae9b83c4ea45ce96dac01e01bd1272c5e0a212d.jpg'
                },
                {
                    id: 9,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6aeb107a4ea45ce96dac01e01bd1272c5e0a212d.jpg',
                    router_path: '/pages/opera/show/show_detail?cycle_id=4239'
                },
                {
                    id: 10,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6aee19f54ea45ce96dac01e01bd1272c5e0a212d.jpg'
                },
                {
                    id: 11,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af04e4abcbc9f3782865f83b94490981e992789.jpg',
                    router_path: '/pages/opera/show/show_detail?cycle_id=4296'
                },
                {
                    id: 12,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af30d73bcbc9f3782865f83b94490981e992789.jpg'
                },
                {
                    id: 13,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af47235bcbc9f3782865f83b94490981e992789.jpg',
                    router_path: '/pages/opera/show/show_detail?cycle_id=4276'
                },
                {
                    id: 14,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af7c267bcbc9f3782865f83b94490981e992789.jpg'
                },
                {
                    id: 15,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af99dacbcbc9f3782865f83b94490981e992789.jpg',
                    router_path: '/pages/opera/show/show_detail?cycle_id=4301'
                },
                {
                    id: 16,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6afd5a84bcbc9f3782865f83b94490981e992789.jpg'
                },
                {
                    id: 17,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6afec8efbcbc9f3782865f83b94490981e992789.jpg',
                    router_path: '/pages/opera/show/show_detail?cycle_id=4306'
                },
                {
                    id: 18,
                    url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6b01ff896db52cca6602afb21f90def085ebe24c.jpg'
                }
            ],
            form_list: {
                activity_id: 37,
                name: '',
                mobile: '',
                content: ''
            },
            input1_top: 100,
            input2_top: 176
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let iphone_width = app.globalData.screenWidth;
        console.log(iphone_width, '屏幕宽度');

        if (iphone_width <= 320) {
            console.log(320);
            this.setData({
                input1_top: 96,
                input2_top: 166
            });
        } else {
            if (iphone_width > 320 && iphone_width <= 375) {
                console.log('320-375');
                this.setData({
                    input1_top: 96,
                    input2_top: 172
                });
            } else {
                if (iphone_width > 375 && iphone_width < 400) {
                    console.log('375-400');
                    this.setData({
                        input1_top: 102,
                        input2_top: 170
                    });
                }
            }
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        let title = '开心麻花有笑跨年攻略';
        let imageUrl = 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cad2bba6e2b2fc1d12ae96520a9bbc7181b00e43c8b.jpg';
        return {
            //自定义转发内容
            title,
            imageUrl //不设置此字段时，默认截取当前页面作为展示的图片
        };
    },
    methods: {
        onChange(e) {
            // console.log(e.currentTarget.dataset.router);
            let url = e.currentTarget.dataset.router;

            if (!url) {
                return;
            }

            console.log(url);
            uni.navigateTo({
                url
            });
        },

        bindUserName(e) {
            console.log(e, 'bindUserName'); // let username=e.detail.value

            this.form_list.name = e.detail.value;
        },

        bindNumber(e) {
            console.log(e, 'bindNumber');
            this.form_list.mobile = e.detail.value;
        },

        bindOpinion(e) {
            console.log(e, 'bindOpinion');
            this.form_list.content = e.detail.value;
        },

        onSubmit() {
            if (!login_check()) {
                return;
            }

            let { name, mobile, content } = this.form_list;

            if (!name) {
                uni.showToast({
                    title: '请输入姓名',
                    icon: 'none',
                    mask: true
                });
                return;
            }

            if (!mobile) {
                uni.showToast({
                    title: '请填写手机号',
                    icon: 'none',
                    mask: true
                });
                return;
            }

            var myreg = /^1[3456789]\d{9}$/;

            if (!myreg.test(mobile)) {
                uni.showToast({
                    title: '手机号错误',
                    icon: 'none',
                    mask: true
                });
                return;
            }

            if (!content) {
                uni.showToast({
                    title: '请填写你想说的话',
                    icon: 'none',
                    mask: true
                });
                return;
            }

            http('/api/v1/topic-reply', 'post', { ...this.form_list }).then((res) => {
                uni.showToast({
                    title: '提交成功',
                    icon: 'none',
                    mask: true
                });
            }); // console.log(this.data.form_list, '111111');
        }
    }
};
</script>
<style>
/* pages/special/straddlen/new_years.wxss */
.img image {
    width: 100%;
    display: block;
    margin-top: -1rpx;
}

.positRel {
    position: relative;
}

.input {
    /* transform: rotate(-3deg); */
}

.input input {
    font-size: 28rpx;
    line-height: 28rpx;
    /* border: 1px solid red; */
    height: 40rpx;
}

.input.input1 {
    width: 120rpx;
    /* height: 75rpx; */
    /* margin-bottom: 38rpx; */
    /* margin-left: 68rpx; */
    text-align: center;
    position: absolute;
    left: 236rpx;
    top: 100rpx;
    transform: rotate(-3deg);
}

.input.input2 {
    width: 300rpx;
    position: absolute;
    left: 236rpx;
    top: 175rpx;
    /* padding-left: 10rpx; */
    transform: rotate(-3deg);
    text-align: center;
}

.input.input3 {
    position: absolute;
    left: 230rpx;
    top: 330rpx;
}

.text3 {
    width: 330rpx;
    height: 110rpx;
    /* border: 1px solid red; */
    font-size: 28rpx;
    line-height: 28rpx;
    transform: rotate(-5deg);
}

.img .submit {
    position: absolute;
    right: 60rpx;
    bottom: 270rpx;
    width: 160rpx;
    height: 80rpx;
    z-index: 10;
}
</style>
