<template>
    <app-layout>
        <view class="list">
            <app-nav-bar v-if="navbarStatus" :fixed="true" :has-height="true"  @headHeight="headHeight" title="主题专区" color="block" background-color="white"></app-nav-bar>
            <view class="w-fixed" :style="{top: startHeight + 'px'}">
                <view class="w-search dir-left-nowrap cross-center">
                    <view class="box-grow-1 w-input">
                        <input class="box-grow-1" confirm-type="搜索" type="text" @confirm="loadData"
                               @input="searchKeyword" 
                               style="height:100%;font-size:24rpx;"
                               placeholder="请输入关键词搜索"
                               placeholder-style="font-size:24rpx;color:#999999"
                               v-model="search.keyword">
                    </view>
                    <view class="search-icon main-center cross-center box-grow-0" @click="loadData">
                        <image src="./image/weitao-detail-search.png"></image>
                    </view>
                </view>
                <view class="w-tag-all" v-if="tags && tags.length">
                    <scroll-view :scroll-left="scrollLeft" scroll-x scroll-with-animation>
                        <view class="dir-left-nowrap tag-text">
                            <view v-for="(tag,index) in tags"
                                  :id="`tag_id_${tag.id}`"
                                  :style="{color: search.tag_id === tag.id ? getTheme.color: 'inherit'}"
                                  :key="index" class="box-grow-0 cross-center" @click="searchTab(tag)">{{ tag.name }}
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view class="w-goods-all dir-top-nowrap">
                <view v-if="tags && tags.length" style="height: 174rpx"></view>
                <view v-else style="height: 98rpx"></view>
                <view v-for="(item,index) in list" :key="index" class="w-goods-box" @click="jumpDetail(item)">
                    <view :class="{'dir-left-nowrap': item.layout_type == 3}">
                        <view class="box-grow-1">
                            <view class="w-goods-title dir-left-nowrap cross-top">
                                <view class="t-omit-two box-grow-1">{{ item.title }}</view>
                                <view class="l-right box-grow-0" v-if="item.layout_type == 2"></view>
                            </view>
                            <view class="w-goods-remake show-remake-----bad-platform"
                                  :class="item.layout_type != 3 ? ' t-omit-three': ' t-omit-two'"
                                  :style="{'--remake-color': `linear-gradient(to right,${item.tag.extra_attributes.color}, ${colorRgba(item.tag.extra_attributes.color)})`}"
                                  :data-remake-title="item.tag.name"
                            >
                                <view class="show-remake-platform"
                                      style="display:inline-block"
                                      :style="{'background': `linear-gradient(to right,${item.tag.extra_attributes.color}, ${colorRgba(item.tag.extra_attributes.color)})`}"
                                >{{ item.tag.name }}
                                </view>
                                {{ item.abstract }}
                            </view>
                        </view>
                        <view>
                            <template v-if="item.layout_type == 1">
                                <swiper circular indicator-active-color="#ff4544" indicator-color="#FFFFFF"
                                        :indicator-dots="item.pic_url && item.pic_url.length > 1"
                                        :style="{height: item.proportion != 1 ? item.proportion != 2 ?  '327rpx' : '436rpx': '654rpx'}"
                                        style="width:auto;height: 327rpx;margin:10rpx 24rpx;">
                                    <swiper-item v-for="(pic,index1) in item.pic_url" :key="index1" class="w-big-pic">
                                        <image :src="pic.pic_url"
                                               @click.stop="jumpDetail(item)"
                                        ></image>
                                    </swiper-item>
                                </swiper>
                            </template>
                            <template v-if="item.layout_type == 2">
                                <view :class="{'w-pic-four' :item.pic_url.length === 4}" class="w-pic dir-left-wrap">
                                    <image v-for="(pic,index1) in item.pic_url"
                                           :key="index1"
                                           :src="pic.pic_url"
                                           @click.stop="openPre(item,index1)"
                                    ></image>
                                </view>
                            </template>
                            <template v-if="item.layout_type == 3">
                                <image
                                    v-if="item.pic_url"
                                    :src="item.pic_url[0].pic_url"
                                    @click.stop="jumpDetail(item)"
                                    style="margin-left: 26rpx;margin-right:24rpx;height: 160rpx;width:160rpx;border-radius: 16rpx"
                                    class="box-grow-0">
                                </image>
                            </template>
                        </view>
                    </view>
                    <view class="w-right-goods" v-if="item.goods_list && item.goods_list.length">
                        <scroll-view scroll-x>
                            <view class="dir-left-nowrap cross-center">
                                <view v-for="(goods,index2) in item.goods_list" :key="index2"
                                      :class="[`w-m-${item.goods_list.length}`]"
                                      @click.stop="jumpGoods(goods)"
                                      class="box-grow-0 dir-left-nowrap w-m-s">
                                    <image class="box-grow-0 m-pic" :src="goods.cover_pic"></image>
                                    <view class="dir-top-nowrap main-center m-text">
                                        <view>
                                            <view class="m-text-name t-omit"
                                                  style="display: block"
                                                  :style="{maxWidth: item.goods_list.length != 1 ?  item.goods_list.length != 2 ? '174rpx': '270rpx' : '540rpx'}">{{ goods.name }}</view>
                                        </view>
                                        <view class="dir-left-nowrap t-omit"
                                              :style="{maxWidth: item.goods_list.length != 1 ?  item.goods_list.length != 2 ? '174rpx': '270rpx' : '540rpx'}">
                                            <text style="font-size:24rpx;font-weight: bold" :style="{color: getTheme.color}">￥</text>
                                            <text style="font-size:28rpx;font-weight: bold" :style="{color: getTheme.color}">
                                                {{ goods.price }}
                                            </text>
                                            <text class="m-d">￥{{ goods.original_price }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="w-read">{{ item.read_number }} 阅读</view>
                </view>
                <view v-if="!list || !list.length" class="dir-top-nowrap cross-center w-empty">
                    <image src="./image/weitao-empty.png"></image>
                    <view>这里暂时还没有内容哦～</view>
                </view>
            </view>
            <pre-topic :previewItem="previewItem" :swiperCurrent="swiperCurrent" :previewStatus.sync="previewStatus"></pre-topic>
        </view>
    </app-layout>
</template>
<script>
import {mapGetters, mapState} from 'vuex';
import appNavBar from '@/components/page-component/index/app-nav-bar.vue';
import preTopic from "../../components/page-component/app-special-topic/pre-topic";

export default {
    name: "list",
    computed: {
        ...mapGetters('mallConfig', {
            getTheme: 'getTheme',
        }),
        ...mapState({
            systemInfo: state => state.gConfig.systemInfo
        }),
        navbarStatus: function () {
            // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO
            return ['windows', 'mac'].indexOf(this.systemInfo.platform) === -1;
            // #endif
            // #ifdef H5
            return !this.$jwx.isWechat();
            // #endif
            // #ifdef MP-ALIPAY
            return false;
            // #endif
        },
    },
    components: {
        appNavBar, preTopic,
    },
    data() {
        return {
            page: 1,
            list: [],
            tags: [],
            search: {
                keyword: '',
                tag_id: '',
            },
            args: false,
            load: false,
            scrollLeft: 0,
            previewItem: null,
            swiperCurrent: 0,
            previewStatus: false,
            startHeight: 0,
        }
    },
    onLoad(options) {
        this.$commonLoad.onload(options);
        if (options.type) {
            this.searchTab({id: Number(options.type)});
        } else {
            this.loadData();
        }
        this.getTags();
    },
    methods: {
        headHeight(e) {
            this.startHeight = e;
        },
        openPre(column, index) {
            this.previewStatus = true;
            this.swiperCurrent = index;
            this.previewItem = column
        },
        loadData() {
            this.page = 1;
            this.$showLoading({title: '加载中'});
            this.$request({
                url: this.$api.topic.list,
                data: Object.assign({
                    page: this.page,
                }, this.search)
            }).then(info => {
                this.$hideLoading();
                if (info.code === 0) {
                    this.list = info.data.list;
                } else {
                    uni.showToast({title: info.msg, icon: 'none'});
                }
            }).catch(info => {
                this.$hideLoading();
            })
        },
        getTags() {
            this.$request({
                url: this.$api.topic.type,
            }).then(info => {
                if (info.code === 0) {
                    this.tags = info.data.list;

                    const self = this;

                    this.$nextTick(item => {
                        let query = null;
                        // #ifndef MP-WEIXIN
                        query = uni.createSelectorQuery().in(this);
                        // #endif
                        // #ifdef MP-WEIXIN || MP-ALIPAY
                        query = uni.createSelectorQuery();
                        // #endif
                        self.tags.map((item1) => {
                            query.select(`#tag_id_${item1.id}`).boundingClientRect(item => {
                                if (item) item1['width'] = item.width;
                            }).exec();
                        })
                    })
                }
            })
        },
        colorRgba(color, alpha = 0.75) {
            return this.$utils.colorRgba(color, alpha)
        },
        searchKeyword({detail}) {
            Object.assign(this.search, {keyword: detail.value.trim()})
        },
        searchTab({id}) {
            let left = 0;
            for (let i = 0; i < this.tags.length; i++) {
                if (this.tags[i].id === id) {
                    left = left + this.tags[i].width / 2;
                    break;
                } else {
                    left += this.tags[i].width + uni.upx2px(24);
                }
            }
            this.scrollLeft = left - uni.upx2px(750 / 2 - 24) || 0;
            id = this.search.tag_id === id ? '' : id;
            Object.assign(this.search, {tag_id: id})
            this.loadData();
        },
        jumpDetail({id}) {
            uni.navigateTo({url: `/pages/topic/topic?id=${id}`})
        },
        jumpGoods({id}) {
            uni.navigateTo({url: `/pages/goods/goods?id=${id}`})
        },
        previewImage(index, list) {
            uni.previewImage({
                urls: list.map(item => {
                    return item.pic_url;
                }),
                current: index,
            });
        },
    },
    onReachBottom() {
        const self = this;
        if (self.args || self.load)
            return;
        self.load = true;
        let page = self.page + 1;
        self.$request({
            url: self.$api.topic.list,
            data: Object.assign({
                page,
            }, this.search)
        }).then(info => {
            if (info.code === 0) {
                [self.page, self.args, self.list] = [page, info.data.list.length === 0, self.list.concat(info.data.list)];
            }
            self.load = false;
        });
    },
}
</script>
<style scoped lang="scss">
.list {
    .l-right {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfBAMAAADtgAsKAAAAJ1BMVEUAAAAzMzMtLS0zMzM0NDQyMjIyMjIyMjIzMzMsLCwyMjIzMzM1NTW9kjBxAAAADXRSTlMA/gXrslwuetYLUSMYvo7bOgAAADNJREFUKM9jIBswbUATUDFDFxBOQNPiOJiVaAhPQBUoFEXlswsGDD4FM9AUMPAsYCAfAACGrw0nd2uk1AAAAABJRU5ErkJggg==");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 31#{rpx};
        width: 31#{rpx};
        margin-top: 5#{rpx};
    }


    ::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        background: transparent;
    }
    .w-fixed {
        position: fixed;
        top: 0;
        width: 100%;
        background: #F6F6F6;
        z-index: 1;
    }

    .w-search {
        height: 110#{rpx};
        padding-left: 24#{rpx};

        .w-input {
            height: 62#{rpx};
            background: white;
            border-radius: 35#{rpx};
            padding: 0 32#{rpx};
        }

        .search-icon {
            > image {
                height: 36#{rpx};
                width: 36#{rpx};
                display: block;
                margin: 0 24#{rpx};
            }
        }
    }

    .w-tag-all {
        margin: 0 0 24#{rpx} 24#{rpx};

        .tag-text {
            font-size: 24#{rpx};
            color: #333333;
        }

        .tag-text > view {
            margin-right: 24#{rpx};
            border-radius: 8#{rpx};
            padding: 0 24#{rpx};
            height: 50#{rpx};
            background: white;
        }

        .tag-text > view:last-child {
            margin-right: 0;
        }
    }

    .w-goods-all {
        padding: 0 24#{rpx} 12#{rpx};

        .w-goods-box {
            padding: 22#{rpx} 0 #{25rpx};
            background: white;
            margin-top: 12#{rpx};
            margin-bottom: 20#{rpx};
            border-radius: 16#{rpx};

            .w-goods-title {
                font-size: 32#{rpx};
                color: #333333;
                padding: 0 24#{rpx};
                font-weight: bolder;
                margin-bottom: 10#{rpx};
            }

            .w-goods-remake {
                font-size: 28#{rpx};
                margin: 10#{rpx} 24#{rpx};
                color: #333333;
                word-break: break-all;
            }

            .show-remake-platform {
                font-size: 24#{rpx};
                color: white;
                padding: 3#{rpx} 16#{rpx};
                margin-right: 16#{rpx};
                border-radius: 6#{rpx};
            }

            .show-remake:before {
                content: attr(data-remake-title);
                font-size: 24#{rpx};
                color: white;
                padding: 3#{rpx} 16#{rpx};
                margin-right: 16#{rpx};
                background: var(--remake-color);
                border-radius: 6#{rpx};
            }

            .w-big-pic {
                height: 654#{rpx};

                > image {
                    height: 100%;
                    width: 100%;
                }
            }

            .w-pic {
                margin: 10#{rpx} 13#{rpx} 10#{rpx};

                > image {
                    margin: 10.5#{rpx};
                    height: 204#{rpx};
                    width: 204#{rpx};
                    border-radius: 16#{rpx};
                    display: block
                }
            }

            .w-pic-four > image {
                height: 316#{rpx};
                width: 316#{rpx};
            }

            .w-right-goods {
                margin: 12#{rpx} 24#{rpx};
                height: 90#{rpx};

                .w-m-s {
                    width: 296#{rpx};

                    background: #F6F6F6;
                    border-radius: 8#{rpx};
                    margin-right: 18#{rpx};

                    .m-pic {
                        height: 86#{rpx};
                        width: 86#{rpx};
                        display: block;
                        border-radius: 8#{rpx} 0 0 8#{rpx};
                    }

                    .m-text {
                        padding: 0 18#{rpx};

                        .m-text-name {
                            display: block;
                            max-width: #{296 - 86 - 18 - 18}rpx;
                            font-size: 24#{rpx};
                            color: #333333;
                        }

                        .m-d {
                            font-size: 22#{rpx};
                            color: #999999;
                            text-decoration: line-through;
                            padding-left: 10#{rpx};
                        }
                    }
                }

                .w-m-1 {
                    width: 100%;
                }

                .w-m-2 {
                    width: 394#{rpx};
                }

                .w-m-3 {
                    width: 296#{rpx};
                }
            }

            .w-read {
                padding: 10#{rpx} 24#{rpx} 0;
                font-size: 24#{rpx};
                color: #999999;
            }
        }
    }

    .w-empty {
        margin-top: 166#{rpx};

        > image {
            height: 240#{rpx};
            width: 240#{rpx};
            display: block;
        }

        > view {
            padding-top: 27#{rpx};
            font-size: 24#{rpx};
            color: #999999;
        }
    }
}
</style>