<template>
  <view>
    <view style="height: 100px; background: #2f4dae"></view>
    <view class="detail-wrap">
      <view>
        <view class="cu-form-group">
          <view class="title">{{$t('订单号')}}</view>
          <view class="content">{{ detail.orderNo }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('唛头')}}</view>
          <view class="content">{{ detail.marks }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('始发地')}}</view>
          <view class="content">{{ detail.logisticsInfoDto && (isChinese ? detail.logisticsInfoDto.startTitleZh : detail.logisticsInfoDto.startTitleEn) || '' }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('目的地')}}</view>
          <view class="content">{{ detail.logisticsInfoDto && detail.logisticsInfoDto[isChinese ? 'destTitleZh' : 'destTitleEn'] || '' }}</view>
        </view>
      </view>
      <view>
        <view class="cu-form-group">
          <view class="title">{{$t('发件人')}}</view>
          <view class="content">{{ detail.consignorVO && detail.consignorVO.name || '' }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('发件人电话')}}</view>
          <view class="content">{{ detail.consignorVO && (detail.consignorVO.countryCode + detail.consignorVO.phone) || '' }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('收件人')}}</view>
          <view class="content">{{ detail.consigneeVO && detail.consigneeVO.name || '' }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('收件人电话')}}</view>
          <view class="content">{{ detail.consigneeVO &&(detail.consigneeVO.countryCode + detail.consigneeVO.phone) || '' }}</view>
        </view>
      </view>
      <view>
        <view class="cu-form-group">
          <view class="title">{{$t('货运方式')}}</view>
          <view class="content">
            <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="detail.transportId" />
          </view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('出货渠道')}}</view>
          <view class="content">{{ detail.channelName }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('控货')}}</view>
          <view class="content">{{ detail.isCargoControl ? $t('是') : $t('否') }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('入仓类型')}}</view>
          <view class="content">
            <dict-tag :type="DICT_TYPE.ECW_WAREHOUSING_TYPE" :value="detail.warehouseType" />
          </view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('已到箱数')}}/{{$t('总箱数')}}</view>
          <view class="content">
            <text>{{ detail.sumNum }}</text>
            /
            <text>{{detail.costVO ? detail.costVO.totalNum :'' }}</text>
          </view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('送货日期')}}</view>
          <view class="content">{{ dayjs(detail.rucangTime).format("YYYY-MM-DD") }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('单证报关')}}</view>
          <view class="content">
            <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="detail.customsType" />
          </view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('入仓原因')}}</view>
          <view class="content">
            {{$t('自')}} {{adjustToStartWarehouse}} {{$t('调仓')}} {{ adjustToDestWarehouse }}
          </view>
        </view>
        <view class="cu-form-group">
          <view class="title">{{$t('特殊需求')}}</view>
          <view class="content">
            <view class="red-badge-wrap" v-if="!!advanceType">
              <template v-for="(item, i) in specialRendering(advanceType)">
                <text class="red-badge" :key="i">({{item.label[0]}})</text>
              </template>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="bg-white bottom-action top-line">
      <!-- <view class="item"><button class="cu-btn block bg-grey margin-tb-sm lg" @click="print">打印标签</button></view> -->
      <view class="item"><button class="cu-btn block bg-blue margin-tb-sm lg" @click="next">{{$t('下一步')}}</button></view>
    </view>
  </view>
</template>

<script>
import { getAdjustWaitInList } from './api';
import {getOrderInfo, getChannel, getSpecialListByOrderId} from '../warehousing/api'
import {getWarehouseList} from "@/api/api"

export default {
  name: 'warehouseing-detail',
  data() {
    return {
      orderNo: null,
      orderId: '',
      detail: {},
      returnLoadId: null,
      warehouseList: [],
      adjustToDestWarehouseId: undefined,
      adjustToStartWarehouseId: undefined,
      advanceType: undefined
    };
  },
  computed: {
    adjustToDestWarehouse(){
      return this.warehouseList?.length > 0 && this.adjustToDestWarehouseId ? this.warehouseList.find(e => e.id === this.adjustToDestWarehouseId)[this.isChinese ? 'titleZh' : 'titleEn'] : ''
    },
    adjustToStartWarehouse(){
      return this.warehouseList?.length > 0 && this.adjustToStartWarehouseId ? this.warehouseList.find(e => e.id === this.adjustToStartWarehouseId)[this.isChinese ? 'titleZh' : 'titleEn'] : ''
    },
    isChinese(){
      return uni.getLocale() === 'zh-Hans'
    }
    // 	getDzbgStyle() {
    // 		return this.detail.dzbg == 'n' || this.detail.dzbg == 's' ? {
    // 			'color': 'red'
    // 		} : {};
    // 	}
    // },
    // filters: {
    // 	dzbgStr(value) {
    // 		if (value == 'y') return '我司全代';
    // 		if (value == 'n') return '自单代报';
    // 		if (value == 's') return '混合报关';
    // 		return '';
    // 	}
  },
  methods: {
    specialRendering(val){
      if(val !== undefined){
        let i = val.split(',')
        return this.getDictDatas(this.DICT_TYPE.ORDER_SPECIAL_NEEDS).filter(e => {
          return i.indexOf(e.value) > -1
        })
      }
    },
    getSpecialListByOrderId(){
      getSpecialListByOrderId({orderId: this.orderId}).then(r => {
        this.advanceType = r.map(e => e.advanceType).join(',')
      })
    },
    getData() {
      if (this.orderId) {
        // getAdjustWaitInList({ orderNo: this.orderNo }).then(data => {
        // 	this.detail = data.list.length > 0 ? data.list[0] : {};
        //   this.orderId = this.detail.orderId
        getOrderInfo(this.orderId).then(data => {
          this.detail = data
          this.adjustToDestWarehouseId = data.adjustToDestWarehouseId
          this.adjustToStartWarehouseId = data.adjustToStartWarehouseId
          this.$set(this.detail, 'customsType', data.customsType)
          this.$set(this.detail, 'warehouseType', data.warehouseType)
          data.channelId && getChannel(data.channelId).then(data => {
            this.$set(this.detail, 'channelName', data.nameZh)
          })
        })
        // });
      }
    },
    next() {
      // let url = './warehousing?orderId=' + this.orderId;
      // if (this.returnLoadId) {
      // 	url += '&returnLoadId=' + this.returnLoadId;
      // }
      // uni.navigateTo({
      // 	url: url
      // });
      uni.navigateTo({
        url: `../warehousing/warehousing-confirm?orderId=${this.orderId}&target=warehouseAdjustment`
      });
    }
  },
  onLoad: function(option) {
    // if ('orderNo' in option) {
    //   this.orderNo = option.orderNo;
    //   this.getData();
    // }
    if ('orderId' in option) {
      this.orderId = option.orderId;
      this.getData();
      this.getSpecialListByOrderId()
    }
    if ('returnLoadId' in option) {
      this.returnLoadId = option.returnLoadId;
    }
    uni.setNavigationBarTitle({
      title:this.$t('订单信息')
    })
    getWarehouseList().then(data => {
      this.warehouseList = data
    })
  }
};
</script>

<style scoped lang="scss">
.detail-wrap {
  margin: -75px 12px 0;
  // border-top-left-radius: 8px;
  // border-top-right-radius: 8px;
  padding-bottom: 88px;
  > view {
    border-radius: 8px;
    background: #fff;
    padding-left: 8px;
    padding-right: 8px;
  }
  > view + view {
    margin-top: 12px;
  }
  .cu-form-group {
    background: none;
  }
  .red-badge{
    display: inline-block;
    color: #d9001c;
  }
}
</style>
