<template>
    <view class="main">
        <div class="header" :style="{ paddingTop: menu.top + 'px' }">
            <view class="headerTop" :style="{ height: menu.height + 'px' }">
                <image class="backArrow" src="/static/images/home/brankBlackArrow.svg" @click="handleBack" />
                <view class="searchBox">
                    <input placeholder="请搜索商品" class="serach_input" v-model="searchText" confirm-type="search"
                        @confirm="handleSearch" :auto-focus="true" />

                    <image class="clearIcon" @click="handleClearSearchText" src="/static/images/home/clearIcon.svg" />
                </view>
                <view class="backArrow"></view>
            </view>
        </div>


        <scroll-view scroll-y class="shopListBox"
            :style="{ height: `calc(100vh - ${menu.bottom}px - ${safeHeight}px )` }">
            <div class="shopList">
                <div class="buyShopItem" v-for="(subItem, subIndex) in shopList" :key="subIndex"
                    @click.stop="showDetail(subItem)">
                    <div class="shopImgContent">
                        <image class="shopImage" :src="subItem.IMAGE_PATH" />
                    </div>
                    <div class="priceBox">
                        <div class="shopName">{{ subItem.COMMODITY_NAME }}</div>
                        <view style="
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin-top: 12rpx;
                        ">
                            <view class="nowPrice">
                                <text class="unit">¥</text>
                                <text class="price">{{ subItem.bigNumber || "" }}.{{
                                    subItem.smallNumber || "00"
                                    }}</text>
                                <text class="unitRule">/ {{ subItem.COMMODITY_UNIT }}</text>
                            </view>
                            <view class="shopState" v-if="!(subItem.COMMODITY_STOCK > 0)">已售罄</view>
                        </view>

                        <div class="marketBottom" v-if="subItem.COMMODITY_RETAILPRICE">
                            <span class="marketPrice">市场价：¥{{ subItem.COMMODITY_RETAILPRICE }}/ {{
                                subItem.COMMODITY_UNIT
                            }}</span>
                        </div>
                    </div>
                </div>
            </div>

        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            menu: {}, // 手机的一些位置信息
            searchText: "", // 搜索商品的文字
            safeHeight: 0,
            shopList: [],
            pageType: ""
        }
    },
    onLoad(query) {
        this.menu = uni.getMenuButtonBoundingClientRect();
        let height = uni.getStorageSync("safeHeight");
        this.safeHeight = Number(height);
        if (query.pageType) {
            this.pageType = query.pageType
        }
    },
    methods: {
        // 删除搜索内容
        handleClearSearchText() {
            this.searchText = ""
        },
        handleBack() {
            uni.navigateBack({
                delta: 1,
            });
        },
        async handleSearch() {
            if (this.searchText) {
                uni.showLoading({ title: "加载中" });
                let url = this.pageType === "UnionMall" ? '/third-party/getWeChatGetMallGoodsInfo' : '/third-party/getWeChatGetMallGoodsInfoExclude'

                const data = await this.$api.$javaGet(
                    // '/third-party/getExcludeWeChatGetMallGoodsInfo',
                    url,
                    {
                        ownerUnitId: 911,
                        appId: "wxee018fb96955552a",
                        commodityName: this.searchText,
                        excludeNature: this.pageType === "UnionMall" ? "" : 5070,
                        commodityNature: this.pageType === "UnionMall" ? 5070 : "",
                        payMethod: "1000,3000",
                        // justCommodity: 1,
                    }
                )

                uni.hideLoading()
                let list = data.Data.List;
                let shopList = [];
                if (list && list.length > 0) {
                    list.forEach((item) => {
                        if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
                            item.COMMODITYLIST.forEach((subItem) => {
                                // 判断当前的购物车里面 是不是已经有数据了 有数据的话 把原本的商品数量赋值进去
                                if (this.shopCarList && this.shopCarList.length > 0) {
                                    this.shopCarList.forEach((shopCarItem) => {
                                        if (shopCarItem.COMMODITY_ID === subItem.COMMODITY_ID) {
                                            subItem.count = shopCarItem.count;
                                            if (subItem.SKULIST && subItem.SKULIST.length > 0) {
                                                subItem.COMMODITY_RULE = shopCarItem.COMMODITY_RULE;
                                            } else {
                                                subItem.showReduce = true;
                                            }
                                        }
                                    });
                                }

                                if (
                                    subItem.COMMODITY_MEMBERPRICE &&
                                    subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
                                ) {
                                    subItem.bigNumber =
                                        subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                                    subItem.smallNumber =
                                        subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
                                } else {
                                    subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
                                }
                                if (
                                    subItem.COMMODITY_RETAILPRICE &&
                                    subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
                                ) {
                                    subItem.RETbigNumber =
                                        subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                                    subItem.RETsmallNumber =
                                        subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
                                } else {
                                    subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
                                }
                                shopList.push(subItem);
                            });
                        }
                    });
                }
                console.log("搜索商品", shopList);
                this.shopList = shopList
            } else {
                this.shopList = []
            }
        },

        showDetail(obj) {
            uni.navigateTo({
                url: `/pages/shopPages/shopDetail/index?id=${obj.COMMODITY_ID}&pageType=${this.pageType}`,
            });
        },
    }
}

</script>

<style lang="less" scoped>
.main {
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;

    .header {
        width: 100%;
        box-sizing: border-box;

        .headerTop {
            width: 100%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 32rpx;
            display: flex;
            align-items: center;
            // justify-content: space-between;

            .backArrow {
                width: 48rpx;
                height: 48rpx;
                margin-right: 16rpx;
            }

            .searchBox {
                width: 65%;
                background-color: #fff;
                box-sizing: border-box;
                padding: 12rpx;
                border-radius: 32rpx;
                display: flex;
                align-items: center;

                .serach_input {
                    width: calc(100% - 46rpx);
                    border: none;
                    height: 20px;
                    font-size: 14px;
                    box-sizing: border-box;
                    padding: 0 12px;
                }

                .clearIcon {
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: 16rpx;
                }
            }


        }

        .pageTitle {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 34rpx;
            color: #ffffff;
            line-height: 48rpx;
            text-align: center;
            font-style: normal;
        }

        .pageSearch {
            width: calc(100% - 48rpx);
            margin-top: 28rpx;
            margin-left: 24rpx;
            box-sizing: border-box;
            height: 38px;
            background: #fff;
            border-radius: 19px;
            box-sizing: border-box;
            padding: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .areaSelect {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160304;
                line-height: 20px;
                padding-left: 12px;
                position: relative;

                .areaIcon {
                    width: 12px;
                    height: 12px;
                }
            }

            .areaSelect:after {
                content: "";
                width: 2px;
                height: 14px;
                position: absolute;
                top: 3px;
                right: -12px;
                background: #e7e5e5;
                display: block;
            }

            .serach_input {
                width: 80%;
                border: none;
                height: 20px;
                font-size: 14px;
                box-sizing: border-box;
                padding: 0 12px;
            }

            .searchBtn {
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #fdfdfd;
                line-height: 20px;
                padding: 7px 16px;
                background: #1890ff;
                border-radius: 17px;
            }
        }

        .search {
            position: absolute;
            left: 32rpx;
            width: 480rpx;
            height: 72rpx;
            background: #f2f4f5;
            display: flex;
            flex-direction: row;
            align-items: center;
            border-radius: 36rpx;
            opacity: 0.8;

            .search_icon {
                width: 36rpx;
                height: 36rpx;
                margin: auto 16rpx auto 24rpx;
            }
        }

        .shop_info {
            position: absolute;
            left: 32rpx;
            display: flex;
            flex-direction: row;
            align-items: center;

            .shop_img {
                width: 120rpx;
                height: 120rpx;
                margin-right: 16rpx;
                border-radius: 16rpx;
            }

            .shop_box {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;

                .shop_title {
                    font-size: 34rpx;
                    font-weight: 500;
                    color: #ffffff;
                    line-height: 56rpx;
                }

                .shop_txt {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ecf1f6;
                    line-height: 40rpx;
                }
            }
        }
    }

    .shopListBox {
        width: 100%;
        box-sizing: border-box;
        padding: 32rpx;

        .shopList {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .buyShopItem {
                width: calc((100% - 22rpx) / 2);
                background: #f5f5f5;
                border-radius: 16rpx;
                box-sizing: border-box;
                margin-bottom: 24rpx;

                .shopImgContent {
                    width: 100%;
                    height: 330rpx;
                    box-sizing: border-box;
                    overflow: hidden;
                    border-radius: 16rpx 16rpx 0 0;

                    .shopImage {
                        width: 100%;
                        height: 100%;
                    }
                }

                .priceBox {
                    width: 100%;
                    box-sizing: border-box;
                    background-color: #fff;
                    padding: 16rpx 24rpx 32rpx;

                    .shopName {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #130f05;
                        line-height: 32rpx;
                        font-style: normal;
                        width: calc((100vw - 80rpx) / 2 - 40rpx);
                        height: 64rpx;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        /* 设置显示的行数，超出的行数会被省略 */
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }


                    .marketBottom {
                        height: 12px;

                        .marketPrice {
                            font-size: 10px;
                            line-height: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #9fa3a8;
                            text-decoration: line-through;
                        }

                        .marketPriceValue {
                            font-size: 10px;
                            line-height: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #9fa3a8;
                            text-decoration: line-through;
                        }

                        .unit {
                            font-size: 10px;
                            line-height: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #9fa3a8;
                        }
                    }

                    .retailPrice {
                        margin-top: 12rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #756c6a;
                        line-height: 36rpx;
                        text-align: left;
                        font-style: normal;
                        text-decoration-line: line-through;
                    }

                    .nowPrice {
                        .unit {
                            font-family: DINAlternate, DINAlternate;
                            font-weight: bold;
                            font-size: 24rpx;
                            color: #fe3f22;
                            line-height: 24rpx;
                            text-align: left;
                            font-style: normal;
                        }

                        .unitRule {
                            display: inline-block;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            font-size: 12px;
                            line-height: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #9fa3a8;
                        }

                        .price {
                            font-family: DINAlternate, DINAlternate;
                            font-weight: bold;
                            font-size: 36rpx;
                            color: #fe3f22;
                            line-height: 40rpx;
                            text-align: left;
                            font-style: normal;
                        }
                    }

                    .shopState {
                        font-size: 24rpx;
                        color: #fff;
                        background: #bbbbbb;
                        padding: 4rpx 16rpx;
                        border-radius: 8rpx;
                    }

                    .buyCarBox {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .buyCarLeft {
                            .price {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 600;
                                font-size: 32rpx;
                                color: #ff6219;
                                line-height: 40rpx;
                                text-align: left;
                                font-style: normal;

                                .smallPrice {
                                    font-size: 28rpx;
                                }
                            }

                            .unit {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 24rpx;
                                color: #9fa3a8;
                                line-height: 36rpx;
                                text-align: left;
                                font-style: normal;
                            }
                        }

                        .buyCarIcon {
                            width: 70rpx;
                            height: 70rpx;
                            border-radius: 50%;
                            overflow: hidden;

                            .icon {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }
    }

    .shopListBox ::-webkit-scrollbar {
        display: none;
        width: 0;
    }
}
</style>