<template>
  <div class="app-container">
    <el-card>
     <div slot="header" class="header">
       <div class="card-title">查看</div>
       <el-button type="primary" icon="el-icon-arrow-left" @click="$router.back()">返回</el-button>
     </div>
     <el-form :model="orderData" ref="queryForm" size="small" :inline="true"  label-width="120px" class="card">
       <el-row>
          <el-form-item label="订单号:">
            {{orderData?orderData.orderNo:''}}
          </el-form-item>
       </el-row>
       <el-row>
          <el-form-item label="产品名称:">
             {{orderData.totalMoney}}
          </el-form-item>
       </el-row>
       <el-row>
          <el-form-item label="英文名称:">
             {{orderData.totalMoney}}
          </el-form-item>
       </el-row>
       <el-row>
           <el-form-item label="运输路线:" >
               <span v-if="orderData">【<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />】</span>
                {{orderData?getRouterNameById(orderData.lineId):''}}
           </el-form-item>
       </el-row>
       <el-row>
          <el-form-item label="填单参数:">
             {{(orderData.sumNum||0)+'箱 '+(orderData.sumVolume||0)+'m³ '+(orderData.sumWeight||0)+'kg'}}
          </el-form-item>
       </el-row>
       <el-row>
          <el-form-item label="入仓参数:">
            {{(orderData.sumNum||0)+'箱 '+(orderData.sumVolume||0)+'m³ '+(orderData.sumWeight||0)+'kg'}}
          </el-form-item>
       </el-row>
       <el-row :span="12">
          <el-form-item label="异常描述:">
             {{orderData.totalMoney||'无'}}
          </el-form-item>
          <el-button type="primary" plain icon="el-icon-plus" style="margin-left: 200px;"  @click="handleAdd">新增收款单</el-button>
       </el-row>
     </el-form>
      <el-table v-loading="loading" border :data="orderData.orderItemVOList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
                   </el-table-column>
            <el-table-column label="品名" align="center" prop="goodsType">
              <template slot-scope="scope">
                {{scope.row.prodTitleZh+'('+scope.row.prodTitleEn+')'}}
              </template>
            </el-table-column>
            <el-table-column label="箱数" prop="num" />
            <el-table-column label="体积/重量">
              <template slot-scope="scope">
                  {{scope.row.volume+'/'+scope.row.weight}}
                </template>
              </el-table-column>
              <el-table-column label="收款类型">
                 <template >
                    '预付'
                 </template>
              </el-table-column>
            <el-table-column label="收入类型">
               <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="应收金额" prop="num" />
            <el-table-column label="总金额美元" align="center" prop="totalAmount" />
            <el-table-column label="总金额RMB" align="center" prop="totalAmount" />
            <el-table-column label="实收金额" prop="volume" />
            <el-table-column label="付款人">
              <template slot-scope="scope">
               <span>{{srope.row.consigneeVO.name}}(收货人)</span>
              </template>
            </el-table-column>
            <el-table-column label="付款状态" 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-form :model="orderData" ref="queryForms" size="small" :inline="true"  label-width="120px" class="card">
            <el-row>
               <el-form-item label="应付金额:">
                  {{orderData.totalMoney}}
               </el-form-item>
            </el-row>
            <el-row>
               <el-form-item label="核销金额:">
                  {{orderData.totalMoney}}
               </el-form-item>
            </el-row>
            <el-row>
               <el-form-item label="核销比例:">
                  {{orderData.totalMoney}}
               </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="处理结果:" >
                  <el-select v-model="handlerParams.orderExceptionHandlerResult">
                  <el-option  v-for="dict in this.getDictDatas('order_pay_exception_result')"
                             :key="dict.value" :label="dict.label" :value="dict.value"/>
                  </el-select>
                </el-form-item>
            </el-row>
            <el-row :span="8">
               <el-form-item label="备注:" size="medium">
                 <el-input style="width: 500px;"  type="textarea" v-model="handlerParams.orderExceptionHandlerRemark"  />
               </el-form-item>
            </el-row>
          </el-form>
          </el-card>
          <div slot="footer" class="dialog-footer">
            <div>
              <el-button  type="primary" @click="submitForm">提交</el-button>
              <el-button plain type="primary" @click="$router.back()">取消</el-button>
            </div>
            <el-button  type="primary" @click="submitForm">转交</el-button>
          </div>
  </div>
</template>

<script>
  import {DICT_TYPE} from  '@/utils/dict'
  import {openedRouterList as getOpenedRouterList} from '@/api/ecw/warehouse'
  import {getOrder} from '@/api/ecw/order'
  import {getExceptionById,handlerExceptionByExceptionId} from "@/api/ecw/orderException"

  export default {
    name: "PrepayDeal",
    components: {

    },
    data() {
      return {
        // 遮罩层
        loading: false,
        orderExceptionData: {},
        types:'package,bag',
        importance:1,
        orderData:{
        },
        orderId:0,
        orderExceptionId:0,
        handlerParams:{
          orderExceptionId:0
        },
        //发货/收货人信息
        consigneeData:[],
        routerList:[],
        multipleSelection:[],
      };
    },
    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.loading = false;
          that.orderId = response.data.orderId
          that.getOrderData()
        });
      },
      getOrderData(){
        getOrder(this.orderId).then(response => {
          this.orderData = response.data
        });
      },
      handleSelectionChange(val) {
         this.multipleSelection = val;
       },
      // 获取路线
      getOpenedRouterList(){
          let params = {}
          if(this.list.departureId){
              params.startCityId = this.list.departureId
          }
          if(this.list.objectiveId){
              params.destCityId = this.list.objectiveId
          }
          getOpenedRouterList(params).then(res => this.routerList = res.data)
      },
      // 根据线路id显示线路名称
      getRouterNameById(routerId){
          // return routerId => {
              let router = this.routerList.find(item => item.id == routerId)
              console.log({router})
              if(router){
                  return ' 从【'+router.startTitleZh + '】发往【' + router.destTitleZh+'】'
              }
              return '无'
          // }
      },
      submitForm(){
          handlerExceptionByExceptionId(that.orderExceptionId).then(response => {
            that.orderExceptionData = response.data;
            that.loading = false;
            that.orderId = response.data.orderId
            this.getOrderData()
          });
      },
      /** 跟进按钮操作 */
      handleAdd() {
        this.$router.push({
          path: "/financial/creatCollection",
          query:{
            orderId:this.orderId,
          }
        });
      },

    }
  };
</script>

<style>
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .header{
    width: 60%;
    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>
