<template>
  <div v-if="show" class="app-container">
    <el-card class="card">
      <div slot="header" class="card-title">
        {{ $t('orderdetail.orderNo') }}：{{ order.orderNo }}
        <template v-if="order.tidanNo"> - {{ order.tidanNo }}</template>
        <template v-else-if="order.containerNumber"> - {{ order.containerNumber }}</template>
      </div>
      <div style="display: flex;">
        <div style="width: 6px;height: 26px;background: #659FD5;border-radius: 0px 6px 6px 0px;" />
        <span style="font-size: 18px;font-weight: 500;color: #333;line-height: 26px;margin-left: 5px;">{{ $t('orderdetail.consignorName') }}</span>
        <span style="color:#409EFF;margin-left:100px;font-size:16px" @click="consigneeChange">{{ consigneeText }}</span>
      </div>
      <el-row>
        <el-col>
          <el-descriptions class="margin-top" border :column="3" :content-style="{width:'130px'}">
            <el-descriptions-item :label="$t('orderdetail.consignorName')" label-style="width:150px">{{ order.consignorVO.name }}</el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.consignorNameEn')" label-style="width:150px">{{ order.consignorVO.nameEn }}</el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.consignorPhone')" label-style="width:150px">+{{ order.consignorVO.countryCode }} {{ order.consignorVO.phone }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :class="showMore?'showInfo':'hiddenInfo'" border :column="3" :content-style="{width:'130px'}">
            <el-descriptions-item :label="$t('orderdetail.consignorEmail')" label-style="width:150px">{{ order.consignorVO.email }}</el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.consignorCompany')" label-style="width:150px">
              {{ order.consignorVO.company }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.consignorCompanyEn')" label-style="width:150px">
              {{ order.consignorVO.companyEn }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div style="display: flex;margin-top: 20px;">
        <div style="width: 6px;height: 26px;background: #659FD5;border-radius: 0px 6px 6px 0px;" />
        <span style="font-size: 18px;font-weight: 500;color: #333;line-height: 26px;margin-left: 5px;">{{ $t('orderdetail.consigneeName') }}</span>
      </div>
      <el-row>
        <el-col>
          <el-descriptions class="margin-top" border :column="3" :content-style="{width:'130px'}">
            <el-descriptions-item :label="$t('orderdetail.consigneeName')" label-style="width:150px">{{ order.consigneeVO.name }}</el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.consigneeNameEn')" label-style="width:150px">{{ order.consigneeVO.nameEn }}</el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.consigneePhone')" label-style="width:150px">+{{ order.consigneeVO.countryCode }} {{ order.consigneeVO.phone }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :class="showMore?'showInfo':'hiddenInfo'" border :column="3" :content-style="{width:'130px'}">
            <el-descriptions-item :label="$t('orderdetail.consigneeEmail')" label-style="width:150px">{{ order.consigneeVO.email }}</el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.consigneeCompany')" label-style="width:150px">
              {{ order.consigneeVO.company }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.consigneeCompanyEn')" label-style="width:150px">
              {{ order.consigneeVO.companyEn }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card">
      <div style="display: flex;margin-top: 20px;">
        <div style="width: 6px;height: 26px;background: #659FD5;border-radius: 0px 6px 6px 0px;" />
        <span style="font-size: 18px;font-weight: 500;color: #333;line-height: 26px;margin-left: 5px;">{{ $t('orderdetail.transportInfo') }}</span>
      </div>
      <el-row>
        <el-col>
          <el-descriptions class="margin-top" border :column="2">
            <el-descriptions-item :label="$t('orderdetail.startTitle')">{{ $l(order.initialLogisticsInfoDto, 'startTitle') }}</el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.destTitle')">{{ $l(order.initialLogisticsInfoDto, 'destTitle') }}</el-descriptions-item>
            <el-descriptions-item v-if="false" :label="$t('orderdetail.startAddress')" :span="2">{{ order.logisticsInfoDto.startAddressZh }}</el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.transport')" :span="1">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="order.transportId" />
            </el-descriptions-item>
            <el-descriptions-item v-if="getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, order.transportId).cssClass == 'channel'" :label="$t('orderdetail.channel')" :span="1">{{ getChannelNameById(order.channelId) }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div style="display: flex;margin-top: 20px;">
        <div style="width: 6px;height: 26px;background: #659FD5;border-radius: 0px 6px 6px 0px;" />
        <span style="font-size: 18px;font-weight: 500;color: #333;line-height: 26px;margin-left: 5px;">{{ $t('orderdetail.baseInfo') }}</span>
      </div>
      <el-row>
        <el-col>
          <el-descriptions class="margin-top" border :column="2">
            <el-descriptions-item :label="$t('orderdetail.marks')">{{ order.marks }}</el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.deliveryDate')">{{ order.deliveryDate }}</el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.isCargoControl')">{{ order.isCargoControl?this.$t('orderdetail.is'):this.$t('orderdetail.no') }}</el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.costVO')">
              {{ order.costVO.totalNum }}{{ $t('orderdetail.box') }} {{ order.costVO.totalWeight }}Kg {{ order.costVO.totalVolume }}m³ {{ order.costVO.totalQuantity }}{{ $t('price.one') }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.warehouseNum')">
              {{ order.sumNum }}{{ $t('orderdetail.box') }} {{ order.vweight }}Kg {{ order.sumVolume }}m³ {{ order.sumQuantity }}{{ $t('price.one') }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.entry')">
              {{ order.sumNum }}{{ $t('orderdetail.box') }} {{ order.vweight }}Kg {{ order.wvolume }}m³ {{ order.sumQuantity }}{{ $t('price.one') }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.warehouseType')">
              <dict-tag :type="DICT_TYPE.ECW_WAREHOUSING_TYPE" :value="order.warehouseType" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.customsType')">
              <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="order.customsType" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('delivery.issuingMethod')">
              <dict-tag :type="DICT_TYPE.ECW_SUING_METHOD" :value="order.issuingMethod" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('orderdetail.isCollection')">
              <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="order.isCollection" />
              <span v-if="order.isCollection">({{ order.collectionProxy }} {{ currencyMap[order.collectionProxyCurrency] }})</span>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('关联报价单')">
              {{ offerNumber }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div v-if="[3, 4].indexOf(+order.transportId) > -1" style="display: flex;margin-top: 20px;">
        <div style="width: 6px;height: 26px;background: #659FD5;border-radius: 0px 6px 6px 0px;" />
        <span style="font-size: 18px;font-weight: 500;color: #333;line-height: 26px;margin-left: 5px;">{{ $t('orderdetail.transportInfo') }}</span>
      </div>
      <el-row>
        <el-col>
          <el-descriptions class="margin-top" border :column="2">
            <el-descriptions-item :label="$t('delivery.doubleClear')">
              <dict-tag :type="DICT_TYPE.ECW_DOUBLE_CLEAR" :value="order.doubleClear" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('delivery.airlineCompany')">{{ order.airlineCompany }}</el-descriptions-item>
            <el-descriptions-item :label="$t('delivery.customsClearCert')">{{ order.isSingleTicketTransport?this.$t('orderdetail.is'):this.$t('orderdetail.no') }}</el-descriptions-item>
            <el-descriptions-item :label="$t('delivery.clearCertRemark')">
              {{ order.clearCertRemark }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('delivery.isUnpack')">
              {{ order.isUnpack?this.$t('orderdetail.is'):this.$t('orderdetail.no') }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('delivery.isSingleTicketTransport')">
              {{ order.isSingleTicketTransport?this.$t('orderdetail.is'):this.$t('orderdetail.no') }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('特殊要求')">
              <template v-if="order.packageType">
                <dict-tag v-for="packageType in order.packageType.split(',').filter(item => !!item)" :key="packageType" class="mr-10" :type="DICT_TYPE.ORDER_SPECIAL_NEEDS" :value="packageType" />
              </template>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('特殊要求备注')">
              {{ order.packageRemarks }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('orderdetail.activeFirst')" name="first">
          <el-table :data="order.orderItemVOList" border style="width: 100%">
            <el-table-column prop="prodTitleZh" :label="$t('orderdetail.prodTitleZh')" />
            <el-table-column prop="prodTitleEn" :label="$t('orderdetail.prodTitleEn')" />
            <el-table-column prop="brand" :label="$t('orderdetail.brand')">
              <template slot-scope="{row}">
                <template v-if="row.brandName">{{ row.brandName }}</template>
                <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="row.brandType" />
              </template>
            </el-table-column>
            <el-table-column prop="num" :label="$t('orderdetail.num')" />
            <el-table-column prop="sumNum" :label="$t('orderdetail.sumNum')">
              <template slot-scope="{row}">
                {{ row.warehouseInInfoVO ? row.warehouseInInfoVO.cartonsNum : 0 }}
              </template>
            </el-table-column>
            <el-table-column prop="unit" :label="$t('orderdetail.unit')">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.ECW_PACKAGING_TYPE" :value="row.unit" />
              </template>
            </el-table-column>

            <el-table-column prop="worth" :label="$t('orderdetail.worth')" />
            <el-table-column prop="" :label="$t('orderdetail.material')">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" :value="row.material" />
              </template>
            </el-table-column>
            <el-table-column prop="volume" :label="$t('orderdetail.volume')">
              <template slot-scope="{row}">
                {{ row.warehouseInInfoVO ? row.warehouseInInfoVO.volume : row.volume }}
              </template>
            </el-table-column>
            <el-table-column prop="weight" :label="$t('orderdetail.weight')">
              <template slot-scope="{row}">
                {{ row.warehouseInInfoVO ? row.warehouseInInfoVO.weight : row.weight }}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('orderdetail.activeSecond')" name="second">
          <el-timeline v-if="order.orderTimeVOList && order.orderTimeVOList.length" :reverse="true" style="padding-top: 10px;">
            <el-timeline-item v-for="(activity, index) in order.orderTimeVOList" :key="index" :timestamp="getTime(activity.businessTime)">
              <div>{{ $l(activity, 'title') }}</div>
              <div :class="activity.mark==1?'red':''">{{ $l(activity, 'remarks') }}</div>
            </el-timeline-item>
          </el-timeline>
          <el-result v-else icon="info " :title="$t('orderdetail.noData')" :sub-title="$t('orderdetail.notOrderData')" />
        </el-tab-pane>
        <el-tab-pane :label="$t('orderdetail.activeThree')" name="three">

          <el-button type="text" :disabled="order.inWarehouseState == 0 && order.shipmentState == 0" @click="showWarehouseReceipt=true">{{ $t('orderdetail.showWarehouseReceipt') }}</el-button>
          <el-button type="text" :disabled="!order.tidanNo || order.ladingState==false" @click.native="showLadingBill=true">{{ $t('orderdetail.showLadingBill') }}</el-button>
          <el-button type="text" @click.native="declarationOrderId=order.orderId">{{ $t('common.seeDeclaration') }}</el-button>
          <!-- <el-button :disabled="true" type="text">{{$t('orderdetail.装箱单未上传')}}</el-button> -->
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <print-warehouse-receipt v-if="showWarehouseReceipt" :order-id="order.orderId" @close="showWarehouseReceipt=false" />
    <print-lading-bill v-if="showLadingBill" :order-id="order.orderId" :transport-type="order.transportId" @close="showLadingBill=false" />
    <declaration-documents v-if="declarationOrderId !== null" :order-id="order.orderId" :disabled="documentsDidables" @close="declarationOrderId=null" />
  </div>
</template>

<script>
import { getOrder, getOfferCheck } from '@/api/order'
import { getDictDatas, DICT_TYPE, getDictData } from '@/utils/dict'
import PrintWarehouseReceipt from './components/PrintWarehouseReceipt'
import PrintLadingBill from './components/PrintLadingBill'
import DictTag from '@/components/DictTag'
import { getCurrencyList, getChannelList } from '@/api/data'
import DeclarationDocuments from './components/DeclarationDocuments'
import { parseTime } from '@/utils/index'
export default {
  name: 'Detail',
  components: {
    PrintWarehouseReceipt, PrintLadingBill, DictTag, DeclarationDocuments
  },
  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,
      order: {},
      activeName: 'first',
      orderId: 17,
      tableData: [],
      channelList: [],
      queryParams: {
        page: 1,
        rows: 10
      },
      show: false,
      customsTypeList: getDictDatas(DICT_TYPE.ECW_CUSTOMS_TYPE), // 报关类型
      transportList: getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE), // 运输方式
      showWarehouseReceipt: false, // 是否显示打印入仓单
      showLadingBill: false, // 是否显示打印提单
      consigneeText: this.$t('orderdetail.showText'),
      showMore: false,
      declarationOrderId: null,
      documentsDidables: true,
      offerNumber: ''// 关联报价单
    }
  },
  computed: {
    currencyMap() {
      const map = {}
      this.currencyList.forEach(item => {
        map[item.id] = item.titleZh
      })
      return map
    },
    getDictData() {
      return (type, value) => getDictData(type, value) || {}
    },
    getTime() {
      return (value) => parseTime(value) || ''
    }
  },
  created() {
    getCurrencyList().then(res => {
      this.currencyList = res.data
    })
    getChannelList().then((res) => (this.channelList = res.data))
    if (this.$route.query.orderId) {
      this.orderId = this.$route.query.orderId
      // getOrder({ orderId: this.orderId }).then(response => {
      //   this.order = response.data
      //   this.loading = true
      // })
      this.getOrder()
      this.getOfferNumber()
    }
  },
  methods: {
    /** 查询列表 */
    getOrder() {
      const that = this
      that.loading = true
      // 执行查询
      getOrder(that.orderId).then(response => {
        that.order = response.data
        that.documentsDidables = (that.order.customsType == 2)
        this.show = true
      })
    },
    // 显示更多
    consigneeChange() {
      this.showMore = !this.showMore
      this.consigneeText = this.showMore ? this.$t('orderdetail.hiddenText') : this.$t('orderdetail.showText')
    },
    // 根据渠道id显示渠道名
    getChannelNameById(id) {
      const cc = this.channelList.find((item) => item.channelId == id)
      if (cc) {
        return cc.nameZh
      } else {
        return '/'
      }
    },
    getOfferNumber() {
      const that = this
      console.log(that.orderId)
      getOfferCheck({ orderId: that.orderId }).then(response => {
        that.offerNumber = response?.data?.number ?? ''
      })
    }
  }
}
</script>

<style scoped>
.card {
  margin-bottom: 20px;
}
.card-title{
  font-size: 18px;
  font-weight: bold;
}

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

.el-icon-arrow-down {
  font-size: 12px;
}
.margin-top{
  margin-top: 20px;
}
.hiddenInfo{
  display:none;
}
.showInfo{
  display:block;
}
.red{
  color:red !important;
}
</style>
