<template>
    <view>
        <view v-if="follow_list.length == 0" class="no_content">
            <image class="img" src="/static/images/ui/none.png" />
            <view class="warn">还未查询到您想看的演出</view>
        </view>
        <view v-else class="list" v-for="(item, index) in follow_list" :key="index">
            <view class="abb_detail" :data-abb_id="item.abb_id" @tap="nav">
                <image class="img" :src="item.background_pic" mode="aspectFit"/>
                <view class="title">{{ item.show_name }}</view>
                <view class="line">
                    <view class="left">
                        <text style="color: #ff1e43" :decode="true">{{ item.show_total }}&nbsp;</text>
                        个剧场在演
                    </view>
                    <view class="right">
                        <text :decode="true">{{ item.follow_total }}人想看&nbsp;&nbsp;</text>
                        <image :src="'/images/ui/' + (true ? 'liked' : 'like') + '/static/pages/user/my_show/wanted_show/.png'" style="width: 30rpx; height: 28rpx" />
                    </view>
                </view>
            </view>

            <view class="show_detail" v-if="item.show_list[0].cycle_id">
                <view style="padding: 20rpx 0; background: #fff; margin: 0 20rpx">
                    <view class="item" :data-cycle_id="show_item.cycle_id" @tap="nav1" v-for="(show_item, index1) in item.show_list" :key="index1">
                        <view class="vitr">
                            <view class="month">{{ show_item.month }}</view>
                            <view class="dot" />
                        </view>

                        <view class="info">
                            <view class="line" />
                            <view class="city">{{ show_item.city_name }}</view>
                            <view class="time">{{ show_item.show_date }}</view>
                            <view class="area">{{ show_item.theater_name }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="more"></view>
    </view>
</template>

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

            show_item: {
                cycle_id: '',
                month: '',
                city_name: '',
                show_date: '',
                theater_name: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (login_check(1)) {
            http('/api/v1/follow-list', 'get').then((res) => {
                this.setData({
                    follow_list: res.follow_list
                });
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        nav(e) {
            uni.navigateTo({
                url: '/pages/opera/IP_detail/IP_detail?abb_id=' + e.currentTarget.dataset.abb_id
            });
        },

        nav1(e) {
            uni.navigateTo({
                url: '/pages/opera/show/show_detail?cycle_id=' + e.currentTarget.dataset.cycle_id
            });
        }
    }
};
</script>
<style>
.list {
}

.list .abb_detail {
    margin: 60rpx 30rpx 0 30rpx;
    position: relative;
    box-shadow: 0 12rpx 12rpx 0 rgba(154, 154, 154, 0.2);
}
.list .abb_detail:after {
    content: '';
    position: absolute;
    width: 32rpx;
    height: 16rpx;
    /* background:#9A9A9A;
  opacity: 0.39; */
    z-index: -1;
    border-radius: 32rpx 32rpx 0 0;
    bottom: 0;
    left: 359rpx;
}
.list .abb_detail .img {
    width: 690rpx;
    /* height: 460rpx; */
}
.list .abb_detail .title {
    text-align: center;
    padding: 10rpx 0;
    line-height: 48rpx;
    font-weight: bold;
    border-bottom: 2rpx dashed #dddddd;
}
.list .abb_detail .line {
    display: flex;
    padding: 20rpx 0;
    color: #363636;
    font-size: 24rpx;
    background: radial-gradient(circle at 50% 100%, transparent 10px, #fff 0) no-repeat;
    filter: drop-shadow(6px 6px 6px rgba(154, 154, 154, 0.2));
}
.list .abb_detail .line .left {
    width: 50%;
    margin-left: 60rpx;
}
.list .abb_detail .line .right {
    width: 50%;
    margin-right: 20rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.list .show_detail {
    width: 690rpx;
    background: #e6e6e6;
    opacity: 0.59;
    margin: 0 30rpx;
    padding-bottom: 20rpx;
}
.list .show_detail .item {
    width: 650rpx;
    background: #fff;
    display: flex;
    font-size: 28rpx;
}

.list .show_detail .item .vitr {
    display: flex;
    align-items: center;
    height: min-content;
    width: 33%;
    justify-content: flex-end;
}
.list .show_detail .item .vitr .month {
    font-weight: bold;
    color: #181818;
}
.list .show_detail .item .vitr .dot {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background: #e7e7e7;
    margin: 0 20rpx;
}
.list .show_detail .item .info {
    position: relative;
}
.list .show_detail .item .info .line {
    position: absolute;
    height: 75rpx;
    border: 1rpx dashed #dddddd;
    left: -31rpx;
    bottom: 13rpx;
}
.list .show_detail .item .info .city {
    font-weight: bold;
}
.list .show_detail .item .info .time {
    font-size: 24rpx;
    margin: 10rpx 0;
}
.list .show_detail .item .info .area {
    font-size: 24rpx;
    margin-bottom: 10rpx;
}

.more {
    color: #7b7b7b;
    text-align: center;
    margin: 70rpx 0 40rpx 0;
}
</style>
