<template>
  <div class="app-container">
    <el-card>
     <div slot="header" class="header">
       <div class="card-title">{{$t('查看')}}</div>
       <el-button type="primary" icon="el-icon-arrow-left" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
     </div>
     <el-form v-if="orderData" :model="orderData" ref="queryForm" size="small" :inline="true"  label-width="120px" class="card">
       <el-row>
          <el-form-item :label="$t('订单号')+':'">
            <router-link :to="{path: '/order/detail',query: {orderId: orderData.orderId}}" class="link-type">
              <span>{{orderData.orderNo || ''}}</span>
            </router-link>

          </el-form-item>
       </el-row>
       <div v-if="shopData&&['goods_add_exception','line_loop_exception','overweight_exception','stock_up_exception','in_warehousing_diff_exception','channel_exception','not_shipping_channel_exception','channel_packaging_overweight_exception'].indexOf(orderExceptionData.orderExceptionType) == -1">
         <el-row>
            <el-form-item :label="$t('产品名称')+':'" >
              {{shopData.prodTitleZh || ''}}
            </el-form-item>
         </el-row>
         <el-row>
            <el-form-item :label="$t('产品英文名称')+':'">
              {{shopData.prodTitleEn || ''}}
            </el-form-item>
         </el-row>
       </div>
       <el-row>
           <el-form-item :label="$t('运输路线')+':'" >
               <span v-if="orderData">{{ $t('【') }}<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />{{ $t('】') }}</span>
               <span v-if="getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, orderData.transportId).cssClass == 'channel'">{{ $t('【') }}{{orderData.channelName}}{{ $t('】') }}</span>
                {{orderData?getRouterNameById():''}}
           </el-form-item>
       </el-row>
       <el-row>
         <el-form-item :label="$t('异常类型')+':'" v-if="orderExceptionData.orderExceptionType=='overweight_exception'||orderExceptionData.orderExceptionType=='channel_packaging_overweight_exception'">
            <dict-tag :type="DICT_TYPE.ORDER_ERROR_TYPE" :value="orderExceptionData.orderExceptionType" />
         </el-form-item>
       </el-row>
        <el-row :span="12" v-if="orderExceptionData.orderExceptionType=='overweight_exception'||orderExceptionData.orderExceptionType=='channel_packaging_overweight_exception'">
          <el-form-item :label="$t('异常描述')+':'">
            <!-- <dict-tag :type="DICT_TYPE.ORDER_ERROR_TYPE" :value="orderExceptionData.orderExceptionType" /> -->
            <!-- {{orderExceptionData.orderExceptionDescVO?orderExceptionData.orderExceptionDescVO.descZh:'无'}} -->
            {{$l(orderExceptionData.orderExceptionDescVO, 'desc')}}
          </el-form-item>
        </el-row>

       <!-- 单证异常，发货人异常，其他异常 不显示这部分内容 -->
       <div v-if="['order_doc_exception','order_consignor_exception', 'order_other_exception','overweight_exception','channel_packaging_overweight_exception'].indexOf(orderExceptionData.orderExceptionType) == -1">
        <!-- 预付异常,提货异常,代收货款是针对整个订单的 -->
        <template v-if="['order_pay_exception','order_pick_up_exception', 'order_cod_exception','not_customer_service_exception'].indexOf(orderExceptionData.orderExceptionType) > -1">
          <el-row>
              <el-form-item :label="$t('填单参数')+':'">
                <template v-if="orderData && orderData.costVO">
                {{(orderData.costVO.totalNum||0)+$t('箱 ')+(orderData.costVO.totalVolume||0)+'m³ '+(orderData.costVO.totalWeight||0)+'kg '+(orderData.costVO.totalQuantity||0)+$t('个')}}
                </template>
              </el-form-item>
              <el-form-item :label="$t('代收金额')+':'" v-if="orderExceptionData.orderExceptionType == 'order_cod_exception'">
                <template v-if="orderData && orderData.costVO">
                  {{orderExceptionData.orderExceptionAmount}} {{currencyMap[orderExceptionData.orderExceptionAmountCurrencyId]}}
                </template>
              </el-form-item>
          </el-row>
          <el-row>
              <el-form-item :label="$t('入仓参数')+':'">
                <template v-if="orderData && orderData.costVO">
                  <span>{{(orderData.sumNum||0)+$t('箱')+(orderData.sumVolume||0)+'m³ '+(orderData.sumWeight||0)+'kg '+(orderData.sumQuantity||0) +$t('个')}}</span>
                </template>
              </el-form-item>
          </el-row>
        </template>

        <template v-else>
          <el-row v-if="shopData">
            <el-form-item :label="$t('填单参数')+':'">
              <template >
                {{$t('{num}箱 {volume}m³ {weight}kg {quantity}个', {
                  num: shopData.num || 0,
                  volume: shopData.volume || 0,
                  weight: shopData.weight || 0,
                  quantity: shopData.quantity || 0
                })}}
              </template>
            </el-form-item>
          </el-row>
          <el-row v-if="shopData">
              <el-form-item :label="$t('入仓参数')+':'" ><template v-if="shopData.warehouseInInfoVO">
                {{$t('{num}箱 {volume}m³ {weight}kg {quantity}个', {
                    num: shopData.warehouseInInfoVO.cartonsNum || 0,
                    volume: shopData.warehouseInInfoVO.volume || 0,
                    weight: shopData.warehouseInInfoVO.weight || 0,
                    quantity: shopData.warehouseInInfoVO.quantityAll || 0
                  })}}</template>
                <!-- <span>{{(orderData.sumNum||0)+$t('箱')+(orderData.sumVolume||0)+'m³ '+(orderData.sumWeight||0)+'kg '+(orderData.sumQuantity||0) +$t('个')}}</span> -->

              <template v-else>{{$t('无入仓数据')}}</template>
              </el-form-item>
          </el-row>
        </template>

        <el-row :span="12">
          <el-form-item :label="$t('异常描述')+':'">
            <!-- <dict-tag :type="DICT_TYPE.ORDER_ERROR_TYPE" :value="orderExceptionData.orderExceptionType" /> -->
            <!-- {{orderExceptionData.orderExceptionDescVO?orderExceptionData.orderExceptionDescVO.descZh:'无'}} -->
            {{$l(orderExceptionData.orderExceptionDescVO, 'desc')}}
          </el-form-item>
          <el-button v-if="orderExceptionData.orderExceptionType=='order_pay_exception'&&orderExceptionData.orderExceptionStatus!=2" type="primary" plain icon="el-icon-plus" style="margin-left: 200px;"  @click="handleAdd">{{ $t('新增收款单') }}</el-button>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionDetails">
          <el-form-item :label="$t('详细内容')+':'">
            <span>{{orderExceptionData.orderExceptionDetails}}</span>
          </el-form-item>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'||orderExceptionData.orderExceptionType!='goods_add_exception'">
          <el-form-item :label="$t('收费参数')+':'">
            <span>{{shopData.num||0}}{{$t('箱')}} {{shopData.wvolume||0}}m³  {{shopData.vweight||0}}Kg  {{shopData.warehouseInInfoVO ? shopData.warehouseInInfoVO.quantityAll : shopData.quantity}}{{$t('个')}}</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="$t('创建时间')+':'">
            <span>{{parseTime(orderExceptionData.createTime)}}</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="$t('处理时间')+':'">
               <span>{{parseTime(orderExceptionData.handlerTime)||'/'}}</span>
          </el-form-item>
        </el-row>
       </div>
     </el-form>

      <!-- 预付异常的表格-->
      <el-table v-if="orderExceptionData.orderExceptionType=='order_pay_exception'" v-loading="loading" border :data="preException">
        <el-table-column :label="$t('品名')" align="center">
          <template slot-scope="scope">
            {{scope.row.titleZh+'('+scope.row.titleEn+')'}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('箱数')" prop="num" />
        <el-table-column :label="$t('体积/重量')">
          <template slot-scope="scope">
              {{scope.row.volume+'/'+scope.row.weight}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('收款类型')">
              <template >
                {{$t('预付')}}
              </template>
          </el-table-column>
        <el-table-column :label="$t('收入类型')">
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.FEE_TYPE" :value="scope.row.feeType"></dict-tag>
            </template>
        </el-table-column>
        <el-table-column :label="$t('应收金额')" prop="totalAmount" >
          <template slot-scope="{row}">
                {{row.totalAmount}}
                {{ currencyMap[row.currencyId] }}
          </template>
        </el-table-column>

        <el-table-column :label="$t('付款人')">
          <template slot-scope="{row}">
            <span>
              <dict-tag :type="DICT_TYPE.DRAWEE" :value="row.paymentUser"></dict-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('付款状态')" prop="worth">
          <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.ECW_RECEIVABLE_STATE" :value="scope.row.state"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('付款状态')" prop="worth">
            <template slot-scope="scope">
                <dict-tag :type="DICT_TYPE.ECW_RECEIVABLE_STATE" :value="scope.row.state"></dict-tag>
              </template>
          </el-table-column>
      </el-table>

      <!-- 单证异常，发货人异常，其他异常的表格 -->
      <el-table v-if="['order_doc_exception', 'order_consignor_exception', 'order_other_exception','fee_exception','overweight_exception','channel_packaging_overweight_exception'].indexOf(orderExceptionData.orderExceptionType) > -1" v-loading="loading" border :data="orderData.orderItemVOList">
        <el-table-column :label="$t('序号')" align="center" prop="id" type="index">
            <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
        <el-table-column :label="$t('中文名')" align="center"  prop="prodTitleZh" />
        <el-table-column :label="$t('英文名')" align="center"  prop="prodTitleEn" />
        <el-table-column :label="$t('品牌')" align="center" prop="brandType">
          <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType"></dict-tag>
            </template>
          </el-table-column>
        <el-table-column :label="$t('填单箱数')" prop="num" />
        <!-- v2.0  入仓特性异常 -->
        <el-table-column :label="$t('填单特性')" prop="prodAttrIds">
          <template slot-scope="scope">
                {{getProdAtrr(scope.row.prodAttrIds)}}
            </template>
          </el-table-column>
        <el-table-column :label="$t('入仓箱数')">
          <template slot-scope="scope">
              {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.cartonsNum:0}}
          </template>
        </el-table-column>
        <!-- v2.0  入仓特性异常 -->
        <el-table-column :label="$t('入仓特性')" prop="num">
        <template slot-scope="scope">
              {{getProdAtrr(scope.row.warehouseInProdAttrIds)}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('方数')" prop="volume">
          <template slot-scope="scope">
              {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.volume:0}}
            </template>
          </el-table-column>
        <el-table-column :label="$t('重量')" prop="weight">
          <template slot-scope="scope">
              {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.weight:0}}
            </template>
          </el-table-column>
        <el-table-column :label="$t('数量')" prop="quantity">
          <template slot-scope="scope">
              {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.quantityAll:0}}
            </template>
          </el-table-column>
        <el-table-column :label="$t('货值')" prop="worth" />
      </el-table>
<!-- 未分配客户经理 -->
	 <div v-if="orderExceptionData.orderExceptionType=='not_customer_service_exception'">
     <el-row :gutter="20">
        <el-col :span="8" v-if="orderData.consignorVO">
          <el-descriptions class="margin-top" border :title="$t('发货人')" :column="1" :labelStyle="{width:'150px'}">
            <el-descriptions-item :label="$t('发货人')">{{orderData.consignorVO.name}}</el-descriptions-item>
            <el-descriptions-item :label="$t('发货人电话')">
              +{{orderData.consignorVO.countryCode}} {{orderData.consignorVO.phone}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('发货人邮箱')">{{orderData.consignorVO.email}}</el-descriptions-item>
            <el-descriptions-item :label="$t('发货人公司名称')">
              {{orderData.consignorVO.company}}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="16" v-if="orderData.consigneeVO">
          <el-descriptions class="margin-top" border :title="$t('收货人')" :column="2" :labelStyle="{width:'150px'}">
            <el-descriptions-item :label="$t('收货人')">{{orderData.consigneeVO.name}}</el-descriptions-item>
            <el-descriptions-item :label="$t('收货人电话')">
              +{{orderData.consigneeVO.countryCode}} {{orderData.consigneeVO.phone}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货人邮箱')">{{orderData.consigneeVO.email}}</el-descriptions-item>
            <el-descriptions-item :label="$t('收货人公司名称')">
              {{orderData.consigneeVO.company}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货方式')">
              <dict-tag :type="DICT_TYPE.ECW_HARVEST_METHOD" :value="orderData.consigneeVO.harvestMethod" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货地区')">
              {{region}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货地址')">
              {{orderData.consigneeVO.address}}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div class="link-text">
        <router-link :to="{path: '/customer/query/'+orderData.customerId}" class="link-type">
          <span>{{$t('归属客户')}}:{{ customerData.name||'' }} </span><span>{{$t('客户编号')}}:{{ customerData.number||'' }}</span>
        </router-link>
      </div>
    </div>
      <el-form :model="handlerParams" ref="queryForms" size="small" :inline="true"  label-width="120px" class="card">
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-form-item :label="$t('订单总金额')+':'">
              <span style="margin-left: 8px;" v-for="(item, key) of orderFee.totalAmountList" :key="key">
                {{item}}
                {{currencyMap[key]}}
              </span>
          </el-form-item>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-form-item :label="$t('应付预付金额')+':'">
              <span style="margin-left: 8px;" v-for="(item, key) of orderFee.totalPaymentAmount" :key="key">{{item}}{{currencyMap[key]}}</span>
          </el-form-item>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-col :span="6">
          <el-form-item :label="$t('已核销预付金额')+':'">
            <span v-if="JSON.stringify(orderFee.writeOffAmount) != '{}'" style="margin-left: 8px;" v-for="(item, key) of orderFee.writeOffAmount" :key="key">{{item}}{{currencyMap[key]}}</span>
            <span v-if="JSON.stringify(orderFee.writeOffAmount) == '{}'">0</span>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item :label="$t('已核销预付金额占总金额比例')+':'" label-width="320px">
              {{orderFee.writeOffAmountScale}}%
          </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'" >
          <el-col :span="6">
          <el-form-item :label="$t('预付商品货值')+':'">
              {{orderFee.paymentGoodsWorth}} {{$t('人民币')}}
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item :label="$t('预付商品货值占总货值比例')+':'" label-width="320px">
              {{orderFee.paymentGoodsWorthScale}}%
          </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">

          <el-col :span="6">
             <el-form-item :label="$t('预付商品方数')+':'">
                 {{orderFee.paymentGoodsVolume}} {{$t('立方米')}}
             </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item :label="$t('货值三分之一占运费和清关费总和比例')+':'" label-width="320px">
              {{orderFee.needWorthScale}}%
          </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-col :span="6">
            <el-form-item :label="$t('订单总方数')+':'">
                {{orderFee.totalVolume}} {{$t('立方米')}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('预付商品方数占总方数比例')+':'" label-width="320px">
                {{orderFee.paymentGoodsVolumeScale}}%
            </el-form-item>
            </el-col>
        </el-row>
        <el-row :span="12" v-if="orderExceptionData.orderExceptionType=='order_doc_exception'">
          <el-form-item v-if="orderExceptionData.orderExceptionStatus!=2" :label="$t('报关资料')+':'" size="medium" :require="true">
            <file-upload v-model="handlerParams.fileList" :value="orderExceptionData.orderExceptionAttr" ></file-upload>
          </el-form-item>
        </el-row>
        <el-form-item :label="$t('附件')" align="center" v-if="orderExceptionData.orderExceptionType=='order_other_exception'">
          <template slot-scope="scope">
            <div class="filelist">
              <span v-for="(item,index) in handlerParams.fileList" :key="index" @click="onClickOpenPreview(item,index)">{{'附件'+(index+1)}}</span>
            </div>
          </template>
        </el-form-item>
         <!--货物重量异常-->
        <el-row :span="8" v-if="['goods_weight_exception','channel_exception','not_shipping_channel_exception'].indexOf(orderExceptionData.orderExceptionType) >-1">
          <el-form-item :label="$t('备注')+':'" size="medium">
            <el-input style="width: 500px;"  type="textarea" v-model="handlerParams.orderExceptionHandlerRemark" :disabled="orderExceptionData.orderExceptionStatus==2" />
          </el-form-item>
        </el-row>
        <!-- 线路单证异常 -->
        <div v-if="orderExceptionData.orderExceptionType=='line_loop_exception'">
           <div v-for="row in loopOrderItem" :key="row.orderItemId">
            <div v-if="row.charging ==1">

                 <div v-if="orderExceptionData.orderExceptionStatus==0"  class="price_list">
                    <div class="price_label">{{$t('全包价')}}:</div>
                   <inputor default2="0" style="width:100px" v-model.number="row.oneSeaFreight" type="number" :placeholder="$t('整数或者两位小数')" />
                   <selector v-model="row.seaFreightCurrency" style="width:100px" :options="currencyList" :label-field="$l('title')" value-field="id" defaultable2  />
                   / <selector v-model="row.seaFreightVolume" style="width:100px" :options="unitList" :label-field="$l('title')" value-field="id" defaultable2  />
                 </div>
                 <div v-else  class="price_list">
                   <div v-if="!row.oneSeaFreight">
                    <span class="price_label">{{$t('全包价')}}:</span>
                    <span>{{$t('未报价')}}</span>
                   </div>
                   <div v-else>
                    <span class="price_label">{{$t('全包价')}}:</span>
                    <span>{{row.oneSeaFreight}} {{currencyMap[row.seaFreightCurrency]}} / {{unitMap[row.seaFreightVolume]}}</span>
                  </div>
                 </div>
            </div>
            <div v-else>
                <!-- <span v-if="!scope.row.oneSeaFreight">{{$t('运费')}}:{{$t('未报价')}}</span> -->
                <div v-if="orderExceptionData.orderExceptionStatus==0">
                   <div  class="price_list">
                     <div class="price_label">{{$t('运费')}}:</div>
                     <div class="price_list">
                       <inputor style="width:100px" default2="0" v-model.number="row.oneSeaFreight" type="number" :placeholder="$t('整数或者两位小数')" />
                       <selector style="width:100px" v-model="row.seaFreightCurrency" :options="currencyList" :label-field="$l('title')" value-field="id" defaultable2 />
                       / <selector style="width:100px" v-model="row.seaFreightVolume" :options="unitList" :label-field="$l('title')" value-field="id" defaultable2 />
                     </div>
                   </div>
                   <div  class="price_list">
                     <div class="price_label">{{$t('清关费')}}:</div>
                     <div class="price_list">
                       <inputor style="width:100px" default2="0" v-model.number="row.oneClearanceFreight" type="number" :placeholder="$t('整数或者两位小数')" />
                       <selector style="width:100px" v-model="row.clearanceFreightCurrency" :options="currencyList" :label-field="$l('title')" value-field="id" defaultable2  />
                       / <selector style="width:100px" v-model="row.clearanceFreightVolume" :options="unitList" :label-field="$l('title')" value-field="id" defaultable2  />
                     </div>
                   </div>
                 </div>
               <div v-else>
                 <div class="price_list">
                   <div v-if="!row.oneSeaFreight">
                     <span class="price_label">{{$t('运费')}}:</span>
                     <span>{{$t('未报价')}}</span>
                    </div>
                    <div v-else>
                     <span class="price_label">{{$t('运费')}}:</span>
                     <span>{{row.oneSeaFreight}} {{currencyMap[row.seaFreightCurrency]}} / {{unitMap[row.seaFreightVolume]}}</span>
                   </div>
                 </div>
                 <div class="price_list">
                   <div v-if="!row.oneSeaFreight">
                     <span  class="price_label">{{$t('清关费')}}:</span>
                     <span>{{$t('未报价')}}</span>
                    </div>
                    <div v-else>
                     <span class="price_label">{{$t('清关费')}}:</span>
                     <span>{{row.oneClearanceFreight}} {{currencyMap[row.clearanceFreightCurrency]}} / {{unitMap[row.clearanceFreightVolume]}}</span>
                   </div>
                 </div>
              </div>
            </div>
          </div>
        </div>
        <!--预付异常的备选需要根据接口数据过滤-->
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
            <el-form-item :label="$t('处理结果')+':'" required>
              <el-select v-model="handlerParams.orderExceptionHandlerResult" :placeholder="$t('请选择')" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
                <template v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_result')">
                  <el-option :disabled="orderFee && orderFee.result && orderFee.result.indexOf(dict.value) ==-1" :key="dict.value" :label="$l(dict, 'label')" :value="dict.value"/>
                </template>
              </el-select>
            </el-form-item>
        </el-row>
        <el-row v-else-if="['order_miss_exception','order_superfluous_goods_exception', 'order_in_water_exception','order_damage_exception','goods_weight_exception'].indexOf(orderExceptionData.orderExceptionType) == -1">
            <el-form-item :label="$t('处理结果')+':'" required>
              <el-select v-model="handlerParams.orderExceptionHandlerResult" :placeholder="$t('请选择')" clearable @change="handlerResultChange" :disabled="orderExceptionData.orderExceptionStatus==2">
                <template v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_result')">
                  <el-option :disabled="dict.value=='pending'"  :key="dict.value" :label="$l(dict, 'label')" :value="dict.value"/>
                </template>
              </el-select>
            </el-form-item>
        </el-row>
        <!-- v1.7新增商品异常 -->
        <div v-if="shopData&&orderExceptionData.orderExceptionType=='goods_add_exception'&&handlerParams.orderExceptionHandlerResult=='goods_exists'">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item :label="$t('新增品名中文')+':'" >
                {{shopData.prodTitleZh || ''}}
              </el-form-item>
            </el-col>
               <el-form-item label="中文品名"
                   :rules="{
                       required: true, message: $t('请选择产品'), trigger: 'blur'
                   }"
                   class="mb-0 mr-0"
               >
                  <product-selector
                  :status="0"
                  :disabled="orderExceptionData.orderExceptionStatus==2"
                   @hook:mounted="onTableMounted"
                   v-model="productId2"
                   @change = "onProductChange($event)"
                   />
               </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item :label="$t('新增品名英文')+':'">
                {{shopData.prodTitleEn || ''}}
              </el-form-item>
            </el-col>
            <el-form-item label="英文品名"
                 :rules="{
                     required: true, message: $t('请选择产品'), trigger: 'blur'
                 }"
                 class="mb-0 mr-0"
             >
                <product-selector
                lang="En"
                :status="0"
                 v-model="productId1"
                 :disabled="orderExceptionData.orderExceptionStatus==2"
                 @change = "onProductChange($event)"
                 />
             </el-form-item>
          </el-row>
        </div>
      <el-row v-if="orderExceptionData.orderExceptionType=='not_customer_service_exception'&&handlerParams.orderExceptionHandlerResult=='allocate'">
        <el-form-item  :label="$t('移交客户经理')+':'" required>
          <el-select v-model="handlerParams.customerService" :placeholder="$t('请选择客户经理')" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
              <el-option v-for="dict in customerServiceList"
                         :key="dict.id" :label="dict.nickname" :value="dict.id"/>
          </el-select>
        </el-form-item>
      </el-row>
        <!-- 代收货款 时需要填写代收金额 -->
        <el-row v-if="handlerParams.orderExceptionHandlerResult == 'cod'" >
          <el-form-item :label="$t('代收金额')+':'" size="medium" required>
            <el-input class="w-100"  type="text" v-model="handlerParams.amount" :disabled="orderExceptionData.orderExceptionStatus==2" />
            <!-- <el-select v-model="handlerParams.currency"  clearable>
              <el-option  v-for="dict in getDictDatas('shipping_price_unit') "
                      :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select> -->{{getCurrencyLabel(handlerParams.currency)}}
            <!-- <dict-tag type="shipping_price_unit" v-model="handlerParams.currency" class="w-100 ml-10"  /> -->
          </el-form-item>
        </el-row>

        <el-row :span="8" v-if="orderExceptionData.orderExceptionType=='order_pick_up_exception'&&handlerParams.orderExceptionHandlerResult=='cost_required'">
          <el-form-item :label="$t('送货费用')+':'" size="medium">
            <el-input style="width: 100px;"  type="text" v-model="handlerParams.amount"  :disabled="orderExceptionData.orderExceptionStatus==2"/>
            <el-select v-model="handlerParams.currency" style="width: 100px;margin-left: 10px;" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
              <el-option  v-for="dict in currencyList "
                        :key="dict.id" :label="dict.titleZh" :value="dict.id"/>
              </el-select>
          </el-form-item>
        </el-row>
        <el-row :span="8" v-if="['not_customer_service_exception','goods_add_exception','goods_weight_exception','channel_exception','not_shipping_channel_exception'].indexOf(orderExceptionData.orderExceptionType) == -1" >
          <el-form-item :label="$t('备注')+':'" size="medium">
            <el-input style="width: 500px;"  type="textarea" v-model="handlerParams.orderExceptionHandlerRemark" :disabled="orderExceptionData.orderExceptionStatus==2" />
          </el-form-item>
        </el-row>

        <div v-if="['order_miss_exception','order_superfluous_goods_exception', 'order_in_water_exception','order_damage_exception','goods_weight_exception'].indexOf(orderExceptionData.orderExceptionType) > -1">
          <el-row >
            <el-form-item :label="$t('状态')+':'">
              <el-radio-group v-model="handlerParams.orderExceptionStatus" @change="changeExceptionStatus" :disabled="orderExceptionData.orderExceptionStatus==2">
                  <el-radio  label="1">{{$t('处理中')}}</el-radio>
                  <el-radio  label="2">{{$t('已处理')}}</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="$t('处理结果')+':'" required v-if="handlerParams.orderExceptionStatus==2">
              <el-select v-model="handlerParams.orderExceptionHandlerResult" :placeholder="$t('请选择')" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
              <el-option  v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_don_result')"
                        :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row >
            <el-form-item :label="$t('赔付金额')+':'" size="medium" required v-if="orderExceptionData.orderExceptionType=='goods_weight_exception'&&handlerParams.orderExceptionStatus==2&&handlerParams.orderExceptionHandlerResult!='customer_not_pay'">
              <el-input style="width: 100px;"  type="text" v-model="handlerParams.amount" :disabled="orderExceptionData.orderExceptionStatus==2" />
              <el-select v-model="handlerParams.currency" style="width: 100px;margin-left: 10px;" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
              <el-option  v-for="dict in currencyList "
                        :key="dict.id" :label="dict.titleZh" :value="dict.id"/>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('赔付金额')+':'" size="medium" required v-else-if="handlerParams.orderExceptionStatus==2&&orderExceptionData.orderExceptionType!='goods_weight_exception'">
              <el-input style="width: 100px;"  type="text" v-model="handlerParams.amount" :disabled="orderExceptionData.orderExceptionStatus==2" />
              <el-select v-model="handlerParams.currency" style="width: 100px;margin-left: 10px;" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
              <el-option  v-for="dict in currencyList "
                        :key="dict.id" :label="dict.titleZh" :value="dict.id"/>
              </el-select>
            </el-form-item>
          </el-row>
          <div v-if="handlerParams.orderExceptionStatus==1">
            <el-form-item :label="$t('查明原因')+':'" required>
                <el-select v-model="handlerParams.orderExceptionHandlerResult" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
                <el-option  v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_result')"
                          :key="dict.value" :label="dict.label" :value="dict.value"/>
                </el-select>
            </el-form-item>
            </div>
        </div>
<!--            <el-form-item :label="$t('查明原因')+':'" required  v-if="orderExceptionData.orderExceptionType=='not_shipping_channel_exception'">
                <el-select v-model="handlerParams.orderExceptionHandlerResult" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
                <el-option  v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_result')"
                          :key="dict.value" :label="dict.label" :value="dict.value"/>
                </el-select>
            </el-form-item> -->
            <!-- 不可出渠道异常,渠道异常 -->
            <div v-if="(orderExceptionData.orderExceptionType=='not_shipping_channel_exception'&&handlerParams.orderExceptionHandlerResult=='change_channel')||(orderExceptionData.orderExceptionType=='channel_exception'&&handlerParams.orderExceptionHandlerResult=='set_shipment_channel')">
              <el-form-item :label="$t('出货渠道')" prop="channelId" v-if="getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, orderData.transportId).cssClass == 'channel'">
                <!--嵌套一个form来脱离disabled控制-->
                <el-form>
                  <el-select
                    v-model="handlerParams.channelId"
                    :placeholder="$t('请选择出货渠道')"
                    @change="calculationPrice"
                  >
                    <el-option
                      v-for="item in channelList"
                      :key="item.channelId"
                      :label="$i18n.locale=='zh_CN'?item.nameZh:item.nameEn"
                      :value="item.channelId"
                    />
                  </el-select>
  <!--                <selector
                    v-model="handlerParams.channelId"
                    :options="channelList"
                    value-field="channelId"
                    :label-field="$l(null, 'name')"
                    ></selector> -->
                </el-form>
              </el-form-item>
              <el-form-item :label="$t('选择线路')" prop="lineId">
                  <el-input :value="selectLine ? $l(selectLine, 'startTitle') + ' > ' + $l(selectLine, 'destTitle') : ''" disabled :placeholder="$t('请在右侧选择线路')"></el-input>
              </el-form-item>
              <!--select是原生组件，不受el-form的disabled控制-->
              <select size="5" v-model="handlerParams.lineId" style="min-width: 300px; border:1px solid #DCDFE6; border-radius:4px" @change="changeLined">
                  <option v-for="item in routerList" :value="item.id" :key="item.id" :disabled="orderExceptionData.orderExceptionStatus>0">
                    {{$l(item, 'startTitle')}} >> {{$l(item, 'destTitle')}}
                    (<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="item.transportType"></dict-tag>)
                  </option>
              </select>
            </div>
            <!-- 不可出渠道异常 -->
            <div v-if="orderExceptionData.orderExceptionType=='not_shipping_channel_exception'&&(handlerParams.orderExceptionHandlerResult=='change_channel'||handlerParams.orderExceptionHandlerResult=='continue_channel')"  class="card">
              <el-table v-loading="loading" border :data="orderData.orderItemVOList">
                <el-table-column :label="$t('序号')" align="center" prop="id" type="index" min-width="30">
                    <template slot-scope="scope">
                        <span>{{scope.$index + 1}}</span>
                    </template>
                  </el-table-column>
                <el-table-column :label="$t('中文名')" align="center"  prop="prodTitleZh" min-width="50" />
                <el-table-column :label="$t('英文名')" align="center"  prop="prodTitleEn" min-width="50" />
                <el-table-column :label="$t('品牌')" align="center" min-width="50" prop="brandType">
                  <template slot-scope="scope">
                      <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType"></dict-tag>
                    </template>
                  </el-table-column>
                <el-table-column :label="$t('填单箱数')" align="center" prop="num" min-width="60" />
                <!-- v2.0  入仓特性异常 -->
                <el-table-column :label="$t('填单特性')" align="center" prop="prodAttrIds" min-width="60">
                  <template slot-scope="scope">
                        {{getProdAtrr(scope.row.prodAttrIds)}}
                    </template>
                  </el-table-column>
                <el-table-column :label="$t('入仓箱数')" align="center" min-width="60">
                  <template slot-scope="scope">
                      {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.cartonsNum:0}}
                  </template>
                </el-table-column>
                <!-- v2.0  入仓特性异常 -->
                <el-table-column :label="$t('入仓特性')" align="center" prop="num" min-width="60">
                <template slot-scope="scope">
                       {{getProdAtrr(scope.row.warehouseInProdAttrIds)}}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('方数')" align="center" prop="volume" min-width="30">
                  <template slot-scope="scope">
                      {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.volume:0}}
                    </template>
                  </el-table-column>
                <el-table-column :label="$t('重量')" prop="weight" align="center" min-width="30">
                  <template slot-scope="scope">
                      {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.weight:0}}
                    </template>
                  </el-table-column>
                <el-table-column :label="$t('数量')" prop="quantity" align="center" min-width="30">
                  <template slot-scope="scope">
                      {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.quantityAll:0}}
                    </template>
                  </el-table-column>
                <el-table-column :label="$t('货值')" prop="worth" align="center" min-width="30" />
                <el-table-column :label="$t('运费/全包价')" prop="quantity" align="center" min-width="260" v-if="handlerParams.orderExceptionHandlerResult=='continue_channel'">
                  <template slot-scope="scope" >
                     <div v-if="scope.row.charging ==1" class="channel">
                           <!-- <span v-if="!scope.row.oneSeaFreight">{{$t('全包价')}}:{{$t('未报价')}}</span> -->
                         <div  class="channel">
                            <div style="width:80px">{{$t('全包价')}}:</div>
                            <div style="width:88%"  class="channel" v-if="orderExceptionData.orderExceptionStatus==0">
                              <inputor default2="0" v-model.number="scope.row.oneSeaFreight" type="number" :placeholder="$t('整数或者两位小数')" class="w100" />
                              <selector v-model="scope.row.seaFreightCurrency" :options="currencyList" :label-field="$l('title')" value-field="id" defaultable2  class="w100" />
                              / <selector v-model="scope.row.seaFreightVolume" :options="unitList" :label-field="$l('title')" value-field="id" defaultable2  class="w100" />
                            </div>
                          </div>
                     </div>
                     <div v-else>
                         <!-- <span v-if="!scope.row.oneSeaFreight">{{$t('运费')}}:{{$t('未报价')}}</span> -->
                         <div class="channel" v-if="orderExceptionData.orderExceptionStatus==0">
                            <div style="width:80px">{{$t('运费')}}:</div>
                            <div style="width:88%"  class="channel" >
                              <inputor default2="0" v-model.number="scope.row.oneSeaFreight" type="number" :placeholder="$t('整数或者两位小数')" class="w100" />
                              <selector v-model="scope.row.seaFreightCurrency" :options="currencyList" :label-field="$l('title')" value-field="id" defaultable2  class="w100" />
                              / <selector v-model="scope.row.seaFreightVolume" :options="unitList" :label-field="$l('title')" value-field="id" defaultable2  class="w100" />
                            </div>
                          </div>
                            <div v-else class="channel">
                              <span v-if="!scope.row.oneSeaFreight">{{$t('运费')}}:{{$t('未报价')}}</span>
                              <span v-else>{{$t('全包价')}}:{{scope.row.oneSeaFreight}} {{currencyMap[scope.row.seaFreightCurrency]}} / {{unitMap[scope.row.seaFreightVolume]}}</span>
                            </div>
                     </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('清关费')" prop="quantity" align="center" min-width="180" v-if="handlerParams.orderExceptionHandlerResult=='continue_channel'">
                  <template slot-scope="scope">
                       <div class="channel">
                          <!-- <span v-if="!scope.row.oneClearanceFreight">{{$t('未报价')}}</span> -->
                          <div class="channel" v-if="orderExceptionData.orderExceptionStatus==0">
                            <inputor default2="0" v-model.number="scope.row.oneClearanceFreight" type="number" :placeholder="$t('整数或者两位小数')" class="w100" />
                            <selector v-model="scope.row.clearanceFreightCurrency"  :options="currencyList" :label-field="$l('title')" value-field="id" defaultable2  class="w100" />
                            / <selector v-model="scope.row.clearanceFreightVolume" :options="unitList" :label-field="$l('title')" value-field="id" defaultable2  class="w100" />
                          </div>
                          <div v-else>
                            <span v-if="!scope.row.oneClearanceFreight">{{$t('未报价')}}</span>
                            <span v-else>{{scope.row.oneClearanceFreight}} {{currencyMap[scope.row.clearanceFreightCurrency]}} / {{unitMap[scope.row.clearanceFreightVolume]}}</span>
                          </div>
                       </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('运费/全包价')" prop="quantity" align="center" min-width="220" v-if="handlerParams.orderExceptionHandlerResult=='change_channel'">
                  <template slot-scope="scope" >
                     <div v-if="scope.row.charging ==1" class="channel">
                           <span v-if="!scope.row.oneSeaFreight">{{$t('全包价')}}:{{$t('未报价')}}</span>
                           <span v-else>{{$t('全包价')}}:{{scope.row.oneSeaFreight}} {{currencyMap[scope.row.seaFreightCurrency]}} / {{unitMap[scope.row.seaFreightVolume]}}</span>
                           <!-- <el-button v-if="orderExceptionData.orderExceptionStatus==0" type="primary" plain @click="routeToPrice(scope.row,1)">{{!scope.row.oneSeaFreight?$t('报价'):$t('修改报价')}}</el-button> -->
                     </div>
                     <div v-else class="channel">
                         <span v-if="!scope.row.oneSeaFreight">{{$t('运费')}}:{{$t('未报价')}}</span>
                         <span v-else>{{$t('运费')}}:{{scope.row.oneSeaFreight}} {{currencyMap[scope.row.seaFreightCurrency]}} / {{unitMap[scope.row.seaFreightVolume]}}</span>
                         <!-- <el-button v-if="orderExceptionData.orderExceptionStatus==0" type="primary" plain @click="routeToPrice(scope.row,1)">{{!scope.row.oneSeaFreight?$t('报价'):$t('修改报价')}}</el-button> -->
                     </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('清关费')" prop="quantity" align="center" min-width="260" v-if="handlerParams.orderExceptionHandlerResult=='change_channel'">
                  <template slot-scope="scope">
                       <div class="channel">
                           <span v-if="!scope.row.oneClearanceFreight">{{$t('未报价')}}</span>
                           <span v-else>{{scope.row.oneClearanceFreight}} {{currencyMap[scope.row.clearanceFreightCurrency]}} / {{unitMap[scope.row.clearanceFreightVolume]}}</span>
                           <!-- <el-button v-if="orderExceptionData.orderExceptionStatus==0"  type="primary" plain @click="routeToPrice(scope.row,2)">{{!scope.row.oneClearanceFreight?$t('报价'):$t('修改报价')}}</el-button> -->
                       </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          <!-- 渠道异常 -->
          <div v-if="orderExceptionData.orderExceptionType=='channel_exception'&&handlerParams.orderExceptionHandlerResult=='set_shipment_channel'">
            <div v-for="row in orderData.orderItemVOList" :key="row.orderItemId">
              <div v-if="row.charging ==1">
                <el-form-item style="margin-left:40px" :label="$t('全包价成交单价')+':'" size="medium">
                    <span v-if="!row.oneSeaFreight">{{$t('未报价')}}</span>
                    <span v-else>{{row.oneSeaFreight}} {{currencyMap[row.seaFreightCurrency]}} / {{unitMap[row.seaFreightVolume]}}</span>
                </el-form-item>
              </div>
              <div v-else class="feeList">
                <el-form-item :label="$t('运费成交单价')+':'" size="medium">
                  <span v-if="!row.oneSeaFreight">{{$t('未报价')}}</span>
                  <span v-else>{{row.oneSeaFreight}} {{currencyMap[row.seaFreightCurrency]}} / {{unitMap[row.seaFreightVolume]}}</span>
                </el-form-item>
                <el-form-item :label="$t('清关费成交单价')+':'" size="medium">
                  <span v-if="!row.oneClearanceFreight">{{$t('未报价')}}</span>
                  <span v-else>{{row.oneClearanceFreight}} {{currencyMap[row.clearanceFreightCurrency]}} / {{unitMap[row.clearanceFreightVolume]}}</span>
                </el-form-item>
              </div>
            </div>
          </div>
          <el-form-item v-if="orderExceptionData.orderExceptionType=='not_shipping_channel_exception'&&handlerParams.orderExceptionHandlerResult=='change_channel'&&orderExceptionData.reason"  :label="$t('审核驳回原因')+':'" size="medium">
            <span>{{orderExceptionData.orderExceptionNotes}}</span>
          </el-form-item>
      </el-form>
    </el-card>
    <!-- 只有不需要预付才需要审核 -->
    <template v-if="showWorkFlow&&orderExceptionData.orderExceptionStatus!=2">
      <div class="page-title">{{$t('审批流程')}}</div>
      <work-flow xmlkey="commission_config" v-model="handlerParams.ccIds" />
    </template>
    <div slot="footer" class="dialog-footer">
      <!-- bpmStatus
      异常流程状态，1处理中2通过3不通过4已取消
      待审核可能没有bpmStatus字段
      -->
      <template v-if="orderExceptionData.bpmStatus == 1 || (orderExceptionData.bpmId && !orderExceptionData.bpmStatus)">
        <el-button type="primary" @click="$router.push(`/bpm/process-instance/detail?id=`+orderExceptionData.bpmId)">{{$t('审核中')}}</el-button>
        <el-button plain type="primary" @click="cancelAudit">{{$t('取消审核')}}</el-button>
        <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
      </template>
      <template v-else-if="orderExceptionData.orderExceptionStatus==2">
        <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
      </template>
      <template v-else>
        <el-button  type="primary" @click="submitForm">{{$t('提交')}}</el-button>
        <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('取消')}}</el-button>
      </template>
    </div>
    <div class="preview" v-if="IsPreview">
      <file-preview :key="timers" :TragetPic="TragetPic" :FilePreAll="FilePreAll" @Close="onClickClosePreview"></file-preview>
    </div>
  </div>
</template>

<script>
  import FileUpload from '@/components/FileUpload'
  import {getDictData, getDictDatas} from  '@/utils/dict'
  import {getOrder} from '@/api/ecw/order'
  import FilePreview from '@/components/FilePreview'
  import { getCurrencyList } from '@/api/ecw/currency'
  import {getExceptionById,handlerExceptionByExceptionId,getOrderItemById,getOrderFeeById,getOrderExcptionResult,getOrderExceptionChannelPriceList} from "@/api/ecw/orderException"
  import {getFirstReceivableListByOrderId} from '@/api/ecw/financial'
  import WorkFlow from '@/components/WorkFlow'
  import {listByIds} from '@/api/ecw/region'
  import {listServiceUser} from "@/api/system/user";
  import {cancelProcessInstance} from '@/api/bpm/processInstance'
  import {getCustomer} from '@/api/ecw/customer'
  import ProductSelector from '@/components/ProductSelector'
  import {getProductAttrList} from '@/api/ecw/productAttr'
  import {getChannelList} from '@/api/ecw/channel'
  import Selector from '@/components/Selector'
  import {openedRouterList as getOpenedRouterList} from '@/api/ecw/warehouse'
  import {getTradeCityList} from '@/api/ecw/region'
  import { getUnitList } from '@/api/ecw/unit';
  import {getProduct,calculationPrice} from '@/api/ecw/product'
  import {getProductPriceGetPrice} from '@/api/ecw/productPrice'
  import Inputor from '@/components/Inputor'

  export default {
    name: "EcwOrderPrepaydeal",
    components: {
      FileUpload, WorkFlow,FilePreview,ProductSelector,Selector,Inputor
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        orderExceptionData: {},
        types:'package,bag',
        importance:1,
        orderData:{
        },
        orderId:0,
        orderExceptionId:0,
        handlerParams:{
          orderExceptionId:0,
          orderExceptionStatus:"1",
          orderExceptionHandlerResult:''
        },

        //发货/收货人信息
        consigneeData:[],
        routerList:[],
        multipleSelection:[],
        preException:[],
        orderFee:[],
        currencyList:[],
        showWorkFlow: false, // 是否显示工作流
        IsPreview:false, // 控制预览弹窗字段
        timers:"", //时间戳
        FilePreAll:[], // 预览数组
        TragetPic:{},
        region:'',
        customerData:{},//归属客户
        customerServiceList:[],//客户经理
        productId1:null,
        productId2:null,
        productAttrList:[],  // 商品属性
        channelName:'/',
        channelList: [], // 出货取到
       tradeCityList:[],
       unitList: [],
       selectLine:null,
       calculating: false, // 是否正在计算费用，防止频繁重新请求,
       loopOrderItem:[], //线路单询异常清关费
      };
    },
    activated(){
      this.handlerParams = {
          orderExceptionId:0,
          orderExceptionStatus:"1",
          orderExceptionHandlerResult:''
        }
      if(this.$route.query.id){
        console.log(this.$route.query.id)
        this.orderExceptionId = this.$route.query.id
        this.handlerParams.orderExceptionId = this.$route.query.id
        this.getList()
      }
    },
    async created() {

      getUnitList().then(res => this.unitList = res.data)
      this.channelList=(await getChannelList()).data
      this.productAttrList = (await getProductAttrList()).data
      listServiceUser().then(r=>{
        this.customerServiceList = r.data;
      })

      await getCurrencyList().then(res => this.currencyList = res.data)
      this.tradeCityList = (await getTradeCityList()).data
      if(this.$route.query.id){
        this.orderExceptionId = this.$route.query.id
        this.handlerParams.orderExceptionId = this.$route.query.id
        this.getList()
      }
    },
    watch:{
      'handlerParams.orderExceptionHandlerResult'(val){
        if(val == 'no_pay'){
          this.showWorkFlow = true
        }else if(val=="continue_channel"){
          this.showWorkFlow = true
        } else this.showWorkFlow = false

        // 如果是代收货款，则给默认单位
        if(val == 'cod' && this.orderExceptionData.orderExceptionAmountCurrencyId){
          this.$set(this.handlerParams, 'currency', this.orderExceptionData.orderExceptionAmountCurrencyId)
        }
      },
      'orderData.consigneeVO'(val){
        if(!val) return '-'
        listByIds({ids: [val.country, val.province, val.city].join(',')}).then(res => {
          console.log('listById', res)
          let region = ''
          res.data.forEach(item => {
            region += " " + (this.$i18n.locale=='zh_CN'?item.titleZh:item.titleEn)
          })
          this.region = region
        })
      },
      'orderData.channelId'(){
        this.getChannel()
      }
    },
    computed: {
      currencyMap(){
        let map = {}
        this.currencyList.forEach(item => {
          map[item.id] = this.$l(item, 'title')
        })
        return map
      },
      unitMap(){
        let map = {}
        this.unitList.forEach(item => {
          map[item.id] = this.$l(item, 'title')
        })
        return map
      },
      // 是否已完成入仓
      inWarehouse(){
          return (!!this.orderData.inWarehouseState && this.orderData.inWarehouseState > 201) || this.orderData.shipmentState > 0
      },
      selectedRouter(){
          console.log(this.handlerParams.lineId)
          // otherService 1 集运服务  2 送货上门  3 非控货订单代收货款  4 海外仓  5 提货异常
          if(!this.handlerParams.lineId)return null
          return this.routerList.find(item => item.id == this.handlerParams.lineId)
      },
      shopData(){
        if(this.orderExceptionData.orderItemId && this.orderData && this.orderData.orderItemVOList){
          if(this.orderExceptionData.orderExceptionType=='goods_add_exception'&&!this.handlerParams.productId){
            this.handlerParams.productId = this.orderData.orderItemVOList.find(item => item.orderItemId == this.orderExceptionData.orderItemId).prodId
            // this.productId1 = this.handlerParams.productId
            // this.productId2 = this.handlerParams.productId
          }
          return this.orderData.orderItemVOList.find(item => item.orderItemId == this.orderExceptionData.orderItemId)
        }
      },

      getDictData(){
          return (type, value) => getDictData(type, value) || {}
      },
      exportCityList(){
          return this.tradeCityList.filter(item => item.type == 2 || item.type == 3)
      },
      importCityList(){
          return this.tradeCityList.filter(item => item.type == 1 || item.type == 3)
      },
      exportCityIds(){
          let ids = []
          this.exportCityList.forEach(item => {
              ids.push(item.id)
          })
          return ids
      },
      importCityIds(){
          let ids = []
          this.importCityList.forEach(item => {
              ids.push(item.id)
          })
          return ids
      },
    },
    methods: {
      changeLined(e){
        this.selectLine = this.routerList.find(item => item.id == this.handlerParams.lineId)
        this.calculationPrice()
      },
      getDictData,
      onTableMounted(e){
          // console.warn('onTableMounted', e)
      },
      getProdAtrr(ids){
        if(!ids) return ''
        let attr = []

        let attrIds = ids.split(',')
        this.productAttrList.forEach(item=>{
           if(attrIds.indexOf(item.id) > -1||attrIds.indexOf(item.id+'')>-1){
             attr.push(this.$l(item, 'attrName'))
           }
        })
        return attr.join(',')
      },
      /** 查询列表 */
	  getCurrencyLabel(id){
	    var label = this.currencyList.filter(item=>item.id == id)
	    if(label.length>0) return this.$i18n.locale=='zh_CN'?label[0].titleZh:label[0].titleEn
	    return ''
	  },
    getChannel(){
      if(!this.order || !this.order.channelId || this.order.transportId == 1 || this.order.transportId == 2) return
      getChannel(this.order.channelId).then(res => {
        this.channelName = this.$i18n.locale=='zh_CN'?res.data.nameZh:res.data.nameEn
      })
    },
      getList() {
        let that = this
        that.loading = true;
        getExceptionById(that.orderExceptionId).then(response => {
          that.orderExceptionData = response.data;
          // that.orderExceptionData.orderExceptionType = 'order_other_exception'
          // that.orderExceptionData.orderExceptionType = 'order_miss_exception'
           // that.orderExceptionData.orderExceptionType = 'not_customer_service_exception'
           // that.orderExceptionData.orderExceptionType = 'not_shipping_channel_exception'
           // that.orderExceptionData.orderExceptionType = 'channel_exception'
           // that.orderExceptionData.orderExceptionType = 'fee_exception'
          that.loading = false;
          that.orderId = response.data.orderId
          that.getOrderData()
          if(that.orderExceptionData.orderExceptionAttr){
            that.handlerParams.fileList = that.orderExceptionData.orderExceptionAttr.split(',')
          }
          // if(response.data.hasOwnProperty('orderItemId')){
          //   that.getShopData(response.data.orderItemId)
          // }
          if(that.orderExceptionData.orderExceptionType == 'order_pay_exception'){
            that.getOrderFeeByIdData()
            that.getPreExceptionData()
          }
          if(that.orderExceptionData.orderExceptionStatus>0){
            that.getOrderExcptionResult()
          }
        });
      },
      // 获取路线
      getOpenedRouterList(){
          let params = {}
          if(this.orderData.departureVO&&this.orderData.departureVO.departureId){
              params.startCityId = this.orderData.departureVO.departureId
          }
          if(this.orderData.objectiveVO&&this.orderData.objectiveVO.objectiveId){
              params.destCityId = this.orderData.objectiveVO.objectiveId
          }
          if(this.orderData.transportId){
              params.transportType = this.orderData.transportId
          }
          // 始发，目的和运输方式都没有的时候不获取
          if(!params.startCityId && !params.destCityId && !params.transportType) return false
          getOpenedRouterList(params).then(res => {
              this.routerList = res.data.filter(item => {
                return this.exportCityIds.indexOf(item.startCityId) > -1 && this.importCityIds.indexOf(item.destCityId) > -1
              })
              if(this.orderExceptionData.orderExceptionType == 'channel_exception'||this.orderExceptionData.orderExceptionType == 'not_shipping_channel_exception'){
                this.selectLine = this.routerList.find(item => item.id == this.handlerParams.lineId)
              }
            }

          )
      },
      changeExceptionStatus(){
        this.$set(this.handlerParams,'orderExceptionHandlerResult','')
      },
      //订单详情
      getOrderData(){
        getOrder(this.orderId).then(response => {
          this.orderData = response.data
          if(this.orderData.channelId!=0){
            this.handlerParams.channelId = this.orderData.channelId
          }

          this.handlerParams.lineId = this.orderData.lineId
          if(response.data.customerId){
            this.getCustomerData(response.data.customerId)
          }
          if(this.orderExceptionData.orderExceptionType=='not_shipping_channel_exception'){
            // this.handlerParams.channelPriceList = []
            this.getOpenedRouterList()
            if(this.orderExceptionData.orderExceptionStatus==0){
              this.orderData.orderItemVOList.map(v=>{
                if(!v.oneSeaFreight){
                  v.seaFreightCurrency = this.currencyList[0]['id']
                  v.seaFreightVolume = this.unitList[1]['id']
                }
                if(!v.oneClearanceFreight){
                  v.clearanceFreightCurrency = this.currencyList[0]['id']
                  v.clearanceFreightVolume = this.unitList[1]['id']
                }
              })
            }else if(handlerParams.orderExceptionHandlerResult=='continue_channel'){
              this.getExceptionPriceList('continue_channel')
            }
          }
          if(this.orderExceptionData.orderExceptionType=='line_loop_exception'){
            this.getExceptionPriceList('line_loop_exception')
          }
        });
      },
      getCustomerData(id){
        getCustomer(id).then(res=>{
          this.customerData = res.data
        })
      },
      //获取异常结果
      getOrderExcptionResult(){
        getOrderExcptionResult({orderExceptionId:this.orderExceptionId}).then(res=>{
          this.handlerParams = Object.assign(this.handlerParams,res.data.list[0])
          if(!this.orderExceptionData.handlerTime){
            this.orderExceptionData.handlerTime =  this.handlerParams.handlerTime
          }
          if(this.handlerParams.handlerRemark){
            this.$set(this.handlerParams,'orderExceptionHandlerRemark', this.handlerParams.handlerRemark)
          }
          if(this.handlerParams.handlerResult){
              this.$set(this.handlerParams,'orderExceptionHandlerResult', this.handlerParams.handlerResult)
          }
          if(this.handlerParams.productId){
            this.productId2 = this.productId1 = this.handlerParams.productId
          }
        })

      },
      getOrderFeeByIdData(){
        getOrderFeeById({id:this.orderId}).then(response => {
          this.orderFee = response.data
          this.handlerParams.orderExceptionHandlerResult = this.orderFee.result[0]
          // if(this.orderExceptionData.orderExceptionStatus==2){
          //   this.getOrderExcptionResult()
          // }

        })
      },
      getPreExceptionData(){
        getFirstReceivableListByOrderId({id:this.orderId}).then(response => {
          this.preException = response.data
          // this.preException.forEach(item=>{
          //   var curr = getDictData('shipping_price_unit', item.currencyId)
          //   if(curr.label == this.$t('美元')){
          //     item.doller = item.totalAmount
          //   }
          // })
        });
      },
      /* getShopData(id){
        getOrderItemById(id).then(res=>{
          this.shopData = res.data
        })
      }, */
      handleSelectionChange(val) {
         this.multipleSelection = val;
       },
      // 根据线路id显示线路名称
      getRouterNameById(){
              if(this.orderData.logisticsInfoDto) {
                  return this.$t('从')+this.$t('【')+this.orderData.logisticsInfoDto.startTitleZh + this.$t('】')+this.$t('发往')+this.$t('【') + this.orderData.logisticsInfoDto.destTitleZh+this.$t('】')
              }
              return this.$t('无')
      },
      //新增异常处理结果切换
      handlerResultChange(){
        // if(this.orderExceptionData.orderExceptionType=='goods_add_exception'){
        //   this.productId1 = this.handlerParams.productId
        //   this.productId2 = this.handlerParams.productId
        // }
        if(this.orderExceptionData.orderExceptionType=='not_shipping_channel_exception'||this.orderExceptionData.orderExceptionType=='channel_exception'){
          this.getOpenedRouterList()
        }

      },
      submitForm(){
          if(!this.handlerParams.orderExceptionHandlerResult){
            this.$modal.msgError(this.$t('请选择处理结果'));
            return
          }
          if(this.orderExceptionData.orderExceptionType=='order_doc_exception'&&this.handlerParams.fileList&&this.handlerParams.fileList.length>0){
            // if(!this.handlerParams.fileList||this.handlerParams.fileList.length==0){
            //   this.$modal.msgError(this.$t('请上传报关资料'));
            //   return
            // }
            this.handlerParams.files = Array.isArray(this.handlerParams.fileList) ? this.handlerParams.fileList.join(',') : this.handlerParams.fileList
          }
          if(this.orderExceptionData.orderExceptionType=='goods_add_exception'&&this.handlerParams.orderExceptionHandlerResult=='goods_absent'){
            this.$redirect('/product/product-list?prodId=' + this.handlerParams.productId)
            return
          }
          if(this.orderExceptionData.orderExceptionType=='goods_add_exception'&&this.handlerParams.orderExceptionHandlerResult=='goods_exists'){
            if(this.productId1){
              this.handlerParams.productId = this.productId1
            }else{
              this.$modal.msgError(this.$t('请选择产品'));
              return
            }
          }
          if((this.orderExceptionData.orderExceptionType=='not_shipping_channel_exception'&&this.handlerParams.orderExceptionHandlerResult=='change_channel')||(this.orderExceptionData.orderExceptionType=='channel_exception'&&this.handlerParams.orderExceptionHandlerResult=='set_shipment_channel')){
            if(this.handlerParams.channelId==0){
              this.$modal.msgError(this.$t('请选择出货渠道'));
              return
            }
          }
          if((this.orderExceptionData.orderExceptionType=='not_shipping_channel_exception')||this.orderExceptionData.orderExceptionType=='line_loop_exception'){
            if(this.orderExceptionData.orderExceptionType=='line_loop_exception'){
              this.handlerParams.orderItemVOList = this.loopOrderItem
            }else{
              this.handlerParams.orderItemVOList = this.orderData.orderItemVOList
            }
            this.handlerParams.channelPriceList = []
            this.handlerParams.orderItemVOList.map(v=>{
            var listItem = {
              orderId:v.orderId,
              orderItemId:v.orderItemId,
              charging:v.charging,
              freightFee:v.oneSeaFreight,
              isPayAdvance:v.isPayAdvance||0,
              freightCurrencyId:v.seaFreightCurrency,
              freightUnitId:v.seaFreightVolume,
              clearanceFee:v.oneClearanceFreight,
              clearanceCurrencyId:v.clearanceFreightCurrency,
              clearanceUnitId:v.clearanceFreightVolume
            }
            this.handlerParams.channelPriceList.push(listItem)
            })
          }
          handlerExceptionByExceptionId(this.handlerParams).then(res=>{
              this.$modal.msgSuccess(this.$t('提交成功'));
              this.$redirect('/order/pending?id=' + this.orderData.orderId)
          })
      },
      /** 跟进按钮操作 */
      handleAdd() {
        this.$router.push({
          path: "/financial/creatCollection?receiptId=0",
          query:{
            orderId:this.orderId,
          }
        });
      },
      // 取消审核
      cancelAudit(){
        this.$prompt("请输入取消原因", {
          inputPattern: /[\S]+/,
          inputErrorMessage: this.$t('不能为空')
        }).then(({value}) => {
          return cancelProcessInstance(this.orderExceptionData.bpmId, value)
        })
        .then(res => {
          this.getList()
        })
      },
      getFileName(fileName){
        var fileArr = fileName.split('/')
        return fileArr[fileArr.length-1]
      },
      getFileFormat(fileName){
        var fileArr = this.getFileName(fileName).split('.')
        return fileArr[fileArr.length-1]
      },
      // 打开预览
      onClickOpenPreview(val,index){
        this.TragetPic  = { // 当前点击的文件
          FileName: this.getFileName(val), // 文件名称
          name: this.getFileName(val), // 文件名称（可以不传）
          format:this.getFileFormat(val), // 文件格式
          url: val,  // 预览地址
          downUrl:"", // 下载地址
        } // 目标对象
          var fileArr = this.handlerParams.fileList

          fileArr.forEach(item =>{ // 需要预览的文件数组（可以传空数组就是单张预览）
            let obj = {
              FileName: this.getFileName(item),
              name: this.getFileName(item),
              format:this.getFileFormat(item),
              url: item,
              downUrl:"",
            }
            this.FilePreAll.push(obj)
          })
           console.log(this.FilePreAll)
        this.IsPreview = true // 打开预览弹窗
        this.timers = new Date().getTime() // 刷新预览地址
      },
      // 关闭预览
        onClickClosePreview(val){
          this.IsPreview = val  // 由组件内部传入的关闭数据赋值关闭
        },
        onProductChange(product){
            if(!product){
              this.productId1 = null
              this.productId2 = null
             return false
            }
              this.productId1 = product.id
              this.productId2 = product.id
        },
        //不可出渠道异常 ，未报价跳转
        routeToPrice(row,index){
          if(index==2){
            this.$router.push('/product/product-list?prodId=' + row.prodId)
            return
          }
          // 未报价异常lk  ,
            if(row.orderItemId){
              var productData = this.orderData.orderItemVOList.find(item=>item.orderItemId==row.orderItemId)
              if(productData){
                getProduct(productData.prodId).then(res=>{
                    let params = {
                      product_id: productData.prodId,
                      product_type: res.data.typeId,
                      transportId: this.orderData.transportId,
                      exportCity: this.orderData.logisticsInfoDto.startCityId,
                      importCity: this.orderData.logisticsInfoDto.destCityId,
                      startWarehouseId: this.orderData.logisticsInfoDto.startWarehouseId,
                      destWarehouseId: this.orderData.logisticsInfoDto.destWarehouseId,
                      lineId: this.orderData.logisticsInfoDto.lineId,
                      channelId: this.orderData.logisticsInfoDto.channelId
                    }
                    let queryParams = {
                      productId: productData.prodId,
                      lineId: this.orderData.logisticsInfoDto.lineId,
                      channelId: this.orderData.logisticsInfoDto.channelId
                    }
                    let url = ''
                    if([3,4].indexOf(this.orderData.transportId) > -1){
                      url = '../../lineProject/product-price/edit-air?' + (new URLSearchParams(params)).toString()
                    }else{
                      url = '../../lineProject/product-price/edit-sea?' + (new URLSearchParams(params)).toString()
                    }

                    getProductPriceGetPrice(queryParams).then(res=>{
                      console.log(res)
                      if(res.data){
                         if([3,4].indexOf(+this.orderData.transportId) > -1){
                            url =  '../../lineProject/product-price/edit-air?action=update&id='+res.data.id
                         }else{
                            url =  '../../lineProject/product-price/edit-sea?action=update&id='+res.data.id
                         }

                      }
                      return this.$router.push(url)
                    })

                    /* +productData.prodId
                    +'&product_type='+res.data.typeId
                    +'&transportId='+this.orderData.transportId
                    +'&exportCity='+this.orderData.logisticsInfoDto.startCityId+'&importCity='+this.orderData.logisticsInfoDto.destCityId */

                })
              }
            }else{
              return this.$confirm(this.$t('数据缺少orderItemId参数，确定要跳转设置路线价格么？')).then(res => {
                let url = ''
                if([3,4].indexOf(this.orderData.transportId) > -1){
                  url = '../../lineProject/product-price/edit-air?'
                  }else{
                    url = '../../lineProject/product-price/edit-sea?'
                  }
                this.$router.push(url)
              })

            }
        },
        // 计算商品运费(根据货值计算保费)
        calculationPrice(){
            this.$forceUpdate()
            let calcable = true
            if(!this.orderData.orderItemVOList.length) return false
            this.orderData.orderItemVOList.forEach(item => {
                if(!item.prodId){
                    calcable = false
                }
            })
            console.log('calculationPrice', this.handlerParams.channelId)
            if(this.calculating || !calcable) return false
            this.calculating = true
            console.log('calculating ---> ')
            const params = {
              lineId: this.handlerParams.lineId,
              transportId: this.orderData.transportId,
              channelId: [3,4].indexOf(this.orderData.transportId) > -1 ? this.handlerParams.channelId : undefined,
              prodConditionParamList: this.getProductListWithDefaultValue(),
              orderType: this.orderData.orderType
            }
            // if(this.handlerParams.channelId){
            //   params.channelId = this.handlerParams.channelId
            // }
          this.$set(this.handlerParams,'channelId', this.handlerParams.channelId)
            calculationPrice(params).then(res => {
                this.orderData.orderItemVOList.map((item, index) => {
                    item.oneClearanceFreight = res.data.prodCostDtoList[index].oneClearanceFee
                    item.clearanceFreightCurrency = res.data.prodCostDtoList[index].clearanceFeeCurrency
                    item.clearanceFreightVolume = res.data.prodCostDtoList[index].clearanceFeeVolume
                    item.oneSeaFreight = res.data.prodCostDtoList[index].oneFreight
                    item.seaFreightCurrency = res.data.prodCostDtoList[index].freightCurrency
                    item.seaFreightVolume = res.data.prodCostDtoList[index].freightVolume
                })
            }).finally(() => {
                this.calculating = false
            })
        },
        // 体积。件数，数量，重量为选填，但是接口确实必填，所以生成一个副本并赋予默认值
        getProductListWithDefaultValue(){
            let arr = []
            this.orderData.orderItemVOList.forEach(item => {
                let tmp = {...item}
                if(!tmp.volume)tmp.volume = 1
                if(!tmp.weight)tmp.weight = 1
                if(!tmp.quantity)tmp.quantity = 1
                if(!tmp.num)tmp.num = 1
                tmp.orderType = item.orderItemType
                arr.push(tmp)
            })
            return arr
        },
        //获取提交的不可出渠道异常商品清关费
        getExceptionPriceList(type){
          let that = this

          if(type=='line_loop_exception'){
            this.loopOrderItem =[]
            that.orderData.orderItemVOList.map((v,i)=>{
              if(v.orderItemId==this.orderExceptionData.orderItemId){
                this.loopOrderItem.push(v)
              }
            })
          }else{
            getOrderExceptionChannelPriceList({orderId:that.orderId,exceptionId:parseInt(that.orderExceptionId),exceptionResultId:that.handlerParams.id}).then(res=>{
              if(res.code==0){
                  if(res.data.length>0){
                    that.orderData.orderItemVOList.map(v=>{
                     var item = res.data.find(vs=>vs.orderItemId==v.orderItemId)
                     if(item){
                       v.oneSeaFreight = item.freightFee
                       v.seaFreightCurrency = item.freightCurrencyId
                       v.seaFreightVolume = item.freightUnitId
                       v.oneClearanceFreight = item.clearanceFee
                       v.clearanceFreightCurrency = item.clearanceCurrencyId
                       v.clearanceFreightVolume = item.clearanceUnitId
                     }
                    })
                  }
                }
            })
          }
        }
    }
  };
</script>

<style scoped>
  .link-text{
    margin-top:20px;
  }
  .link-text span{
    font-size:16px;
    font-weight:600;
    margin-right:20px;
  }
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card{
    margin-top: 20px;
  }
  .price_list{
    display: flex;
    align-items: center;
    margin-bottom:10px;
  }
  .price_label{
    width: 112px;
    font-weight: 700;
    text-align: right;
    margin-right: 6px;
    font-size: 14px;
    color:#606266;
  }
  .channel{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-evenly;
  }
  .dialog-footer{
    padding: 40px;
    width: 60%;
    align-items: center;
    display: flex;
    /* justify-content: space-between; */
  }
  .filelist{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column
  }
  .filelist span{
    color: #1E98D7;
  }
  .red{
      color: red;
  }
  .button{
    margin-left:40px;
  }
  .feeList{
    display: flex;
    flex-direction: column
  }
::v-deep .el-input--medium .el-input__inner {
  padding: 0 4px;
}
::v-deep .el-table th.el-table__cell > .cell{
  padding:0 2px !important;
}
::v-deep .el-table td.el-table__cell div{
  padding:0 2px !important;
}
</style>
