<template>
  <div class="goods-container">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        style="padding-right: 20px"
      >
        <el-form-item label="詳細地址" prop="address">
          <el-autocomplete
            class="inline-input"
            v-model="ruleForm.address"
            :fetch-suggestions="querySearchAsync"
            placeholder="請輸入內(nèi)容"
            @select="handleSelect"
            style="width: 100%"
          >
            <template slot="append">精確查找</template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label=" ">
          <baidu-map
            class="map"
            :center="{ lng: ruleForm.map_x, lat: ruleForm.map_y }"
            :zoom="16"
            style="height: 400px"
          >
            <bm-marker
              v-if="type == 'edit'"
              :position="{ lng: ruleForm.map_x, lat: ruleForm.map_y }"
              :dragging="true"
            >
              <bm-info-window :show="infoWindow.show" style="font-size: 13px">
                {{ ruleForm.name }}
                <br />
                <br />
                （提示：任意點擊地圖或通過精確搜索選擇您的位置）
              </bm-info-window>
            </bm-marker>
            <bm-local-search
              :keyword="ruleForm.address"
              :auto-viewport="true"
              @searchcomplete="searchcomplete"
              style="width: 0px; height: 0px; overflow: hidden"
            />
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
          </baidu-map>
        </el-form-item>
      </el-form>
  </div>
</template>
<script>
export default {
  name: 'WorkingPlace',
  components: {},
  data() {
    return {
      ruleForm: {},
      addressKeyword: '',
      infoWindow: {
        show: true,
        contents: '(提示：任意點擊地圖或通過精確搜索選擇您的位置)',
      },
      restaurants: [],
    }
  },
  created() {},
  methods: {
    searchcomplete(arr) {
      this.isShowPanel = true
      this.restaurants = arr.Ir
      this.restaurants.forEach((item) => {
        item.value = item.title
      })
      console.log(this.restaurants)
    },
    querySearchAsync(queryString, cb) {
      if (queryString != '') {
        // 輸入內(nèi)容以后才去做模糊查詢
        setTimeout(() => {
          let callBackArr = [] // 準備一個空數(shù)組，此數(shù)組是最終返給輸入框的數(shù)組 // 這個res是發(fā)請求，從后臺獲取的數(shù)據(jù)
          this.restaurants.forEach((item) => {
            callBackArr.push(item) // 就存到callBackArr里面準備返回呈現(xiàn)
          }) // 經(jīng)過這么一波查詢操作以后，如果這個數(shù)組還為空，說明沒有查詢到具有關(guān)聯(lián)的數(shù)據(jù)，就直接返回給用戶暫無數(shù)據(jù)
          if (callBackArr.length == 0) {
            cb([{ value: '暫無數(shù)據(jù)', price: '暫無數(shù)據(jù)' }])
          } // 如果經(jīng)過這一波查詢操作以后，找到數(shù)據(jù)了，就把裝有關(guān)聯(lián)數(shù)據(jù)的數(shù)組callBackArr呈現(xiàn)給用戶
          else {
            cb(callBackArr)
          }
          var local = new BMap.LocalSearch(this.map, callBackArr) //創(chuàng)建LocalSearch構(gòu)造函數(shù)
          local.search(queryString) //調(diào)用search方法，根據(jù)檢索詞str發(fā)起檢索
        }, 1000)
      }
    },
    handleSelect(item) {
      console.log(item)
    },
  },
}
</script>