<template>
    <el-dialog :visible.sync="dialogVisible"    width="80%" :before-close="()=>{
    $emit('update:dialogVisible',false)
  }">
    <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 ? 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  :disabled="isModify[forbidden(scope.row)]"  :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  :disabled="isModify[forbidden(scope.row)]" v-model="scope.row.applicationFee" ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="货币类型">
          <template v-slot:default = 'scope'>
            <dict-selector  :disabled="isModify[forbidden(scope.row)]" :type="DICT_TYPE.COMMISSION_CURRENCY_TYPE" v-model="scope.row.applicationFeeCurrency" />
          </template>
        </el-table-column>
        <el-table-column label="付款类型">
          <template v-slot = {row}>
            <dict-selector  :disabled="isModify[forbidden(row)]" :type="DICT_TYPE.PAYMENT_TYPE" v-model="row.payType" />
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template v-slot:default="scope">
            <el-input  :disabled="isModify[forbidden(scope.row)]" 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'>
            <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" @click="modify(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 20px">
        <work-flow xmlkey="free_apply" v-model="selectedUsers"  />
      </div>
      <div style="text-align: center;margin-top: 20px;">
        <el-button style="margin-right: 30px;" @click="submit">提交</el-button>
        <el-button>取消</el-button>
      </div>
    </div>
  </el-dialog>

</template>

<script>
import {getOrder, feeApplicationCreate, ApplicationListByOrderId, applicationUpdate} from "@/api/ecw/order";
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import Template from "@/views/cms/template";
import workFlow from "@/components/WorkFlow";
export default {
  name: "feeApplication",
  components: {Template,workFlow},
  props:{
    orderId:[Number, String],
    dialogVisible:{
      type:Boolean,
      default:false,
    }
  },
  data(){
    return {
      orderDetails:{},
      list:[],
      DICT_TYPE,
      getDictDatas,
      STATUS:{},
      isModify:[],
      isModifyIf:false,
      selectedUsers:[]
    }
  },
  created() {
    this.getDictDatas(this.DICT_TYPE.AUDIT_STATUS).forEach( e =>{
      this.STATUS[e.value] = e.label
    })

  },
  computed:{
    forbidden(){
      return (row)=>{
        return this.list.findIndex(e => e.id = row.id)
      }
    }
  },
  methods:{
    addCost(){
      if(this.list.some(e => e.status === 0 || e.status === 1)){
        return this.$message.success('当前有申请费用为审核中或未提交，请审核后在申请');
      }
        this.list.push(
          {
            orderId:this.orderId,
            feeType:undefined,//费用申请类型
            applicationFee:undefined,//金额
            applicationFeeCurrency:undefined,//	费用申请货币类型
            remarks:undefined,
            receiveFlag:0,
            applicationAuthor:undefined,
            status:0,
          }
        )
      this.isModify.push(false)
      this.isModifyIf = false;
    },
    submit(){
      if(this.isModifyIf){
        applicationUpdate({...this.list[this.isModify.findIndex(e => e === false)],status:1}).then(r => {
          if(r.code === 0){
            this.$emit('update:dialogVisible',false)
            this.$message.success('修改成功');
          }
        })
      }else {
        if(this.list[this.list.length - 1].status === 0){
          feeApplicationCreate( {...this.list[this.list.length - 1],status:1,copyUserId:this.selectedUsers}).then(r=>{
            if(r.code === 0){
              this.$emit('update:dialogVisible',false)
              this.$message.success('添加成功');
              this.selectedUsers = [];
            }
          })
        }else {
          this.$message.success('当前有申请费用为审核中或未提交，请审核后在申请');
        }
      }
    },
    getOrderList(){
      ApplicationListByOrderId({orderId: this.orderId}).then(r => {
        if(r.code === 0){
          this.list = r.data;
          this.list.forEach(()=>this.isModify.push(true))
          let p = this.list.find(e => e.status === 1)
        }
      })
    },
    modify(row){
      this.isModifyIf = true;
      this.$set(this.isModify, this.list.findIndex(e => e.id = row.id), false )
    },
  },
  watch:{
    dialogVisible(val){
       if(val){
         this.getOrderList()
         getOrder(this.orderId).then(r =>{
           if(r.code === 0){
             this.orderDetails = r.data
           }
         })
       }
    },
  }
}
</script>

<style scoped lang="scss">
.fee-application {
  padding: 0 20px;
  h1{
    font-weight: 600;
    font-size: 20px;
  }
  .content{
    width: 200px;
  }
}
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>