<template>
  <div class="app-container">
      <el-tag style="margin-bottom:20px">请填写至少2项信息，支持模糊搜索</el-tag>
    <el-form inline :model="model">
      <el-form-item label="城市" prop="city">
        <el-input  v-model="model.city"/>
      </el-form-item>
      <el-form-item label="邮编" prop="zipCode">
        <el-input  v-model="model.zipCode"/>
      </el-form-item>
      <el-form-item label="街道" prop="street">
        <el-input  v-model="model.street"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="lookup" type="primary" :loading="loading">查询</el-button>
        <el-button @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table :data="lookupResult">
        <el-table-column prop="City" label="城市" width="200"> </el-table-column>
        <el-table-column prop="District" label="区" width="200"> </el-table-column>
        <el-table-column prop="ZipCode" label="邮编" width="200"> </el-table-column>
        <el-table-column prop="Street" label="街道" width="*"> </el-table-column>
        <el-table-column prop="HouseNo" label="门牌号" width="200"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { _lookup } from "@/api/deAddress";
export default {
  name: 'DeAddressLookup',
  data: function () {
    return {
        loading:false,
      model: {
        city: null,
        street: null,
        zipCode: null,
      },
      lookupResult: [],
    };
  },
  methods: {
      clear(){
          this.model.city=null;
          this.model.street=null;
          this.model.zipCode=null;
      },
    lookup() {
      let data = this.model;
      if(!this.model.city && !this.model.street && !this.model.zipCode){
          this.$message('请至少填写2项信息');
          return;
      }
      this.loading=true;
      _lookup(data).then((resp) => {
          if(!resp || resp.length==0){
              this.$message('无结果');
              this.lookupResult=[];
          }else{
              this.lookupResult = resp;
          }

      }).finally(()=>{
          this.loading=false;
      });
    },
  },
};
</script>
