<template>
  <view class="" style="padding: 5px;">
    <view class="swiper-content" v-if="imgList.length != 0">
      <text class="num">{{nowNum}}/{{totalNum}}</text>
      <u-swiper :list="imgList" height='230px' @change="change" imgMode="scaleToFill" keyName="imgPath"></u-swiper>
      <text class="time">{{imgTime}}</text>
    </view>
     <view
				style="display: flex;align-items: center;justify-content: center;background-color: #fff;"
				v-else>
				<image src="../../../static/empty.png" mode=""></image>
			</view>
    <view class="update-time">
      <text>更新时间</text>
      <text>{{info.tm}}</text>
    </view>
    <view class="sk-info">
      <view class="sk-first-row">
        <view class="first-item">
          <text>{{info.rz}}米</text>
          <text>水位</text>
        </view>
        <view class="first-item">
          <text>{{info.nowCap}}万m³</text>
          <text>蓄水量</text>
        </view>
        <view class="first-line"></view>
        <image style="width: 20px; height: 20px;" src="../../../static/images/first.jpg"></image>
      </view>
      <view class="sk-first-row">
        <view class="first-item">
          <text>{{info.crestElev}}米</text>
          <text>坝顶高程</text>
        </view>
        <view class="first-item">
          <text>{{info.flLowLimLev}}万m³</text>
          <text>汛限水位</text>
        </view>
     <view class="first-item">
       <text>{{info.totCap}}万m³</text>
       <text>总库容</text>
     </view>
      </view>
   <!--   <view class="first-extra-row">
        <text>坝顶高程{{info.crestElev}}米</text>
        <text>汛限水位{{info.flLowLimLev}}米</text>
        <text>总库容{{info.totCap}}万m³</text>
        
      </view> -->
      <view class="sk-second-row">
        <view class="first-item">
          <text>{{rainInfo.today || '-'}}毫米</text>
          <text>今日降雨</text>
        </view>
        <view class="first-item">
          <text>{{rainInfo.yesterdayDrp}}毫米</text>
          <text>昨日降雨</text>
        </view>
        <view class="first-line" style="margin-right:17px"></view>
        <image style="width: 20px; height: 20px;" src="../../../static/images/second.jpg"></image>
      </view>
    </view>
    <view class="rain-box">
      <view class="rain-title">
        <view class="line-icon"></view>
        <view>水雨情过程线</view>
      </view>
      <view class="time-select">
        <view class="time-ranger">
          <view class="start-time">
            <text>开始时间</text>
            <text @click="showTime=true" style="margin-left:10%;color:#3399ef">{{stm}}</text>
          </view>
          <view class="end-time">
            <text>结束时间</text>
            <text @click="showTime1=true" style="margin:0 10%;color:#3399ef">{{etm}}</text>
            <view class="search-btn" @click="searchHandle">
              搜索
            </view>
          </view>

        </view>
      </view>
      <view class="switch-btn">
        <u-subsection :list="subsectionList" :current="curNow" mode="subsection" @change="subsectionChange">
        </u-subsection>
      </view>
      <view class="show-content">
        <view style=" height: 500px; overflow-y: auto; padding:0" v-if="curNow == 0 && jcTableData.length !=0">
          <qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
        </view>
        <view style="display: flex;align-items: center;justify-content: center;background-color: #fff;" v-if="curNow == 0 &&jcTableData.length ==0">
          <image src="../../../static/empty.png" mode=""></image>
        </view>
        <JcTable v-if="curNow == 1" :tableData='jcTableData' />
        <Tjsj v-if="curNow == 2" />
      </view>
    </view>

    <u-datetime-picker :show="showTime" v-model="startTime" mode="datetime" @confirm="handleStartTime"
      @cancel="showTime=false"></u-datetime-picker>
    <u-datetime-picker :show="showTime1" v-model="endTime" mode="datetime" @confirm="handleEndTime"
      @cancel="showTime1=false"></u-datetime-picker>
  </view>

</template>
<script>
  import moment from 'moment'
  import Tjsj from "../../skDetail/tjsj/tjsj.vue"
  import JcTable from "../../skDetail/jcsj/jcsjTable.vue"
  import drpOption from "../../skDetail/jcsj/chartOption.js"
  const stm = moment().subtract(7, 'days').set({
    minute: 0,
    second: 0
  }).format("YYYY-MM-DD HH:mm");
  const etm = moment().set({
    minute: 0,
    second: 0
  }).format("YYYY-MM-DD HH:mm");
  const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
  export default {
    components: {
      Tjsj,
      JcTable
    },
    data() {
      return {
        startTime: stm,
        endTime: etm,
        imgList: [],
        nowNum: 1,
        totalNum: 0,
        imgTime: '2024-08-12 11:00',
        info: '',
        rainInfo: {},
        stm,
        etm,
        showTime: false,
        showTime1: false,
        subsectionList: ['图', '表', '统计值'],
        curNow: 0,
        jcTableData: [],
        chartData: {},
      }
    },

    methods: {
      // 获取监测图像
      async getImgList() {
        try {
          const {
            data
          } = await uni.$http.post(
            "/gunshiApp/tsg/reservoir/water/real/img", {
              resCode: "42120250085"
            })
          if (data.code == 200) {
            const newArr = data.data.map(item => ({
              ...item,
              imgPath: url + item.imgPath
            }))
            this.totalNum = newArr.length;
            this.imgList = [...newArr];
            this.imgTime = this.imgList[0] ?.tm || "2024-08-12 11:00";
            this.nowNum = !newArr.length ? 0 : 1;
          }
        } catch (error) {
          uni.$showMsg();

        }
      },
      // 获取水库水情基本信息
      async getSkinfo() {
        try {
          const {
            data
          } = await uni.$http.post(
            "/gunshiApp/tsg/reservoir/water/list")
          if (data.code == 200) {
            this.info = data.data[0]
          }
        } catch (error) {
          uni.$showMsg();
        }
      },
      // 获取雨量信息
      async getrainInfo() {
        try {
          const {
            data
          } = await uni.$http.get(
            "/gunshiApp/tsg/reservoir/water/detail?stcd=716164061")
          if (data.code == 200) {
            this.rainInfo = data.data;
          }
        } catch (error) {
          uni.$showMsg();
        }
      },

      // 搜索
      async getJcsjData() {
        try {
          const {
            data
          } = await uni.$http.post(
            "/gunshiApp/tsg/reservoir/water/monitor/data", {
              stcd: "716164061",
              stm: moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
              etm: moment(this.etm).format("YYYY-MM-DD HH:mm:ss"),
            })
          if (data.code == 200) {
            this.jcTableData = [...data.data];
          }
        } catch (e) {
          uni.$showMsg();
        }
      },
      searchHandle() {
        this.getJcsjData()
      },
      change(e) {
        this.nowNum = e.current + 1;
        this.imgTime = this.imgList[e.current].tm
      },
      handleStartTime(e) {
        let time = moment(e.value).format("YYYY-MM-DD HH:mm")
        this.stm = time
        this.showTime = false
      },
      handleEndTime(e) {
        let time = moment(e.value).format("YYYY-MM-DD HH:mm")
        this.etm = time;
        this.showTime1 = false
      },
      subsectionChange(e) {
        this.curNow = e
      }
    },
    watch: {
      jcTableData(newV, oldV) {
        if (this.info) {
          this.chartData = {
            ...drpOption(newV, this.info.afsltdz, this.info.flLowLimLev, this.info.desFloodLev, this.info.calFloodLev)
          }
        }
      }
    },
    mounted() {
      this.getImgList();
      this.getSkinfo();
      this.getrainInfo();
      this.getJcsjData();
    },
  }
</script>
<style lang="scss" scoped>
  .swiper-content {
    position: relative;

    .num {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1;
      background-color: #000;
      color: #fff;
      padding: 0 4px;
      border-radius: 6px;
      opacity: .4;
      font-size: 12px;
    }

    .time {
      position: absolute;
      background-color: #000;
      opacity: .4;
      color: #fff;
      bottom: 0;
      width: 100%;
      padding: 4px;
    }
  }

  .update-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid #dfdfdf;
  }

  .sk-info {
    display: flex;
    flex-direction: column;
    padding: 2px 5px;
    margin: 5px 0;

    .sk-first-row,
    .sk-second-row {
      display: flex;
      padding: 5px 10px;
      align-items: center;
      justify-content: space-around;
      background-color: #f2fafc;

      .first-line {
        width: 3px;
        height: 20px;
        background-color: #c6eae6;
      }

      .first-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }

    .sk-second-row {
      margin: 5px 0;
      background-color: #f2f8ff;
      padding: 5px 10px;
    }
  }

  .first-extra-row {
    display: flex;
    padding: 5px;
    justify-content: space-between;
    background-color: #f2fafc;
  }

  .rain-box {
    padding: 5px 0px;

    .rain-title {
      display: flex;
      align-items: center;

      .line-icon {
        width: 3px;
        height: 15px;
        background-color: #0079fe;
        margin-right: 10px;
      }
    }

    .time-ranger {
      margin-bottom: 10px;

      .start-time,
      .end-time {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #dfdfdf;
      }
    }

    .switch-btn {
      width: 50%;
      margin-left: auto;
    }
  }

  .show-content {
    width: 100%;
    padding: 0;
    margin-top: 10px;
  }
</style>