<template>
  <div class="app-container">
    <el-card class="card">
      <div slot="header" class="card-title">订单详情-EC00636U-CNG2506-01</div>
      <div slot="header" class="card-title">订单编号：EC00636U</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions class="margin-top" border title="发货人" :column="2">
            <el-descriptions-item label="发货人">kooriookami</el-descriptions-item>
            <el-descriptions-item label="发货人电话">18100000000</el-descriptions-item>
            <el-descriptions-item label="发货人邮箱">18100000000</el-descriptions-item>
            <el-descriptions-item label="发货人公司名称">
              <el-tag size="small">学校学校学校学校</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions class="margin-top" border title="收货人" :column="2">
            <el-descriptions-item label="收货人">kooriookami</el-descriptions-item>
            <el-descriptions-item label="收货人电话">18100000000</el-descriptions-item>
            <el-descriptions-item label="收货人邮箱">18100000000</el-descriptions-item>
            <el-descriptions-item label="收货人公司名称">
              <el-tag size="small">学校学校学校学校</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card">
      <div slot="header" class="card-title">物流信息/基础信息</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions class="margin-top" border title="物流信息" :column="2">
            <el-descriptions-item label="始发仓">广州仓</el-descriptions-item>
            <el-descriptions-item label="目的仓">Dubai</el-descriptions-item>
            <el-descriptions-item label="地址" :span="2">广州市白云区鹤边鹤泰二横路民通院内第一栋捷道仓库E&C（收货时间周一至周六10:00-19：30）
            </el-descriptions-item>
            <el-descriptions-item label="运输方式">海运拼柜</el-descriptions-item>
            <el-descriptions-item label="出货渠道">/</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions class="margin-top" border title="基础信息" :column="2">
            <el-descriptions-item label="唛头">kooriookami</el-descriptions-item>
            <el-descriptions-item label="送货时间">2022-05-22</el-descriptions-item>
            <el-descriptions-item label="是否控货">否</el-descriptions-item>
            <el-descriptions-item label="填单信息">22箱 1000KG 14m³</el-descriptions-item>
            <el-descriptions-item label="仓库实测">123箱 900Kg 11.23m³</el-descriptions-item>
            <el-descriptions-item label="收款数据">123箱 900Kg 11.23m³</el-descriptions-item>
            <el-descriptions-item label="入仓类型">一次到齐</el-descriptions-item>
            <el-descriptions-item label="单证报关">我司全代</el-descriptions-item>
            <el-descriptions-item label="代收货款">是（50000美元）</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="货物详情" name="first">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="中文品名" />
            <el-table-column prop="name" label="英文品名" />
            <el-table-column prop="address" label="品牌" />
            <el-table-column prop="address" label="填单件数" />
            <el-table-column prop="address" label="入仓件数" />
            <el-table-column prop="address" label="单位" />
            <el-table-column prop="address" label="货值" />
            <el-table-column prop="address" label="材质" />
            <el-table-column prop="address" label="体积(m3)" />
            <el-table-column prop="address" label="重量(kg)" />
          </el-table>
          <!-- 分页组件 -->
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-tab-pane>
        <el-tab-pane label="订单动态" name="second">
          <el-timeline :reverse="true">
            <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        <el-tab-pane label="运单资料/提货单" name="three">
          <el-descriptions class="margin-top" border title="" :column="3">
            <el-descriptions-item label="单票立即转运">是</el-descriptions-item>
            <el-descriptions-item label="包装类型">纸箱</el-descriptions-item>
            <el-descriptions-item label="包装要求备注">多个订单一起打包，不要单独打</el-descriptions-item>
          </el-descriptions>
          <el-button type="text">查看入仓单</el-button>
          <el-button type="text" disabled>
            <el-dropdown>
              <span class="el-dropdown-link">
                查看提货单<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>海运提货单</el-dropdown-item>
                <el-dropdown-item>空运提货单</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-button>
          <el-button :disabled="true" type="text">装箱单未上传</el-button>

        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script>
import { getOrder } from '@/api/ecw/order'
export default {
  name: "detail",
  components: {

  },
  data() {
    return {
      // 遮罩层
      loading: false,
      list: [],
      activeName: 'first',
      orderId: 17,
      tableData: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }]
    };
  },
  created() {
    if (this.$route.query.orderId) {
      this.orderId = this.$route.query.orderId
      this.getList();
    }
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      let that = this
      that.loading = true;
      // 执行查询
      getOrder(that.orderId).then(response => {
        that.list = response.data;
      });
    },
  }
};
</script>

<style scoped>
.card {
  margin-bottom: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>