<template>
    <view>
        <view v-if="show_list.length == 0" class="no_content">
            <image class="img" src="/static/images/ui/none.png" />
            <view class="warn">没有查询到您的观看记录</view>
        </view>
        <view v-else class="year_item" v-for="(year_item, index) in show_list" :key="index">
            <view class="year">
                {{ index }}
            </view>

            <view style="padding: 30rpx 30rpx 30rpx 20rpx; background: #fff">
                <view class="month_item" v-for="(month_item, index1) in year_item" :key="index1">
                    <view class="month">{{ index1 }}</view>

                    <view style="width: 100%">
                        <view class="show_list" v-for="(item, index2) in month_item" :key="index2">
                            <view class="split-line" />

                            <view class="dot" />

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

                            <image class="img" :src="item.pic" />
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/user/my_show/finished_show/finished_show.js
import { http, login_check } from '../../../../utils/util';
export default {
    data() {
        return {
            show_list: {
            },

            year_item: [],
            month_item: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (login_check(1)) {
            http('/api/v1/seen-list', 'get').then((res) => {
                this.setData({
                    show_list: res.show_list
                });
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {}
};
</script>
<style>
.year {
    margin: 20rpx 0 10rpx 20rpx;
    font-size: 36rpx;
    font-weight: bold;
}

.month_item {
    display: flex;
}

.month_item .month {
    width: 80rpx;
}

.show_list {
    flex: 1;
    display: flex;
    position: relative;
}

.show_list .split-line {
    position: absolute;
    flex: 0 0 0;
    margin: 35rpx 0 0 2rpx;
    border-left: 4rpx dashed #dddddd;
    left: 7rpx;
    height: 270rpx;
}

.show_list .dot {
    width: 22rpx;
    height: 22rpx;
    background: #e7e7e7;
    position: absolute;
    top: 11rpx;
    border-radius: 50%;
}

.show_list .info {
    font-size: 28rpx;
    flex: 1;
    margin-left: 40rpx;
}

.show_list .info .time {
    margin-bottom: 20rpx;
    font-weight: bold;
}

.show_list .info .title {
    margin-bottom: 20rpx;
}

.show_list .info .loc {
    color: #7b7b7b;
    font-size: 24rpx;
}

.show_list .img {
    width: 180rpx;
    height: 270rpx;
    float: right;
    margin-bottom: 40rpx;
    margin-left: auto;
}
</style>
