<template>
  <view class="content">
    <view class="top_s">
      <view class="search_">
        <u-icon name="arrow-left" size="24" @click="goback()"></u-icon>
        <view class="newsearch">
          <view @click="toQf()" style="margin-left: 10px;">
            <u-icon name="camera" color="#32714F" size="28"></u-icon>
          </view>
          <view class="newsearch_g">|</view>
          <input type="text" v-model="keyword" placeholder="Please enter"/>
          <view class="anniu" @click="getSound">search</view>
        </view>
      </view>

    </view>
    <view class="box_" v-if="cityList.length>1">
      <view class="h_top">
        <view class="icon_">
          <image src="../../static/imgs/huohuo.png" style="width: 16px; height: 16px; "></image>
        </view>
        <view class="sm_">City</view>
        <view class="size_"></view>
      </view>
      <view class="h_" v-for="(item,index) in cityList" :key="index" @click="goclick(item)">
        <view class="icon_">
          <u-icon name="map" size="14"></u-icon>
        </view>
        <view class="title_">{{ item.cnName }}-{{ item.name }}</view>
        <view class="size_">→</view>
      </view>

    </view>
    <view class="box_">
      <view class="h_top">
        <view class="icon_">
          <u-icon name="clock" size="14"></u-icon>
        </view>
        <view class="sm_">History</view>
        <view class="size_" @click="removeRecord()">Clear</view>
      </view>
      <view class="h_" v-for="(item,index) in hisList" :key="index" @click="newclick(item)">
        <view class="icon_">
          <u-icon name="map" size="14"></u-icon>
        </view>
        <view class="title_">{{ item.cnName }}-{{ item.searchName }}</view>
        <view class="size_">→</view>
      </view>
      <view class="h_" v-if="hisList.length<1">
        <view style="font-size: 14px;color: #939393;">You have no search history yet~</view>
      </view>
    </view>

  </view>
</template>

<script>
import request from '../../utils/request'

export default {
  data() {
    return {
      keyword: '',
      type: '',
      hisList: [],
      cityList: [],
      startPoint: [],
      endPoint: [],
      city: "",
      lon: '116.897442',
      lat: '36.67937',
      actionStyle: {
        width: '50px'
      }
    }
  },
  onLoad(option) {
    if (option.type) {
      this.type = option.type
      console.log(this.type);
    }
    this.watchData()
  },
  onShow() {
    this.getmyhis();
  },
  methods: {
    watchData() {
      let that = this
      uni.$once('updateOcrText', function (res) {
        that.keyword = res
        that.getSound()
      })
    },
    toQf() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: function (res) {
          uni.navigateTo({
            url: '/components/bt-cropper/index?image=' + res.tempFilePaths[0]
          })
        }
      });
    },
    removeRecord() {
      request({
        url: 'system/records/removeRecord',
        method: 'delete',
      }).then(res => {
        console.log(res);
        uni.showToast({
          title: "cleared!",
          icon: 'none'
        })
        this.getmyhis()
      })
    },
    goback() {
      uni.navigateBack()
    },
    newclick(item) {
      let tempData = {
        lal: item.location,
        location: item.location,
        searchName: item.name,
        name: item.name,
        cnName: item.cnName
      }
      request({
        url: 'system/records/addRecordsInfo',
        method: 'post',
        data: tempData
      })
      let res = {type: this.type, data: item}
      uni.$emit('updatePosition', res)
      uni.navigateBack()
    },
    goclick(item) {
      let tempData = {
        lal: item.location,
        location: item.location,
        searchName: item.name,
        name: item.name,
        cnName: item.cnName
      }
      let res = {type: this.type, data: tempData}
      request({
        url: 'system/records/addRecordsInfo',
        method: 'post',
        data: tempData
      })
      uni.$emit('updatePosition', res)
      uni.navigateBack()

    },
    getSound() {

      let that = this
      uni.getLocation({
        // 谷歌使用wgs84  其他使用gcj02
        type: 'gcj02', // 使用国测局坐标系
        geocode: true,
        success: function (res) {
          uni.showLoading({
            title: 'Loading...'
          });
          request({
            url: 'system/records/roundSearch?searchName=' + that.keyword +
                "&longitude=" + res.longitude + "&latitude=" + res.latitude,
            method: 'get',
          }).then(res => {
            console.log('1119', res);
            const data = res.data
            if (data && data.length > 1) {
              that.cityList = data

            } else {
              uni.showToast({
                title: "Sorry, we couldn't find anything related to it in the search!",
                icon: 'none'
              })
            }

          }).finally(() => {
            uni.hideLoading();
          })
        },
        fail: function (err) {
          uni.showToast({
            title: 'Failed to get location',
            icon: 'none'
          })
        }
      });
    },

    async getmyhis() {
      this.hisList = []
      let res = await request({
        url: 'system/records/listByOne?orderBy=desc?pageNum=1?pagesize=10',
        method: 'get',
      })
      if (res.code == 200) {
        console.log("res", res)
        for (var i = 0; i < res.rows.length; i++) {
          this.hisList.push(res.rows[i])
        }

      }
    }
  }
}
</script>

<style scoped lang="scss">
.search_ {
  box-sizing: border-box;
  width: 100%;
  padding: 0px 10px;
  display: flex;
  align-items: center;
}

.newsearch_g {
  color: #939393;
  line-height: 22px;
  margin-bottom: 4px;
  margin-right: 5px;
  margin-left: 5px;
}

.newsearch {
  width: 100%;
  border: 2px solid #32714F;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 2px;

  input {
    width: 100%;
  }
}

.anniu {
  background: #32714F;
  color: #fff;
  box-sizing: border-box;
  padding: 8rpx 10rpx;
  border-radius: 4px;
}

.content {
  background: #F8F8F8;
  height: 100vh;
}

.h_top {
  background: #F7F8FA;
  border-radius: 6px 6px 0px 0px;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  align-items: center;
}

.sm_ {
  font-weight: 500;
  font-size: 10px;
  color: #333333;
  width: 80%;
}

.top_s {
  width: 100%;
  height: 114px;
  background: #FFFFFF;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  border-radius: 0px 0px 0px 0px;
  box-sizing: border-box;
  padding-top: 44px;
}

.box_ {
  width: 95%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
  margin: 15px auto;
  border-radius: 6px 6px 6px 6px;

}

.h_ {
  width: 100%;
  border-bottom: 1px solid #F2F2F2;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  align-items: center;
}

.icon_ {
  width: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title_ {
  width: 80%;
  font-weight: bold;
  font-size: 12px;
  color: #333333;
}

.size_ {
  width: 10%;
  font-weight: 400;
  font-size: 10px;
  color: #999999;
  text-align: right;
}
</style>
