<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('订单号')+':'">
            {{orderData.orderNo || ''}}
          </el-form-item>
       </el-row>
       <div v-if="shopData">
         <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">【<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />】</span>
                {{orderData?getRouterNameById():''}}
           </el-form-item>
       </el-row>
       
       <!-- 单证异常，发货人异常，其他异常 不显示这部分内容 -->
       <div v-if="['order_doc_exception','order_consignor_exception', 'order_other_exception'].indexOf(orderExceptionData.orderExceptionType) == -1">
        <!-- 预付异常,提货异常是针对整个订单的 -->
        <template v-if="['order_pay_exception','order_pick_up_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-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>
            <el-form-item :label="$t('填单参数')+':'">
              <template v-if="shopData">
                {{$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('入仓参数')+':'" 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
                  })}}
                <!-- <span>{{(orderData.sumNum||0)+$t('箱')+(orderData.sumVolume||0)+'m³ '+(orderData.sumWeight||0)+'kg '+(orderData.sumQuantity||0) +$t('个')}}</span> -->
              </el-form-item>
              <template v-else>{{$t('无入仓数据')}}</template>
          </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:'无'}} -->
          </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 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'">
          <el-form-item :label="$t('收费参数')+':'">
            <span>{{orderData.sumNum||0}}{{$t('箱')}} {{orderData.wvolume||0}}m³  {{orderData.vweight||0}}Kg  {{orderData.sumQuantity||0}}{{$t('个')}}</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="scope">
            <span>{{scope.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="['order_doc_exception', 'order_consignor_exception', 'order_other_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" />
        <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">
            <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>

      <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 style="margin-left: 8px;" v-for="(item, key) of orderFee.writeOffAmount" :key="key">{{item}}{{currencyMap[key]}}</span>
          </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}} {{$t('人民币')}}
          </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}} {{$t('立方米')}}
          </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}} {{$t('立方米')}}
            </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_pay_exception'">
            <el-form-item :label="$t('处理结果')+':'" required>
              <el-select v-model="handlerParams.orderExceptionHandlerResult" placeholder="请选择" clearable>
                <template v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_result')">
                  <el-option v-if="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="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>
                <template v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_result')">
                  <el-option :key="dict.value" :label="$l(dict, 'label')" :value="dict.value"/>
                </template>
              </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('状态')+':'">
              <el-radio-group v-model="handlerParams.orderExceptionStatus" @change="changeExceptionStatus">
                  <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="请选择" clearable>
              <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="handlerParams.orderExceptionStatus==2">
              <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>
            <el-form-item :label="$t('查明原因')+':'" required v-if="handlerParams.orderExceptionStatus==1">
                <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>
    <!-- 只有不需要预付才需要审核 -->
    <template v-if="showWorkFlow">
      <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>
        <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>
</template>

<script>
  import FileUpload from '@/components/FileUpload'
  import {getDictData, getDictDatas} from  '@/utils/dict'
  import {getOrder} from '@/api/ecw/order'
  import { getCurrencyList } from '@/api/ecw/currency'
  import {getExceptionById,handlerExceptionByExceptionId,getOrderItemById,getOrderFeeById} from "@/api/ecw/orderException"
  import {getFirstReceivableListByOrderId} from '@/api/ecw/financial'
  import WorkFlow from '@/components/WorkFlow'
  import {cancelProcessInstance} from '@/api/bpm/processInstance'
  export default {
    name: "PrepayDeal",
    components: {
      FileUpload, WorkFlow
    },
    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, // 是否显示工作流
      };
    },
    created() {
      if(this.$route.query.id){
        this.orderExceptionId = this.$route.query.id
        this.handlerParams.orderExceptionId = this.$route.query.id
        this.getList()

      }
       getCurrencyList().then(res => this.currencyList = res.data)
    },
    watch:{
      'handlerParams.orderExceptionHandlerResult'(val){
        if(val == 'no_pay'){
          this.showWorkFlow = true
        }
      }
    },
    computed: {
      currencyMap(){
        let map = {}
        this.currencyList.forEach(item => {
          map[item.id] = this.$l(item, 'title')
        })
        return map
      },
      shopData(){
        if(this.orderExceptionData.orderItemId && this.orderData && this.orderData.orderItemVOList){
          return this.orderData.orderItemVOList.find(item => item.orderItemId == this.orderExceptionData.orderItemId)
        }
      }
    },
    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_miss_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()
          }

        });
      },
      changeExceptionStatus(){
        this.$set(this.handlerParams,'orderExceptionHandlerResult','')
      },
      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[0]
        })
      },
      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.$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: '不能为空'
        }).then(({value}) => {
          return cancelProcessInstance(this.orderExceptionData.bpmId, value)
        })
        .then(res => {
          this.getList()
        })
      }
    }
  };
</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>