<template>
  <view class="tjsj-box">
   	<uni-row class="tjsj-row" :width="700">
   					<uni-col :span="12">
   						<view class="first-row">近1h雨量(mm)</view>
   					</uni-col>
   					<uni-col :span="12">
   						<view class="second-row">{{tableData.h1||0}}</view>
   					</uni-col>
            <uni-col :span="12">
            	<view class="first-row">近3h雨量(mm)</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="second-row">{{tableData.h3||0}}</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="first-row">近6h雨量(mm)</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="second-row">{{tableData.h6||0}}</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="first-row">近12h雨量(mm)</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="second-row">{{tableData.h12||0}}</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="first-row">近24h雨量(mm)</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="second-row">{{tableData.h24||0}}</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="first-row">近48h雨量(mm)</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="second-row">{{tableData.h48||0}}</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="first-row">今日雨量(mm)</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="second-row">{{tableData.today||0}}</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="first-row">昨日雨量(mm)</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="second-row">{{tableData.yesterdayDrp||0}}</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="first-row">本月雨量(mm)</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="second-row">{{tableData.monthDrp||0}}</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="first-row">本年雨量(mm)</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="second-row">{{tableData.yearDrp||0}}</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="first-row">本年降雨天数</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="second-row">{{tableData.yearDrpDay||0}}/{{days}}</view>
            </uni-col>
           <uni-col :span="12">
            	<view class="first-row"  style="border-bottom: 1px solid #dfdfdf;">本年最大日雨量(mm)</view>
            </uni-col>
            <uni-col :span="12">
            	<view class="second-row" style="display: flex; justify-content: center;border-bottom: 1px solid #dfdfdf;">
              <text>{{tableData.maxDrp||0}}</text>
              <text style="color: #E69224;">({{maxDrpTime}})</text>
              </view>
            </uni-col>
           
   				</uni-row>
    <view style="height:150px"></view>      
  </view>
</template>

<script>
  import moment from "moment"
  export default {
    data() {
      return {
        tableData:{},
        days:moment().diff(moment().startOf('year'),'days')+1
      }
    },
    computed:{
      maxDrpTime(){
        if(this.tableData.maxDrpTime){
        return moment(this.tableData.maxDrpTime).format("YYYY-MM-DD")
        }
      }
    },
    methods: {
      async getTableData(){
        try{
          const {data} = await uni.$http.get(
            "/gunshiApp/ykz/attResBase/rainBasinDivision/queryStPptnDetails/stcd?stcd=716164061")
          if(data.code == 200){
            this.tableData = {...data.data};
          }
        }catch(e){
          uni.$showMsg()
        }
      }
    },
    mounted() {
      this.getTableData()
    }
  }
</script>

<style lang="scss" scoped>
  .tjsj-box{
    max-height: 100vh;
    .tjsj-row{
      .first-row{
        line-height: 40px;
        text-align: center;
        border-top: 1px solid #dfdfdf;
        border-left: 1px solid #dfdfdf;
      }
      .second-row{
        line-height: 40px;
        text-align: center;
        border-top: 1px solid #dfdfdf;
        border-left: 1px solid #dfdfdf;
        border-right: 1px solid #dfdfdf;
      }
    }
  }
</style>
