<template>
  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
    <a-card title="监测数据" :headStyle="{'padding':'0px 5px'}"
            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
             style="width: 30px;height: 30px">
      </div>

      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
             style="width: 30px;height: 30px">
      </div>
      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
      </a-table>
    </a-card>
  </div>
</template>

<script>

const columns = [
  {
    title: "站点名称",
    dataIndex: 'place'
  },
  {
    title: '类别',
    dataIndex: 'placeFunctionalAreaCategory',
  },
  {
    title: 'Aqi',
    dataIndex: 'avgAqi',
  },
  {
    title: '点位级别',
    dataIndex: 'attributes',
  }
];
export default {
  props: {
    rowData: {
      type: Array
    }
  },
  methods: {
    showTable: function (type) {
      this.type1 = type
    }
  },
  data() {
    return {
      columns,
      pagination: {
        total: 0
      },
      type1: 0
    };
  },
}
</script>

<style scoped>
.map-table-container {
  box-sizing: border-box;
  width: 500px;
  padding: 10px;
  position: absolute;
  bottom: 0px;
  transition: right 0.8s;
}

::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
  padding: 3px 3px;
}

.left-close-button {
  width: 40px;
  height: 40px;
  background-color: #fff;
  position: absolute;
  left: -40px;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
