<template>
  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-700px'}">
    <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:700}" :pagination="false">
      </a-table>
    </a-card>
  </div>
</template>

<script>

const columns = [
  {
    title: "区域",
    dataIndex: "col1",
  },
  {
    title: "南宁市",
    align: "center",
    children: [
      {
        title: "昼间",
        align: "center",
        dataIndex: "colDNAN_NING_SHI",
      },
      {
        title: "夜间",
        align: "center",
        dataIndex: "colNNAN_NING_SHI",
      },
    ],
  },
  {
    title: "横州市",
    align: "center",
    children: [
      {
        title: "昼间",
        align: "center",
        dataIndex: "colDHENG_ZHOU_SHI",
      },
      {
        title: "夜间",
        align: "center",
        dataIndex: "colNHENG_ZHOU_SHI",
      },
    ],
  },

  {
    title: "宾阳县",
    align: "center",
    children: [
      {
        title: "昼间",
        align: "center",
        dataIndex: "colDBIN_YANG_XIAN",
      },
      {
        title: "夜间",
        align: "center",
        dataIndex: "colNBIN_YANG_XIAN",
      },
    ],
  },
  {
    title: "上林县",
    align: "center",
    children: [
      {
        title: "昼间",
        align: "center",
        dataIndex: "colDSHANG_LIN_XIAN",
      },
      {
        title: "夜间",
        align: "center",
        dataIndex: "colNSHANG_LIN_XIAN",
      },
    ],
  },
  {
    title: "隆安县",
    align: "center",
    children: [
      {
        title: "昼间",
        align: "center",
        dataIndex: "colDLONG_AN_XIAN",
      },
      {
        title: "夜间",
        align: "center",
        dataIndex: "colNLONG_AN_XIAN",
      },
    ],
  },
  {
    title: "马山县",
    align: "center",
    children: [
      {
        title: "昼间",
        align: "center",
        dataIndex: "colDMA_SHAN_XIAN",
      },
      {
        title: "夜间",
        align: "center",
        dataIndex: "colNMA_SHAN_XIAN",
      },
    ],
  },
];
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: 700px;
  padding: 10px;
  position: absolute;
  top: 80px;
  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;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
