<template>
  <div >
    <div class="content">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>平台交货管理</el-breadcrumb-item>
        <el-breadcrumb-item>平台交货列表</el-breadcrumb-item>
      </el-breadcrumb>
      <ul class="navs flex">
        <li v-for="(item,index) in navs" :key="index" :class="navIndex==index?'active':''" >{{ item }}</li>
      </ul>
      <dataTable :table-data="tableData" :columns="columns" :page-obj="pageObj" >
        <el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleSee(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </dataTable>
    </div>
  </div>
</template>

<script>
import dataTable from '@components/dataTable.vue'
export default {
  name: 'bondList',
  components: {
    dataTable
  },
  data() {
    return {	
      navs: ['平台交货列表'],
      navIndex: '0',
      tableData: [{
        supplier: '阿里',
        purchaser: '腾讯',
        total: '100',
        batch: '1',
        date: '2017-10-01 12：00',
        state: '合同未生效'
      },
      {
        supplier: '阿里',
        purchaser: '腾讯',
        total: '100',
        batch: '1',
        date: '2017-10-01 12：00',
        state: '合同已生效'
      },
      {
        supplier: '阿里',
        purchaser: '腾讯',
        total: '100',
        batch: '1',
        date: '2017-10-01 12：00',
        state: '合同已撤回'
      }],
      columns: [{
        label: '供应商',
        prop: 'supplier'
      },
      {
        label: '采购商',
        prop: 'purchaser'
      },
      {
        label: '运输商品总价',
        prop: 'total'
      },
      {
        label: '运输批次',
        prop: 'batch'
      },
      {
        label: '最近一次配送时间',
        prop: 'date',
        sortable: true
      },
      {
        label: '状态',
        prop: 'state'
      },
      {
        slot: 'operate'
      }
      ],
     
      pageObj: {
        size: 10,
        total: 1,
        currentPage: 1,
        sizes: [100, 200, 300],
        func: (currentPage) => {
          this.pageTurning(currentPage)
        }
      }
    }
  },
  methods: {
    handleSee() {
      this.$router.push('/admin/delivery/transportDemand')
    }
  }
}
</script>

<style scoped>
	.navs{
		margin-top: 20px;
	}
</style>
