<template>
	<div style="background: #f1f5f8;height: 100vh">
		<div style="display: flex;justify-content: flex-start; align-items: center;background: #ffffff">
			<van-search :clearable="false" v-model="search" style="flex: 2" placeholder="请输入搜索关键词" name="etaoSearch" ref="searchField"/>
			<van-button type="warning" size="small" style="margin: 0 8px;background: #ff6600" @click="toGoodList(search,'search')">搜索</van-button>
			<van-button size="small" style="margin-right: 10px" @click="goback">取消</van-button>
		</div>
		<div>
			<h4 style="color: #5392e2;padding: 10px"><span style="float: right;font-size: 1.3rem;color: #adaeae;"><van-icon
					  name="delete-o" @click="del" /></span> #历史搜索
			</h4>
			<div style="background: #ffffff;padding: 10px;line-height: 1.6rem">
				<div v-if="historyList.length>0">
					<ul v-for="item in historyList">
						<li @click="toGoodList(item)" style="border: 1px solid #f1f5f8;margin: 2px auto;">{{item}}</li>
					</ul>
				</div>
				<p v-else>没有任何历史记录</p>
			</div>
			<!--<h4 style="color: #5392e2;padding: 10px;line-height: 2.3rem">#热门搜索</h4>-->
			<!--<div>-->
				<!--<ul style="background: #ffffff;padding: 10px" v-for="item in styleList">-->
					<!--<li @click="toGoodList(item)">{{item}}</li>-->
				<!--</ul>-->
			<!--</div>-->
		</div>
	</div>
</template>

<script>
  import { onShow} from "@dcloudio/uni-app";
  import { Dialog } from "vant";
  import { reactive, toRefs,onMounted, ref } from "vue";
  import { PageUtils } from '@/utils/utils'

  export default {
    setup() {
      const that = reactive({
	  search:'',
        historyList: ["随便看看"],
        styleList: ["欧式风格", "美式风格", "中式", "亚洲风格"],
        goback: () => {
          PageUtils.goBack()
        },
        toGoodList: (search,type) => {
	    if(type){
            if(!search)return
            let searchList = localStorage.getItem("searchList");
            let arr = null;
            if (searchList) {
              arr = JSON.parse(searchList);
              let index = arr.indexOf(that.search)
		  if(index===-1){
                arr.push(that.search);
		  }
            } else {
              arr = [];
              arr.push(that.search);
            }
            localStorage.setItem("searchList", JSON.stringify(arr));
	    }   
      const routers = getCurrentPages()
      if (routers.length == 1 || routers[routers.length - 2].route != 'pages/goodList/index') {
        uni.redirectTo({
          url: `/pages/goodList/index?search=${search}`,
        });
      } else {
          uni.navigateBack({
            delta: 1,
            complete: function () {
              setTimeout(() => {
                uni.redirectTo({
                  url: `/pages/goodList/index?search=${search}`,
                });
              }, 200);
            }
          });
      }
        },
        del: () => {
          Dialog.confirm({
            title: "是否清空全部历史记录？",
          })
            .then(() => {
              that.historyList = [];
              localStorage.removeItem('searchList')
            })
            .catch(() => {
              // on cancel
            });
        },
      });
      const searchField = ref()
      onShow(() => {
        that.search = ''
        that.historyList = localStorage.getItem("searchList")?JSON.parse(localStorage.getItem("searchList")).reverse():[]
      });
      onMounted(() => {
        setTimeout(() => {
          searchField.value && searchField.value.focus()
        })
      })
      const refState = toRefs(that);
      return {
        searchField,
        ...refState,
      };
    },

  };
</script>

<style scoped>

</style>