<template>
  <div class="app-container">
    <el-card class="card">
      <div slot="header" class="card-title">订单详情：{{list.orderNo}}-{{list.orderId}}</div>
      <div slot="header" class="card-title">订单编号：{{list.orderNo}}</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions class="margin-top" border title="发货人" :column="2">
            <el-descriptions-item label="发货人">{{list.consignorVO.name}}</el-descriptions-item>
            <el-descriptions-item label="发货人电话">{{list.consignorVO.phone}}</el-descriptions-item>
            <el-descriptions-item label="发货人邮箱">{{list.consignorVO.email}}</el-descriptions-item>
            <el-descriptions-item label="发货人公司名称">
              <el-tag size="small">{{list.consignorVO.company}}</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="收货人">{{list.consigneeVO.name}}</el-descriptions-item>
            <el-descriptions-item label="收货人电话">{{list.consigneeVO.phone}}</el-descriptions-item>
            <el-descriptions-item label="收货人邮箱">{{list.consigneeVO.email}}</el-descriptions-item>
            <el-descriptions-item label="收货人公司名称">
              <el-tag size="small">{{list.consigneeVO.company}}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions class="margin-top" border title="物流信息" :column="2">
            <el-descriptions-item label="始发仓">{{list.logisticsInfoDto.startTitleZh}}</el-descriptions-item>
            <el-descriptions-item label="目的仓">{{list.logisticsInfoDto.destTitleZh}}</el-descriptions-item>
            <el-descriptions-item label="地址" :span="2">{{list.logisticsInfoDto.startAddressZh}}</el-descriptions-item>
            <el-descriptions-item label="运输方式">{{list.logisticsInfoDto.transportId | transportFilter(transportList)}}</el-descriptions-item>
            <el-descriptions-item label="出货渠道">{{list.logisticsInfoDto.startTitleZh}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions class="margin-top" border title="基础信息" :column="2">
            <el-descriptions-item label="唛头">{{list.marks}}</el-descriptions-item>
            <el-descriptions-item label="送货时间"></el-descriptions-item>
            <el-descriptions-item label="是否控货">{{list.isCargoControl?'是':'否'}}</el-descriptions-item>
            <el-descriptions-item label="填单信息">{{list.sumNum}}箱 {{list.sumWeight}}Kg {{list.sumVolume}}m³</el-descriptions-item>
            <el-descriptions-item label="仓库实测"></el-descriptions-item>
            <el-descriptions-item label="收款数据"></el-descriptions-item>
            <el-descriptions-item label="入仓类型"></el-descriptions-item>
            <el-descriptions-item label="单证报关">{{list.customsType | customsTypeFilter(customsTypeList)}}</el-descriptions-item>
            <el-descriptions-item label="代收货款">{{list.isCollection?'是':'否'}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="货物详情" name="first">
          <el-table :data="list.orderItemVOList" border style="width: 100%">
            <el-table-column prop="prodTitleZh" label="中文品名" />
            <el-table-column prop="prodTitleEn" label="英文品名" />
            <el-table-column prop="brand" label="品牌" />
            <el-table-column prop="num" label="填单件数" />
            <el-table-column prop="num" label="入仓件数" />
            <el-table-column prop="unit" label="单位" />
            <el-table-column prop="worth" label="货值" />
            <el-table-column prop="" label="材质" />
            <el-table-column prop="volume" label="体积(m3)" />
            <el-table-column prop="weight" 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 list.orderTimeVOList" :key="index" :timestamp="activity.timestamp">
              {{ activity.titleZh }}
            </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="单票立即转运">{{list.isSingleTicketTransport?'是':'否'}}</el-descriptions-item>
            <el-descriptions-item label="包装类型"></el-descriptions-item>
            <el-descriptions-item label="包装要求备注">{{list.remarks}}</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'
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
export default {
  name: "detail",
  components: {

  },
  filters: {
    customsTypeFilter(e, customsTypeList) {
      if (e) return customsTypeList.find(item => item.value == e).label
    },
    transportFilter(e, transportList) {
      if (e) return transportList.find(item => item.value == e).label
    }
  },
  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'
      }],
      customsTypeList: getDictDatas(DICT_TYPE.ECW_CUSTOMS_TYPE), //报关类型
      transportList: getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE), //运输方式
    }
  },
  created() {
    if (this.$route.query.orderId) {
      this.orderId = this.$route.query.orderId
      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>
