<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.args"
      ></u-search>
      <image
      src="../../../static/images/filter.png" 
      style="width: 20px; height: 20px;  margin-left: 20px;"
      @click="popupOpen = true"
      >
      </image>
    </view>
    <view class="content">
      <Table :list="list" :height="height" />
    </view>
    <u-popup :show="popupOpen" mode="right"  @close="popupOpen=false" >
                <view style="padding: 30px 20px; width:250px">
                    <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>
                          <view style="display: flex;position:absolute;bottom:20px;right:20px">
                            <u-button text="重置" class="bottom-btn1" 
                            @click="formData = {...formData,sources}"></u-button>
                            <u-button text="确认" color="#d9001b" class="bottom-btn2"  @click="popConfirm"></u-button>
                          </view>
                </view>
        	</u-popup>
  </view>
</template>

<script>
  import Table from "./table.vue"
  import {disType} from "../../utils/dicType.js"
   const adcd = uni.getStorageSync('value').adcd
   const type = disType(adcd)
  export default {
    props:{
      stcd:String,
      height:Number,
      default:''
    },
    components:{
      Table
    },
    data() {
      return {
        popupOpen:false,
        sources:["SH","SW"],
        checkboxList1: [{
                name: '山洪',
                value: "SH"
            },
            {
                name: '水文',
                value: "SW"
            },
        ],
       
        formData:{
          args:'',
          sources:["SH","SW"],
          adcd:type == 1 ? undefined :adcd,
        },
        list:[], //搜索结果
        saveList:[], //保存搜索结果
        tableHeight:0
      }
    },
   
    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) {
        this.formData = {...this.formData,sources:n};
       },
       popConfirm(){
         this.popupOpen = false
         this.getList()
       },
       async getList(){
        console.log(1111,this.formData);
         try{
           const {data} = await uni.$http.post(
            "/gunshiApp/xfflood/river/water/list",{...this.formData}
            )
            console.log("22weee",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;
      margin-top: 20px;
      padding: 0 20px;
    }
    .content{
      width: 100%;
      margin-top: 10px;
      // max-height: 580px;
      overflow-y: auto;
    }
   
    .bottom-btn1{
      width: 100px;
      margin-left: 70px;
    }
    .bottom-btn2{
      width: 100px;
      margin-right: -12px;
      margin-left: 10px;
    }
  }
</style>
