<template>
  <div class="sales-transport-view">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <cy-info-title>物流详情</cy-info-title>
      <el-form-item label="销售订单ID">
        <el-input :value="ruleForm.orderNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="销售合同编号">
        <el-input :value="ruleForm.salesContractNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item v-if="enterpriseInfo.exportType === 'proxy_export'" label="代理公司名称">
        <el-input :value="ruleForm.agencyEnterpriseName" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="物流公司">
        <el-input :value="ruleForm.logisticsCompany" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="发货时间">
        <el-input :value="ruleForm.deliverTime" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="预计送达日期">
        <el-input :value="ruleForm.estimatedArrivalTime" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="起运港">
        <el-input :value="ruleForm.fromPort" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="目的港">
        <el-input :value="ruleForm.destPort" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="提单号">
        <el-input :value="ruleForm.ladingBillNo" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="提单">
        <cy-upload
          :file-data="[ruleForm.ladingBillFile]"
          :upload-from-orange-status="true"
          :limit="1"
          disabled
        />
      </el-form-item>

      <div style="width: 100%; margin-top: 15px;" class="table-box">
        <el-table :data="salesOrderContainerList" style="width: 100%;">
          <el-table-column label="集装箱单号" prop="billNo" :show-overflow-tooltip="true" />
          <el-table-column prop="fileId" label="集装箱单">
            <template slot-scope="{ row }">
              <cy-upload
                :file-data="[row.file]"
                :upload-from-orange-status="true"
                :limit="1"
                disabled
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-form-item label="备注">
        <el-input :value="ruleForm.deliverRemark" :disabled="disabled" />
      </el-form-item>
    </el-form>

    <div class="submit-btn">
      <el-button @click="() => { $router.push({name: 'SalesBill'}) }">返回</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getTransportDetail } from '@/api/myTrade/salesBill'
export default {
  name: 'SalesTransportView',
  data() {
    return {
      disabled: true,
      salesOrderContainerList: [],
      ruleForm: {
        ladingBillFile: []
      },
      rules: {

      }
    }
  },
  computed: {
    ...mapGetters(['constant', 'enterpriseInfo'])
  },
  created() {
    this.getDetails()
  },
  methods: {

    getDetails() {
      const id = this.$route.query.id
      const params = {
        orderNo: id
      }
      getTransportDetail(params).then(({ data }) => {
        this.ruleForm = data || {}
        this.salesOrderContainerList = data.salesOrderContainerList || []
      })
    }

  }
}
</script>

  <style lang="scss" scoped>
    .sales-invoice-view {
      padding: 10px 20px;
    }
  </style>
