<template>
    <view>
        <view class="list_item" :data-cycle_id="item.cycle_id" @tap="nav1" v-for="(item, index) in IP_list" :key="index">
            <view class="img_area">
                <image class="img" :src="item.pic_url" />
            </view>

            <view class="info">
                <view class="top">
                    <view class="title">{{ item.f_title }}</view>
                    <view class="area">
                        <view style="margin-bottom: 8rpx">{{ item.start_time }}-{{ item.end_time }}</view>
                        <view>{{ item.city_name }}｜{{ item.theater_name }}</view>
                    </view>
                </view>
                <view class="b">
                    <view class="bottom">
                        <view class="price">
                            <text style="font-size: 32rpx">¥</text>
                            <text style="margin: 0 2rpx">{{ item.lowest_price }}</text>
                            <text style="font-size: 24rpx; color: #7b7b7b">起</text>
                        </view>
                        <button class="_detail" :data-cycle_id="item.cycle_id" @tap="show_detail">去使用</button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { http,location_city} from '../../../../utils/util';
export default {
    data() {
        return {
            IP_list: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let coupon_id = options.coupon_id;
        let city_id = getApp().globalData.city_id;
     if (!city_id) {
       // 默认北京写法
       location_city().then(res => {
         let city_id = res.city_info.city_id
         getApp().globalData.city_id = city_id
         this.getip_list(coupon_id, city_id)
       })
       return
     }
     this.getip_list(coupon_id, city_id)
   },
   getip_list(coupon_id, city_id) {
     http("/api/v1/coupon-cycle", "post", { coupon_id, city_id }).then(res => {
       this.setData({ IP_list: res })
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        nav1(e) {
            uni.navigateTo({
                url: '/pages/opera/show/show_detail?cycle_id=' + e.currentTarget.dataset.cycle_id
            });
        },

        show_detail() {
            console.log('占位：函数 show_detail 未声明');
        }
    }
};
</script>
<style>
.list_item {
    display: flex;
    padding: 30rpx 30rpx 20rpx 30rpx;
    background: #fff;
    border-radius: 12px 12px 0px 0px;
    position: relative;
}
.list_item .img_area {
    background: #d8d8d8;
    width: 204rpx;
    height: 306rpx;
    border-radius: 16rpx;
    position: relative;
}
.list_item .img_area .img {
    width: 204rpx;
    height: 306rpx;
    border-radius: 16rpx;
    position: absolute;
    right: 4rpx;
    bottom: 4rpx;
}

.list_item .info {
    padding: 0 8rpx 0 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.list_item .info .top .title {
    font-size: 32rpx;
    font-weight: bold;
}
.list_item .info .top .area {
    margin: 20rpx 0;
    font-size: 24rpx;
    color: #7b7b7b;
}
.list_item .info .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.list_item .info .bottom .price {
    font-size: 44rpx;
    font-weight: bold;
    color: #ff1d42;
}
.list_item .info .bottom ._detail {
    font-size: 24rpx;
    width: 120rpx;
    height: 42rpx;
    white-space: nowrap;
    border-radius: 22rpx;
    text-align: center;
    margin: 0;
    background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
    color: #fff;
    line-height: 42rpx;
}
</style>
