<template>
  <div class="app-container calendar-list-container">
    <!-- 顶部导航栏 -->
    <div class="avue-layout">
      <div class="avue-left">
        <!-- 左侧导航栏 -->
        <logo />
      </div>
    </div>
    <div class="avue-header">
      <top />
    </div>

    <basic-container>
      <template>
        <!-- 内容盒子 -->
        <div class="table-box">
          <el-table
            :data="tableData"
            style="width: 100%"
            :show-header="false"
            @row-click="toDetail"
          >
            <el-table-column>
              <template slot-scope="scope">
                <div class="line-box">
                  <div class="title point">{{ scope.row.address }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="date" width="300"> </el-table-column>
          </el-table>
        </div>

        <div class="btmpagiation">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="100"
            >
            </el-pagination>
          </div>
        </div>
      </template>
    </basic-container>
  </div>
</template>

<script>
import top from "@/page/index/top/";
import logo from "@/page/index/logo";
export default {
  components: {
    top,
    logo,
  },
    name: 'Index',
  provide() {
    return {
      Index: this
    };
  },
  data() {
    return {
      currentPage4: 1,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          tag: "家",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
          tag: "公司",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
          tag: "家",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
          tag: "公司",
        },
      ],
    };
  },
  methods: {
    // 跳转详情页面
    toDetail(item) {
      console.log(item, "123");
      this.$router.push("/message/detail");
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>


<style lang="scss" scoped>
.btmpagiation {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.line-box {
  // padding: 0 0 0 10px;
  .title {
    display: flex;
    align-items: center;
  }

  .point {
    &::before {
      content: "";
      display: block;
      margin: 0 10px 0 0;
      width: 7px;
      height: 7px;
      background: rgb(253, 1, 1);
      border-radius: 50%;
    }
  }
}
</style>