<template>
  <div>
    <!-- 表格start -->
    <el-table
      :data="tableList"
      style="width: 100%"
      :header-cell-style="headCellStyle"
    >
      <!-- <el-table-column
        prop="date"
        label="描述(单位A)"
        width=""
      ></el-table-column>

      <el-table-column label="A相">
        <el-table-column prop="name" label="最小值" width=""></el-table-column>
        <el-table-column prop="province" label="平均值"></el-table-column>
        <el-table-column prop="city" label="最大值"></el-table-column>
        <el-table-column prop="address" label="95%"></el-table-column>
      </el-table-column>

      <el-table-column label="B相">
        <el-table-column prop="name" label="最小值" width=""></el-table-column>
        <el-table-column prop="province" label="平均值"></el-table-column>
        <el-table-column prop="city" label="最大值"></el-table-column>
        <el-table-column prop="address" label="95%"></el-table-column>
      </el-table-column>
      <el-table-column label="C相">
        <el-table-column prop="name" label="最小值" width=""></el-table-column>
        <el-table-column prop="province" label="平均值"></el-table-column>
        <el-table-column prop="city" label="最大值"></el-table-column>
        <el-table-column prop="address" label="95%"></el-table-column>
      </el-table-column> -->
      <el-table-column prop="dataTime" label="时间" width="" />
      <el-table-column label="A相" prop="ia" />
      <el-table-column label="B相" prop="ib" />
      <el-table-column label="C相" prop="ic" />
    </el-table>
    <!-- 表格end -->

    <!-- 分页start -->
    <!-- <div class="paginationBlock">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div> -->

    <!-- 分页end -->
  </div>
</template>
<script>
export default {
  name: 'tableCom',
  props: {
    tableList: Object,
  },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
      ],
    }
  },
  methods: {
    // 表头行的 style 的回调方法
    headCellStyle({ row, column, rowIndex, columnIndex }) {
      row, column
      if (columnIndex !== 0 && rowIndex === 0) {
        return `text-align:center;`
      } else {
        return ''
      }
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    // 表头样式设置
    goVariableList() {
      // 跳转至订单列表页面传参
      this.$router.push({
        path: '../siteManage/variableList/index.vue',
      })
    },
    headClass() {
      return 'background:#FAFAFA;'
    },
  },
}
</script>
