<template>
  <zj-page-layout
    :hasFooter="false"
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower">
    <template slot="header">
      <view class="search-container">
        <u-search
          shape="round"
          focus
          :showAction="isShowSearch ? true : false"
          actionText="取消"
          placeholder="输入商品名称搜索"
          v-model="keyword"
          @search="searchData"
          @clear="searchData"
          @focus="searchFocus"
          @custom="searchCustom">
        </u-search>
      </view>
    </template>

    <block v-if="isShowSearch">
      <view class="searchData-container">
        <view class="lately-container">
        	<view class="common-title">
        		<view class="left">猜你想搜</view>
        	</view>
        	<view class="list">
        		<view class="item" v-for="(item, index) in guessList" :key="index" @tap="clickHistory(item)">{{item}}</view>
        	</view>
        </view>

        <view class="lately-container mt40">
        	<view class="common-title">
        		<view class="left">最近搜索</view>
        		<view class="right" @tap="clearHistoryList">
        			<text class="iconfont icon-shanchu"></text>
        		</view>
        	</view>
        	<view class="list">
        		<view class="item" v-for="(item, index) in historyList" :key="index" @tap="clickHistory(item)">{{item}}</view>
        	</view>
        </view>
      </view>
    </block>

    <block v-else>
      <view class="list-container">
        <view class="item" v-for="(item, index) in dataList" :key="index" @tap="toGoodsDetail(item.id)">
          <view class="soldout" v-if="item.status == 'SALE'">
            <image src="@/static/images/recycle/soldout.png" mode="widthFix"></image>
          </view>
          <view class="top">
            <view class="left">
              <image :src="item.userHeadImg" mode="aspectFill"></image>
              <view class="info">
                <view class="name">{{item.userNickName}}</view>
                <view class="text">{{item.createTime | timeFilter}}发布</view>
              </view>
            </view>
            <view class="right">{{item.price | priceFilter2}}</view>
          </view>
          <view class="imgs" v-if="item.imgList && item.imgList.length > 0">
            <image :src="it.imgUrl" mode="aspectFill" v-for="(it, idx) in item.imgList" :key="idx"></image>
          </view>
          <view class="title">{{item.goodsName}}</view>
          <view class="message" v-if="item.messageList && item.messageList.length > 0">
            {{item.messageList[0].createBy}}：{{item.messageList[0].content}}
          </view>
          <view class="bottom">
            <view class="it">
              <text class="iconfont icon-dianzan"></text>
              <text class="text">{{item.likeCount || 0}}</text>
            </view>
            <view class="it">
              <text class="iconfont icon-pinglun"></text>
              <text class="text">{{item.messageCount || 0}}</text>
            </view>
            <view class="it">
              <text class="iconfont icon-liulan"></text>
              <text class="text">{{item.queryCount || 0}}</text>
            </view>
          </view>
        </view>
      </view>

      <Loading :loadStatus="loadStatus" :dataList="dataList" />
    </block>
  </zj-page-layout>
</template>

<script>
  import { compareTime } from '@/common/utils/util.js'

	export default {
		data() {
			return {
				dataList: [],
				pageNum: 1,
        loadStatus: 0,
        refresherTriggered: false,
				showType: 1,
        keyword: '',
        guessList: [],
        historyList: [],
        isShowSearch: false,
			}
		},

		onLoad() {
			this.getList();
      this.getHistoryList();
      this.getGuessList();

      this.crossPage.$on('refreshRecycleSearch', data => {
        this.refreshList();
      });
		},

    onUnload() {
      this.crossPage.$off('refreshRecycleSearch');
    },

		methods: {
      getGuessList() {
        this.$api.post('/es/goods/guess/list').then(res => {
          this.guessList = [...res.data.brandList, ...res.data.markList, ...res.data.powerList];
        })
      },

			// 获取商品列表
			getList() {
        if(!this.keyword) {
          return this.$nextTick(() => {
            this.loadStatus = 2;
            this.refresherTriggered = false;
          })
        }
				this.$api.post('/es/goods/list', {
				  pageNum: this.pageNum,
				  pageSize: 10,
				  status: 'ON,SALE',
          goodsName: this.keyword
				}).then(res => {
					this.loadStatus = 0;
					let list = res.data.records;
					if (list.length < 10) {
					  this.loadStatus = 2;
					}
					this.dataList = this.dataList.concat(list);
				}).catch(() => {
          this.loadStatus = 2;
        }).finally(res => {
          this.refresherTriggered = false;
        })
			},

      // 滚动到底部
      scrolltolower(e) {
        if (this.loadStatus === 0) {
          this.pageNum++;
          this.getList();
        }
      },

      // 触发下拉刷新
      refresherrefresh(e) {
        this.refresherTriggered = true;
        this.refreshList();
      },

      refreshList() {
        this.dataList = [];
        this.pageNum = 1;
        this.getList();
      },

			toGoodsDetail(id) {
				this.$navToPage({
					url: `/packageHome/pages/recycle/goodsDetail?id=${id}`
				})
			},

      moveStringToFront(arr, str) {
      	const index = arr.indexOf(str);
      	if (index !== -1) {
      		arr.splice(index, 1);
      	}
      	arr.unshift(str);
      	return arr;
      },

      getHistoryList() {
      	this.historyList = this.$getStorage('recycleHistorySearchData') || [];
      },

      setHistoryList(keyword) {
      	let list = this.$getStorage('recycleHistorySearchData') || [];
      	list = this.moveStringToFront(list, keyword);
      	this.$setStorage('recycleHistorySearchData', list);
      },

      clearHistoryList() {
      	this.$modal({
      		content: '清空最近搜索记录？'
      	}).then(() => {
      		this.$setStorage('recycleHistorySearchData', []);
      		this.getHistoryList();
      	}).catch(() => {})
      },

      clickHistory(keyword) {
      	this.keyword = keyword;
      	this.searchData();
      },

      searchData() {
        this.isShowSearch = false;
        this.refreshList();
        if(this.keyword) {
          this.setHistoryList(this.keyword);
          this.getHistoryList();
        }
      },

      searchFocus() {
        this.isShowSearch = true;
      },

      searchCustom() {
        this.isShowSearch = false;
      },
		}
	}
</script>

<style lang="scss">
.search-container {
  background: #ffffff;
  padding: 20rpx;
  ::v-deep .u-search {
    height: 60rpx;
    input {
      background: #F7F8FF !important;
    }
    .u-search__content {
      background: #F7F8FF !important;
      height: 60rpx;
    }
  }
}

.searchData-container {
  background: #ffffff;
  padding: 30rpx;
  height: 100%;
  box-sizing: border-box;
}

.common-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    font-size: 32rpx;
    font-weight: 600;
  }
  .right {
    .iconfont {
      font-size: 36rpx;
    }
  }
}

.lately-container {
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      background: #f5f5f5;
      padding: 12rpx 16rpx;
      border-radius: 50rpx;
      font-size: 24rpx;
      margin-right: 20rpx;
      margin-top: 20rpx;
    }
  }
}

.list-container {
  padding: 0 20rpx;
  .item {
    @include zj-card;
    padding: 20rpx;
    margin-top: 20rpx;
    position: relative;
    .soldout {
      position: absolute;
      right: 150rpx;
      top: 20rpx;
      image {
        width: 120rpx;
      }
    }
    .top {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
        .info {
          margin-left: 20rpx;
          .name {
            font-size: 28rpx;
          }
          .text {
            font-size: 24rpx;
            color: $sec-font;
            margin-top: 12rpx;
          }
        }
      }
      .right {
        color: $minor-color;
        font-weight: 600;
      }
    }
    .imgs {
      display: flex;
      flex-wrap: wrap;
      image {
        width: 180rpx;
        height: 180rpx;
        margin-right: 20rpx;
        margin-top: 20rpx;
      }
    }
    .title {
      margin-top: 20rpx;
      line-height: 40rpx;
    }
    .message {
      font-size: 24rpx;
      color: $sec-font;
      border-left: 6rpx solid $theme-color;
      margin-top: 20rpx;
      padding-left: 12rpx;
    }
    .bottom {
      border-top: 1px solid #eaeaea;
      margin-top: 20rpx;
      padding-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .it {
        display: flex;
        align-items: center;
        margin-left: 30rpx;
        .iconfont {
          font-size: 32rpx;
          color: $sec-font;
        }
        .text {
          font-size: 28rpx;
          margin-left: 6rpx;
          color: $sec-font;
        }
      }
    }
  }
}
</style>
