<template>
  <div>
    <div class="content-head">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>平台交货管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看运输需求</el-breadcrumb-item>
      </el-breadcrumb>
      <h3>查看运输需求</h3>
      <h5>查看运输需求</h5>
    </div>
    <div class="detail">
      <div>
        <div class="describe">管理项目</div>
        <ul class="detail-item ">
          <li>
            <div>项目名称</div>
            <div>大型投标项目</div>
          </li>
        </ul>
      </div>
      <!-- 采购信息 -->
      <div>
        <div class="describe">采购商信息</div>
        <ul class="detail-item flex-between">
          <li>
            <div>采购商</div>
            <div>谢天</div>
          </li>
          <li>
            <div>联系人</div>
            <div>马化腾</div>
          </li>
          <li>
            <div>联系电话</div>
            <div>18755555555</div>
          </li>
          <li>
            <div>运输地址</div>
            <div>杭州滨江</div>
          </li>
          <li>
            <div>详细地址</div>
            <div>杭州滨江</div>
          </li>
        </ul>
      </div>
      <!-- 运输信息 -->
      <div>
        <div class="describe">运输信息</div>
        <ul class="detail-item flex-between">
          <li>
            <div>供应商</div>
            <div>谢天</div>
          </li>
          <li>
            <div>联系人</div>
            <div>马化腾</div>
          </li>
          <li>
            <div>联系电话</div>
            <div>18755555555</div>
          </li>
          <li>
            <div>运输批次</div>
            <div style="text-align: center;">1</div>
          </li>
          <li>
            <div>运输地址</div>
            <div>杭州滨江</div>
          </li>
          <li>
            <div>详细地址</div>
            <div>杭州滨江</div>
          </li>
        </ul>
      </div>
      <!-- 运输批次 -->
      <div v-for="(item,index) in transportlist" :key="index" class="transport">
        <div class="describe">运输信息{{ index+1 }} <span>运达时间:2015-10-02 09:30</span> </div>
        <dataTable :table-data="item.tableData" :columns="item.columns" :page-obj="false" :margin-top="0" :margin-bottom="0">
        </dataTable>
      </div>
    </div>
  </div>
</template>

<script>
import dataTable from '@components/dataTable.vue'
export default {
  name: 'transportDemand',
  components: {
    dataTable
  },

  data() {
    return {
      navIndex: '0',
      transportlist: [{
        tableData: [{
          code: '001',
          name: '大白菜',
          number: '100',
          meter: '斤',
          brand: '天然',
          specification: '大型',
          total: '200.00',
          remark: '空'
        },
        {
          code: '001',
          name: '大白菜',
          number: '100',
          meter: '斤',
          brand: '天然',
          specification: '大型',
          total: '200.00',
          remark: '空'
        },
        {
          code: '001',
          name: '大白菜',
          number: '100',
          meter: '斤',
          brand: '天然',
          specification: '大型',
          total: '200.00',
          remark: '空'
        }
        ],
        columns: [{
          label: '标的编码',
          prop: 'code'
        },
        {
          label: '标的名称',
          prop: 'name'
        },
        {
          label: '数量',
          prop: 'number'
        },
        {
          label: '计量单位',
          prop: 'meter'
        },
        {
          label: '品牌',
          prop: 'brand'
        },
        {
          label: '规格型号',
          prop: 'specification'
        },
        {
          label: '总价(元)',
          prop: 'total'
        },
        {
          label: '备注',
          prop: 'remark'
        }
        ] // 操作列
      }, {
        tableData: [{
          code: '001',
          name: '大白菜',
          number: '100',
          meter: '斤',
          brand: '天然',
          specification: '大型',
          total: '200.00',
          remark: '空'
        },
        {
          code: '001',
          name: '大白菜',
          number: '100',
          meter: '斤',
          brand: '天然',
          specification: '大型',
          total: '200.00',
          remark: '空'
        },
        {
          code: '001',
          name: '大白菜',
          number: '100',
          meter: '斤',
          brand: '天然',
          specification: '大型',
          total: '200.00',
          remark: '空'
        }
        ],
        columns: [{
          label: '标的编码',
          prop: 'code'
        },
        {
          label: '标的名称',
          prop: 'name'
        },
        {
          label: '数量',
          prop: 'number'
        },
        {
          label: '计量单位',
          prop: 'meter'
        },
        {
          label: '品牌',
          prop: 'brand'
        },
        {
          label: '规格型号',
          prop: 'specification'
        },
        {
          label: '总价(元)',
          prop: 'total'
        },
        {
          label: '备注',
          prop: 'remark'
        }
        ] // 操作列
      }]
    }
  },
  methods: {

  }
}
</script>

<style scoped>
	.transport span {
		margin-left: 200px;
	}

	.content-head h3 {
		margin-top: 20px;
	}

	.detail>div {
		background: #fff;
		margin-bottom: 20px;
	}

	.describe {
		margin-bottom: 0px;
	}

	.detail-item {
		margin: 20px
	}

	.content>div {
		margin-bottom: 20px;
	}


	.detail-item>li>div:last-child {
		padding: 10px 0
	}

	.detail-item {
		width: 60%;
		flex-wrap: wrap;
	}
</style>
