<template>
    <view>
        <calendar @change="dateChange" :spot="spot" :defaultTime="today_"></calendar>
        <view class="_title">
            <view class="_icon" />
            演出详情
        </view>

        <view class="_view">
            <navigator class="list" :url="'/pages/opera/show/show_detail?cycle_id=' + item.cycle_id" v-for="(item, index) in show_today" :key="index">
                <image class="img" :src="item.show_pic" />

                <view class="info">
                    <view class="_top">
                        <view class="title">{{ item.show_name }}</view>
                        <view class="loc">{{ item.city_name }}｜{{ item.theater_name }}</view>
                    </view>

                    <view class="_bottom">
                        <view class="_left">
                            <view v-if="item.brief" class="brief">{{ item.brief }}</view>
                            <view class="price">
                                <text style="font-size: 32rpx">¥</text>
                                <text style="margin: 0 2rpx">{{ item.lowest_price }}</text>
                                <text style="font-size: 12px; color: #7b7b7b">起</text>
                            </view>
                        </view>
                        <view class="_right">
                            <view class="time" v-for="(time, index1) in item.show_time" :key="index1">
                                <image src="/static/images/ui/clock.png" />
																																																																																																																																																																																																																																																													
                                <text :decode="true">&nbsp;{{ time }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </navigator>
        </view>
    </view>
</template>

<script>
import calendar from '@/components/calendar/calendar';
const { httpUtil, formatTime } = require('../../../utils/util'); // pages/index/calendar/calendar.js

export default {
    components: {
        calendar
    },
    data() {
        return {
            show_list: [],
            dateString: '',
            today_: null,
            show_today: [],
            spot: [],
            time: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this;
        var city_id = options.city_id;
        let cur_date = new Date();
        let cur_day = cur_date.getDate();
        let cur_month = cur_date.getMonth() + 1;
        let cur_year = cur_date.getFullYear();
        let today_ = cur_year + '/' + cur_month + '/' + cur_day;
        let show_today = [];
        httpUtil('/api/v1/lately-show' + '?city_id=' + city_id, 'get').then((res) => {
            let show_list = res.show_list;
            let spot = [];

            for (let item of show_list) {
                let d = item.year + '/' + item.month + '/' + item.day;

                if (cur_year == item.year && cur_month == item.month && cur_day == item.day) {
                    show_today.push(item);
                }

                spot.push(d);
            }

            spot = Array.from(new Set(spot));
            that.setData({
                show_list,
                today_,
                show_today,
                spot
            });
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        dateChange(e) {
            let day = e.detail.day;
            let month = e.detail.month;
            let year = e.detail.year;
            let show_today = [];

            for (let item of this.show_list) {
                if (day == item.day && month == item.month && year == item.year) {
                    show_today.push(item);
                    // break;
                }
            }

            this.setData({
                show_today
            });
        }
    }
};
</script>
<style>
._title {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #181818;
    margin-top: 40rpx;
    background-color: #fff;
    padding: 30rpx 0 0 30rpx;
}
._title ._icon {
    width: 8rpx;
    height: 36rpx;
    background: #ff446b;
    border-radius: 4rpx;
    margin: 0 20rpx 0 0;
}

._view {
    background: #fff;
}
._view .list {
    display: flex;
    margin: 0 30rpx;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #dddddd;
}
._view .list .img {
    width: 204rpx;
    height: 306rpx;
    background: #d8d8d8;
    border-radius: 16rpx;
}
._view .list .info {
    flex: 1;
    padding: 8rpx 0 8rpx 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
._view .list .info ._top .title {
    font-size: 28rpx;
    font-weight: bold;
    color: #181818;
    margin-bottom: 20rpx;
}
._view .list .info ._top .loc {
    font-size: 20rpx;
    color: #7b7b7b;
}
._view .list .info ._bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
._view .list .info ._bottom ._left .brief {
    font-size: 20rpx;
    color: #ff1d42;
 /*   line-height: 36rpx;
    display: inline; */
    border-radius: 8rpx;
    border: 2rpx solid #ff1d42;
    padding: 3rpx 10rpx;
}

._view .list .info ._bottom ._left .price {
    font-size: 44rpx;
    font-weight: bold;
    color: #ff1d42;
    margin-top: 20rpx;
    margin-top: 20rpx;
}
._view .list .info ._bottom ._right image {
    width: 28rpx;
    height: 28rpx;
}
._view .list .info ._bottom ._right .time {
    align-items: center;
    display: flex;
    font-size: 20rpx;
    color: #181818;
    padding-top: 10rpx;
}
/* #ifdef MP-ALIPAY */
._view .list .info ._bottom ._right .time text{
	margin-left: 10rpx;
	}
/* #endif */

</style>
