<template>
    <view>
        <image class="img" :src="IP_detail.ip_info.background_pic" mode="widthFix" style="width: 750rpx" />
        <view class="front">
            <view class="title">{{ IP_detail.ip_info.show_name }}</view>
            <view class="_row">
                <view style="width: 20%"></view>
                <view style="color: #7b7b7b; font-size: 28rpx">
                    <text style="color: #1394f2">{{ IP_detail.ip_info.follow_total }}</text>
                    人想看
                </view>
                <view style="width: 20%; display: flex; justify-content: space-around; align-items: center">
                    <button @tap="_like" style="border: none;">
                        <image class="icon" :src="'/static/images/ui/' + (IP_detail.ip_info.is_follow ? 'liked' : 'like') + '.png'" />
                    </button>
                    <button open-type="share" style="border: none;">
                        <image class="icon" src="/static/images/ui/share.png" />
                    </button>
                </view>
            </view>
        </view>

        <view class="_block">
            <view class="_title">
                <view class="_icon" />
                本剧亮点
            </view>
            <view class="_text">
                <text>{{ IP_detail.ip_info.describe }}</text>
            </view>
        </view>

        <view class="_block">
            <view class="_title">
                <view class="_icon" />
                精彩现场
            </view>
            <scroll-view class="_flex" :scroll-x="true">
                <block v-for="(item, index) in IP_detail.wonderful_list" :key="index">
                    <block v-if="item.type == 'image'">
                        <image class="_img" :src="item.url" :data-index="index" @tap="previewMedia" />
                    </block>
                   <!-- <block v-if="item.type == 'video'"><video class="_img" :src="item.url" @play="bindPlayCallBack" :id="'video_' + index" /></block> -->
                </block>
            </scroll-view>
        </view>

        <view class="_block" style="padding-bottom: 300rpx">
            <view class="_title">
                <view class="_icon" />
                演出详情
            </view>
            <view class="img1">
                <view class="img_cac" :style="rolled ? (IP_detail.show_detail[0].url ? 'height:1000rpx;overflow: hidden;' : '') : ''">
                    <block v-for="(item, index) in IP_detail.show_detail" :key="index">
                        <image class="img1_list" :src="item.url" mode="widthFix" />
                    </block>
                </view>
                <view class="roll" @tap="roll_spread">{{ rolled ? '展开演出详情' : '收起演出详情' }}</view>
            </view>
        </view>

        <view class="_bottom">
            <view class="_tip">
                目前有
                <text style="color: #ff425c" :decode="true">&nbsp;{{ IP_detail.show_total }}&nbsp;</text>
                个剧场演出
            </view>
            <button :class="'_button ' + (IP_detail.show_total ? '' : 'disabled_')" :disabled="!IP_detail.show_total" @tap="show=true">
                {{ IP_detail.show_total ? '查看演出计划' : '暂无演出计划' }}
            </button>
        </view>

			<u-popup :round="10" :show="show" @close="show=false">
            <view class="pop_title">{{ IP_detail.show_total }}个剧场在演</view>
				<view style="height: 400px;overflow: auto;">
            <view class="pop_row" v-for="(item, index) in IP_detail.show_list" :key="index">
                <view class="_month">{{ item.month }}</view>

                <view class="_city">
                    <view>{{ item.city_name }}</view>
                    <view class="dot" v-for="item in [1,2,3,4,5,6]"></view>
                </view>

                <view class="_content">
                    <view>
                        <image src="/static/images/ui/time.png" style="width: 24rpx; height: 24rpx; vertical-align: middle" />
                        <text style="vertical-align: middle;margin-left: 2px;">{{ item.show_date }}</text>
                    </view>
                    <view>
                        <image src="/static/images/ui/location2.png" style="width: 22rpx; height: 26rpx; vertical-align: middle" />
                        <text style="vertical-align: middle;margin-left: 2px;">{{ item.theater_name }}</text>
                    </view>
                </view>

                <button class="pop_button" :data-cycle_id="item.cycle_id" @tap="nav">¥{{ item.lowest_price }}起</button>
            </view>
					</view>
        </u-popup>
    </view>
</template>

<script>
// pages/opera/IP_detail/IP_detail.js
import { httpUtil, http, login_check } from '../../../utils/util';
	export default {
    data() {
        return {
            show: false,
            rolled: true,
            IP_detail: {
                ip_info: {
                    background_pic: '',
                    show_name: '',
                    follow_total: '',
                    is_follow: false,
                    describe: ''
                },
                wonderful_list: [],
                show_detail: [
                    {
                        url: false
                    }
                ],
                show_total: '',
                show_list: []
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let abb_id = options.abb_id;
        http('/api/v1/ip-info', 'get', {
            abb_id
        }).then((res) => {
            uni.setNavigationBarTitle({
                title: res.ip_info.title_name
            });
            this.setData({
                IP_detail: res
            });
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        var that = this;
        return {
            //自定义转发内容
            title: that.IP_detail.ip_info.show_name,
            //自定义转发标题
            imageUrl: that.IP_detail.ip_info.background_pic //不设置此字段时，默认截取当前页面作为展示的图片
        };
    },
    methods: {
        bindPlayCallBack: function (e) {
            console.log('当前视频', e.target.id);
            var current_video = e.target.id;
            var that = this;
            let video = that.IP_detail.wonderful_list;

            for (var i in video) {
                var index_video = 'video_' + i;
                var videoContextPrev = uni.createVideoContext(index_video);

                if (current_video != index_video) {
                    // 暂停其他的
                    videoContextPrev.pause();
                }
            }
        },

        _like() {
            if (login_check()) {
                let status;

                if (this.IP_detail.ip_info.is_follow) {
                    status = 0;
                } else {
                    if (!this.IP_detail.ip_info.is_follow) {
                        status = 1;
                    }
                }

                http('/api/v1/follow', 'get', {
                    abb_id: this.IP_detail.ip_info.abb_id,
                    status
                }).then((res) => {
                    if (status == 1) {
                        uni.showToast({
                            icon: 'success',
                            title: '已添加到想看的演出列表',
                            duration: 2000
                        });
                    } else {
                        if (status == 0) {
                            uni.showToast({
                                icon: 'success',
                                title: '已取消想看',
                                duration: 2000
                            });
                        }
                    }

                    let IP_detail = this.IP_detail;
                    IP_detail.ip_info.is_follow = !IP_detail.ip_info.is_follow;
                    this.setData({
                        IP_detail
                    });
                });
            }
        },

        nav(e) {
            let cycle_id = e.currentTarget.dataset.cycle_id;
            uni.navigateTo({
                url: '/pages/opera/show/show_detail?cycle_id=' + cycle_id
            });
        },

        roll_spread() {
            this.setData({
                rolled: !this.rolled
            });
        },

        previewMedia(e) {
			let mediaList = this.IP_detail.wonderful_list;
			let imageList = [];
			let current = e.currentTarget.dataset.index;
			let errorMedia = 0;
			mediaList.forEach((e) => {
				if (e.type !== 'image') {
					errorMedia = errorMedia + 1;
				} else {
					imageList.push(e.url);
				}
			});
			uni.previewImage({
			    	urls: imageList,
			    current: imageList[current - errorMedia]
			});
        },

    }
};
</script>
<style>
.front {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 20rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.front .title {
    font-size: 32rpx;
    font-weight: bold;
}

._row {
    margin-top: 20rpx;
    display: flex;
    width: 100%;
    justify-content: space-between;
}
._row button::after {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.icon {
    width: 32rpx;
    height: 32rpx;
}
._row button {
    background-color: transparent !important;
    padding: 0 !important;
    line-height: inherit !important;
    margin: 0 !important;
    width: auto !important;
    font-weight: 500 !important;
    border-radius: none !important;
}

._block {
    background: #fff;
    margin-bottom: 20rpx;
}
._block ._title {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #181818;
    padding: 30rpx;
}
._block ._title ._icon {
    width: 8rpx;
    height: 36rpx;
    background: #ff446b;
    border-radius: 4rpx;
    margin: 0 20rpx 0 0;
}
._block ._flex {
	white-space: nowrap;
	margin: 0 30rpx;
	/* #ifndef MP-ALIPAY */
	display: flex;
	width: 690rpx;
	/* #endif */
}
._block ._text {
    padding: 0 48rpx 30rpx 68rpx;
    font-size: 28rpx;
    color: #363636;
}

._block ._flex ._img {
	border-radius: 8rpx;
	width: 540rpx;
	height: 360rpx;
	margin: 0 10rpx;
	/* #ifdef MP-BAIDU || MP-ALIPAY */
	display: inline-block !important;
	flex-shrink: 0;
	/* object-fit: fill !important; */
	/* #endif */
}

._block .img1 {
    margin: 0 30rpx;
    display: flex;
    flex-direction: column;
}

._block .img1 .img1_list {
    width: 690rpx;
    vertical-align: top;
    margin-top: -1rpx;
}

._block .img1 .roll {
    text-align: center;
    margin: 20rpx 0;
    font-size: 24rpx;
    color: #1394f2;
}

._bottom {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 128rpx;
    background: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}
._tip {
    font-size: 28rpx;

    color: #181818;
    flex: 1;
    margin: 0 40rpx;
}
._button {
    width: 240rpx;
    height: 72rpx;
    line-height: 72rpx;
    background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
    border-radius: 44rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 40rpx;
}
.disabled_ {
    background: #d0d0d0 !important;
}
.pop_title {
    font-size: 32rpx;
    display: flex;
    justify-content: center;
    font-weight: bold;
    margin: 30rpx;
}
.pop_row {
    display: flex;
}
._month {
    font-size: 24rpx;
    color: #181818;
    margin: 5rpx 10rpx 0 20rpx;
    width: 42rpx;
    white-space: nowrap;
}
._city {
    font-size: 28rpx;
    font-weight: bold;
    color: #181818;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3rpx 10rpx 0 10rpx;
}
.dot {
    width: 4rpx;
    height: 4rpx;
    background: #d8d8d8;
    margin: 5rpx;
    border-radius: 50%;
}
._content {
    flex: 1;
    margin: 0 10rpx;
    font-size: 24rpx;
    color: #181818;
}
.pop_button {
    width: 128rpx;
    height: 44rpx;
    line-height: 44rpx;
    background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
    border-radius: 44rpx;
    font-size: 20rpx;
    color: #ffffff;
    margin: 0 20rpx 0 20rpx;
}
</style>
