<template>
  <div class="table_div">
              <div class="table_cur">
                <table style="width:100%;display:block">
                  <tr>
                    <th style="width: 40%;">
                      监测时间
                      </th>
                    <th style="width: 40%;">测点编号</th>
                    <th style="width: 20%;">有无白蚁</th>
                  </tr>
                  <!-- style="max-height: 480px; overflow-y: auto" -->
                  <div class="scroll-table">
                <tr v-for="(item, index) in tableData" :key="index">
                      <td style="width: 40%;">{{item.obDate}}</td>
                      <td style="width: 40%;">{{item.mnNo}}</td>
                      <td style="width:20%;"><span :class="item.status === 1 ? 'has-ant' : 'no-ant'">{{ simpleData(item.status) }}</span></td>
                    </tr>
                    <div style="height:180px"></div>
                  </div>
                </table>
              </div>
            </div>

</template>

<script>
  import moment from "moment"
   export default {
     props:{
       tableData:{
         type:Array,
         default:[],
       }
     },
     methods: {
          simpleData(status){
           if(status === 1) {
             return '有'
           } else if(status === 0) {
             return '无'
           } else {
             return ''
           }
         }
     },
   }
</script>

<style lang="scss" scoped>
  .table_div {
    height: 100%;
    max-width: calc(100% - 0px);
    // max-height: calc(80vh);
    flex: 1;
    padding-top: 0px;
    // overflow-x: scroll;
  }
  /*table样式*/
  .table_cur {
    width: 100%;
    empty-cells: show;
    border-collapse: collapse;
    font-size: 14px;
  }
   .scroll-table{
    height: calc(100vh - 180px);
    overflow-y: auto;
    width:'100%'
  }
  .table_cur tr {
    display: flex;
    line-height: 75rpx;
  }
  .table_cur th {
    height: 85rpx;
    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;
  }

  .has-ant {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background-color: red;
    color: white;
    text-align: center;
    font-size: 12px;
  }
  .no-ant {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background-color: green;
    color: white;
    text-align: center;
    font-size: 12px;
  }
  /*table样式 end*/
</style>