<template>
    <view>
        <view class="_search">
            <input class="input" :placeholder="placeholder" :value="keyword" @input="write_in" @confirm="search" type="text" confirm-type="search" />
           <view class="imgButton" @tap="search1"> 	
			<image src="/static/images/ui/search.png" />
           </view>
        </view>

        <block v-if="searching && keyword">
            <block v-if="cancel_noContWarn && !ip_info.abb_id && !search_list[0].cycle_id">
                <view class="more">没有搜索到相关信息～</view>
            </block>
            <block v-if="ip_info && ip_info.abb_id">
                <view class="_item" :data-abb_id="ip_info.abb_id" @tap="nav">
                    <view class="shadow" />
                    <image class="img" :src="ip_info.pic" />
                    <view class="_title">{{ ip_info.show_name }}</view>
                    <view>
                        <view class="_below">
                            {{ ip_info.follow_total == 0 ? 0 : ip_info.follow_total }}人想看｜
                            <text style="color: #ff1d42">{{ ip_info.show_total }}</text>
                            个剧场在售
                        </view>
                        <view class="_home">
                            前往主页
                            <image src="/static/images/ui/right.png" style="margin-left: 10rpx" />
                        </view>
                    </view>
                </view>
            </block>
            <block v-if="search_list.length">
                <view style="margin-bottom: 40rpx">
                    <view class="list_item" :data-cycle_id="item.cycle_id" @tap="nav1" v-for="(item, index) in search_list" :key="index">
                        <view class="img_area">
                            <image class="img" :src="item.show_pic" />
                        </view>

                        <view class="info">
                            <view class="top">
                                <view class="title">{{ item.show_name }}</view>
                                <view class="area">{{ item.city_name }}｜{{ item.theater_name }}</view>
                            </view>
                            <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>
            </block>

            <block v-if="suggest_list.length">
                <view class="suggest">
                    <view class="_title">
                        <view class="_icon" />
                        推荐剧目
                    </view>

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

                        <view class="info">
                            <view class="top">
                                <view class="title">{{ item.show_name }}</view>
                                <view class="area">
                                    <view style="margin-bottom: 8rpx">{{ item.start_date }}-{{ item.end_date }}</view>
                                    <view>{{ item.city_name }}｜{{ item.theater_name }}</view>
                                </view>
                            </view>
                            <view class="b">
                                <view class="brief">{{ item.brief }}</view>
                                <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>
            </block>
        </block>

        <block v-else>
            <view class="his_show">
                <view class="line">
                    <view style="font-weight: bold">历史记录</view>
                    <image src="/static/images/ui/delete1.png" @tap="deleteFun" />
                </view>
                <view class="his_item">
                    <view class="his_keyword" :data-keyword="item" @tap="research" v-for="(item, index) in search_his" :key="index">{{ item }}</view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
// pages/index/search/search.js
import { httpUtil, location_city } from '../../../utils/util';
export default {
    data() {
        return {
            placeholder: '',
            city_id: '',
            search_his: '',
            keyword: '',
            searching: false,

            ip_info: {
                abb_id: '',
                pic: '',
                show_name: '',
                show_total: ''
            },

            cancel_noContWarn: false,

            search_list: {
                cycle_id: '',
                length: ''
            },

            suggest_list: {
                length: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let city_id; // 获取search关键词

        httpUtil('/api/v1/hot-search', 'get').then((res) => {
            this.setData({
                placeholder: res.keyword
            });
        });

        if ('undefined' == options.city_id) {
            location_city().then((res) => {
                city_id = res.city_info.city_id;
            });
        } else {
            if (options.city_id) {
                city_id = options.city_id;
            } else {
                uni.switchTab({
                    url: '/pages/index/index/index'
                });
            }
        }

        this.setData({
            city_id,
            search_his: uni.getStorageSync('search_his') || []
        });

        if (options.keyword) {
            this.search_(options.keyword, options.city_id);
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        search_(keyword, city_id) {
            const search_his = uni.getStorageSync('search_his') || [];

            if ((keyword && 'undefined' !== keyword) || this.placeholder) {
                if (!keyword) {
                    keyword = this.placeholder;
                }

                for (var i = 0; i < search_his.length; i++) {
                    if (keyword == search_his[i]) {
                        // 相同的全部删除
                        search_his.splice(i, 1); // 删除该元素

                        i--;
                    }
                }

                search_his.unshift(keyword);
                this.setData({
                    keyword,
                    searching: true
                });
                httpUtil('/api/v1/search', 'get', {
                    keyword,
                    city_id
                }).then((res) => {
                    this.setData({
                        ip_info: res.ip_info,
                        cancel_noContWarn: true,
                        search_list: res.search_list,
                        suggest_list: res.suggest_list
                    });
                });
            }

            this.setData({
                search_his
            });
            uni.setStorageSync('search_his', search_his);
        },

        write_in(e) {
            this.setData({
                keyword: e.detail.value
            });

            if (this.keyword == '') {
                this.setData({
                    searching: false
                });
            }
        },

        search(e) {
            this.setData({
                keyword: e.detail.value
            });
            this.search_(e.detail.value, this.city_id);
        },

        search1() {
            this.search_(this.keyword, this.city_id);
        },

        deleteFun() {
            var that = this;
            uni.showModal({
                title: '提示',
                content: '是否删除搜索缓存',

                success(res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        uni.removeStorageSync('search_his');
                        that.setData({
                            search_his: null
                        });
                    } else {
                        if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                }
            });
        },

        research(e) {
            this.search_(e.currentTarget.dataset.keyword, this.city_id);
        },

        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
            });
        },

        show_detail() {
            console.log('占位：函数 show_detail 未声明');
        }
    }
};
</script>
<style>
._search {
    display: flex;
    background-color: #ffffff;
    border-radius: 40rpx;
    justify-content: space-between;
    align-items: center;
    margin: 40rpx;
    padding: 20rpx 60rpx;
    box-shadow: 0 4rpx 20rpx 0 #f3f3f3;
}
._search .input {
    font-size: 24rpx;
    width: 100%;
}
._search image {
    width: 40rpx;
    height: 40rpx;
}
.his_show .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20rpx 40rpx 20rpx 40rpx;
}
.his_show .line image {
    width: 30rpx;
    height: 32rpx;
}
.his_show .his_item {
    display: flex;
    flex-wrap: wrap;
    margin: 0 40rpx;
}
.his_show .his_item .his_keyword {
    width: 240rpx;
    height: 60rpx;
    background: #f6f6f6;
    border-radius: 8rpx;
    margin: 0 20rpx 20rpx 0;
    text-align: center;
    line-height: 60rpx;
    font-size: 24rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
._item {
    height: 260rpx;
    margin: 100rpx 30rpx 100rpx 30rpx;
    position: relative;
    background: #fff9f9;
    box-shadow: 0 12rpx 8rpx 0 rgba(108, 106, 106, 0);
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

._item .shadow {
    width: 720rpx;
    height: 212rpx;
    background: #1c1c1c;
    border-radius: 8rpx;
    opacity: 0.19;
    filter: blur(10px);
    position: absolute;
    left: -20rpx;
    top: 70rpx;
    z-index: -1;
}

._item .img {
    width: 204rpx;
    height: 306rpx;
    border-radius: 16rpx;
    position: absolute;
    right: 30rpx;
    bottom: 20rpx;
}

._item ._title {
    margin: 20rpx 30rpx;
    font-size: 14px;
    font-weight: bold;
    width: 392rpx;
}

._item ._below {
    font-size: 24rpx;
    margin: 0 30rpx;
}

._item ._home {
    font-size: 24rpx;
    font-weight: bold;
    margin: 20rpx 30rpx 40rpx 30rpx;
    display: flex;
    align-items: center;
}
._item ._home image {
    width: 26rpx;
    height: 26rpx;
}

.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: 96rpx;
    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;
}
.suggest {
    margin-bottom: 30rpx;
}
.suggest ._title {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #181818;
    padding: 30rpx 30rpx 0 30rpx;
    background: #fff;
}
.suggest ._title ._icon {
    width: 8rpx;
    height: 36rpx;
    background: #ff446b;
    border-radius: 4rpx;
    margin: 0 20rpx 0 0;
}
.suggest .list_item {
    padding: 30rpx;
}
.brief {
    font-size: 20rpx;
    color: #ff1d42;
    line-height: 36rpx;
    border-radius: 8rpx;
    border: 2rpx solid #ff1d42;
    display: inline;
    padding: 3rpx 10rpx;
}

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