<template>
  <div class="fee-application">
    <h1>费用申请-{{orderDetails.orderNo}}
    </h1>
    <el-divider></el-divider>
    <el-form label-width="100px" inline>
      <el-form-item label="订单号:"><div class="content">
          {{orderDetails.orderNo}}
      </div></el-form-item>
      <el-form-item label="发货人："><div class="content">{{orderDetails.consignorVO.name}}</div></el-form-item>
      <el-form-item label="唛头"><div class="content">{{orderDetails.marks}}</div></el-form-item>
      <el-form-item> <el-button @click="addCost">添加申请</el-button></el-form-item>
    </el-form>
     <el-table :data="list">
       <el-table-column label="序号" type="index"></el-table-column>
       <el-table-column label="费用类型">
          <template  v-slot:default="scope">
            <dict-selector :type="DICT_TYPE.FEE_TYPE" v-model="scope.row.feeType" />
          </template>
       </el-table-column>
       <el-table-column label="金额">
         <template v-slot:default = 'scope'>
           <el-input v-model="scope.row.applicationFee" ></el-input>
         </template>
       </el-table-column>
       <el-table-column label="货币类型">
         <template v-slot:default = 'scope'>
           <dict-selector :type="DICT_TYPE.COMMISSION_CURRENCY_TYPE" v-model="scope.row.applicationFeeCurrency" />
         </template>
       </el-table-column>
       <el-table-column label="付款类型">
         <template v-slot:default = 'scope'>
           <dict-selector :type="DICT_TYPE.PAY_TYPE" v-model="scope.row.payType" />
         </template>
       </el-table-column>
       <el-table-column label="备注">
         <template v-slot:default="scope">
           <el-input v-model="scope.row.remarks" type="textarea"></el-input>
         </template>
       </el-table-column>
       <el-table-column label="确认收款">
         <template v-slot:default ="scope">
           <dict-tag :type="DICT_TYPE.RECEIVE_FLAG" :value="scope.row.receiveFlag" />
       </template>
       </el-table-column>
       <el-table-column label="申请人">
          <template v-slot:default ="scope">
            {{scope.row.status == 0 ?'未提交': scope.row.applicationAuthor}}
          </template>
       </el-table-column>
       <el-table-column label="审核人">
          <template  v-slot:default ="scope">
            {{scope.row.status == 0 ?'未提交': scope.row.shenhe}}
          </template>
       </el-table-column>
       <el-table-column label="操作">
         <template v-slot:default = 'scope'>
           <el-button type="text" v-if="scope.row.status !== 0">{{status[scope.row.status]}}</el-button>
           <el-button type="text" v-if="scope.row.status === 2">修改</el-button>
         </template>
       </el-table-column>
     </el-table>
       <div style="text-align: center;margin-top: 20px;">
         <el-button style="margin-right: 30px;" @click="submit">提交</el-button>
         <el-button>取消</el-button>
       </div>
  </div>
</template>

<script>
import {getOrder, feeApplicationListByOrderId, feeApplicationCreate} from "@/api/ecw/order";
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import Template from "@/views/cms/template";
let status = {0:'未提交',1:'审核中',2:'审核通过',3:'审核不通'}
export default {
  name: "feeApplication",
  components: {Template},
  props:{
    orderId:[Number, String],
  },
  data(){
    return {
      orderDetails:{},
      list:[],
      DICT_TYPE,
      getDictDatas,
      status
    }
  },
  created() {
    getOrder(this.orderId).then(r =>{
      this.orderDetails = r.data
    })
    this.feeApplicationFn();
  },
  methods:{
    feeApplicationFn(){
      feeApplicationListByOrderId({orderId:this.orderId}).then(r => {
        console.log(r)
      })
    },
    addCost(){
        this.list.push(
          {
            orderId:this.orderId,
            feeType:undefined,//费用申请类型
            applicationFee:undefined,//金额
            applicationFeeCurrency:undefined,//	费用申请货币类型
            remarks:undefined,
            receiveFlag:0,
            applicationAuthor:undefined,
            shenhe:undefined,
            status:0,
          }
        )
    },
    submit(){
      feeApplicationCreate(this.list[0]).then(r=>{
        console.log(r);
      })
    }
  }
}
</script>

<style scoped lang="scss">
.fee-application {
  padding: 0 20px;
  h1{
    font-weight: 600;
    font-size: 20px;
  }
  .content{
    width: 200px;
  }
}
</style>
