<template>
    <view class="stage_photo">
        <view class="no" v-if="picture_list.length <= 0">暂无数据</view>
        <view class="stage_list">
            <view class="image" v-for="(item, index) in picture_list" :key="index">
                <image :src="item.url" :data-index="index" @tap="previewMedia"></image>
            </view>
        </view>
    </view>
</template>

<script>
// pages/opera/stage/stage_photo.js
import { httpUtil, http, login_check } from '../../../utils/util';
export default {
    data() {
        return {
            picture_list: [],
            show_title: '开心麻花',
            abb_id: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        console.log(options);
        this.setData({
            show_title: options.show_title,
            abb_id: options.abb_id
        });
        http('/api/v1/share-picture-list', 'get', {
            abb_id: options.abb_id
        }).then((res) => {
            this.setData({
                picture_list: res.picture_list
            });
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        let url = 'https://mahuaimage.oss-cn-qingdao.aliyuncs.com/mini_app/share/home-share.png';
        return {
            title: this.show_title,
            path: '/pages/opera/stage/stage_photo?abb_id=' + this.abb_id + '&show_title=' + this.show_title,
            imageUrl: this.picture_list.length > 0 ? '' : url
        };
    },
    methods: {
        previewMedia(e) {
			let imageList = []
			this.picture_list.forEach((e) => {
						imageList.push(e.url);
				});
            uni.previewImage({
                urls: imageList,
                current: e.currentTarget.dataset.index
            });
        }
    }
};
</script>
<style>
/* pages/opera/stage/stage_photo.wxss */
.no {
    text-align: center;
    line-height: 300rpx;
}
.stage_photo {
    padding: 0 20rpx;
}
.stage_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.stage_list .image {
    border-radius: 8rpx;
    width: 330rpx;
    height: 240rpx;
    margin: 0rpx 10rpx 10rpx;
    overflow: hidden;
}
image {
    width: 100%;
    height: 100%;
}
</style>
