<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')">返回</el-button>
     </div>
     <el-form :model="orderData" ref="queryForm" size="small" :inline="true"  label-width="120px" class="card">
       <el-row>
          <el-form-item :label="$t('订单号:')">
            {{orderData?orderData.orderNo:''}}
          </el-form-item>
       </el-row>
       <div v-if="orderExceptionData.orderExceptionType=='order_superfluous_box_exception'||orderExceptionData.orderExceptionType=='order_lack_box_exception'||orderExceptionData.orderExceptionType=='order_miss_exception'||orderExceptionData.orderExceptionType=='order_superfluous_goods_exception'||orderExceptionData.orderExceptionType=='order_in_water_exception'||orderExceptionData.orderExceptionType=='order_damage_exception'">
         <el-row>
            <el-form-item :label="$t('产品名称:')" >
              {{shopData?shopData.prodTitleZh:''}}
            </el-form-item>
         </el-row>
         <el-row>
            <el-form-item :label="$t('产品英文名称:')">
              {{shopData?shopData.prodTitleEn:''}}
            </el-form-item>
         </el-row>
       </div>
       <el-row>
           <el-form-item :label="$t('运输路线:')" >
               <span v-if="orderData">【<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />】</span>
                {{orderData?getRouterNameById():''}}
           </el-form-item>
       </el-row>
       <div v-if="orderExceptionData.orderExceptionType!='order_doc_exception'&&orderExceptionData.orderExceptionType!='order_consignor_exception'&&orderExceptionData.orderExceptionType!='order_other_exception'">
         <el-row>
            <el-form-item :label="$t('填单参数:')">
               {{(shopData.num||0)+$t('箱 ')+(shopData.volume||0)+'m³ '+(shopData.weight||0)+'kg '+(shopData.quantity||0)+$t('个')}}
            </el-form-item>
         </el-row>
         <el-row>
            <el-form-item :label="$t('入仓参数:')">
              <span>{{(shopData.warehouseInInfoVO?shopData.warehouseInInfoVO.cartonsNum:0)+$t('箱')+(shopData.warehouseInInfoVO?shopData.warehouseInInfoVO.volume:0)+'m³ '+(shopData.warehouseInInfoVO?shopData.warehouseInInfoVO.weight:0)+'kg '+(shopData.warehouseInInfoVO?shopData.warehouseInInfoVO.quantityAll:0) +$t('个')}}</span>
            </el-form-item>
         </el-row>
         <el-row :span="12">
            <el-form-item :label="$t('异常描述:')">
               {{orderExceptionData.orderExceptionDescVO?orderExceptionData.orderExceptionDescVO.descZh:'无'}}
            </el-form-item>
            <el-button v-if="orderExceptionData.orderExceptionType=='order_pay_exception'" type="primary" plain icon="el-icon-plus" style="margin-left: 200px;"  @click="handleAdd">新增收款单</el-button>
         </el-row>
         <el-row>
            <el-form-item :label="$t('收费参数:')">
              <span>{{orderData.entryNum||0}}{{$t('箱')}} {{orderData.entryVolume||0}}m³  {{orderData.entryWeight||0}}Kg  {{orderData.entryQuantity||0}}{{$t('个')}}</span>
            </el-form-item>
         </el-row>
<!--         <el-row :span="12">
            <el-form-item label="详细内容:">
               {{orderData.totalMoney||'无'}}
            </el-form-item>
            <el-button v-if="orderExceptionData.orderExceptionStatus==3" type="primary" plain icon="el-icon-plus" style="margin-left: 200px;"  @click="handleAdd">新增收款单</el-button>
         </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.ECW_TRANSPORT_TYPE" :value="scope.row.feeType"></dict-tag>
               </template>
            </el-table-column>
            <el-table-column :label="$t('应收金额')" prop="totalAmount" />
      <!--      <el-table-column label="总金额美元" align="center" prop="totalAmount">
              <template slot-scope="{row}">
                   {{row.totalAmount}}({{row.exchangeRate}})
              </template>
            </el-table-column>
            <el-table-column label="总金额RMB" align="center" prop="totalAmount">
             <template slot-scope="{row}">
                   {{row.totalAmount}}({{row.exchangeRate}})
              </template>
            </el-table-column>
            <el-table-column label="实收金额" prop="volume" /> -->
            <el-table-column :label="$t('付款人')">
              <template slot-scope="scope">
               <span>{{srope.row.consigneeName}}({{$t('收货人')}})</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('付款状态')" prop="worth">
              <template slot-scope="scope">
                  <dict-tag :type="DICT_TYPE.ECW_RECEIPT_STATE" :value="scope.row.state"></dict-tag>
                </template>
              </el-table-column>
          </el-table>
          <el-table v-if="orderExceptionData.orderExceptionType=='order_doc_exception'||orderExceptionData.orderExceptionType=='order_consignor_exception'||orderExceptionData.orderExceptionType=='order_other_exception'" 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" />
                <el-table-column :label="$t('入仓箱数')">
                  <template slot-scope="scope">
                      {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.cartonsNum:0}}
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('方数')" prop="volume" />
                <el-table-column :label="$t('重量')" prop="weight" />
                <el-table-column :label="$t('数量')" prop="quantity" />
                <el-table-column :label="$t('货值')" prop="worth" />
              </el-table>
          <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">{{item}}{{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">{{item}}{{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('已核销预付金额:')">
                  {{orderFee.writeOffAmount}}
               </el-form-item>
               </el-col>
               <el-col :span="8">
               <el-form-item :label="$t('已核销预付金额占总金额比例:')" label-width="200px">
                  {{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}}
               </el-form-item>
               </el-col>
               <el-col :span="8">
               <el-form-item :label="$t('预付商品货值占佣金额比例:')" label-width="200px">
                  {{orderFee.paymentGoodsWorthScale}}
               </el-form-item>
               </el-col>
            </el-row>
            <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
               <el-form-item :label="$t('预付商品方数:')">
                  {{orderFee.paymentGoodsVolume}}
               </el-form-item>
            </el-row>
            <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
              <el-col :span="6">
                 <el-form-item :label="$t('订单总方数:')">
                    {{orderFee.totalVolume}}
                 </el-form-item>
               </el-col>
               <el-col :span="8">
                 <el-form-item :label="$t('预付商品方数占总方数比例:')" label-width="200px">
                    {{orderFee.paymentGoodsVolumeScale}}
                 </el-form-item>
                 </el-col>
            </el-row>
            <el-row :span="8" v-if="orderExceptionData.orderExceptionType=='order_doc_exception'">
               <el-form-item :label="$t('报关资料:')" size="medium">
                 <file-upload v-model="handlerParams.fileList" :value="orderExceptionData.file" ></file-upload>
               </el-form-item>
            </el-row>
            <el-row v-if="orderExceptionData.orderExceptionType!='order_miss_exception'&&orderExceptionData.orderExceptionType!='order_superfluous_goods_exception'&&orderExceptionData.orderExceptionType!='order_in_water_exception'&&orderExceptionData.orderExceptionType!='order_damage_exception'">
                <el-form-item :label="$t('处理结果:')" required>
                  <el-select v-model="handlerParams.orderExceptionHandlerResult" placeholder="请选择" clearable>
                  <el-option  v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_result')"
                             :key="dict.value" :label="dict.label" :value="dict.value"/>
                  </el-select>
                </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"  />
                 <el-select v-model="handlerParams.currency" style="width: 100px;margin-left: 10px;" clearable>
                 <el-option  v-for="dict in getDictDatas('shipping_price_unit') "
                            :key="dict.value" :label="dict.label" :value="dict.value"/>
                 </el-select>
               </el-form-item>
            </el-row>
            <el-row :span="8" v-if="orderExceptionData.orderExceptionType!='order_lack_box_exception'&&orderExceptionData.orderExceptionType!='order_miss_exception'&&orderExceptionData.orderExceptionType!='order_superfluous_goods_exception'&&orderExceptionData.orderExceptionType!='order_in_water_exception'&&orderExceptionData.orderExceptionType!='order_damage_exception'&&orderExceptionData.orderExceptionType!='order_other_exception'&&orderExceptionData.orderExceptionType!='order_lack_box_exception'">
               <el-form-item :label="$t('备注:')" size="medium">
                 <el-input style="width: 500px;"  type="textarea" v-model="handlerParams.orderExceptionHandlerRemark"  />
               </el-form-item>
            </el-row>

            <div v-if="orderExceptionData.orderExceptionType=='order_miss_exception'||orderExceptionData.orderExceptionType=='order_superfluous_goods_exception'||orderExceptionData.orderExceptionType=='order_in_water_exception'||orderExceptionData.orderExceptionType=='order_damage_exception'">
              <el-row>
                 <el-form-item :label="$t('详细内容:')">
                    {{orderExceptionData.orderExceptionDetails||'无'}}
                 </el-form-item>
              </el-row>
              <el-row >
                 <el-form-item :label="$t('状态:')">
                      <el-radio v-model="handlerParams.orderExceptionStatus" label="1">{{$t('处理中')}}</el-radio>
                      <el-radio v-model="handlerParams.orderExceptionStatus" label="2">{{$t('已处理')}}</el-radio>
                 </el-form-item>
              </el-row>
              <el-row>
                 <el-form-item :label="$t('查明原因:')" required>
                    <el-select v-model="handlerParams.orderExceptionHandlerResult" clearable>
                    <el-option  v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_result')"
                               :key="dict.value" :label="dict.label" :value="dict.value"/>
                    </el-select>
                 </el-form-item>
              </el-row>
            </div>
          </el-form>
          </el-card>
          <div slot="footer" class="dialog-footer">
            <div v-if="orderExceptionData.orderExceptionStatus!='order_pay_exception'">
              <el-button  type="primary" @click="submitForm">{{$t('提交')}}</el-button>
              <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('取消')}}</el-button>
            </div>
            <div v-if="orderExceptionData.orderExceptionStatus=='order_pay_exception'&&!orderExceptionData.bpmId">
              <el-button  type="primary" @click="submitForm">{{$t('提交')}}</el-button>
              <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('取消')}}</el-button>
            </div>
            <!-- <el-button v-if="orderExceptionData.orderExceptionStatus=='order_pay_exception'"  type="primary" @click="submitForm">转交</el-button> -->
          <el-button v-if="orderExceptionData.orderExceptionStatus=='order_pay_exception'&&orderExceptionData.bpmId" type="primary" @click="$router.push(`/bpm/process-instance/detail?id=`+orderExceptionData.bpmId)">{{$t('审核中<')}}</el-button>
          <el-button v-if="orderExceptionData.orderExceptionStatus=='order_pay_exception'&&orderExceptionData.bpmId" plain type="primary" @click="dialogVisible = true">{{$t('取消审核')}}</el-button>
          <el-button v-if="orderExceptionData.orderExceptionStatus=='order_pay_exception'&&orderExceptionData.bpmId" plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
          </div>
  </div>
</template>

<script>
  import FileUpload from '@/components/FileUpload'
  import {getDictData, getDictDatas} from  '@/utils/dict'
  import {getOrder} from '@/api/ecw/order'
  import {getExceptionById,handlerExceptionByExceptionId,getOrderItemById,getOrderFeeById} from "@/api/ecw/orderException"
  import {getFirstReceivableListByOrderId} from '@/api/ecw/financial'

  export default {
    name: "PrepayDeal",
    components: {
      FileUpload
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        orderExceptionData: {},
        types:'package,bag',
        importance:1,
        orderData:{
        },
        orderId:0,
        orderExceptionId:0,
        handlerParams:{
          orderExceptionId:0,
          orderExceptionStatus:"1"
        },
        shopData:{},
        //发货/收货人信息
        consigneeData:[],
        routerList:[],
        multipleSelection:[],
        preException:[],
        orderFee:[]
      };
    },
    created() {
      if(this.$route.query.id){
        this.orderExceptionId = this.$route.query.id
        this.handlerParams.orderExceptionId = this.$route.query.id
        this.getList()

      }
    },
    methods: {
      /** 查询列表 */
      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_pick_up_exception'
          // that.orderExceptionData.orderExceptionType = 'order_pay_exception'
          that.loading = false;
          that.orderId = response.data.orderId
          that.getOrderData()
          if(response.data.hasOwnProperty('orderItemId')){
            that.getShopData(response.data.orderItemId)
          }

          if(that.orderExceptionData.orderExceptionType == 'order_pay_exception'){
            that.getOrderFeeByIdData()
            that.getPreExceptionData()
          }

        });
      },
      getOrderData(){
        getOrder(this.orderId).then(response => {
          this.orderData = response.data
        });
      },
      getOrderFeeByIdData(){
        getOrderFeeById({id:this.orderId}).then(response => {
          this.orderFee = response.data
          this.handlerParams.orderExceptionHandlerResult = this.orderFee.result
        })
      },
      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.orderData.logisticsInfoDto.startTitleZh + '】'+this.$t('发往')+'【' + this.orderData.logisticsInfoDto.destTitleZh+'】'
              }
              return this.$t('无')
      },
      submitForm(){
          if(!this.handlerParams.orderExceptionHandlerResult){
            this.$modal.msgError(this.$t('请选择处理结果'));
            return
          }
          handlerExceptionByExceptionId(this.handlerParams).then(res=>{
              this.$modal.msgSuccess(this.$t('提交成功'));
              this.$store.dispatch('tagsView/delCurrentView')
          })
      },
      /** 跟进按钮操作 */
      handleAdd() {
        this.$router.push({
          path: "/financial/creatCollection?receiptId=0",
          query:{
            orderId:this.orderId,
          }
        });
      },

    }
  };
</script>

<style scoped>
  .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;
  }
  .dialog-footer{
    padding: 40px;
    width: 60%;
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
</style>
