<template>
  <view>
    <tp-search
      id="tp-search"
      class="tp-search"
      :search-text="options.pname"
      :placeholder="tpSearchPlaceholder"
      :style="tpSearchStyle"
      @change="search"
    ></tp-search>
    <scroll-view
      scroll-y="true"
      class="m-product-all u-pa"
      @scrolltolower="scrollbottom"
      :scroll-top="scposition"
      @scroll="scroll"
      scroll-with-animation="true"
      :style="ptSearchStyle"
    >
      <view class="fixPaddingTop" v-if="loadPageFlag">
        <diy
          id="diy"
          :BgConfig="BgConfig"
          :PageContent="PageContent"
          :pageId="pageId"
          :PageNav="PageNav"
          :loadPageFlag="loadPageFlag"
        ></diy>
      </view>

      <!--第七个模版-->
      <scroll-view
        scroll-x="true"
        v-if="cat_self.length > 0 || cat_child.length > 0"
        :class="{
          'box-grids': 1,
          'box-grids-border': 0,
          fixPaddingTop: !loadPageFlag,
        }"
      >
        <view>
          <!-- 当前分类 -->
          <view
            :class="{ 'box-grid': 1, 'box-grid-border': 0 }"
            v-for="(items, ii) in cat_self"
            :key="items.id"
            :style="{
              width: 100 / 5 + '%',
              'padding-top': 10 + 'px',
              'padding-bottom': 10 + 'px',
              'padding-left': 10 + 'px',
              'padding-right': 10 + 'px',
              'background-color': 'transparent',
            }"
            @click="onCategory(items.category_id)"
          >
            <view class="box-grid-icon">
              <image
                lazy-load
                :src="$.img(items.category_image, 80, 80)"
              ></image>
            </view>
            <label class="box-grid-label">{{ items.category_name }}</label>
          </view>

          <!-- 子分类 -->
          <view
            :class="{ 'box-grid': 1, 'box-grid-border': 0 }"
            v-for="(items, ii) in cat_child"
            :key="items.id"
            :style="{
              width: 100 / 5 + '%',
              'padding-top': 10 + 'px',
              'padding-bottom': 10 + 'px',
              'padding-left': 10 + 'px',
              'padding-right': 10 + 'px',
              'background-color': 'transparent',
            }"
            @click="onCategory(items.category_id)"
          >
            <view class="box-grid-icon">
              <image
                lazy-load
                :src="$.img(items.category_image, 80, 80)"
              ></image>
            </view>
            <label class="box-grid-label">{{ items.category_name }}</label>
          </view>
        </view>
      </scroll-view>
      <!--第七个模版-->

      <!--301模板-->
      <product-list
        v-if="loaded"
        ref="productList"
        :showCatFlag="true"
        :uniId="ptConfig.uniId"
        :isFilterFixed="ptConfig.isFilterFixed"
        :fix-top="ptConfig.topDistance"
        :isShowFilter="ptConfig.isShowFilter"
        :isShowLoading="ptConfig.isShowLoading"
        :options="ptConfig.options"
        :viewtype="ptConfig.viewtype"
        :titleText="ptConfig.titleText"
        :titleColor="ptConfig.titleColor"
        :bgColor="ptConfig.bgColor"
        :paddingLeft="ptConfig.paddingLeft"
        :paddingRight="ptConfig.paddingRight"
        :css="ptConfig.css"
        :style="{ backgroundColor: 'transparent' }"
      ></product-list>
      <!--301模板-->
    </scroll-view>

    <view class="u-top-default"> </view>

    <view class="u-top">
      <movable-area class="movableArea">
        <movable-view
          class="movableView"
          @touchmove.stop.prevent="doNothing"
          direction="all"
          :x="returnPos.initX"
          :y="returnPos.initY"
        >
          <image
            src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/nav/black/nav_gotop.png"
            :class="isQuickNav ? 'quicknav' : 'hide'"
            @tap="returnTop"
          ></image>
        </movable-view>
      </movable-area>
    </view>
  </view>
</template>


<script>
import uniDrawer from "@/components/uni-drawer.vue";
import uniTag from "@/components/uni-tag/uni-tag.vue";
import diy from "@/components/themes/diy.vue";

import ProductList from "@/components/product-list";

import { mapMutations, mapState } from "vuex";
import SearchBox from "@/uni_modules/search-box/components/search-box/search-box";
import TpSearch from "@/components/tp-search/tp-search";

export default {
  data() {
    return {
      options: {},
      viewtype: 1,

      cat_self: [],
      cat_child: [],

      sort: 2,

      PageContent: [],
      BgConfig: {
        BackgroundObj: {
          type: 1,
          bgColor: "#ffffff",
          pathColor: "#f8f8f8",
          path: "",
        },
      },
      PageNav: {
        window: {
          navigationBarBackgroundColor: "#ffffff",
          navigationBarTextStyle: "black",
          navigationBarTitleText: "",
          backgroundColor: "#f8f8f8",
          backgroundTextStyle: "dark",
        },
      },
      loadPageFlag: false,
      loaded: false,

      pageId: 0,

      shareImg: "",
      shareTitle: "",
      chatUrl: "",
      timer: null,

      ptConfig: {
        uniId: "category",
        isFilterFixed: true,
        topDistance: 44,
        isShowFilter: true,
        isShowLoading: true,
        options: {},
        viewtype: 1,
        titleText: "",
        titleColor: "",
        bgColor: "",
        paddingLeft: 0,
        paddingRight: 0,
        css: { padding: "0 10rpx" },
      },

      returnPos: {
        initX: "690",
        initY: "1336",
      },

      scposition: 0,
      screenHeight: 0,
      oldscposition: 0,
      isQuickNav: false,

      opacity: 1,
      background: "f1f1f1",

      ptSearchStyle: "z-index: 5;",
      tpSearchStyle: "z-index: 5;",
      tpSearchPlaceholder: "",
    };
  },

  components: {
    TpSearch,
    SearchBox,
    uniDrawer,
    uniTag,
    diy,
    ProductList,
  },

  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  mounted() {
    this.initReturnPos();

    uni.$on("onOpenFilter", (data) => {
      if (data) {
        this.tpSearchStyle = "z-index: 5;";
        this.ptSearchStyle = "z-index: 6;";
      } else {
        this.tpSearchStyle = "z-index: 6;";
        this.ptSearchStyle = "z-index: 5;";
      }
    });
  },
  async onLoad(options) {
    await this.$onLaunched;
    this.loaded = true;

    // #ifdef MP-WEIXIN || MP-ALIPAY
    this.ptConfig.topDistance = this.statusBar - 7 + 44;
    // #endif

    uni.setNavigationBarTitle({
      title: this.__("商品列表"),
    });

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

    this.pageId = options.page_id ? options.page_id : 0;

    that.$.setNavigationBarTitle({
      title: options.pname || options.cname || this.__("商品列表"),
    });

    that.$.getSystemInfo({
      success: function (t) {
        that.setData({ screenHeight: t.screenHeight });
      },
    });

    /*
        that.$.setNavigationBarColor({
            frontColor: that.PageNav.window.navigationBarTextStyle == "white" ? "#ffffff" : "#000000",
            backgroundColor: that.PageNav.window.navigationBarBackgroundColor
        });
     */

    var post = this.post;

    that.ptConfig.options = {
      store_id: options.store_id,
      sidx: "product_sale_num",
      sort: "DESC",
      keywords: options.pname,
      store_category_ids: options.store_category_id,
      category_id: options.category_id,
      brand_id: options.brand_id,
      product_tag_ids: 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 : "",

      virtual: options.virtual ? options.virtual : 0,
      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]
        : [],
      item_ids: options.item_ids ? options.item_ids : "",
      // assist: []
    };

    if (this.pageId) {
      //this.getPageInfo(false);
    }

    this.tpSearchPlaceholder = this.$.__("请输入商品名称");

    if (options.category_id && options.cname) {
      this.tpSearchPlaceholder = that.$.sprintf(
        this.$.__("请输入分类 %s 下商品名称"),
        options.cname
      );
    }
    // this.GetPlist(function() {
    //     that.pdlist.length == 0 ? that.setData({ isdata: false }) : that.setData({ isdata: true });
    // });
  },
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),
    initReturnPos: function () {
      let view = uni.createSelectorQuery().in(this).select(".movableArea");
      let that = this;

      view
        .fields(
          {
            size: true,
            scrollOffset: true,
          },
          (data) => {
            if (data) {
              that.returnPos.initX = data.width;
              that.returnPos.initY = data.height - 100;
            }
          }
        )
        .exec();

      uni.$on("returnTop", function (data) {
        that.returnTop();
      });
    },
    getPageInfo: function (force_refresh) {
      var that = this;

      if (that.pageId <= 0) {
        return;
      }

      var params = {
        page_id: that.pageId,
      };

      that.$.request({
        url: this.Config.URL.minipage,
        data: params,
        ajaxCache: {
          timeout: this.Config.CACHE_EXPIRE,
          forceRefresh: force_refresh,
        },
        success: function (data, status, msg, code) {
          that.$.stopPullDownRefresh();

          if (200 == status) {
            that.setData({
              loadPageFlag: true,
              pageId: data.page_id,
              PageContent: that.$.parseJSON(data.page_code),
              BgConfig: that.$.parseJSON(data.page_config),
              PageNav: that.$.parseJSON(data.page_nav),
              shareImg: data.page_share_image,
              shareTitle: data.page_share_title,
            });

            if (that.PageNav.window.navigationBarTextStyle == "black") {
              that.PageNav.window.navigationBarTextStyle = "#000000";
            }

            if (that.PageNav.window.navigationBarTextStyle == "white") {
              that.PageNav.window.navigationBarTextStyle = "#ffffff";
            }

            that.$.setNavigationBarColor({
              frontColor: that.PageNav.window.navigationBarTextStyle,
              backgroundColor: that.PageNav.window.navigationBarBackgroundColor,
            });

            if (data.page_name) {
              that.$.setNavigationBarTitle({
                title: data.page_name,
              });
            }

            if (that.hasLogin && data.im_enable) {
              var perm_id = that.$.getStorageSync("uid");
              var perm_key = that.$.getStorageSync("ukey");
              let chat_url = that.$.sprintf(
                "/im/chat/chat?uid=%s",
                data.im_user_id
              );

              that.setData({
                chatUrl: chat_url,
              });
            }
          }
        },
      });
    },

    /**
     * 分类过滤
     */
    onCategory: function (category_id) {
      var post = this.post;
      post.category_id = category_id;
      post.page = 1;

      this.setData({
        pdlist: [],
        ispage: true, //loading
        post: post,
      });

      this.GetPlist();
    },

    doNothing() {},

    scroll: function (t) {
      let that = this;

      that.setData({ oldscposition: t.detail.scrollTop });

      if (100 < t.detail.scrollTop) {
        that.setData({ opacity: 1, background: "f8f8f8" });
      } else {
        that.setData({
          opacity: 0,
          background: "fff",
        });
      }
      if (t.detail.scrollTop >= this.screenHeight) {
        this.setData({ isQuickNav: true });
      } else {
        this.setData({ isQuickNav: false });
      }
    },

    scrollbottom: function (e) {
      let that = this;
      uni.$emit("diy-scrollbottom", { uniId: that.ptConfig.uniId });
    },

    search: function (e) {
      uni.$emit("returnTop");

      let that = this;

      let opts = Object.assign({}, that.ptConfig.options);
      opts.keywords = e;

      that.ptConfig.options = opts;
      that.$forceUpdate(); //二维数组，开启强制渲染
    },

    returnTop: function () {
      let that = this;

      //视图会发生重新渲染
      that.scposition = that.oldscposition;

      //当视图渲染结束 重新设置为0
      that.$nextTick(() => {
        that.scposition = 0;
      });

      this.setData({ isQuickNav: false });
    },
  },
};
</script>

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

.m-product-all {
  margin-top: 44px;
  height: calc(100% - var(--window-top) - 44px);
}

.m-listv .ts-sty {
  .ts-top-box {
    background: linear-gradient(to right, #dbc4aa, #ba9877);
    line-height: 1.2;

    .tag {
      border-radius: 0;
      margin-top: 0;
      padding: 2px 5px;
      background: none;
      height: 1.2;
      line-height: 1.2;
      font-size: 22rpx;
    }
  }
}

/*Grid*/
.box-grids {
  position: relative;
  overflow: hidden;
  clear: both;
  height: 230rpx;

  background-color: #ffffff;
  white-space: nowrap;
  width: 100%;

  .box-grid {
    padding: 40rpx 20rpx;
    width: 33.33333333%;
    box-sizing: border-box;

    display: inline-block;
    text-align: center;
    font-size: 36rpx;

    &.active {
      .box-grid-label {
        color: #c0a080;
        // background-color: pink;
      }
    }
  }

  .box-grid-border {
    border-right: 1rpx solid #d9d9d9;
    border-bottom: 1rpx solid #d9d9d9;
  }

  .box-grid:active {
    background-color: #ececec;
  }

  .box-grid-icon {
    width: 68rpx;
    height: 68rpx;
    margin: 0 auto;

    image {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .box-grid-label {
    margin-top: 10rpx;
  }

  .box-grid-label {
    display: block;
    text-align: center;
    color: #000;
    font-size: 24rpx;
    line-height: 40rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.box-grids-border {
  border-top: 1rpx solid #d9d9d9;
  border-left: 1rpx solid #d9d9d9;
}

.active {
  background-color: #c0a080;
}
</style>
