<template>
 <view class="rain-box">
    <view class="nav-bar">
          <u-icon name="arrow-left" color="#000" size="28"></u-icon>
          <view class="">
             雨情
          </view>
          <!-- <u-icon name="arrow-right" color="#000" size="28"></u-icon> -->
         <cover-image 
         src="../../static/images/filter.png" 
         style="width: 20px; height: 20px; margin-right: 10px;"
         @click="()=>this.popupOpen = true"
         v-show="!this.popupOpen"
         >
         </cover-image>
    </view>
    <!-- 搜索以及多级下拉 -->
    <view class="search-box">
      <view class="search-item">
        <view class="" @click="handleClick" >
          {{selecetItem[1] || columns[0][0]}}
        </view>
        <u-icon name="arrow-down-fill" color="#000" size="20" v-show="switchIcon"></u-icon>
        <u-icon name="arrow-up-fill" color="#000" size="20" v-show="!switchIcon"></u-icon>
      
          <view class="rain-input">
            <u--input
            	    placeholder="请输入站点"
            	    prefixIcon="search"
            	    prefixIconStyle="font-size: 22px;color: #909399"
            	></u--input>
          </view>
          <view class="" @click="handleClick1" >
            {{selecetItem1[1] || columns[0][0]}}
          </view>
          <u-icon name="arrow-down-fill" color="#000" size="20" v-show="switchIcon1"></u-icon>
          <u-icon name="arrow-up-fill" color="#000" size="20" v-show="!switchIcon1"></u-icon>
      </view>
    </view>
    <!-- 单纯下拉 -->
    <view class="time-select">
      <view :class="{'jiangyu':true,'noClick':this.rainTime}" @click="(e)=>{
        if(this.rainTime){
          e.stopPropagation();
          return
        }
        this.jiangyu = !this.jiangyu}" >
        <text>{{selectJyOne ? "按昨日降雨排序" :"按时段降雨排序"}}</text>
        <u-icon name="arrow-down-fill" color="#000" size="20" v-show="!this.jiangyu"></u-icon>
        <u-icon name="arrow-up-fill" color="#000" size="20" v-show="this.jiangyu"></u-icon>
        <view class="jiangyu-dropdown" v-show="this.jiangyu">
          <view :class="{'active': this.selectJyOne == 0}"  @click="()=>this.selectJyOne = 0" style="border-bottom: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf; padding: 10px 0; display: flex; align-items: center;">
            <text style="margin-right: 220px;">按时段降雨排序</text>
            <u-icon name="checkmark" color="#02a7f0" size="20" v-show="this.selectJyOne == 0"></u-icon>
          </view>
          <view :class="{'active': this.selectJyOne == 1}"  @click="()=>this.selectJyOne = 1" style="border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; display: flex; align-items: center;">
            <text style="margin-right: 220px;">按昨日降雨排序</text>
            <u-icon name="checkmark" color="#02a7f0" size="20" v-show="this.selectJyOne == 1"></u-icon>
            
          </view>
        </view>
      </view>
      <view class="rain-time"  @click="(e)=>{
        if(this.jiangyu){
          e.stopPropagation();
          return
        }
        this.rainTime = !this.rainTime}">
        <text>{{selectTimeOne == 0 ? "1h" :
          selectTimeOne == 1 ? "3h" :
            selectTimeOne == 2 ? "6h" :
              selectTimeOne == 3 ? "12h" :
                selectTimeOne == 4 ? "24h" : ''
                  
        }}</text>
        <u-icon name="arrow-down-fill" color="#000" size="20" v-show="!this.rainTime"></u-icon>
        <u-icon name="arrow-up-fill" color="#000" size="20" v-show="this.rainTime"></u-icon>
        <view class="rain-time-dropdown" v-show="rainTime">
          <view class="" :class="{'active': this.selectTimeOne == 0}" @click="()=>this.selectTimeOne = 0"  style="border-bottom: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf; padding: 10px 0; display: flex; align-items: center;">
           <text style="margin-right: 300px;">1h</text>
           <u-icon name="checkmark" color="#02a7f0" size="20" v-show="this.selectTimeOne == 0"></u-icon>
          </view>
          <view class="" :class="{'active': this.selectTimeOne == 1}" @click="()=>this.selectTimeOne = 1" style="border-bottom: 1px solid #dfdfdf;  padding-bottom: 10px; display: flex; align-items: center;">
            <text style="margin-right: 300px;">3h</text>
            <u-icon name="checkmark" color="#02a7f0" size="20" v-show="this.selectTimeOne == 1"></u-icon>
          </view>
          <view class="" :class="{'active': this.selectTimeOne == 2}" @click="()=>this.selectTimeOne = 2" style="border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; display: flex; align-items: center;">
          <text style="margin-right: 300px;">6h</text>
          <u-icon name="checkmark" color="#02a7f0" size="20" v-show="this.selectTimeOne == 2"></u-icon>
          </view>
          <view class="" :class="{'active': this.selectTimeOne == 3}" @click="()=>this.selectTimeOne = 3" style="border-bottom: 1px solid #dfdfdf;  padding-bottom: 10px; display: flex; align-items: center;">
            <text style="margin-right: 300px;">12h</text>
            <u-icon name="checkmark" color="#02a7f0" size="20" v-show="this.selectTimeOne == 3"></u-icon>
          </view>
          <view class="" :class="{'active': this.selectTimeOne == 4}" @click="()=>this.selectTimeOne = 4" style="border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; display: flex; align-items: center;">
            <text style="margin-right: 300px;">24h</text>
            <u-icon name="checkmark" color="#02a7f0" size="20" v-show="this.selectTimeOne == 4"></u-icon>
          </view>
        </view>
      </view>
    
    </view>
    <!-- 内容部分 -->
    <view style="width: 100%; height: 10px; background-color: #f7f7f7;">
      
    </view>
    <!-- 时间段 -->
    <view style="padding: 5px 10px; text-align: center; color: #f7b156;">
      统计时段：2024-04-25 10:00至2024-04-26 10:00
    </view>
    <view style="margin: 0 10px;">
      <Table />  
    </view>
    <u-picker
        :show="show" 
        ref="uPicker" 
        :columns="columns" 
        @confirm="confirm" 
        @change="changeHandler"
        @cancel="cancel"
        >
    </u-picker>
    <u-picker
        :show="show1" 
        ref="uPicker1" 
        :columns="columns" 
        @confirm="confirm1" 
        @change="changeHandler1"
        @cancel="cancel1"
        >
    </u-picker>
    <u-popup :show="popupOpen" mode="right"  @close="()=>this.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="checkboxValue1"
                            @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;">按时间</text>
                      <view class="example-body" style="display: flex; align-items: center; margin-bottom: 10px; margin-top: 10px;">
                      			<uni-datetime-picker type="datetime" v-model="startTm" @change="(e) => this.startTm = e" />
                      <text style="margin-left: 10px;">至</text>
                      </view>
                      <view class="example-body" style="width: 92%;">
                      			<uni-datetime-picker type="datetime" v-model="endTm" @change="(e) => this.EndTm = e" />
                      </view>
                      <view style="display: flex; margin-top: 10px;">
                        <u-button class="first-btn"  text="昨日08:00~当前时间"></u-button>
                        <u-button class="second-btn" text="今天08:00~当前时间"></u-button>
                      </view>
                      <view style="display: flex; margin-top: 140%;">
                        <u-button text="重置" class="bottom-btn1"></u-button>
                        <u-button text="确认" color="#d9001b" class="bottom-btn2"></u-button>
                      </view>
            </view>
    	</u-popup>
 	</view>
</template>

<script>
  import Table from "./Table"
  import filter from "../../static/images/filter.png"
  export default {
  		data() {
  			return {
  				show: false,
          show1:false,
          switchIcon:true,
          switchIcon1:true,
          selecetItem:[],
          selecetItem1:[],
          jiangyu:false,  //显示下拉
          rainTime:false, //显示下拉，
          selectJyOne:1,//选中降雨最后一个元素，
          selectTimeOne:4, //选中时间的最有一个元素
          popupOpen:false, //抽屉打开
          checkboxValue1:["SH","SW","QX","SK"],
          // 基本案列数据
          checkboxList1: [{
                  name: '山洪',
                  value: "SH"
              },
              {
                  name: '水文',
                  value: "SW"
              },
              {
                  name: '气象',
                  value: "QX"
              },
              {
                  name: '水库',
                  value: "SK"
              }
          ],
          startTm: '', //开始时间，
          endTm:"",//结束时间
          columns: [
          ['中国', '美国'],
          ['深圳', '厦门', '上海', '拉萨']
  				],
          columnData: [
            ['深圳', '厦门', '上海', '拉萨'],
            ['得州', '华盛顿', '纽约', '阿拉斯加']
                  ]
  			}
  		},
      components:{
        Table
      },
  		methods: {
              changeHandler(e) {
                  const {
                      columnIndex,
                      value,
                      values, // values为当前变化列的数组内容
                      index,
  					// 微信小程序无法将picker实例传出来，只能通过ref操作
                      picker = this.$refs.uPicker
                  } = e
                  // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                  if (columnIndex === 0) {
                      // picker为选择器this实例，变化第二列对应的选项
                      picker.setColumnValues(1, this.columnData[index])
                  }
              },
  			// 回调参数为包含columnIndex、value、values
  			confirm(e) {
                  console.log('confirm', e)
                  this.show = false
                  this.switchIcon=!this.switchIcon;
                  this.selecetItem = [...e.value]
  			},
        cancel(e) {
           this.show = false
        },
        changeHandler1(e) {
                  const {
                      columnIndex,
                      value,
                      values, // values为当前变化列的数组内容
                      index,
  					// 微信小程序无法将picker实例传出来，只能通过ref操作
                      picker = this.$refs.uPicker1
                  } = e
                  // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                  if (columnIndex === 0) {
                      // picker为选择器this实例，变化第二列对应的选项
                      picker.setColumnValues(1, this.columnData[index])
                  }
              },
  			// 回调参数为包含columnIndex、value、values
  			confirm1(e) {
                  console.log('confirm', e)
                  this.show1 = false
                  this.switchIcon=!this.switchIcon;
                  this.selecetItem1 = [...e.value]
  			},
        cancel1(e) {
           this.show1 = false
        },
        handleClick(){
          this.show = true;
          this.switchIcon = !this.switchIcon
        },
        handleClick1(){
          this.show1 = true;
          this.switchIcon1 = !this.switchIcon1
        },
         checkboxChange(n) {
           console.log('change', n);
          },
          changeLog(e) {
            console.log('change事件:', e);
        },
  		}
  	}
</script>

<style lang="scss" scoped>
  .nav-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dfdfdf;
    box-shadow: 0 5px 10px -8px #dfdfdf inset;
  }
  .search-box{
    width: 100%;
    display: flex;
    justify-content: center;
    .search-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      width: 90%;
      padding: 5px;
      height: 30px;
      background-color: #dddddd;
      border-radius: 5px;
    }
    .rain-input{
      // width: 30%;
    }
  }
  .time-select{
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    .noClick{
      pointer-events: initial;
    }
    .jiangyu,.rain-time{
      display: flex;
      column-gap: 5px;
      margin-right: 20px;
      
    }
    .jiangyu{
      position: relative;
      .jiangyu-dropdown,{
        position: absolute;
        background-color: #fff;
        width: 100vw;
        left: -72px;
        top: 35px;
        .active{
          color:#02a7f0
        }
        view{
          margin-top: 10px;
        }
      }
    }
    .rain-time{
       position: relative;
       .rain-time-dropdown{
         position: absolute;
         background-color: #fff;
         width: 100vw;
         left: -230px;
         top: 35px;
         .active{
           color:#02a7f0
         }
         view{
           margin-top: 10px;
         }
       }
    }
  }
  .first-btn{
    margin-right: 5px;
    background-color: #f2f2f2;
  }
  .second-btn{
    background-color: #f2f2f2;
  }
  .bottom-btn1,.bottom-btn2{
    width: 30%;
  }
  .bottom-btn1{
    margin-left: 130px;
  }
  .bottom-btn2{
    margin-right: -12px;
  }
</style>