<template>
  <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
    <view class="cu-dialog">
      <view class="cu-bar bg-white justify-end bottom-line">
        <view class="content title-bolder">{{$t('订单详情')}}</view>
      </view>
      <scroll-view scroll-y="true" style="height: 300px;">
        <view class="cu-form-group margin-top">
          <view class="title">{{$t('订单号')}}</view>
          <view class="content">
            {{ orderDetail.orderNo }}
            <view style="color:blue;fontWeight:bold;">
              {{ orderDetail.isExternalWarehouse === 1 ? ('('+$t('外部仓')+')') : ''}}
            </view>
            <view style="color:sandybrown;fontWeight:bold;">
              {{ orderDetail.adjustToDestWarehouseId > 0 ? ('('+$t('调仓')+')') : ''}}
            </view>
          </view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('唛头')}}</view>
          <view class="content">{{ orderDetail.marks }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('报关方式')}}</view>
          <view class="content"><dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="orderDetail.customsType" /></view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('入仓时间')}}</view>
          <view class="content">{{ formatDate(orderDetail.rucangTime) }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('路线')}}</view>
          <view class="content" v-if="orderDetail.logisticsInfoDto">
            {{ $lang.locale==='zh-Hans'? `${orderDetail.logisticsInfoDto.startTitleZh} - ${orderDetail.logisticsInfoDto.destTitleZh}`: `${orderDetail.logisticsInfoDto.startTitleEn} - ${orderDetail.logisticsInfoDto.destTitleEn}`  }}</view>
        </view>

        <view>
          <view class="item-content" v-for="(v, goodsKey) in orderDetail.orderItemVOList" :key="'goods-' + goodsKey">
            <view>
              <view>{{$t('品名')}}：{{ $lang.locale==='zh-Hans'?v.prodTitleZh:v.prodTitleEn }}</view>
              <view>{{$t('备案')}}：
                <template v-if="v.brandName">{{v.brandName}}</template>
                <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="v.feeType" />
              </view>
            </view>
            <view>
              <view>{{$t('箱数')}}：{{ v.warehouseInInfoVO && v.warehouseInInfoVO.cartonsNum }}</view>
              <view>{{$t('体积')}}：{{ v.warehouseInInfoVO && v.warehouseInInfoVO.volume | toFixed }} CBM</view>
            </view>
            <view>
              <view>{{$t('重量')}}：{{ v.warehouseInInfoVO && v.warehouseInInfoVO.weight | toFixed }} kg</view>
              <view>
                {{$t('储位')}}：
                <template v-if="v.warehouseInInfoVO && v.warehouseInInfoVO.orderLocationMergeVOSet">
                  {{v.warehouseInInfoVO.orderLocationMergeVOSet.map(location => `${location.areaName}${location.locationName || ''}`).join(',')}}
                </template>
              </view>
            </view>
            <view>
            <view >{{$t('特性')}}：{{ getProductNamesByIds(v.warehouseInInfoVO ? v.warehouseInProdAttrIds : v.prodAttrIds) }}</view>
            </view>
          </view>
        </view>
      </scroll-view>

      <view class="cu-bar bg-white justify-end top-line">
        <view class="action"><button class="cu-btn bg-grey" @tap="showOrderDetail(false)">{{$t('取消')}}</button></view>
      </view>
    </view>
  </view>
</template>

<script>
import {getProductAttrList} from '@/api/system'
import util from "@/util/util.js";

export default {
	name: 'orderDetailModal',
	props: {
		orderDetail: {
			type: Object,
			default: ''
		},
		orderDetailModal:{
			type: Boolean,
			default: true
		}
	},
  computed: {
    isChinese(){
      return uni.getLocale() === 'zh-Hans'
    }
  },
  data() {
    return {
      productAttrList: [],
    }
  },
  created() {
    getProductAttrList().then(data => {
      this.productAttrList = data
    })
  },
	methods: {
    formatDate: util.formatDate,
		showOrderDetail(index) {
			this.$emit('close', false);
		},
    getProductNamesByIds(ids){
      const result = []
      ids?.split(',').forEach(e => {
        this.productAttrList.forEach(f => {
          if (parseInt(e) === f.id) {
            result.push(this.isChinese ? f.attrName : f.attrNameEn)
          }
        })
      })
      return result.join('、')
    },
	}
};
</script>

<style lang="scss" scoped>
.cu-dialog {
  background-color: #fff;

  .content {
    &.title-bolder {
      color: #333333;
      font-weight: bolder;
    }
  }

  .item-content {
    text-align: left;
    padding: 10px 20px 0px 20px;

    &.noPadding {
      padding: 0;
    }

    > view {
      display: flex;
      padding: 4px 0;

      > view {
        flex: 1;
        word-break: break-all;
        padding-left: 4px;
      }
    }
  }
}
</style>