<template>
  <view class="zbyq-box">
    <view class="search-bar">
      <u-search 
      shape="square" 
      :clearabled="true" 
      :showAction="false" 
      placeholder="请输入站点" 
      height="40px"
      @change="inputChange"
      v-model="formData.value"
      ></u-search>
      <image
      src="../../../static/images/filter.png" 
      style="width: 20px; height: 20px; margin-right: 10px; margin-left: 10px;"
      @click="popupOpen = true"
      v-show="!popupOpen"
      >
      </image>
    </view>
    <view class="content">
      <view v-for="(item,index) in list" :key="index" style="margin-bottom: 5px;">
        <ResList :info="item" />
      </view>
    </view>
    <u-popup :show="popupOpen" mode="right"  @close="popupOpen=false" >
                <view style="padding: 30px 20px;">
                    <text style="font-weight: bold;">按类型</text>
                     <view style="margin-bottom: 10px; margin-left: -5px;">
                            <u-checkbox-group
                                v-model="formData.sources"
                                @change="checkboxChange"
                            >
                                <u-checkbox
                                    :customStyle="{margin: '7px'}"
                                    v-for="(item, index) in checkboxList1"
                                    :key="index"
                                    :label="item.name"
                                    :name="item.value"
                                >
                                </u-checkbox>
                            </u-checkbox-group>
                        </view>
                          <text style="font-weight: bold; margin-bottom: 5px;">按距离</text>
                          <u--input
                              placeholder="请输入"
                              border="surround"
                              type="number"
                              v-model="formData.distance"
                              style="width: 50%; margin-top: 5px;"
                            ></u--input>
                          <view style="display: flex; margin-top: 170%;">
                            <u-button text="重置" class="bottom-btn1" 
                            @click="formData = {...formData,sources,distance:1}"></u-button>
                            <u-button text="确认" color="#d9001b" class="bottom-btn2"  @click="popConfirm"></u-button>
                          </view>
                </view>
        	</u-popup>
  </view>
</template>

<script>
  import ResList from "./resList.vue"
  export default {
    props:{
      stcd:String,
      default:''
    },
    data() {
      return {
        popupOpen:false,
        sources:["SH","SW","QX","SK"],
        checkboxList1: [{
                name: '山洪',
                value: "SH"
            },
            {
                name: '水文',
                value: "SW"
            },
            {
                name: '气象',
                value: "QX"
            },
            {
                name: '水库',
                value: "SK"
            }
        ],
       
        formData:{
          value:'',
          sources:["SH","SW","QX","SK"],
           distance:1,
           stcd:this.stcd
        },
        list:[], //搜索结果
        saveList:[] //保存搜索结果
      }
    },
    components:{
      ResList
    },
    methods: {
      inputChange(e){
        console.log("e",e);
        if(!e) this.list = this.saveList;
        this.formData={...this.formData,value:e}
        let filterData = this.list.filter(item => item.stnm.indexOf(e) > -1);
        this.list = filterData;
      },
      checkboxChange(n) {
        console.log('change', n);
        this.formData = {...this.formData,sources:n};
       },
       popConfirm(){
         this.popupOpen = false
         this.getList()
       },
       async getList(){
         try{
           const {data} = await uni.$http.post(
            "/gunshiApp/xfflood/attResBase/rainBasinDivision/queryNearbyRainStations",{...this.formData}
            )
            console.log("data",data);
            if(data.code == 200){
              this.list = [...data.data]
              this.saveList = [...data.data]
            }
         }catch(e){
           uni.$showMsg()
         }
       }
    },
    mounted() {
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .zbyq-box{
    .search-bar{
      display: flex;
      align-items: center;
    }
    .content{
      margin-top: 10px;
      max-height: 580px;
      overflow-y: auto;
    }
   
    .bottom-btn1{
      width: 100px;
      margin-left: 130px;
    }
    .bottom-btn2{
      width: 100px;
      margin-right: -12px;
      margin-left: 10px;
    }
  }
</style>
