<template>
   <div class="table_div">
              <div class="table_cur">
                <table style="width:100%;display:block">
                  <tr>
                    <th style="width: 11%;">
                      序号
                      </th>
                    <th style="width: 22%">
                     站名
                    <th style="width: 22%;">
                      监测时间
                      </th>
                    <th style="width: 25%;" >
                      实时水位(m)
                      </th>
                      <th style="width: 22%;" >
                        超汛限(m)
                        </th>
                      </tr>
                  <div class="scroll-table">
                <tr v-for="(item, index) in newList" :key="index">
                      <td style="width: 10%">{{ index + 1 }}</td>
                      <td style="width: 23%;color: #3399ef;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" @click="jumpDetail(item)">{{ item.stnm }}</td>
                      <td style="width: 22%">{{item.tm}}</td>
                      <td style="width: 25%; position: relative;" >
                        <text :class="{'active1':item.flState	 == 1,'active2':item.desState == 1,'active3':item.calState}">{{ item.rz.toFixed(2) }}</text>
                       <text v-if="item.state == 1" 
                       style="position: absolute; top: 0px; right: 0; color: #FF7D7D;font-size:18px;">↑</text>
                       <text v-else-if="item.state == 2" style="position: absolute;
                       top:0px;right: 0; color: #32E48E; font-size: 18px;">↓</text>
                      </td>
                      <td style="width: 22%">{{item.afsltdz ? item.afsltdz.toFixed(2):'-'}}</td>
                    </tr>
                    <div style="height:125px"></div>
                  </div>
                </table>
              </div>
            </div>

</template>

<script>
  import moment from "moment"
   export default {
     props:{
       list:{
         type:Array,
         default:[],
       },
       height:{
        type:Number,
        default:0,
       }
     },
     computed:{
       newList(){
         if(this.list.length > 0){
           let newData = this.list.map(item=>({...item,tm:moment(item.tm).format("MM-DD HH:mm")}))
           return newData
         }
       }
     },
     methods:{
       jumpDetail(params){
         console.log(params);
         uni.navigateTo({
           url:`/pages/skDetail/skDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&afsltdz=${params.afsltdz}&flLowLimLev=${params.flLowLimLev}&desFloodLev=${params.desFloodLev}&calFloodLev=${params.calFloodLev}&resCode=${params.resCode}`
         })
       }
     }
   }
</script>

<style lang="scss" scoped>
  .table_div {
    height: 100%;
    max-width: calc(100% - 0px);
    max-height: calc(100vh);
    flex: 1;
    padding-top: 0px;
    overflow-x: scroll;
    padding: 0 10px;

  }
  /*table样式*/
  .table_cur {
    width: 100%;
    empty-cells: show;
    border-collapse: collapse;
    font-size: 14px;
  }
  .table_cur tr {
    display: flex;
    line-height: 80rpx;
  }
  .scroll-table{
    height: calc(100vh - 125px);
    overflow-y: auto;
    width:'100%'
  }
  .table_cur th {
    height: 80rpx;
    color: #3399ef;
    background: #e1f3ff;
    font-size: 14px;
    // font-weight: bold;
    padding: 0px 10px;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center !important;
  }
  
  .table_cur td {
    height: 65rpx;
    // border-bottom: 1px solid #d8ddeb;
    font-size: 14px;
    color: #2f4056;
    padding: 0 10px;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center !important;
  }
  .active2{
    color: #f59a23;
  }
  .active1{
    color: #c4c415;
  }
  .active3{
    color: #d9001b;
  }
  /*table样式 end*/
</style>