<template>
  <view class="txjc-box">
    <view class="time-ranger">
      <uni-datetime-picker  type="datetimerange" v-model="tm" @change="handleRanger"></uni-datetime-picker>
      <view class="search-btn" @click="searchHandle">
        搜索
      </view>
    </view>
    <view class="pic-box" style="margin-top: 20px; position: relative; height: 800px;">
         <!-- <u-album :urls="list" singleSize="360" rowCount="1"></u-album> -->
         <u-image :src="list[current]" width="380" height="400" mode="scaleToFill" :lazy-load="true" @click="previewImage"></u-image>
         <image src="../../../static/images/icon.png"  @click="handleLeft"   class="icon-left"></image>
         <image src="../../../static/images/icon.png" @click="handleRight" class="icon-right"></image>
    </view>
  </view>
</template>

<script>
  import moment from "moment"
  const stm = moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm:ss");
  const etm =  moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm:ss");
  export default {
    props:{
      source:String,
      resCode:String,
    },
    data() {
      return {
        tm:[stm,etm],
        list:[],
        current:0
      }
    },
    methods: {
      handleLeft(){
        if(this.current > 0){
          this.current -= 1;
        }else{
          uni.$showMsg("已经是第一张图片了")
        }
      },
      handleRight(){
        if(this.list.length > this.current){
          this.current += 1;
        }else{
          uni.$showMsg("已经是最后一张图片了")
        }
      },
      // 预览图片
      previewImage(){
        uni.previewImage({
          urls:this.list
        })
      },
      handleRanger(e){
        this.tm = [...e]
      },
      // 搜索
        searchHandle(){
          this.getData()
          
        },
        async getData(){
          try{ 
            const {data} = await uni.$http.post(
            "/gunshiApp/xfflood/river/water/image/info",
            {
             source:this.source,
             resCode:this.resCode,
             stm:this.tm[0],
             etm:this.tm[1],
             "pageSo": {
                 "pageSize": 10,
                 "pageNumber": 1
               }
            })
            if(data.code == 200){
              let newList = data.data.records.map(item =>item.imgPath)
              this.list = [...newList]
            }
          }catch(e){
           uni.$showMsg()
          }
        },
    },
    mounted() {
      this.getData()
    }
  }
</script>

<style lang="scss" scoped>
  .txjc-box{
    .time-ranger{
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .search-btn{
        margin: 3px 0 0 5px;
        color: #3399ef;
      }
    }
    .icon-left{
      position: absolute;
      top: 23%;
      transform: translateY(-50%);
      left: 0;
      width: 50px;
      height: 50px;
    }
    .icon-right{
      position: absolute;
      top: 23%;
      transform: translateY(-50%) rotate(-180deg);
      right: 0;
      width: 50px;
      height: 50px;
    }
  }
</style>
