<template>
  <div class="basic-inner">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="index" width="70" label="序号"> </el-table-column>
      <el-table-column prop="buildingName" label="楼宇名称"> </el-table-column>
      <el-table-column prop="contact_person" label="联系人"> </el-table-column>
      <el-table-column prop="contact_phone" label="联系方式"> </el-table-column>
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.buildingName == null ? false : true"
            size="mini"
            type="text"
            style="color: #2ea8e6"
            >查看</el-button
          >
          <el-button
            v-show="scope.row.buildingName == null ? false : true"
            size="mini"
            type="text"
            style="color: #2ea8e6"
            >编辑</el-button
          >
          <el-button
            v-show="scope.row.buildingName == null ? false : true"
            size="mini"
            type="text"
            style="color: #2ea8e6"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <page :paginationData="paginationData"></page>
    </div>
  </div>
</template>

<script>
import page from "@/components/pagination/index";
export default {
  components: { page },
  data() {
    return {
      tableData: [
        {
          buildingName: "A",
          contact_person: "张三",
          contact_phone: "12345678901",
        },
        {
          buildingName: "B",
          contact_person: "张三",
          contact_phone: "12345678901",
        },
        {
          buildingName: "C",
          contact_person: "张三",
          contact_phone: "12345678901",
        },
      ],
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 30,
        currentChange: (val) => {
          this.getTableData(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
    };
  },
  methods: {
    getTableData(val) {},
    handleSizeChange(val) {},
    handleSelectionChange() {},
  },
};
</script>
<style lang="less" scoped>
.basic-inner {
  width: 100%;
  height: 100%;
  .el-table {
    height: calc(96% - 80px);
    width: 95% !important;
    margin-top: 20px;
    margin-left: 2.5%;
    margin-right: 2.5%;
    font-size: 0.95rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #b2b2b2;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #f0f2f2;
    /deep/th {
      background: #f7fbff;
    }
    /deep/.el-checkbox {
      color: #b2b2b2;
      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #2ea8e6;
      }

      .el-checkbox__input.is-checked .el-checkbox__inner::after {
        width: 70%;
        height: 70%;
        background: #2ea8e6;
        border-radius: 0;
        transform: rotate(0deg) scaleY(1);
        position: static;
        // border: 1px solid #8DD9FF;
      }

      .el-checkbox__inner {
        border: 1px solid #8dd9ff;
        background: rgba(0, 170, 255, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        &::after {
          transition: 0ms;
        }
      }

      .el-checkbox__label {
        padding-left: 0;
        font-size: 15px;
        position: absolute;
        top: 1px;
        left: 25px;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 80px;
    position: relative;
  }
}
</style>
