<template>
  <view :style="{height:'100vh',overflow:'hidden'}">
    <u-status-bar></u-status-bar>
    <u-navbar title="水库预警" :autoBack="true" :titleStyle="{fontSize:'18px'}" :height="44" :safeAreaInsetTop="true" leftIconSize="20" leftIconColor="rgb(153, 153, 153)"></u-navbar>
    <view :style="{marginTop:'44px'}">
      <u-tabs class="tabsClass" :list="tabs" :scrollable="true" :activeStyle="{color: 'rgb(37, 157, 255)',fontSize: '16px'}" :inactiveStyle="{color: '#606266',fontSize: '16px'}" lineColor="transparent" itemStyle="height: 44px" @click="onTab"></u-tabs>
      <div class="tableHead">
        <div class="td t1">站名</div>
        <div class="td t2">水位(m)</div>
      </div>
      <div class="tableBody">
        <div class="tableRow" v-for="(item, index) in currentList" :key="index">
          <div class="td t1">{{ item.stnm || '-' }}</div>
          <div class="td t2">{{ item.rzWarn || '-' }}</div>
        </div>
        <div :style="{height:'80px'}"></div>
      </div>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '超保证水位', key: 'overPromise' },
        { name: '超警戒水位', key: 'overWarn' }
      ],
      cur: 0,
      map: {},
    }
  },
  computed: {
    currentList() {
      if (!this.tabs || !this.tabs.length || !this.tabs[this.cur]) return []
      const k = this.tabs[this.cur].key
      const arr = this.map[k]
      return Array.isArray(arr) ? arr : []
    }
  },
  onLoad(options) {
    const { map } = options || {}
    this.map = map ? JSON.parse(decodeURIComponent(map)) : {}
  },
  methods: {
    onTab(item, index) {
      this.cur = item.index
    }
  }
}
</script>

<style lang="scss" scoped>
.tabsClass{
  margin-top: 0;
  height: 44px;
  padding: 0 40px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.tabsClass /deep/ .u-tabs__wrapper__nav__item__text{ white-space: nowrap; }
.tableHead{
  width: 97%;
  margin: 5px auto 0;
  height: 50px;
  background-color: #e4f2fe;
  display: flex;
  color: #208FEE;
}
.tableBody{
  width: 97%;
  height: calc(100vh - 180px);
  background-color: #f7f7f7;
  overflow-y: auto;
}
.tableRow{
  width: 100%;
  height: 46px;
  display: flex;
  border-bottom: 1px solid #eee;
  background-color: #ffffff;
}
.td{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.t1{width: 60%}
.t2{width: 40%}
</style>
