<template>
  <view class="searchpage">
    <view class="ctrl-box">
      <u-search
        action-text="搜索"
        :focus="true"
        :clearabled="true"
        :show-action="true"
        radius="40"
        v-model="searchKey"
        @search="searchHandler"
        @custom="searchHandler"
        @change="changeHandler"
      ></u-search>
    </view>
    <view class="historys" v-if="searchKey == '' || !loadSearch">
      <view class="title-box">
        <view class="title">搜索历史</view>
        <view class="editor" v-if="searchHistory.length > 0">
          <u-icon
            size="36"
            name="delete"
            color="#999"
            v-if="!isEditor"
            @click="changeEditorHandler"
          ></u-icon>
          <view v-else>
            <text
              @click="clearHandler"
              style="
                font-size: 12px;
                color: gray;
                padding-right: 15px;
                border-right: 1px solid #eee;
              "
              >全部删除</text
            >
            <text
              style="font-size: 12px; padding-left: 15px;"
              :style="{ color: mainColor }"
              @click="changeEditorHandler"
              >完成</text
            >
          </view>
        </view>
      </view>
      <view class="details" v-if="searchHistory.length > 0">
        <template v-for="(x, i) in searchHistory">
          <view class="item" v-if="i < 6 || showAllHistory" :key="i">
            <u-tag
              bg-color="#f1f1f1"
              size="big"
              :text="x"
              color="#111"
              shape="circle"
              mode="dark"
              :closeable="isEditor"
              close-color="#333"
              :index="i"
              @close="delHistoryItemHandler"
              @click="tagClickHandler(x)"
            ></u-tag>
          </view>
        </template>
        <view
          class="arrow"
          @click="changeShowHandler"
          v-if="searchHistory.length > 6 && !isEditor"
        >
          <u-icon
            :name="showAllHistory ? 'arrow-up' : 'arrow-down'"
            size="24"
            color="#000"
          ></u-icon>
        </view>
      </view>
      <u-empty
        text="没有搜索历史记录"
        v-else
        mode="news"
        font-size="24"
        img-width="120"
      ></u-empty>
    </view>
    <view v-else class="search-content">
      <scroll-view
        :scroll-y="true"
        @scrolltolower="lower"
        :enable-back-to-top="true"
        :enable-flex="true"
        style="height: 100%;"
        v-if="g.length > 0"
      >
        <view style="padding: 12px;">
          <goodlist :list="g"></goodlist>
          <u-loadmore
            v-if="showLoading"
            :status="status"
            :load-text="loadText"
            :font-size="24"
            :margin-top="20"
            :margin-bottom="20"
            bg-color="#f8f8f8"
          />
        </view>
      </scroll-view>
      <view
        v-if="!loading && g.length == 0"
        style="height: calc(100vh - 42px); overflow-y: auto;"
      >
        <u-empty
          text="抱歉，没有找到商品额~"
          mode="search"
          font-size="24"
          img-width="120"
          margin-top="24"
          padding-top="0"
        ></u-empty>
        <view style="padding: 12px;">
          <view class="recommed">
            <view class="title">为你推荐</view>
          </view>
          <goodlist :list="recommedGoods"></goodlist>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import goodlist from "@/components/goods/list";
export default {
  components: {
    goodlist,
  },
  data() {
    return {
      pageTitle: "",
      searchHistory: [],
      isEditor: false,
      mainColor: "",
      showAllHistory: false,
      searchKey: "",
      loadSearch: false,
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多商品了",
      },
      showLoading: false,
      g: [],
      page: 1,
      page_count: 1,
      status: "loadmore",
      isover: false,
      loading: false,
      recommedGoods: [],
    };
  },
  onLoad(option) {
    this.initPage();
    this.initRecommend();
    if (uni.getStorageSync("search_his")) {
      this.searchHistory = uni.getStorageSync("search_his");
    }
    this.mainColor = this.$uiConfig.mainColor;
  },
  methods: {
	//为你推荐
    initRecommend() {
      this.request2(
        {
          url: "/api/AppletGoods/GetAppletGoodsRecommendListForZY",
          data: {
            RecommendType:1
          },
        },
        (res) => {
          this.recommedGoods = res.data.List;
        }
      );
    },
    initPage() {
      let currentPages = getCurrentPages();
      let u = "/" + currentPages[currentPages.length - 1].route;
      let pages = uni.getStorageSync("basedata")
        ? uni.getStorageSync("basedata").bar_title
        : [];

      pages.forEach((x) => {
        if (x.value == u) {
          this.pageTitle = x.new_name ? x.new_name : x.name;
        }
      });
      uni.setNavigationBarTitle({
        title: this.pageTitle,
      });
    },
    changeShowHandler() {
      this.showAllHistory = !this.showAllHistory;
    },
    clearHandler() {
      this.searchHistory = [];
      uni.removeStorageSync("search_his");
    },
    changeEditorHandler() {
      this.isEditor = !this.isEditor;
      this.showAllHistory = true;
    },
    delHistoryItemHandler(i) {
      this.searchHistory.splice(i, 1);
      uni.setStorageSync("search_his", this.searchHistory);
    },
    changeHandler(val) {
      if (val == "") {
        this.loadSearch = false;
      }
    },
    tagClickHandler(val) {
      if (!this.isEditor) {
        this.searchHandler(val);
      }
    },
    searchHandler(val) {
      if (val != "") {
        let index = -1;
        this.searchHistory.forEach((x, i) => {
          if (x == val) {
            index = i;
          }
        });
        if (index != -1) {
          this.searchHistory.splice(index, 1);
        }
        this.searchHistory.unshift(val);
        uni.setStorageSync("search_his", this.searchHistory);
        this.page = 1;
        this.g = [];
        this.searchKey = val;
        this.loadSearch = true;
        this.init();
      } else {
        this.searchKey = "";
        this.loadSearch = false;
      }
    },
    init() {
      this.isover = false;
      this.loading = true;
      this.showLoading = this.page != 1;
      this.request2(
        {
          url: "/api/AppletGoods/GetAppletGoodsPageListForZY",
          data: {
			pageIndex:1,
			pageSize:20,
		    Name:this.searchKey,
			GoodsType:0,
			CategoryIds:'',
			OrderBy:1
          },
        },
        (res) => {
			console.log(res,'搜索ress');
          this.showLoading = true;
          this.g = this.g.concat(res.data.pageData);
          this.page_count = res.data.page_count;
          if (this.page_count == 1) {
            this.isover = true;
            this.status = "nomore";
          } else {
            this.status = "loadmore";
          }
          this.loading = false;
        }
      );
    },
    lower(e) {
      if (this.page < this.page_count) {
        if (!this.loading) {
          this.status = "loading";
          this.page++;
          this.init();
        }
      } else {
        this.isover = true;
        this.status = "nomore";
      }
    },
  },
};
</script>

<style>
.searchpage {
  min-height: 100vh;
}
.searchpage .ctrl-box {
  padding: 5px 10px;
}
.searchpage .historys {
  padding: 20px;
}
.searchpage .historys .title-box {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.searchpage .historys .title-box .title,
.searchpage .recommed .title {
  font-size: 16px;
  color: #000;
  flex: 1;
  font-size: 600;
}
.searchpage .historys .details {
  display: flex;
  flex-wrap: wrap;
}
.searchpage .historys .details .item {
  margin-right: 10px;
  margin-top: 10px;
}
.searchpage .historys .details .arrow {
  margin-right: 10px;
  margin-top: 10px;
  height: 37px;
  display: flex;
  width: 20px;
  align-items: center;
}
.searchpage .search-content {
  height: calc(100vh - 42px);
  background: #f8f8f8;
}
.searchpage .recommed {
  margin-top: 20px;
}
.searchpage .recommed .title {
  margin-bottom: 10px;
}
</style>
