<template>
  <view :class="{ 'search-page--elder': $uiStyle === 'elder' }">
    <!-- <van-search
      custom-class="custom-search"
      v-model="inputValue"
      :focus="true"
      maxlength="200"
      placeholder="请输入搜索关键词"
      show-action
      @search="handleSearchChange"
      @cancel="handleCancel"
    /> -->
    <uni-search-bar
      v-model="inputValue"
      :focus="true"
      radius="20"
       maxlength="200"
      placeholder="请输入搜索关键词"
      @confirm="handleSearchChange"
      @cancel="handleCancel"
    ></uni-search-bar>
    <!-- 暂时注释历史搜索和热搜 -->
    <!--  <view :class="isShowResultView ? 'normalBgView-hidden' : 'normalBgView'">
      <view class="hotSearchBgView">
        <view class="hotSearchTitleView">
          <view class="hotSearchTitle">热门搜索</view>
          <view
            class="hotSearchCleanText"
            @tap.stop.prevent="handleToggleHotSearch"
          >
            换一批
            <van-icon name="replay" class="hotSearchCleanBtn" />
          </view>
        </view>
        <view class="hotSearchTagBgView">
          <view
            class="hotSearchTag"
            @tap.stop.prevent="handleHotSearchItemClick"
            :data-text="item"
            v-for="(item, index) in hotSearchArr"
            :key="index"
            >{{ item }}</view
          >
        </view>
      </view>
      <view class="historyBgView" v-if="historySearch.length">
        <view class="historyTitleView">
          <view class="historyTitle">搜索历史</view>
          <view class="historyCleanText" @tap.stop.prevent="CleanHistory">
            清空历史
            <van-icon name="delete" class="historyCleanBtn" />
          </view>
        </view>
        <view class="historyTagBgView">
          <view
            class="historyTag"
            @tap.stop.prevent="ClickHistoryItem"
            :data-text="item"
            v-for="(item, index) in historySearch"
            :key="index"
          >
            <van-icon
              class="historyIconLeft"
              name="clock-o"
              color="#969696"
              size="20px"
            />

            <view class="historyText">{{ item }}</view>
          </view>
        </view>
      </view>
    </view> -->

    <view :class="isShowResultView ? 'resultBgView' : 'resultBgView-hidden'">
      <div class="door-list">
        <div class="title">门牌</div>
        <template v-if="searchResult.doorplateList.length">
          <view
            class="result-cell"
            @tap="handleDoorClick(item)"
            :data-text="item.addr"
            v-for="(item, index) in searchResult.doorplateList"
            :key="index"
          >
            <van-icon name="location-o" color="#969696" size="20px" />
            <view class="result-text">{{ item.bzdz }}</view>
          </view>
          <view v-if="loadMoreVis" class="load-more" @tap="loadMore"
            >加载更多</view
          >
        </template>
        <template v-else>
          <view class="result-cell">暂无数据</view>
        </template>
      </div>
      <div class="service">
        <div class="title">服务</div>
        <template v-if="searchResult.appList.length">
          <view class="service-list">
            <view
              class="service-item"
              @tap="handleServiceClick(item)"
              :data-text="item.name"
              v-for="(item, index) in searchResult.appList"
              :key="index"
            >
              <!-- <van-icon name="search" color="#969696" size="20px" /> -->

              <image :src="item.picUrl"></image>

              <text>{{ item.name }}</text>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="result-cell">暂无数据</view>
        </template>
      </div>
    </view>
    <web-view v-if="webviewShow" :src="h5Url">
      <!-- <cover-view class="back-btn" @tap="handleBackTo">
        <cover-image
          src="//yun.duiba.com.cn/saas/images/zjzy-icons/back-btn.png"
        ></cover-image>
      </cover-view> -->
    </web-view>
  </view>
</template>

<script>
import { debounce } from "@/utils";
import { search } from "@/api/control";
import { geocoder } from "@/api/map.js";
import { JUMP_TYPE } from "@/utils/const";
const app = getApp();
export default {
  data() {
    this.handleSearchChange = debounce(this.handleSearchChange, 500);
    return {
      inputValue: "",
      //输入的值
      isShowResultView: false,
      //显示搜索结果view，当输入框有内容显示
      hotKeywords: [],
      hotSearchArr: [
        "数字奉化",
        "数字民政",
        "乡村振兴",
        "数字公安",
        "阳关公开",
        "监督一点通",
        "地名文化",
        "共同富裕",
      ],
      historySearch: [],
      searchResultArr: [
        {
          label: "数字奉化",
          url: "/static/images/home/szfh.png",
        },
        {
          label: "数字民政",
          url: "/static/images/home/szmz.png",
        },
        {
          label: "乡村振兴",
          url: "/static/images/home/xczx.png",
        },
        {
          label: "数字公安",
          url: "/static/images/home/szga.png",
        },
        {
          label: "阳关公开",
          url: "/static/images/home/yggk.png",
        },
        {
          label: "监督一点通",
          url: "/static/images/home/jdydt.png",
        },
        {
          label: "地名文化",
          url: "/static/images/home/dmwh.png",
        },
      ],
      searchResult: {
        appList: [
          {
            jumpUrl:
              "https://nbfh.diming123.com/gis/qrlink/menpai/171272#/modulegrid?name=%E6%95%B0%E5%AD%97%E5%A5%89%E5%8C%96&tagList=fhszList&next=gridsecond&notice",
            name: "",
            picUrl: "",
          },
        ],
        doorplateList: [
          {
            addr: "",
          },
        ],
      },
      h5Url: "",
      webviewShow: false,
      pageConfig: {
        pageSize: 10,
        current: 1,
      },
      loadMoreVis: true,
    };
  },
  onLoad() {
    this.getHistorySearch();
  },
  methods: {
    handleBackTo() {
      this.webviewShow = false;
      uni.setNavigationBarTitle({
        title: "服务和门牌搜索",
      });
    },
    getHistorySearch() {
      if (uni.getStorageSync("historySearch")) {
        console.log(uni.getStorageSync("historySearch"));
        this.setData({
          historySearch: uni.getStorageSync("historySearch"),
        });
      }
    },
    async loadMore() {
      this.pageConfig.current += 1;
      const res = await search({
        name: this.inputValue,
        current: this.pageConfig.current,
        size: this.pageConfig.pageSize,
      });
      this.searchResult.doorplateList = [
        ...this.searchResult.doorplateList,
        ...res.data.doorplateList,
      ];
      if (res.total < this.searchResult.doorplateList.length) {
        this.loadMoreVis = false;
      } else {
        this.loadMoreVis = true;
      }
      console.log("加载更多结果", this.searchResult);
    },
    //输入内容改变
    async handleSearchChange(e) {
      this.setData({
        inputValue: e.value,
        isShowResultView: e.value ? true : false,
        pageConfig: {
          pageSize: 10,
          current: 1,
        },
      });
      const res = await search({
        name: e.value,
        current: this.pageConfig.current,
        size: this.pageConfig.pageSize,
      });
      res.data.appList.forEach((item) => {
        item.picUrl = "/static/images/home/" + item.picUrl + ".png";
      });
      this.searchResult = res.data;

      if (
        res.total < this.searchResult.doorplateList.length ||
        res.total < this.pageConfig.pageSize
      ) {
        this.loadMoreVis = false;
      } else {
        this.loadMoreVis = true;
      }
      console.log("搜索结果", res);
    },

    setHistorySearch(val) {
      if (uni.getStorageSync("historySearch")) {
        const historySearchArr = uni.getStorageSync("historySearch");

        if (historySearchArr.indexOf(val) === -1) {
          uni.setStorageSync("historySearch", [...historySearchArr, val]);
        } else {
          console.log("历史记录已有");
        }
      } else {
        uni.setStorageSync("historySearch", [val]);
      }
    },
    //点取消
    handleCancel() {
      console.log("点击取消");
      uni.navigateBack();
    },

    //点击热搜 - item
    handleHotSearchItemClick(e) {
      let selText = e.currentTarget.dataset.text;
      console.log("点击热搜 - item === " + selText);
    },

    //清空热搜
    handleToggleHotSearch(e) {
      // console.log("清空热搜");
      uni.showToast({
        title: "已经是最新啦",
        icon: "none",
        duration: 1000,
      });
    },

    //点击搜索历史 - item
    ClickHistoryItem(e) {
      let selText = e.currentTarget.dataset.text;
      console.log("点击搜索历史 - item === " + selText);
    },

    //清空搜索历史
    CleanHistory(e) {
      console.log("清空搜索历史");
      uni.removeStorageSync("historySearch");
      uni.showToast({
        title: "已经清空",
        icon: "success",
        duration: 1000,
      });
    },

    //删除某条搜索历史
    CleanHistoryItem(e) {
      let selText = e.currentTarget.dataset.text;
      console.log("删除某条搜索历史(新设置一个data-text) === " + selText);
    },

    //点击搜索结果页 item
    handleServiceClick(item) {
      /*   if (item.name === "我要出租") {
        uni.navigateTo({
          url: "/subPages/pages/rent/chuzu",
        });
        return;
      } else if (item.name === "我要租房") {
        uni.navigateTo({
          url: "/subPages/pages/rent/zufang",
        });
        return;
      } */
      switch (item.jumpType) {
        case JUMP_TYPE.H5.VALUE:
          app.globalData.jumpUrl = item.jumpUrl;
          uni.navigateTo({
            url: "/pages/home/webView",
          });
          break;
        case JUMP_TYPE.WX_APP.VALUE:
          uni.navigateToMiniProgram({
            appId: item.jumpUrl,
          });
          break;
        case JUMP_TYPE.WX_INSIDE.VALUE:
          app.globalData.jumpUrl = item.jumpUrl;
          uni.navigateTo({
            url: item.jumpUrl,
          });
          break;
        case JUMP_TYPE.MAP.VALUE:
          uni.navigateTo({
            url: `/subPages/pages/mapService/mapService?category=${item.jumpUrl}&keyword=${item.name}`,
          });
          break;
        default:
          break;
      }
    },
    goAddress(e) {
      console.log("导航去那些位置");
      const targetAddress = e;
      uni.openLocation({
        latitude: targetAddress.latitude,
        longitude: targetAddress.longitude,
        name: targetAddress.title,
        address: targetAddress.address,

        success(res) {
          console.log(res, "wx.getLocation");
        },
      });
    },
    async handleDoorClick(item) {
      app.globalData.options.code=item.code;
      this.handleCancel()
    },
  },
};
</script>
<style>
@import "./search.css";
</style>
<style lang="scss" scoped>
.load-more {
  text-align: center;
  line-height: 30px;
}
.search-page--elder{
  .result-cell{
    height:calc(40px * $zlb-elder-font-scale);
    .result-text{
         font-size: calc(14px * $zlb-elder-font-scale);
    }
  }
  .door-list,.service{
    title{
       font-size: calc(18px * $zlb-elder-font-scale);
    }
  }
}
</style>
