<template>
  <view :class="[isFilterFixed ? 'u-pa' : '']">
    <view
      :class="['m-tab', isFilterFixed ? 'm-tab-fixed' : 'm-tab-top']"
      :style="'top:' + fixTop + 'px'"
      v-if="isShowFilter && tabs.length > 0"
    >
      <scroll-view
        class="m-navbar scroll-view_H"
        scroll-x
        style="width: 94%"
        :show-scrollbar="true"
      >
        <view class="m-navbar-info">
          <block v-for="(tab, index) in tabs" :key="index">
            <view
              class="m-navbar-item"
              :class="index == key ? 'item-on' : ''"
              @click="switchTabs(index)"
            >
              {{ tab.name }}

              <label
                class="iconfont zc zc-youxiajiao active-icon"
                v-if="index == key"
              ></label>
            </view>
          </block>
        </view>
      </scroll-view>

      <scroll-view
        scroll-top="200"
        class="m-navbar scroll-view_H"
        scroll-x
        :style="'width:' + (tabs[key].sidx && tabs[key].sort ? '80%' : '94%')"
        :show-scrollbar="true"
        v-if="tabs[key].isShowFilter"
      >
        <block v-for="(price, index) in prices" :key="index">
          <view
            class="filter-item"
            :class="priceIndex == index ? 'filter-item-on' : ''"
            @click="selectPriceIndex(index)"
          >
            {{ price.title }}
          </view>
        </block>
      </scroll-view>
    </view>
    <view
      scroll-y="true"
      :class="[
        'm-product-all  u-pa',
        isShowFilter && isFilterFixed ? 'm-product-box' : '',
      ]"
      :style="{ backgroundColor: bgColor }"
    >
      <view
        :class="{ 'm-product-list': 1, 'm-listv': viewtype == 1 }"
        v-if="isdata"
        style="width: 100%"
      >
        <block v-for="(item, i) in pdlist" :key="i">
          <block
            v-if="
              priceIndex == -1 ||
              (post.product_unit_price_max > 0
                ? item.ItemSalePrice >= post.product_unit_price_min &&
                  item.ItemSalePrice <= post.product_unit_price_max
                : item.ItemSalePrice >= post.product_unit_price_min)
            "
          >
            <navigator
              v-if="!isFG"
              :url="
                (item.is_virtual
                  ? '/pages/product/detail'
                  : '/pages/product/detail') +
                '?pid=' +
                item.id
              "
              class="m-product-item"
              :style="{
                marginLeft: (i % 2 == 0 ? 10 - paddingLeft : 5) * 2 + 'rpx',
              }"
            >
              <view class="m-product-img product-list">
                <view
                  class="m-img-number"
                  :class="'m-img-' + (i > 3 ? 3 : i)"
                  v-if="isShowNumber"
                >
                  <span>{{ i + 1 }}</span>
                </view>
                <image
                  lazy-load
                  :src="$.img(item.product_image, 360, 360)"
                  v-if="item.product_image"
                />
              </view>
              <view
                class="m-product-info1"
                style="
                  display: flex;
                  flex-flow: column;
                  justify-content: space-between;
                "
              >
                <view class="m-product-name2">
                  <label>
                    <text
                      class="tag tag-bargain"
                      v-if="
                        item.activity_type_id == StateCode.ACTIVITY_TYPE_BARGAIN
                      "
                    >
                      {{ item.activity_type_name }}
                    </text>
                    <text
                      class="tag tag-gift"
                      v-if="
                        item.activity_type_id == StateCode.ACTIVITY_TYPE_GIFT
                      "
                    >
                      {{ item.activity_type_name }}
                    </text>
                    <text
                      class="tag tag-saleoff"
                      v-if="
                        item.activity_type_id ==
                        StateCode.ACTIVITY_TYPE_LIMITED_DISCOUNT
                      "
                    >
                      {{ item.activity_type_name }}
                    </text>
                    <text
                      class="tag tag-reduction"
                      v-if="
                        item.activity_type_id ==
                        StateCode.ACTIVITY_TYPE_REDUCTION
                      "
                    >
                      {{ item.activity_type_name }}
                    </text>
                    {{ item.SalesName }}</label
                  >
                </view>

                <view class="m-product-price1">
                  <view class="money">
                    <block v-if="item.ItemSalePrice">
                      <label>{{ __("￥") }}</label
                      >{{ number_format(item.ItemSalePrice, 2) }}
                    </block>
                  </view>
                  <view
                    class="num"
                    v-if="
                      false &&
                      plantformInfo.config.product_salenum_flag &&
                      item.SaleNum > 0
                    "
                  >
                    <text>{{ __("已售") }}</text>
                    <label style="color: #db384c; margin-left: 2px">{{
                      item.SaleNum
                    }}</label>
                  </view>
                  <view class="add-cart hide">
                    <uni-icons
                      type="plusempty"
                      size="20"
                      color="#fff"
                    ></uni-icons>
                  </view>
                  <view :class="'c' + 1" v-if="false"> </view>
                </view>
              </view>
            </navigator>
          </block>
        </block>
      </view>
      <navigator
        url="/pagesub/search/search"
        redirect="true"
        class="m-nullpage"
        v-else
      >
        <view class="m-nullpage-middle">
          <label class="iconfont icon-sousuo-sousuo"></label>
          <view class="m-null-tip">
            <text>{{ __("亲~找不到您想要的商品") }}</text>
            <text>{{ __("再多点提示呗") }}</text>
          </view>
        </view>
      </navigator>

      <view class="m-loading-box" v-if="isShowLoading">
        <block v-if="ispage">
          <view class="u-loadmore">
            <label class="u-loading"></label>
            <text class="u-loadmore-tips">{{ __("正在加载") }}</text>
          </view>
        </block>
        <block v-else>
          <view class="u-loadmore u-loadmore-line">
            <text class="u-loadmore-tips">{{ __("没有更多数据啦！") }}</text>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>


<script>
import uniDrawer from "@/components/uni-drawer.vue";
import uniTag from "@/components/uni-tag/uni-tag.vue";
import { mapMutations, mapState } from "vuex";

export default {
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    optionStr: {
      type: String,
      default: "{}",
    },
    css: {
      type: Object,
      default() {
        return {};
      },
    },
    isShowFilter: {
      type: [Boolean, Number],
      default: false,
    },

    isFilterFixed: {
      type: Boolean,
      default: false,
    },

    fixTop: {
      type: Number,
      default() {
        return 0;
      },
    },

    viewtype: {
      type: Number,
      default: 1,
    },

    titleText: {
      type: String,
      default: "",
    },

    titleColor: {
      type: String,
      default: "#bfbfbf",
    },

    bgColor: {
      type: String,
      default: "#f8f8f8",
    },

    paddingLeft: {
      type: Number,
      default: 0,
    },

    paddingRight: {
      type: Number,
      default: 0,
    },

    maxNumber: {
      type: Number,
      default: 100,
    },

    isShowLoading: {
      type: [Boolean, Number],
      default: true,
    },
    isGuessFlag: {
      type: Boolean,
      default: false,
    },
    priceList: {
      type: String,
      default: "",
    },
    uniId: {
      type: String,
      default() {
        return "guessyoulike";
      },
    },
  },
  data() {
    return {
      isStoreFlag: 0,
      h: 0,
      /* viewtype: 1, */
      assist: [],
      pdlist: [],
      fglist: [],
      sort: 2,
      flag: true,
      ispage: true,
      scposition: "",
      old: {
        scposition: 0,
      },
      istop: false,
      isdata: false,
      isVirtual: false,
      isFG: false,
      is_filter: false,

      prices: [],
      priceIndex: -1,
      sidxName: "排序",

      key: 0,
      post: {
        sidx: "product_order",
        sort: "ASC",
        isnew: false,
        keywords: "",
        store_category_ids: 0,
        page: 1,
        store_id: null,

        pa_id: null,
        pa_type_id: null,

        product_unit_price_min: null,
        product_unit_price_max: null,

        points_from: null,
        points_to: null,

        virtual: null,
        store_type: 1,
        product_ids: "",
      },

      tabs: [],

      rightDrawerVisible: false,

      inverted: {
        gift: true,
        groupbuy: true,
        xianshi: true,
        virtual: true,
      },
      contract_row: [],
      market_row: [],
      isShowNumber: false,
    };
  },

  components: {
    uniDrawer,
    uniTag,
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  created() {
    var that = this;

    var h = that.$.getSystemInfoSync().windowHeight;

    that.setData({
      h: h,
    });

    var post = this.post;
    var options = this.options;

    let tmp_opt = this.optionStr;

    options = Object.assign(options, tmp_opt);

    this.setData({
      post: {
        store_id: options.store_id,
        sidx: options.sidx ? options.sidx : "product_order",
        sort: options.sort ? options.sort : "ASC",
        keywords: options.keywords,
        store_category_ids: options.store_category_id,
        category_id: options.category_id,
        brand_id: options.brand_id,
        product_tags: options.tag_id ? [options.tag_id] : [],
        kind_id: options.kind_id,
        store_type: options.store_type,
        page: 1,

        product_unit_price_min: options.product_unit_price_min
          ? options.product_unit_price_min
          : "",
        product_unit_price_max: options.product_unit_price_max
          ? options.product_unit_price_max
          : "",

        sp_from: options.sp_from ? options.sp_from : "",
        sp_to: options.sp_to ? options.sp_to : "",

        points_from: options.points_from ? options.points_from : "",
        points_to: options.points_to ? options.points_to : "",

        pa_id: options.pa_id ? options.pa_id : "",
        pa_type_id: options.pa_type_id ? options.pa_type_id : "",

        virtual: null,
        activity_type_ids: options.activity_type_id
          ? [options.activity_type_id]
          : [],
        contract_type_ids: options.contract_type_id
          ? [options.contract_type_id]
          : [],
        market_category_ids: options.market_category_id
          ? [options.market_category_id]
          : [],
        assist: {},
        product_ids: options.data[0].ids,
      },
      tabs: options.data ? options.data : [],
    });

    if (this.tabs) {
      this.tabs.map(function (value, index) {
        if (value.title) {
          that.tabs[index].prices = that.priceTabs(value.title);
        }
        if (value.options) {
          if (typeof value.options == "string") {
            var parse = JSON.parse(value.options);
            that.tabs[index].sidx = parse.sidx;
            that.tabs[index].sort = parse.sort;
          } else {
            that.tabs[index].sidx = value.options.sidx;
            that.tabs[index].sort = value.options.sort;
          }
        }
      });

      this.prices = this.tabs[0].prices;
      this.isShowNumber = this.tabs[0].isShowNumber;
      this.post.sidx = this.tabs[0].sidx ? this.tabs[0].sidx : "";
      this.post.sort = this.tabs[0].sort ? this.tabs[0].sort : "";
      this.editSidxName();
      //console.log(this.tabs)
    }

    if (this.post.product_ids) {
      this.GetPlist(function () {
        that.pdlist.length == 0
          ? that.setData({ isdata: false })
          : that.setData({ isdata: true });
      });
    } else {
      this.isdata = false;
      return;
    }

    uni.$on("diy-scrollbottom", function (data) {
      console.log("监听到事件来自 update ，携带参数 uniId 为：" + data.uniId);

      if (data.uniId == that.uniId) {
        console.log("监听到 scrollbottom");
        console.info(that.$refs);
        that.scrollbottom();
      }
    });
  },
  watch: {
    isFilterTop0(newVal, oldVal) {
      console.log(newVal);
    },
    options(newVal, oldVal) {
      this.setData({
        pdlist: [],
      });

      let that = this;
      that.ispage = true;

      var post = this.post;
      var options = this.options;

      this.setData({
        post: {
          store_id: options.store_id,

          sidx: options.sidx ? options.sidx : "product_order",
          sort: options.sort ? options.sort : "ASC",

          keywords: options.keywords,
          store_category_ids: options.store_category_id,
          category_id: options.category_id,
          brand_id: options.brand_id,
          product_tags: options.tag_id ? [options.tag_id] : [],
          kind_id: options.kind_id,
          store_type: options.store_type,
          page: 1,

          product_unit_price_min: options.product_unit_price_min
            ? options.product_unit_price_min
            : "",
          product_unit_price_max: options.product_unit_price_max
            ? options.product_unit_price_max
            : "",

          sp_from: options.sp_from ? options.sp_from : "",
          sp_to: options.sp_to ? options.sp_to : "",

          points_from: options.points_from ? options.points_from : "",
          points_to: options.points_to ? options.points_to : "",

          pa_id: options.pa_id ? options.pa_id : "",
          pa_type_id: options.pa_type_id ? options.pa_type_id : "",

          virtual: null,
          activity_type_ids: options.activity_type_id
            ? [options.activity_type_id]
            : [],
          contract_type_ids: options.contract_type_id
            ? [options.contract_type_id]
            : [],
          market_category_ids: options.market_category_id
            ? [options.market_category_id]
            : [],
          assist: {},
          product_ids: options.data[0].ids,
        },
        tabs: options.data ? options.data : [],
      });

      if (this.tabs) {
        this.tabs.map(function (value, index) {
          if (value.title) {
            that.tabs[index].prices = that.priceTabs(value.title);
          }
          if (value.options) {
            if (typeof value.options == "string") {
              var parse = JSON.parse(value.options);
              that.tabs[index].sidx = parse.sidx;
              that.tabs[index].sort = parse.sort;
            } else {
              that.tabs[index].sidx = value.options.sidx;
              that.tabs[index].sort = value.options.sort;
            }
          }
        });

        this.prices = this.tabs[0].prices;
        this.isShowNumber = this.tabs[0].isShowNumber;
        this.post.sidx = this.tabs[0].sidx;
        this.post.sort = this.tabs[0].sort;
      }

      if (this.post.product_ids) {
        this.GetPlist(function () {
          that.pdlist.length == 0
            ? that.setData({ isdata: false })
            : that.setData({ isdata: true });
        });
      } else {
        this.isdata = false;
        return;
      }
    },
  },
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),
    pdprice: function () {
      this.post.sort = this.post.sort == "DESC" ? "ASC" : "DESC";
      this.GetPlist();
    },

    /**
     * 过滤搜索
     */
    onFilter: function () {
      uni.$emit("returnTop");

      var post = this.post;

      post.page = 1;
      post.activity_type_ids = [];
      post.contract_type_ids = [];
      post.market_category_ids = [];

      var is_filter = false;

      for (var i = 0; i < this.contract_row.length; i++) {
        if (!this.contract_row[i].contract_is_unselected) {
          post.contract_type_ids.push(this.contract_row[i].contract_type_id);

          is_filter = true;
        }
      }

      for (var i = 0; i < this.market_row.length; i++) {
        if (!this.market_row[i].market_is_unselected) {
          post.market_category_ids.push(this.market_row[i].market_category_id);

          is_filter = true;
        }
      }

      if (!this.inverted.gift) {
        post.activity_type_ids.push(this.StateCode.ACTIVITY_TYPE_GIFT);
        is_filter = true;
      }

      if (!this.inverted.groupbuy) {
        post.activity_type_ids.push(this.StateCode.ACTIVITY_TYPE_DIY_PACKAGE);
        is_filter = true;
      }

      if (!this.inverted.xianshi) {
        post.activity_type_ids.push(
          this.StateCode.ACTIVITY_TYPE_LIMITED_DISCOUNT
        );
        is_filter = true;
      }

      if (!this.inverted.virtual) {
        post.virtual = 1;
        is_filter = true;
      } else {
        post.virtual = null;
      }

      post.assist = {};

      let ao = {};
      for (var a = 0, lenA = this.assist.length; a < lenA; ++a) {
        var items = this.assist[a].items;

        let temp = [];
        for (var i = 0, lenI = items.length; i < lenI; ++i) {
          if (!items[i].assist_is_unselected) {
            temp.push(items[i].assist_item_id);
          }
        }

        if (temp.length > 0) {
          ao[this.assist[a].assist_id] = temp;
        }
      }

      /*
      post.assist = JSON.stringify(ao);
      post.activity_type_ids = JSON.stringify(post.activity_type_ids);
      post.contract_type_ids = JSON.stringify(post.contract_type_ids);
      post.market_category_ids = JSON.stringify(post.market_category_ids);
      */
      console.info(JSON.stringify(this.assist));
      console.info(JSON.stringify(ao));

      post.assist = ao;
      post.activity_type_ids = post.activity_type_ids;
      post.contract_type_ids = post.contract_type_ids;
      post.market_category_ids = post.market_category_ids;

      this.setData({
        pdlist: [],
        post: post,
        is_filter: is_filter,
      });

      this.GetPlist();

      this.rightDrawerVisible = false;
    },

    editSidxName: function () {
      console.log(this.post.sidx);
      if (this.post.sidx == "product_unit_price") {
        this.sidxName = "价格";
      } else if (this.post.sidx == "product_sale_num") {
        this.sidxName = "销量";
      } else if (this.post.sidx == "product_favorite_num") {
        this.sidxName = "收藏";
      } else if (this.post.sidx == "product_add_time") {
        this.sidxName = "新品";
      } else if (this.post.sidx == "product_order") {
        this.sidxName = "排序";
      }
    },
    priceTabs: function (priceList) {
      if (priceList) {
        var list = priceList.split(",");
        var price = [];
        for (var i in list) {
          i = parseInt(i);
          if (list[i + 1]) {
            if (i == 0) {
              price.push({
                from: list[i],
                to: parseFloat(list[i + 1]),
                title: parseFloat(list[i]) + "-" + list[i + 1],
              });
            } else {
              price.push({
                from: parseFloat(list[i]) + 1,
                to: parseFloat(list[i + 1]),
                title: parseFloat(list[i]) + 1 + "-" + list[i + 1],
              });
            }
          } else {
            price.push({
              from: parseFloat(list[i]),
              to: 0,
              title: list[i] + "以上",
            });
          }
        }

        return price;
        console.log(this.prices);
      }
    },
    selectPriceIndex: function (index) {
      var that = this;
      this.priceIndex = index;
      this.post.product_unit_price_min = this.prices[index].from;
      this.post.product_unit_price_max = this.prices[index].to;
    },

    switchTabs: function (index) {
      var that = this;
      var tab = this.tabs[index];
      this.setData({
        key: index,
        prices: tab.prices,
        priceIndex: -1,
        isShowNumber: tab.isShowNumber,
      });
      this.post.product_unit_price_min = 0;
      this.post.product_unit_price_max = 0;
      this.post.sidx = tab.sidx ? tab.sidx : "";
      this.post.sort = tab.sort ? tab.sort : "";
      this.post.page = 1;
      this.post.product_ids = tab.ids;
      console.log(tab);
      this.editSidxName();

      if (this.post.product_ids.length > 0) {
        this.GetPlist(function () {
          that.pdlist.length == 0
            ? that.setData({ isdata: false })
            : that.setData({ isdata: true });
        });
      } else {
        this.isdata = false;
        return;
      }
    },

    assistItemReset: function (e) {
      var aid = parseInt(e.target.dataset.aid);

      let assist = this.assist.concat();
      var items = assist[aid].items;

      for (var i = 0, lenI = items.length; i < lenI; ++i) {
        items[i].checked = false;
      }

      this.setData({ assist: assist });
    },

    assistItemChange: function (e) {
      var values = e.detail.value;
      var aid = parseInt(e.target.dataset.aid);

      let assist = this.assist.concat();
      var items = assist[aid].items;

      for (var i = 0, lenI = items.length; i < lenI; ++i) {
        items[i].checked = false;
        for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
          if (items[i].assist_item_id == values[j]) {
            items[i].checked = true;
            break;
          }
        }
      }

      this.setData({ assist: assist });
    },
    assistItemRadionChange: function (e) {
      var value = e.target.value;
      var aid = parseInt(e.target.dataset.aid);

      let assist = this.assist.concat();
      var items = assist[aid].items;

      for (var i = 0, lenI = items.length; i < lenI; ++i) {
        items[i].checked = false;
        if (items[i].assist_item_id == value) {
          items[i].checked = true;
          break;
        }
      }

      this.setData({ assist: assist });
    },
    scrollbottom: function (e) {
      if (this.flag) {
        var that = this;
        that.setData({ flag: false }), clearTimeout(n);

        var post = this.post;
        /*
                post.sidx = 'product_unit_price_min';
                post.sort = this.sort == 1 ? 'DESC' : 'ASC';
        */
        post.page = parseInt(that.post.page) + 1;

        var n = setTimeout(function () {
          that.setData({
            post: post,
          }),
            that.GetPlist();
        }, 500);
      }
    },

    /*
     * 读取商品数据
     */
    GetPlist: function (callback) {
      let url = this.Config.URL.pt.list;

      if (this.isGuessFlag) {
        url = this.Config.URL.pt.guess;
      }

      this.setData({ flag: false });
      var that = this;

      let params = Object.assign({}, that.post);

      //转为逗号分割
      let assistItemIds = [];

      for (var assistId in that.post.assist) {
        var items = that.post.assist[assistId];

        for (var i = 0, lenI = items.length; i < lenI; ++i) {
          assistItemIds.push(items[i]);
        }
      }

      params.product_assist_data = assistItemIds.join(",");
      params.activity_type_ids = that.post.activity_type_ids.join(",");
      params.contract_type_ids = that.post.contract_type_ids.join(",");
      params.market_category_ids = that.post.market_category_ids.join(",");
      params.product_tags = that.post.product_tags.join(",");
      params.item_id = that.post.product_ids;

      that.$.request({
        url: this.Config.URL.pt.listItem,
        data: params,
        loading: false,
        method: "GET",
        ajaxCache: {
          timeout: this.Config.CACHE_EXPIRE,
        },
        success: function (data, status, msg, code) {
          that.setData({
            pdlist: [],
          });

          for (var i = 0; i < data.items.length; i++) {
            data.items[i]["id"] = data.items[i]["item_id"];
            data.items[i]["DefaultProductSkuId"] = data.items[i]["item_id"];
            data.items[i]["ProductName"] = data.items[i]["product_name"];
            data.items[i]["ProductTips"] = data.items[i]["product_tips"];
            data.items[i]["SalesName"] = data.items[i]["product_name"];
            data.items[i]["ProductPic"] = data.items[i]["product_image"];
            data.items[i]["ItemSalePrice"] = parseFloat(
              data.items[i]["item_unit_price"]
            );
            data.items[i]["SaleNum"] = data.items[i]["product_sale_num"];
            data.items[i]["Stock"] = data.items[i]["product_quantity"];
            data.items[i]["DefaultProductSkuId"] = data.items[i]["item_id"];
            data.items[i]["user_cart_quantity"] = 1;

            //数据转换
            if (
              data.items[i]["product_spec"] &&
              that.$.isJson(data.items[i]["product_spec"])
            ) {
              data.items[i]["product_spec"] = JSON.parse(
                data.items[i]["product_spec"]
              );
            } else {
              data.items[i]["product_spec"] = [];
            }

            if (
              data.items[i]["product_uniqid"] &&
              that.$.isJson(data.items[i]["product_uniqid"])
            ) {
              data.items[i]["product_uniqid"] = JSON.parse(
                data.items[i]["product_uniqid"]
              );
            } else {
              data.items[i]["product_uniqid"] = [];
            }

            data.items[i]["HasManualSku"] =
              data.items[i]["product_spec"].length > 1;
          }

          if (200 == status && data.items.length > 0) {
            if (data.page >= data.total || data.page >= that.maxNumber) {
              that.setData({
                flag: false,
                ispage: false,
                pdlist: that.pdlist.concat(data.items),
              });
            } else {
              that.setData({
                flag: true,
                ispage: true,
                pdlist: that.pdlist.concat(data.items),
              });
            }

            that.setData({
              isdata: true,
            });
          } else {
            that.setData({
              flag: false,
              ispage: false,
              isdata: false,
            });
          }

          callback && callback();
        },
      });
    },

    scrolltoupper: function (t) {
      this.old.scposition = t.detail.scrollTop;
    },
    returnTop: function () {
      var that = this;

      // 解决view层不同步的问题
      that.setData({
        scposition: this.old.scposition,
      });

      this.$nextTick(function () {
        that.setData({
          scposition: 0,
        });
      });
    },
    onCloseFilter() {
      this.rightDrawerVisible = false;
    },
    onOpenFilter() {
      this.rightDrawerVisible = true;

      //
      let that = this;

      if (!that.post.category_id) {
        return;
      }

      if (that.assist.length == 0) {
        that.$.request({
          url: that.Config.URL.pt.listFilter,
          data: { category_id: that.post.category_id },
          ajaxCache: {
            timeout: this.Config.CACHE_EXPIRE,
          },
          success: function (data, status, msg, code) {
            let contracts = data.contracts;

            for (var i = 0; i < contracts.length; i++) {
              contracts[i].contract_is_unselected = true;
            }

            that.setData({ contract_row: contracts });

            let markets = data.markets;

            for (var i = 0; i < markets.length; i++) {
              markets[i].market_is_unselected = true;
            }

            that.setData({ market_row: markets });

            //筛选辅助属性
            for (var i = 0; i < data.assists.length; i++) {
              for (var j = 0; j < data.assists[i]["items"].length; j++) {
                data.assists[i]["items"][j].assist_is_unselected = true;
              }
            }

            that.setData({
              assist: data.assists,
            });
          },
        });
      }
    },

    setType(type) {
      this.inverted[type] = !this.inverted[type];
    },

    setContract(index) {
      this.contract_row[index].contract_is_unselected =
        !this.contract_row[index].contract_is_unselected;
    },

    setMarket(index) {
      console.info(this.market_row[index]);
      this.market_row[index].market_is_unselected =
        !this.market_row[index].market_is_unselected;
    },

    setAssist(aid, index) {
      console.info(this.assist[aid]["items"][index]);
      this.assist[aid]["items"][index].assist_is_unselected =
        !this.assist[aid]["items"][index].assist_is_unselected;
    },
  },
};
</script>


<style lang="scss" scoped>
@import "../styles/_variables.scss";

.m-navbar {
  background-color: #f5f5f5;
  padding: 0 24rpx;
}

/*全部商品 start*/
.m-navbar-item {
  // width:172rpx;
  padding: 20rpx;
  font-size: 28rpx;
  height: 36rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #222222;
  line-height: 40rpx;
  letter-spacing: 1rpx;
  position: relative;
  // overflow: hidden;
  // white-space: nowrap;
  // text-overflow: ellipsis;
  i {
    font-size: 0rpx;
    line-height: 0;
    vertical-align: middle;
    display: inline-block;
    width: 0rpx;
    height: 0rpx;
    margin-left: 9.375rpx;
    border-width: 9.375rpx;
    border-color: #aaa transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  }
}

.m-navbar-item:after {
  border: none;
}

.m-sort {
  position: relative;
}

.m-sort image {
  width: 24rpx;
  height: 24rpx;
  position: absolute;
  /*top: 50%;*/
  margin-top: 10rpx;
  margin-left: 2rpx;
}

/*全部商品 end*/
.m-product-price1 {
  display: flex;
  justify-content: space-between;

  label {
    font-weight: initial;
  }
}

.m-listv {
  .m-product-price1 {
    width: 312rpx;
  }
}

.num {
  font-size: 24rpx;
  color: #717171;
  // padding-right: 20rpx;
  /*margin-left:260rpx; */
}

.u-pa .m-tab {
  top: var(--window-top);
}

.u-pa .m-tab-top {
  top: 0;
}

.u-pa .m-tab-fixed {
  position: fixed !important;
}

.filter-box {
  top: var(--window-top);
}

.filter-box-top {
  top: 0;
}

.tag-view {
  margin: 10rpx 20rpx;
  display: inline-block;
}

.uni-numbox-value {
  border: 2rpx solid #cccccc;
  background-color: #ffffff;
  width: 150rpx;
  height: 48rpx;
  text-align: center;
  display: inline-block;
}

.uni-dot {
  width: 30rpx;
  height: 100%;
  text-align: center;
  display: inline-block;
  line-height: 44rpx;
  height: 44rpx;
}

.uni-padding-wrap {
  overflow: hidden;
  max-width: 400rpx;
}

/* */
.product-list {
  position: relative;
  z-index: 1;

  &:hover {
    z-index: 2;
  }

  .no_goods {
    .no_shadow {
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: 11;
      opacity: 0.7;
      background-color: #b2b2b2;
    }

    .no_goods_tip {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 12;
      text-align: center;
      height: 60rpx;
      line-height: 60rpx;
    }

    position: absolute;
    z-index: 10;
    height: 60rpx;
    line-height: 60rpx;
    color: #fff;
    font-size: 26rpx;
    width: 100%;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .flag {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: 64px;
    height: 20px;
    margin-left: -32px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: #fff;
  }

  .flag-reduction {
    background-color: #e50dbb;
    z-index: 8;
  }

  .flag-saleoff {
    background-color: #e53935;
    z-index: 7;
  }

  .flag-postfree {
    background-color: #ffac13;
    z-index: 6;
  }

  .flag-bargain {
    background-color: #ffac13;
    z-index: 4;
  }

  .flag-gift {
    background-color: #2196f3;
    z-index: 3;
  }

  .flag-new {
    background-color: #83c44e;
    z-index: 5;
  }

  .flag-selfsupport {
    background-color: #f44336;
    z-index: 10;

    position: absolute;

    top: 1px;
    right: 5px;
    left: auto;
    width: 40px;
  }
}

.placeholder-class {
  font-size: 25rpx;
}

.button {
  line-height: 2;
  font-size: 34rpx;
}

.uni-common-mt {
  margin-top: 20rpx;
}

.u-pa {
  position: inherit !important;
}

.u-pa .m-product-list {
  padding-top: 0rpx;
}

.u-pa .m-tab {
  position: relative;
}

.m-product-box {
  margin-top: calc(var(--window-top) + 4rpx);
}

.dropItem {
}

.u-pa .m-product-list {
}

.m-listv .m-product-item:nth-child(1) {
  margin-top: 20rpx !important;
}

.m-listv .m-product-item:nth-child(2) {
  margin-top: 20rpx !important;
}

.m-listv .m-product-item:nth-child(odd) {
  margin-left: 0;
}

.m-listv .m-product-item:nth-child(even) {
  margin-right: 0;
}

.scroll-view_H {
  width: 100%;
  white-space: nowrap;

  .m-navbar-item {
    display: inline-block;

    .active-icon {
      position: absolute;
      bottom: 0rpx;
      right: -10rpx;
      color: $default-skin-bg;

      &:before {
        font-weight: bold;
      }
    }
  }
}

.money {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: $default-skin-bg;
  line-height: 50rpx;
}

.add-cart {
  width: 50rpx;
  height: 50rpx;
  background: $default-skin-bg;
  border-radius: 18rpx;
  text-align: center;
  line-height: 50rpx;
}

.filter-item {
  display: inline-block;

  padding: 10rpx 18rpx;
  margin-right: 30rpx;
  margin-top: 4rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 40rpx;
  line-height: 32rpx;

  margin-bottom: 4rpx;
}

.filter-item-on {
  color: $default-skin-bg;
  border-radius: 34rpx;
  border: 2rpx solid $default-skin-bg;
}

.m-listv .m-product-name2 {
  line-height: 32rpx;
  height: 64rpx;
}

.item-on {
  font-size: 32rpx;
  font-weight: 600;
  color: #222222;
  line-height: 44rpx;
  margin-left: -10px;
}

.m-navbar-info {
  display: flex;
  justify-content: space-between;
}

.m-img-number {
  position: absolute;
  top: 20rpx;
  left: 18rpx;
  width: 54rpx;
  height: 56rpx;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: 54rpx 56rpx;

  span {
    font-size: 32rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 44rpx;
  }
}

.m-img-0 {
  background-image: url("https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rank/1.png");
}

.m-img-1 {
  background-image: url("https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rank/2.png");
}

.m-img-2 {
  background-image: url("https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rank/3.png");
}

.m-img-3 {
  background-image: url("https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rank/4.png");
}

.m-screen {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 40rpx;

  .sort-img {
    width: 20rpx;
    height: 12rpx;
    margin-top: 2px;
  }
}

.tab-filter {
  width: 100%;
  height: 60rpx;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
</style>
