<template>
    <view
        class="result-gy"
        :style="{
            'z-index': filterNewZIndex ? 102 : '',
            'position': filterNewZIndex ? 'fixed' : '',
        }"
    >
        <view
            v-if="setTop && filterTestId"
            :style="{'top': setTop + 'px', 'z-index': isMoreOpen ? 12 : 102}"
            class="result-gy-tab fixed"
        >
            <view
                v-if="filterTestId"
                class="filter-wrapper"
                :class="{
                    'disable': loadingData,
                    'new-filter-fixed': newFilterFixed,
                }"
                :style="{position: newFilterFixed ? 'fixed' : ''}"
            >
                <c-filter
                    v-if="tab && tab.length"
                    :selections="tab"
                    :show-mask="showMask"
                    :filter-drawer="true"
                    drawer-width="78.66%"
                    :z-index="1000"
                    drawer-button-width-custom="50%"
                    :drawer-padding-top="isSwan ? 0 : 44"
                    drawer-padding-left=".1rem"
                    drawer-padding-right=".1rem"
                    :border-bottom="false"
                    :use-new-icon="true"
                    mask-color="rgba(0, 0, 0, .4)"
                    primary-color="#00C8C8"
                    filter-tag-layout-padding-horizontal="23px 10px"
                    :selected-item-bold="false"
                    tag-title-padding=".1rem 0 .02rem"
                    reset-btn-color="#1f1f1f"
                    btn-font-weight="700"
                    icon-color="#b1b1b1"
                    tag-selected-text-color="#00C8C8"
                    @taglayouttap="tabTap"
                    @tagItemTap="tagItemTap"
                    @change="selectedDataChange"
                    @close="closeFilterDrawer"
                >
                    <view slot="drawerTop">
                        <view
                            v-if="result.location"
                            class="wrapper-new c-gap-inner-top"
                        >
                            <navigate
                                :url="locationChangeUrl"
                            >
                                <view
                                    class="result-gy-location result-gy-location-new c-font-13"
                                >
                                    <view class="c-line-clamp1 result-gy-location-left">
                                        <c-icon
                                            name="location"
                                            :style="{
                                                color: '#999',
                                            }"
                                            class="icon"
                                        />
                                        <text
                                            class="result-gy-location-left-info"
                                        ><text>送至：{{ locationData.placeName }}</text></text>
                                    </view>
                                </view>
                            </navigate>
                        </view>
                    </view>
                </c-filter>
                <!-- <view
                    class="list-type"
                    @tap="listTypeChange"
                >
                    <view :class="['m-icon', listType ? 'm-icon-tlist' : 'm-icon-tcard']"/>
                </view> -->
            </view>
            <!-- 二级筛选 -->
            <c-filter
                v-if="tabSub && tabSub.length && tabSub.length > 2 && filterTestId"
                :show-mask="true"
                :style="{position: 'fixed', width: '100%'}"
                :selections="tabSub"
                primary-color="#00C8C8"
                :new-item-background="true"
                :border-bottom="false"
                :tags-column="2"
                tag-justify-centent="start"
                filter-tag-layout-padding-vertical="6px"
                :use-new-up-down-icon="true"
                multi-background-color="#f5f5f5"
                tags-background-color="#f5f5f5"
                tags-margin-top=".09rem"
                text-font-size=".14rem"
                :selected-item-bold="false"
                tag-text-color="#1f1f1f"
                tag-selected-text-color="#1f1f1f"
                btn-font-weight="700"
                reset-btn-color="#1f1f1f"
                :multi-padding-bottom="68"
                @taglayouttap="subTabTap"
                @change="selectedDataChange"
            />
        </view>
        <view
            :style="{
                'padding-top': tab && tab.length && filterTestId ?
                    (tabSub && tabSub.length && tabSub.length > 2 && filterTestId ? '.90rem' : '.45rem') : '0',
            }"
        >
            <view
                v-if="result.topTip"
                class="top-tip"
            >
                <slide-tip
                    v-if="result.topTip"
                    state
                    no-fixed
                    no-animate
                    background="#FFEFC3"
                >
                    <view class="c-line-clamp1 c-color-333 c-gap-inner-left-large c-gap-inner-right-large c-tal">
                        <c-icon
                            name="exclamation-circle c-gap-right-small"
                            font-size="12px"
                            :style="{
                                color: '#666',
                            }"
                        />
                        <text>{{ result.topTip.text }}</text>
                    </view>
                </slide-tip>
            </view>
            <view
                v-if="result.location && !filterTestId && showAddr"
                class="wrapper c-gap-inner-top c-gap-bottom"
            >
                <navigate
                    :url="locationChangeUrl"
                >
                    <view
                        class="result-gy-location c-font-13"
                    >
                        <view class="c-line-clamp1 result-gy-location-left">
                            <c-icon
                                name="location"
                                :style="{
                                    color: '#999',
                                }"
                                class="icon"
                            />
                            <text
                                class="result-gy-location-left-info"
                            >
                                <text>送至：{{ locationData.placeName }}</text></text>
                        </view>
                        <view
                            v-if="result.location.change"
                            class="result-gy-location-right c-color-333"
                        >
                            <text class="c-gap-right-small">{{ result.location.change.text }}</text>
                            <c-icon
                                name="play"
                                class="icon"
                                font-size="10px"
                                :style="{
                                    color: '#bbb',
                                    marginLeft: '-2px',
                                }"
                            />
                        </view>
                    </view>
                </navigate>
            </view>
            <!-- 纠错卡片 -->
            <card-err-correct
                v-if="result.queryList && filterTestId"
                :text-list="[
                    {type: 'text', text: result.queryList.sug},
                    {type: 'button', text: result.queryList.raw, word: result.queryList.raw},
                ]"
                display="block"
                margin-top=".1rem"
                padding=".12rem .13rem .15rem"
                :text-style="{'line-height': '1', 'font-size': '.14rem'}"
                :btn-style="{
                    'color': '#FD503E',
                    'margin': '.06rem 0 .1rem',
                    'display': 'table',
                    'height': '.23rem',
                    'font-size': '.14rem'
                }"
                @goSearch="onQueryTap"
            />
            <!-- tab列表滚动视图 -->
            <scroll-view
                v-if="scrollTabParams && scrollTabParams.list && scrollTabParams.list.length"
                scroll-x
                class="scroll-view c-gap-inner-left c-gap-inner-right c-gap-bottom c-gap-top"
            >
                <view
                    v-for="(tab, index) in scrollTabParams.list"
                    :key="'scrollTab_' + index"
                    :class="['scroll-view-item', tab === selectedTab ? 'active' : '']"
                    @tap="handleScrollItemTap(tab)"
                >
                    {{ tab }}
                </view>
            </scroll-view>
            <view
                v-if="o2o"
                class="wrapper shop-wrapper"
            >
                <o2o-card
                    :test-type="filterTestId"
                    padding=".11rem 0 0"
                    :data="o2o"
                    :logkey="logkey"
                    :shadow="false"
                    :show-log-sign="showLogSign"
                />
            </view>
            <view class="result-gy__list">
                <view
                    v-if="!filterTestId"
                    :style="{'top': setTop + 'px', 'z-index': '98'}"
                    :class="{
                        'fixed': filterFixed,
                    }"
                    class="result-gy-tab"
                >
                    <view
                        :class="{
                            'disable': loadingData,
                        }"
                        class="filter-wrapper"
                    >
                        <c-filter
                            v-if="tab && tab.length"
                            :selections="tab"
                            :show-mask="showMask"
                            :border-bottom="false"
                            mask-color="rgba(0, 0, 0, .4)"
                            primary-color="#ff6050"
                            filter-tag-layout-padding-horizontal="53px 10px 0"
                            @taglayouttap="tabTap"
                            @change="selectedDataChange"
                        />
                        <view
                            class="list-type"
                            @tap="listTypeChange"
                        >
                            <view :class="['m-icon', listType ? 'm-icon-tlist' : 'm-icon-tcard']"/>
                        </view>
                    </view>
                </view>
                <view
                    v-if="drugs && drugs.length"
                    class="item-gy-cont"
                    :style="{
                        'padding-top': tab.length && !o2o && !result.location ? '60px' : !filterTestId ? '5px' : '15px'
                    }"
                >
                    <view
                        :class="{
                            'card-type': !listType,
                        }"
                        class="drug-wrapper"
                    >
                        <view
                            v-for="(item, index) in drugs"
                            :key="index + item.drugId"
                            :data-show="item.logStr + '_' + index"
                            :class="[
                                listType && 'c-gap-bottom-large',
                                showLogSign,
                                ubcShowLogClass,
                            ]"
                            class="drug-item"
                            :data-extra="item.st_log"
                            use-trackby
                        >
                            <view class="drug-item-inner">
                                <view
                                    v-if="index === 6 && tags && tags.filter && tags.filter.length >= 2 && filterTestId"
                                    class="drug-item-labels c-gap-bottom-large"
                                    :class="tagsUbcShowLogClass"
                                >
                                    <search-label-list
                                        :title="tags.title"
                                        :list="tags.filter"
                                        @searchByLabel="searchByLabel"
                                    />
                                </view>
                                <drug-list-item
                                    :corner-img="item.cornerimg"
                                    :drug-id="item.drugId"
                                    :head-image="item.headImage"
                                    :title-name="item.titleName"
                                    :text-name="item.textName"
                                    :distance="item.distance"
                                    :store-url="item.storeUrl"
                                    :label="item.label"
                                    :target-url="item.targetUrl"
                                    :price-fixed="item.priceFixed"
                                    :org-price="item.orgPrice"
                                    :sales="item.sales"
                                    :badge="item.badge"
                                    :is-video="item.isVideo"
                                    :status-text="item.statusText"
                                    :tips-text="item.tipsText"
                                    :indication="item.indication_card"
                                    :pre-label="item.preLabel"
                                    :comment-count="item.commentCount"
                                    :good-comment-percent="item.goodCommentPercent"
                                    :logkey="item.logStr + '_' + index"
                                    :width="listType ? (filterTestId ? '1.19rem' : '143px') : '100%'"
                                    :height="listType ? (filterTestId ? '1.19rem' : '143px') : '100%'"
                                    radius=".05rem"
                                    :card-style="listType ? 'list-style' : 'card-style'"
                                    :box-shadow="false"
                                    :ubc-log-prefix="ubcLogValue"
                                    :ubc-log-ext="item.st_log"
                                    :filter-test-id="filterTestId"
                                    stroke
                                    :title-style="{color: filterTestId ? '#1f1f1f' : '#333'}"
                                    :p-style="{marginTop: filterTestId ? '.03rem' : ''}"
                                    :go-text-style="{color: filterTestId ? '#1f1f1f' : '#000', 'margin-left': '.03rem'}"
                                    :store-tags="item.storeTags"
                                >
                                    <view slot="priceRight" class="add-trolleys">
                                        <view
                                            :class="{
                                                'disabled': item.status != 1,
                                            }"
                                            class="m-icon m-icon-trolleys"
                                            @tap.stop.prevent="addTrolleys(item, index)"
                                        />
                                    </view>
                                </drug-list-item>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 购物车 -->
        <view class="trolleys swan-security-margin-bottom">
            <trolleys
                :url="drugCart && drugCart.targetUrl"
                :num="drugNum"
                :goods-img="goodsImg"
            />
        </view>
    </view>
</template>

<script>
/**
 * @file 购药搜索结果
 * @author zhangeryi
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CFilter from '@baidu/med-ui/components/Filter/Filter';
import Navigate from '../common/navigate';
import DrugListItem from '../gy/drug-list-item';
import Trolleys from '../gy/trolleys';
import O2oCard from '../gy/o2ocard';
import SlideTip from '../common/slide-tip';
import {request} from '../../utils/request';
import * as Conf from '../../utils/conf';
import {send, CollectLog, ubcSend} from '../../utils/log';
import {urlAddQuery, rand, changeUrlParameter} from '@utils/core';
import CardErrCorrect from './card-err-correct';
import SearchLabelList from './search-label-list';
import * as TrolleysUtil from '@utils/newTrolleys';

let timerId = null;

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CFilter,
        DrugListItem,
        Navigate,
        CIcon,
        Trolleys,
        O2oCard,
        SlideTip,
        CardErrCorrect,
        SearchLabelList
    },
    props: {
        // 药品结果
        result: {
            type: Object
        },
        // 是否有nav
        hasNav: {
            type: Boolean
        },
        // 顶部高度
        topHeight: {
            type: Number
        },
        // 窗口高度
        windowHeight: {
            type: Number
        },
        // 位置信息
        locationData: {
            type: Object
        },
        // 滚动距离
        scrollTop: {
            type: Number
        },
        // 滚动tab参数
        scrollTabParams: {
            type: Object
        },
        // 日志标识
        showLogSign: {
            type: String
        },
        // 日志信息
        logkey: {
            type: String
        },
        // nav是否展开，便于设置层级
        isMoreOpen: {
            type: Boolean
        }
    },
    data() {
        return {
            tab: [],
            tabAll: '全部',
            selectedTab: '',
            showMask: false,
            drugs: [],
            params: {
            },
            feed: {
                bottomTip: '',
                isEnd: '',
                nextApi: '',
                noRes: '',
                selectApi: ''
            },
            setTop: 0,
            getCartIng: false,
            o2o: '',
            // 添加购物车/获取购物车数量接口url
            drugCart: {},
            // 购物车数字
            drugNum: 0,
            goodsImg: '',
            drugShow: true,
            loadingData: false,
            listType: true,
            ubcShowLogClass: 'SHOW_LOG_MODULE_SEARCH_LIST' + rand(6),
            ubcLogValue: 'MSSearch_list',
            ubcLoaded: false,
            tabSub: null,
            isSwan: process.env.MARS_ENV === 'swan',
            // 筛选框选中的数据
            filterResults: null,
            // 实验id
            filterTestId: 0,
            tagsUbcShowLogClass: 'SHOW_LOG_MODULE_SEARCH_LIST' + rand(6),
            tagsUbcLogPrefix: 'MSSearch_tags',
            newFilterFixed: false,
            tags: null,
            // 对照组，防止地址切换栏闪现
            showAddr: false,
            // 防止多次点击搜索标签
            searchLabelLock: true
        };
    },
    computed: {
        filterFixed() {
            if (!this.o2o && !this.result.location && !this.result.topTip && !this.filterTestId) {
                return true;
            }

            let top = this.setTop;
            !this.filterTestId && this.o2o && (top += 175);
            !this.filterTestId && this.result.location && (top += 58);
            !this.filterTestId && this.result.topTip && (top += 32);
            return this.scrollTop > top;

        },
        locationChangeUrl() {
            const {result} = this;
            if (result.location.change && result.location.change.url) {
                return urlAddQuery(result.location.change.url, {openType: 'navigate'});
            }
            return '';
        },
        filterNewZIndex() {
            return !this.drugs.length && !this.isMoreOpen && this.filterTestId;
        }
    },
    beforeDestroy() {
        this.$set(this, 'drugs', []);
        this.$set(this, 'tab', []);
    },
    watch: {
        result: {
            handler(val) {
                this.formatData();
            }
        },
        drugs(val) {
            if (!this.ubcLoaded && val && val.length) {
                new CollectLog({
                    SIGN: this.ubcShowLogClass,
                    sendCallback: item => {
                        ubcSend({
                            type: 'view',
                            value: this.ubcLogValue,
                            ext: {
                                pd: 'sc',
                                item
                            }
                        }, 'feedlog');
                    }
                });
                this.ubcLoaded = true;
            }
        },
        hasNav() {
            this.computedTop();
        },
        topHeight() {
            this.computedTop();
        }
    },
    pageLifetimes: {
        show() {
            if (this.drugCart.asyncAddUrl && !this.getCartIng) {
                this.getCartIng = true;
                // 获取购物车数量
                setTimeout(() => {
                    this.addTrolleys();
                }, 0);
            }
        }
    },
    created() {
        this.computedTop();
        this.formatData();
        this.initScroller();
        this.filterTestId = this.result.filterTestId || 0;
        // 如果是对照组就展示地址切换栏
        !this.filterTestId && (this.showAddr = true);
        if (this.result.queryList) {
            ubcSend({
                type: 'view',
                value: 'correct_card',
                ext: {
                    pd: 'sc'
                }
            });
        }
        if (this.tabSub && this.tabSub.length && this.tabSub.length > 2) {
            ubcSend({
                type: 'view',
                value: 'subFilter',
                ext: {
                    pd: 'sc'
                }
            });
        }
        new CollectLog({
            SIGN: this.tagsUbcShowLogClass,
            sendCallback: item => {
                ubcSend({
                    type: 'view',
                    value: this.tagsUbcLogPrefix,
                    ext: {
                        pd: 'sc',
                        item
                    }
                });
            }
        });
    },
    methods: {
        formatData() {
            if (this.result.tab) {
                this.params = Object.assign({}, this.locationData);
                this.result.tab[0] && (this.result.tab[0].defaultValue = this.result.tab[0].text);
                this.$set(this, 'tab', this.result.tab);
            }
            if (this.result.tabSub) {
                this.$set(this, 'tabSub', this.result.tabSub);
            }
            if (this.result.tags) {
                this.$set(this, 'tags', this.result.tags);
            }
            if (this.result.drugs) {
                this.formatPrice(this.result.drugs);
                this.drugs = this.result.drugs;
            }
            if (this.result.drugCart) {
                if (!this.drugCart.asyncAddUrl && this.result.drugCart && !this.getCartIng) {
                    this.getCartIng = true;
                    this.$set(this, 'drugCart', this.result.drugCart || {});
                    // 获取购物车数量
                    this.addTrolleys();
                }
            }
            this.o2o = this.result.o2o;
            this.feed = this.result.feed || {};
        },
        addTrolleys(drug, index) {
            if (!this.drugCart.asyncAddUrl) {
                this.getCartIng = false;
                return;
            }
            this.goodsImg = '';
            if (drug) {
                if (+drug.status !== 1) {
                    // 无库存
                    this.$api.showToast({
                        icon: 'none',
                        title: drug.statusToast || '没有库存了，看看其他药品吧'
                    });
                    return;
                }
                this.goodsImg = drug.headImage;
                send({
                    type: 'b',
                    action: 'click',
                    extra: {
                        type: `${this.logkey}_addCart`,
                        logStr: `${drug.logStr}_${index}`
                    }
                });
                let ext = {};
                try {
                    ext = JSON.parse(drug.st_log || '{}');
                } catch (error) {
                    console.log(error);
                    ext = {};
                }
                ubcSend({
                    type: 'clk',
                    value: `${this.ubcLogValue}_addCart`,
                    ext: {
                        ...ext,
                        pd: 'sc'
                    }
                }, 'feedlog');
            }
            TrolleysUtil.asyncAddTrolleys({url: this.drugCart.asyncAddUrl, drug: drug})
                .then(({data}) => {
                    this.drugNum = +data.drugNum || 0;
                    this.getCartIng = false;
                });
        },
        updateDurgs(drugs) {
            return new Promise((resolve, reject) => {
                this.$set(this, 'drugs', []);
                this.$mpUpdated(() => {
                    // 解决渲染数据错乱问题（视图部分更新）
                    setTimeout(() => {
                        this.formatPrice(drugs);
                        this.$set(this, 'drugs', drugs);
                        resolve();
                    }, 100);
                });
            });
        },
        formatPrice(drugs) {
            drugs && drugs.map(drug => {
                drug.priceFixed = drug.price / 100;
            });
        },
        // 选中的allResults数据，在两个筛选组件中相互关联
        selectedDataChange(obj) {
            this.tab && this.tabChange(obj, 'tab');
            this.tabSub && this.tabChange(obj, 'tabSub');
            this.filterChange();
            send({
                type: 'b',
                action: 'filterChange',
                extra: {
                    module: this.params
                }
            });
            ubcSend({
                type: 'clk',
                value: 'filterDrawer_search',
                ext: {
                    pd: 'sc'
                }
            });
        },
        tabChange(obj, name) {
            this.filterResults = obj.allResults;
            let allResults = obj.allResults;
            let fKey = [];
            this[name].map(itm => {
                if (itm.type !== 'multi' && itm.type !== 'list') {
                    fKey.push(itm.key);
                }
            });
            let multied = {};
            Object.keys(allResults || {}).filter(key => fKey.indexOf(key) === -1).forEach(key => {
                this.params[key] = allResults[key].value;
                this[name].map((tbItem, index) => {
                    if (tbItem.type === 'multi') {
                        tbItem.options && tbItem.options.map((itm, i) => {
                            if (itm.key === key) {
                                itm.defaultValue = allResults[key].value;
                                itm.defaultValue && (multied[index] = itm.defaultValue);
                                if (allResults[key].maxValue || allResults[key].minValue) {
                                    this.$set(itm, 'maxValue', allResults[key].maxValue || '');
                                    this.$set(itm, 'minValue', allResults[key].minValue || '');
                                }
                                this.$set(this[name], index, tbItem);
                            }
                        });
                    }
                });
            });
            name === 'tab' && this.tab.map((tbItem, index) => {
                if (tbItem.type === 'multi') {
                    let defaultValue = '';
                    Object.keys(multied).forEach(key => {
                        if (multied[index]) {
                            defaultValue = tbItem.text;
                        }
                    });
                    tbItem.defaultValue = defaultValue;
                    this.$set(this.tab, index, tbItem);
                }
            });

            // 外露的二级筛选框选中后，二级筛选框的名字应该展示选中的标签
            this.filterTestId && this.tabSub && this.tabSub.forEach((item, index) => {
                // 用defaultText保存默认标签，例如品牌、人群
                if (!item.defaultText) {
                    item.defaultText = item.text;
                }
                let text = item.defaultText;
                item.options.forEach((option, idx) => {
                    // 如果选中标签则展示选中的数据，否则展示默认标签
                    text = option.defaultValue || item.defaultText;
                });
                item.text = text;
            });

            // 如果没有纠错卡，带上noSug=1
            if (!this.result.queryList) {
                this.params.noSug = 1;
            }
        },
        // 筛选项点击
        tabTap(obj) {
            this.showMask = obj.option.type === 'multi' || obj.option.type === 'list';
            if (obj.option.type !== 'multi' && obj.option.type !== 'list') {
                if (this.loadingData) {
                    return;
                }
                this.loadingData = true;
                // 如果是排序类型 设置order
                if (obj.option.type === 'order') {
                    if (!obj.option.direction || obj.option.direction === 'down') {
                        this.tab[obj.optionIndex].direction = 'up';
                        this.$set(this.tab, obj.optionIndex, this.tab[obj.optionIndex]);
                    }
                    else {
                        this.tab[obj.optionIndex].direction = 'down';
                        this.$set(this.tab, obj.optionIndex, this.tab[obj.optionIndex]);
                    }
                }
                this.tab.map((item, index) => {
                    if (item.type !== 'multi' && item.type !== 'list') {
                        if (obj.optionIndex === index) {
                            item.defaultValue = item.text;
                        }
                        else if (item.type === 'order') {
                            delete item.direction;
                            item.defaultValue = '';
                        }
                        else {
                            item.defaultValue = '';
                        }
                        this.$set(this.tab, index, item);
                    }
                });
                this.getTabData();
            }
            if (this.filterTestId === 1 && obj.option.type === 'multi' && obj.option.key === 'filterDetail') {
                this.newFilterFixed = true;
            }
            send({
                type: 'b',
                action: 'filterTap',
                extra: {
                    module: obj.option.type
                }
            });
            ubcSend({
                type: 'clk',
                value: 'filter_' + obj.option.key,
                ext: {
                    pd: 'sc'
                }
            });
            if (this.filterTestId === 1 && this.tabSub && obj.option.type === 'multi' && obj.option.options) {
                obj.option.options.forEach(item => {
                    ubcSend({
                        type: 'view',
                        value: 'filterDrawer_' + item.key,
                        ext: {
                            pd: 'sc'
                        }
                    });
                });
            }
        },
        getTabData() {
            // 设置筛选获得的数据
            this.tab.map((item, index) => {
                if (item.defaultValue) {
                    this.params[item.key] = item.direction === 'up' ? 0 : 1;
                }
                else if (item.type !== 'multi' && item.type !== 'list') {
                    // 去掉非选中态的数据
                    delete this.params[item.key];
                }
            });
            this.filterChange();
            send({
                type: 'b',
                action: 'filterChange',
                extra: {
                    module: this.params
                }
            });
        },
        filterChange() {
            /**
             * 设置loading
             *
             */
            this.$emit('setLoadingStatus', 'loading');
            request({
                url: Conf.apiHost + this.feed.selectApi,
                data: this.params,
                isFirstScreen: false,
                isNeedLogin: false
            }).then(({data}) => {
                this.$api.pageScrollTo({
                    scrollTop: 0,
                    duration: 0
                });
                this.feed = data.feed;
                /**
                 * 设置loading
                 *
                 */
                this.$emit('setLoadingStatus', '');
                if (+data.feed.isEnd === 1) {
                    /**
                     * 设置loading
                     *
                    */
                    this.$emit('setLoadingStatus', 'complete');
                }
                this.o2o = data.o2o;
                if (this.filterTestId) {
                    this.$set(this, 'tags', {});
                    this.$mpUpdated(() => {
                        // 解决tags渲染错乱问题（视图部分更新）
                        this.$set(this, 'tags', data.tags);
                    });
                }
                if (data.drugs && data.drugs.length) {
                    this.formatPrice(data.drugs);
                    this.updateDurgs(data.drugs)
                        .then(() => {
                            setTimeout(() => {
                                this.loadingData = false;
                            }, 100);
                        });
                }
                else {
                    this.updateDurgs([]);
                    /**
                     * 设置loading
                     *
                    */
                    !data.o2o && this.$emit('setLoadingStatus', 'noData');
                    this.loadingData = false;
                }
            })
                .catch(err => {
                    /**
                     * 设置loading
                     *
                     */
                    this.$emit('setLoadingStatus', 'fail');
                    this.loadingData = false;
                });
        },
        getList() {
            if (this.loadingData) {
                return;
            }
            this.loadingData = true;
            /**
             * 设置loading
             *
             */
            this.$emit('setLoadingStatus', 'loading');
            request({
                url: Conf.apiHost + this.feed.nextApi,
                data: this.params,
                isFirstScreen: false,
                isCheckLogin: false
            }).then(res => {
                this.formatPrice(res.data.drugs);
                this.drugs = this.drugs.concat(res.data.drugs);
                this.feed = res.data.feed;
                setTimeout(() => {
                    if (+res.data.feed.isEnd === 1) {
                        /**
                         * 设置loading
                         *
                         */
                        this.$emit('setLoadingStatus', 'complete');
                    }
                    this.loadingData = false;
                }, 100);
                res.update.call(this);
            })
                .catch(err => {
                    this.loadingData = false;
                    /**
                     * 设置loading
                     *
                     */
                    this.$emit('setLoadingStatus', 'fail');
                });
        },
        listTypeChange() {
            this.listType = !this.listType;
            send({
                type: 'b',
                action: 'listTypeChange',
                extra: {
                    act: this.listType
                }
            });
        },
        computedTop() {
            let top = 48;
            if (!isNaN(this.topHeight)) {
                top += this.topHeight;
            }
            if (this.hasNav) {
                top += 44;
            }
            this.setTop = top;
        },
        initScroller() {
            if (this.scrollTabParams) {
                this.selectedTab = this.scrollTabParams.selectedTab || '';
            }
        },
        handleScrollItemTap(tab) {
            if (timerId) {
                clearTimeout(timerId);
                timerId = null;
            }
            if (this.selectedTab === tab) {
                return;
            }
            timerId = setTimeout(() => {
                const tabTxt = (tab === this.tabAll ? '' : tab);
                const tagExt = (tab === this.tabAll ? this.scrollTabParams.tagExt : '');
                this.selectedTab = tab;
                this.feed.selectApi = changeUrlParameter(this.feed.selectApi, 'query', tabTxt);
                this.feed.selectApi = changeUrlParameter(this.feed.selectApi, 'word', tabTxt);
                this.feed.selectApi = changeUrlParameter(this.feed.selectApi, 'tag_ext', tagExt);
                this.filterChange();
            }, 300);
        },
        // 点击标签进行搜索
        searchByLabel(obj) {
            // 防止多次点击
            if (!this.searchLabelLock) {
                return;
            }
            // 在query后面加上选中的标签
            this.$emit('changeQueryText', obj.text);
            const mockResults = {};
            mockResults[obj.type] = {};
            mockResults[obj.type].value = obj.text;
            mockResults[obj.type].options = [];
            mockResults[obj.type].options[0] = {
                selected: true,
                text: obj.text,
                value: obj.text
            };
            // 如果filterResults中有同类型的数据，直接替换
            !this.filterResults && (this.filterResults = {});
            this.$set(this.filterResults, obj.type, mockResults[obj.type]);
            const resObj = this.filterResults ? this.filterResults : mockResults;
            this.params.noTags = 1;
            this.selectedDataChange({allResults: resObj});
            ubcSend({
                type: 'clk',
                value: 'MSSearch_tags',
                ext: {
                    pd: 'sc'
                }
            });
            this.searchLabelLock = false;
        },
        closeFilterDrawer() {
            this.newFilterFixed = false;
        },
        // 点击纠错卡片
        onQueryTap(e) {
            this.$emit('onQueryTap', e, '', true);
            ubcSend({
                type: 'clk',
                value: 'correct_card',
                ext: {
                    pd: 'sc'
                }
            });
        },
        subTabTap(obj) {
            ubcSend({
                type: 'clk',
                value: 'subFilter_' + obj.option.key,
                ext: {
                    pd: 'sc'
                }
            });
        },
        tagItemTap(obj) {
            ubcSend({
                type: 'clk',
                value: 'filterDrawer_' + obj.option.key,
                ext: {
                    pd: 'sc'
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.wrapper {
    padding-left: .1rem;
    padding-right: .1rem;
}

.wrapper-new {
    padding-left: .13rem;
    padding-right: .13rem;
}

.result-gy {
    position: relative;
    width: 100%;

    &-location {
        height: 43px;
        line-height: 43px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        background: #fff;
        border-radius: 8px;

        &-new {
            height: 30px;
            line-height: 30px;
            padding: 0;
            justify-content: flex-end;
        }

        &.fail {
            background: #fff4f3;

            .result-gy-location-left {
                color: #ff6050;
            }
        }

        &-left {
            color: #555;

            .icon {
                opacity: .68;
                margin-right: 5px;
                position: relative;
                top: 1px;
            }
        }

        &-right {
            white-space: nowrap;
        }
    }

    &__list {
        background: #fff;
        margin: .08rem .1rem;
        border-radius: .08rem;
    }

    .shop-wrapper {
        position: relative;
        margin-bottom: .08rem;
        margin-top: .08rem;
    }

    .result-gy-tab {
        top: 89px;
        left: 0;
        right: 0;
        background: #fff;
        // z-index: 102;
        transition: top .16s cubic-bezier(0, 0, .3, 1);
        border-radius: .08rem .08rem 0 0;
        overflow: hidden;

        &.fixed {
            position: fixed;
            border-radius: 0;
        }

        .filter-wrapper {
            position: relative;

            &.disable {
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                }
            }

            .list-type {
                padding-right: .17rem;
                padding-left: .2rem;
                line-height: 45px;
                position: absolute;
                z-index: 2;
                right: .0;
                top: 0;
            }
        }
    }

    .new-filter-fixed {
        position: fixed;
        z-index: 103;
        width: 100%;
    }

    .item-gy-cont {
        padding: 0 .13rem 0 .13rem;

        .drug-wrapper {
            &.card-type {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-right: -.1rem;

                .drug-item {
                    width: 50%;
                    flex: none;

                    &-inner {
                        margin-right: .1rem;
                    }
                }
            }
        }

        .drug-item {
            &-labels {
                position: relative;

                &::before {
                    display: block;
                    content: " ";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 1px;
                    background: #e0e0e0;
                    -webkit-transform: scaleY(0.33);
                    transform: scaleY(0.33);
                }

                &::after {
                    display: block;
                    content: " ";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 1px;
                    background: #e0e0e0;
                    -webkit-transform: scaleY(0.33);
                    transform: scaleY(0.33);
                }
            }

            .add-trolleys {
                text-align: right;
                color: #ff6050;
                margin-left: .08rem;

                .m-icon {
                    background: #ff6050;
                    color: #fff;
                    border-radius: 100%;
                    width: 24px;
                    height: 24px;
                    text-align: center;
                    font-size: 13px;
                    line-height: 26px;
                    float: right;

                    &.disabled {
                        background: #ccc;
                    }
                }
            }
        }
    }

    .trolleys {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 3;
    }

    .scroll-view {
        white-space: nowrap;
        width: auto !important;

        &-item {
            display: inline-block;
            text-align: center;
            padding: 6px 16px;
            background: #fff;
            margin-right: 10px;
            border-radius: 9px;

            &:last-child {
                margin-right: 0;
            }

            &.active {
                color: #00c8c8;
            }
        }
    }
}
</style>
