<template>
  <div class="statistics">
    <div class="header">
      <div class="header-left">
        <el-button-group>
          <el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
        </el-button-group>
      </div>
      <div class="header-right">
        <el-button
          :type="multipleSelection.length ? 'primary' : 'info'"
          :disabled="!multipleSelection.length"
          @click="delData"
        >删除</el-button>
        <el-button type="primary" @click="refresh">刷新</el-button>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button
          type="primary"
          @click="exportData"
        >导出</el-button>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      class="statistics-table"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      :row-style="{ height: '50px' }"
      :header-cell-style="{background:'#eaf1fe',color:'#000', fontWeight: 700, height: '50px'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="name" label="铁路名称" align="center" />
      <el-table-column prop="start" label="铁路起点站名" align="center" />
      <el-table-column
        prop="end"
        label="铁路终点站名"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="long"
        label="铁路总长度（公里）"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="action"
        label="详细信息"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="handleView(row)"
          >查看</el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :limit="searchForm.pageSize"
      :page="searchForm.pageNum"
      :total="total"
      class="pagination"
      @pagination="handlePageChange"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10
      },
      total: 10,
      activeName: '0',
      tabs: [
        {
          label: '铁路线',
          key: '0'
        },
        {
          label: '站点',
          key: '1'
        },
        {
          label: 'FSU',
          key: '2'
        },
        {
          label: '检测设备',
          key: '3'
        },
        {
          label: '漏缆',
          key: '4'
        },
        {
          label: '天馈线',
          key: '5'
        }
      ],
      tableData: [
        {
          name: '张呼铁路客运专线',
          start: '张家口',
          end: '呼和浩特',
          long: 286.8
        },
        {
          name: '张呼铁路客运专线',
          start: '张家口',
          end: '呼和浩特',
          long: 286.8
        },
        {
          name: '张呼铁路客运专线',
          start: '张家口',
          end: '呼和浩特',
          long: 286.8
        },
        {
          name: '张呼铁路客运专线',
          start: '张家口',
          end: '呼和浩特',
          long: 286.8
        },
        {
          name: '张呼铁路客运专线',
          start: '张家口',
          end: '呼和浩特',
          long: 286.8
        },
        {
          name: '张呼铁路客运专线',
          start: '张家口',
          end: '呼和浩特',
          long: 286.8
        },
        {
          name: '张呼铁路客运专线',
          start: '张家口',
          end: '呼和浩特',
          long: 286.8
        },
        {
          name: '张呼铁路客运专线',
          start: '张家口',
          end: '呼和浩特',
          long: 286.8
        },
        {
          name: '张呼铁路客运专线',
          start: '张家口',
          end: '呼和浩特',
          long: 286.8
        },
        {
          name: '张呼铁路客运专线',
          start: '张家口',
          end: '呼和浩特',
          long: 286.8
        }
      ],
      multipleSelection: []
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      return rowIndex % 2 === 0 ? '' : 'single-row'
    },
    changeType(item) {
      this.activeName = item.key
    },
    delData() {},
    refresh() {},
    query() {},
    exportData() {},
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleView() {},
    handlePageChange(pageData) {
      this.searchForm.pageSize = pageData.size
      this.searchForm.pageNum = pageData.page
    }
  }
}
</script>

<style lang="scss" >
.el-table th.el-table__cell>.cell {
      color: #747679;
}
.statistics-table {
  padding-top: 50px;
  .single-row {
    background: #f1f6ff;
  }
}
.statistics {
  padding: 10px;
  .header {
    display: flex;
    justify-content: space-between;
    .header-right {
    }
  }
}
</style>