<template>
  <view>
    <view class="search-bar">
      <view class="time-ranger">
        <uni-datetime-picker type="daterange" v-model="tm" @change="handleRanger" :clear-icon="false"
          rangeSeparator="至"></uni-datetime-picker>
      </view>
      <view class="select-bar">
        <uni-data-select v-model="value" :localdata="list" @change="change" :clear="false">
        </uni-data-select>
      </view>
    </view>
    <div class="tableHead">
      <div class="td t1">监测点</div>
      <div class="td t2">监测时间</div>
      <div class="td t3">x方向(mm)</div>
      <div class="td t4">y方向(mm)</div>
      <div class="td t5">z方向(mm)</div>
    </div>
    <div class="tableBody">
      <div v-for="(item, index) in tableData" class="tableRow">
        <div class="td t1">{{ }}</div>
        <div class="td t2">{{ item.tm ? item.tm.slice(5, 16) : "" }}</div>
        <div class="td t3">{{}}</div>
        <div class="td t4">{{}}</div>
        <div class="td t5">{{}}</div>
      </div>
      <div :style="{ height: '80px' }">
      </div>
    </div>
  </view>

</template>

<script>
import moment from "moment"
const stm = moment().subtract(3, 'days').format("YYYY-MM-DD");
const etm = moment().format("YYYY-MM-DD");
export default {
  props: {
    tableData: {
      type: Array,
      default: [],
    }
  },
  data() {
    return {
      tm: [stm, etm],
      list: [],
      value: "",
    }
  },
  methods: {
    handleRanger(e) {
      this.tm = [...e]
    },
    change(e) {
      this.value = e;
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar {
  display: flex;
  margin: 5px 0;
  align-items: center;
}

.time-ranger {
  flex: 1;
}

.select-bar {
  width: 30%;
  margin-left: 1%;
}

.tableHead {
  width: 100%;
  margin-top: 5px;
  height: 50px;
  background-color: #e4f2fe;
  display: flex;
  color: #208FEE;
}

.tableBody {
  width: 100%;
  height: calc(60vh - 214px);
  // background-color: #f7f7f7; //#ffffff;
  overflow-y: scroll;
}

.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: 20%;
}

.t2 {
  width: 20%;
}

.t3 {
  width: 20%;
}

.t4 {
  width: 20%;
}

.t5 {
  width: 20%;
}
</style>