<template>
  <d2-container class="page">
    <el-tabs value="first">
      <el-tab-pane :label="title" name="first">
        
        <div style="margin-bottom: 8px;border-left: 3px solid;color: #e6a23c;">
          <div role="alert" class="el-alert el-alert--warning">
            <div class="el-alert__content" v-if="timeControl && year && month">
              <span class="el-alert__title">{{year}}年{{month}}月份退款申请时间：{{timeControl.start_time}} 到 {{timeControl.end_time}}
                

              
               
              </span>
            
            </div>
            <div class="el-alert__content" v-if="!timeControl">
              <span class="el-alert__title">退款申请时间暂无安排，现在无法申请。请等待通知。</span>
            
            </div>

            

          </div>
        </div>

        <div style="margin-bottom: 8px;border-left: 3px solid;color: #e6a23c;" v-if="replenishTimeControl && year && month">
          <div role="alert" class="el-alert el-alert--warning">
            
            

            <div class="el-alert__content">
              <span class="el-alert__title">{{year}}年{{month}}月份补充证明材料时间：{{replenishTimeControl.start_time}} 到 {{replenishTimeControl.end_time}}
              </span>
            
            </div>

          </div>
        </div>

        <div  v-if="RefundApplyControl" style="margin-bottom: 8px; border-left: 3px solid; color: rgb(230, 162, 60);">
          <div role="alert" class="el-alert el-alert--warning">
            <div class="el-alert__content">
              <span class="el-alert__title">{{RefundApplyControl}}</span>
             
            </div>
          </div>
        </div>

       <el-button type="primary" icon="el-icon-tickets" style="margin-bottom:1px;" v-if="timeControl && inTime" @click="goInvoicing()">退款申请</el-button>

       <el-button type="primary" icon="el-icon-refresh" style="margin-bottom:1px;" @click="refresh()">刷新</el-button><br>

        <el-table
          v-loading="loading"
          :data="list"
          style="width: 100%">
          <el-table-column
            prop="year_code"
            label="批次"
            width="80">
          </el-table-column>
          <el-table-column
            prop="std_name"
            label="姓名"
            width="80">
          </el-table-column>
          <el-table-column
            prop="ticket_no"
            label="准考证号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="bill_no"
            label="订单编号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="bill_amount"
            label="退款金额"
            width="80">
            <template slot-scope="scope">
              {{scope.row.bill_amount}} 元
            </template>
          </el-table-column>
          <el-table-column
            prop="bill_amount"
            label="订单总金额"
            width="100">
            <template slot-scope="scope">
              {{scope.row.bill_total_amount}} 元
            </template>
          </el-table-column>
         
         <el-table-column
            prop="status_text"
            label="状态"
            width="100">
             <template slot-scope="scope">
                <span v-if="scope.row.status == '4'" style="color:red;">
                  {{scope.row.status_text}}
                </span>
                <span v-else>
                  {{scope.row.status_text}}
                </span>

              </template>
          </el-table-column>

          <el-table-column
            prop="refund_type_text"
            label="退款类型"
            width="100">
          </el-table-column>
          <el-table-column
            prop="course"
            label="课程"
            width="160">
          </el-table-column>
          
          
          <el-table-column
            prop="create_time"
            label="申请时间 "
            width="160">
          </el-table-column>
           <el-table-column
            prop="description"
            label="审核意见"
            width="450">
          </el-table-column>
           <el-table-column
            prop="reason"
            label="退款理由"
            width="400">
          </el-table-column>

          <el-table-column
                prop=""
                label="操作"  align="center"
                width="400">
                <template slot-scope="scope">
                    <div> 
                       <el-button v-if="(scope.row.status == '4'||scope.row.status == '1') && replenishTimeControl && inReplenishTime" @click="goReplenishFile(scope.row)">补充证明材料</el-button>

                      <el-button @click="viewImg(scope.row)">查看证明材料</el-button>
                      <el-button v-if="timeControl && inTime" @click="del(scope.row)">删除</el-button>
                    </div>
                    
                </template>
            </el-table-column>
          
        </el-table>

      </el-tab-pane>
    </el-tabs>
     <el-dialog width="1000px" height="300px" id="paymodal" title="退款申请" :visible.sync="payDialogVisible" :show-close="false" :close-on-click-modal="false">
            <el-form ref="itemForm" :model="item" :rules="itemRules" label-width="200px">
              <el-row>
               
                <el-col :span="6">
                  <el-form-item label="姓名:" prop="std_name">
                      
                      <div style="width:200px">
                        {{stdReg.std_name}}
                      </div>
                  </el-form-item>

                </el-col>
                <el-col :span="6">
                 
                  <el-form-item label="准考证号:" prop="ticket_no">
                      <div style="width:200px">
                        {{stdReg.ticket_no}}
                      </div>
                  </el-form-item>

                </el-col>

                

              </el-row>

              <el-row>
                <el-col :span="6">
                  <el-form-item label="证件号:" prop="cert_no">
                      
                      <div style="width:200px">
                        {{stdReg.cert_no}}
                      </div>
                  </el-form-item>

                </el-col>
                <el-col :span="6">
                  <el-form-item label="手机号码:" prop="std_mobile">
                      <div style="width:200px">
                        <el-input size="medium" v-model="item.std_mobile" maxlength="50"></el-input>
                      </div>
                  </el-form-item>
                </el-col>
              </el-row>

               <el-row>
                
                <el-col :span="12">
                  <el-form-item label="退款金额:" prop="bill_amount">
                      <div style="width:200px">
                        <font style="color:red;">{{item.bill_amount}} 元</font>
                       

                      </div>
                  </el-form-item>
                </el-col>

               
              </el-row>

              <el-row>
                

                <el-col :span="12">
                  <el-form-item label="退款类型:" prop="cert_no">
                       <el-select size="medium" style="width:450px" v-model="item.refund_type" filterable clearable placeholder="请选择退款类型" @change="refundTypeChange">
                          <el-option v-for="item in refundTypeArray" :key="item.dict_value" :label="item.dict_text" :value="item.dict_value"></el-option>
                      </el-select>
                      
                  </el-form-item>

                </el-col>
              </el-row>
              

              <el-row>
                
                <el-col :span="12">
                  <el-form-item label="退款理由:" prop="reason">
                   <el-input style="width:450px;"
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 10}"
                      maxlength="512"
                      v-model="item.reason">
                    </el-input>
                 </el-form-item>

                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  

                  <el-table
                    :data="billList"
                    style="width:100%">
                    <el-table-column label="请选择" width="80" align="center">
                        <template slot-scope="scope">
                          <center>
                            <el-checkbox :label="scope.row.course_id" v-model="checkedCourse[scope.row.index]" @change="billChange">&nbsp;</el-checkbox>
                          </center>
                        </template>
                    </el-table-column>
                    <el-table-column
                      prop="year_code"
                      label="批次"
                      width="100" align="center"> 
                    </el-table-column>
                    <el-table-column
                      prop="bill_no"
                      label="订单编号"
                      width="240" align="center"> 
                    </el-table-column>
                    <el-table-column
                      prop="bill_amount"
                      label="订单金额"
                      width="100" align="center"> 
                      <template slot-scope="scope">
                        {{scope.row.bill_amount}} 元
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="course"
                      label="课程"
                      width="350" align="center"> 
                    </el-table-column>
                    
                  </el-table>

                

                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  

                  <el-form-item label="证明材料" prop="files" style="padding-top:10px;">
                    <el-upload
                        :http-request = "customUpload"
                        class="upload-demo"
                        ref="upload"
                        action=""
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-upload="beforeUpload"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="6"
                        :on-exceed="handleExceed"
                        :on-change="handleChange"
                        :auto-upload="false"
                        list-type="picture"
                        :file-list="fileList"
                        accept="image/jpeg,image/jpg,image/png" 

                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                         <div slot="tip" class="el-upload__tip" style="color:red">
                            {{mark}}
                        </div>
                        <div slot="tip" class="el-upload__tip" style="color:red">
                            说明： 只能上传jpg/jpeg/png文件，且不超过2MB；最多允许上传6个文件。
                        </div>
                    </el-upload>
                  </el-form-item>

                </el-col>
              </el-row>
            
            </el-form>
          
            <center>
              <br>
              <el-button type="primary" @click="submit()">提交</el-button> &nbsp; &nbsp; <el-button type="primary" @click="invoicingVisible = false;payDialogVisible=false;">关闭</el-button>
            </center>

        </el-dialog>


        <el-dialog width="1000px" height="300px" id="paymodal" title="补充证明材料" :visible.sync="replenishDialogVisible" :show-close="false" :close-on-click-modal="false">
            <el-form ref="itemForm" :model="item" :rules="itemRules" label-width="200px">
              <el-row>
               
                <el-col :span="6">
                  <el-form-item label="姓名:" prop="std_name">
                      
                      <div style="width:200px">
                        {{stdReg.std_name}}
                      </div>
                  </el-form-item>

                </el-col>
                <el-col :span="6">
                 
                  <el-form-item label="准考证号:" prop="ticket_no">
                      <div style="width:200px">
                        {{stdReg.ticket_no}}
                      </div>
                  </el-form-item>

                </el-col>

                

              </el-row>

              <el-row>
                <el-col :span="6">
                  <el-form-item label="证件号:" prop="cert_no">
                      
                      <div style="width:200px">
                        {{stdReg.cert_no}}
                      </div>
                  </el-form-item>

                </el-col>
                <el-col :span="6">
                  <el-form-item label="手机号码:" prop="std_mobile">
                      <div style="width:200px">
                         {{stdReg.std_mobile}}
                      </div>
                  </el-form-item>
                </el-col>
              </el-row>

               <el-row>
                
                <el-col :span="12">
                  <el-form-item label="退款金额:" prop="bill_amount">
                      <div style="width:200px">
                        <font style="color:red;">{{item.bill_amount}} 元</font>
                       

                      </div>
                  </el-form-item>
                </el-col>

               
              </el-row>

              <el-row>
                

                <el-col :span="12">
                  <el-form-item label="退款类型:" prop="cert_no">
                       <el-select size="medium" disabled style="width:450px" v-model="item.refund_type" filterable clearable placeholder="请选择退款类型" @change="refundTypeChange">
                          <el-option v-for="item in refundTypeArray" :key="item.dict_value" :label="item.dict_text" :value="item.dict_value"></el-option>
                      </el-select>
                      
                  </el-form-item>

                </el-col>
              </el-row>
              

              <el-row>
                
                <el-col :span="12">
                  <el-form-item label="退款理由:" prop="reason">
                   <el-input style="width:450px;" disabled
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 10}"
                      maxlength="512"
                      v-model="item.reason">
                    </el-input>
                 </el-form-item>

                </el-col>
              </el-row>

            

              <el-row>
                <el-col :span="24">
                  

                  <el-form-item label="补充证明材料" prop="files" style="padding-top:10px;">
                    <el-upload
                        :http-request = "customUpload"
                        class="upload-demo"
                        ref="upload"
                        action=""
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-upload="beforeUpload"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="6"
                        :on-exceed="handleExceed"
                        :on-change="handleChange"
                        :auto-upload="false"
                        list-type="picture"
                        :file-list="fileList"
                        accept="image/jpeg,image/jpg,image/png" 

                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                         <div slot="tip" class="el-upload__tip" style="color:red">
                            {{mark}}
                        </div>
                        <div slot="tip" class="el-upload__tip" style="color:red">
                            说明： 只能上传jpg/jpeg/png文件，且不超过2MB；最多允许上传6个文件。
                        </div>
                    </el-upload>
                  </el-form-item>

                </el-col>
              </el-row>
            
            </el-form>
          
            <center>
              <br>
              <el-button type="primary" @click="replenishFile()">提交补充证明材料</el-button> &nbsp; &nbsp; <el-button type="primary" @click="replenishVisible = false;replenishDialogVisible=false;">关闭</el-button>
            </center>

        </el-dialog>



        <el-dialog width="960px" height="300px" id="paymodal" title="查看证明材料" :visible.sync="payImgDialogVisible" :show-close="true" :close-on-click-modal="true">
          
              <el-row>
               
                <el-col  align="center" :span="12" v-if="item.file_path_one">
                <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.file_path_one">


                </el-col>
                <el-col  align="center" :span="12"  v-if="item.file_path_two">
                  <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.file_path_two">

                </el-col>

                

              </el-row>

              <el-row>
               
                <el-col  align="center" :span="12" v-if="item.file_path_three">
                <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.file_path_three">


                </el-col>
                <el-col  align="center" :span="12"  v-if="item.file_path_four">
                  <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.file_path_four">

                </el-col>

                

              </el-row>


               <el-row>
               
                <el-col  align="center" :span="12" v-if="item.file_path_five">
                <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.file_path_five">


                </el-col>
                <el-col  align="center" :span="12"  v-if="item.file_path_six">
                  <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.file_path_six">

                </el-col>

                

              </el-row>




              <el-row>
               
                <el-col  align="center" :span="12" v-if="item.replenish_file_path_one">
                <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.replenish_file_path_one">


                </el-col>
                <el-col  align="center" :span="12"  v-if="item.replenish_file_path_two">
                  <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.replenish_file_path_two">

                </el-col>

                

              </el-row>

              <el-row>
               
                <el-col  align="center" :span="12" v-if="item.replenish_file_path_three">
                <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.replenish_file_path_three">


                </el-col>
                <el-col  align="center" :span="12"  v-if="item.replenish_file_path_four">
                  <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.replenish_file_path_four">

                </el-col>

                

              </el-row>


               <el-row>
               
                <el-col  align="center" :span="12" v-if="item.replenish_file_path_five">
                <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.replenish_file_path_five">


                </el-col>
                <el-col  align="center" :span="12"  v-if="item.replenish_file_path_six">
                  <img  style="width: 360px;height: 480px;border:solid 1.5px #000000;cursor: pointer;" :src="item.replenish_file_path_six">

                </el-col>

                

              </el-row>
            
            
          
            <center>
              <br>
              <el-button type="primary" @click="payImgDialogVisible=false;">关闭</el-button>
            </center>

        </el-dialog>

    

  </d2-container>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  computed: {
    title: function() {
      return `退款申请`;
    },
     ...mapState({
      stdReg: state => state.enrol.StdReg,
    })
  },
   data() {
    return {
      loading: false,
      payDialogVisible: false,
      invoicingVisible: false,
      payImgDialogVisible: false,

      replenishDialogVisible: false,
      replenishVisible: false,

      year_code:"",
      billList:[],
      checkedCourse: [],
      refundTypeArray: [],
      list:[],
      timeControl: {},
      inTime:false,
      replenishTimeControl: {},
      inReplenishTime:false,
      year: null,
      month: null,
      RefundApplyControl:null,
      item: {
        std_reg_id: "",
        ticket_no: "",
        std_name: "",
        cert_no: "",
        bill_no: "",
        bill_time: "",
        bill_amount: "",
        bill_status: "",
        course: "",
        refund_type: "",
        reason: "",
        status: "",
        file_path_one: "",
        file_path_two: "",
        file_path_three: "",
        file_path_four: "",
        file_path_five: "",
        file_path_six: "",
      },
      itemRules: {
        old_std_name: [
          { required: true, message: "请填写原考生姓名", trigger: "blur" }
        ],
       
        old_ticket_no: [
          { required: true, message: "请原准考证号", trigger: "blur" }
        ],

        std_name: [{}],
        cert_no: [{}],
        ticket_no: [{}],

        files: [{}],
        modify_remark: [{}],
        modify_content: [
          { required: true, message: "请选择变更内容", trigger: "blur" }
        ]
      },
      fileList: [],
      uploaded: false,
      mark:""
    };
  },
  async mounted () {
   this.init();
  },
  methods: {
    async init() {
        this.loading = true;

         let listres = await this.$http.post("std/refund/init.htm");
         this.timeControl = listres.data.map.timeControl;
         this.inTime = listres.data.map.inTime;
         this.replenishTimeControl = listres.data.map.replenishTimeControl;
         this.inReplenishTime = listres.data.map.inReplenishTime;
         this.month = listres.data.map.month;
         this.year = listres.data.map.year;
         this.RefundApplyControl = listres.data.map.RefundApplyControl;
         
         this.refundTypeArray = listres.data.map.refundTypeArray;

        let res = await this.$http.post(
        "std/refund/queryStdRefund.htm",
        this.Qs.stringify({
            std_id: this.stdReg.id,
        }),
        this.$http.headers.FORM
        );
         this.list = res.data.array;

        this.loading = false; 
   
    },
    async refresh(){
      this.$nextTick(() => {
        this.init();
     })
    },
    async goInvoicing(item) {
      this.item = {};
      this.billList = [];
      this.checkedCourse = [];
      this.payDialogVisible = true;
      this.invoicingVisible = true;

      this.item.bill_amount=0;
      //this.item.refund_type='疫情防控';
      this.item.std_mobile = this.stdReg.std_mobile;
      this.querybillno();
     this.refundTypeChange();
    },

    async goReplenishFile(item) {
      this.item = item;
      
      this.replenishDialogVisible = true;
      this.replenishVisible = true;

     
     this.refundTypeChange();
    },
     
    
    
    async closePayWin() {
     
      this.payDialogVisible = false;
     
    },

     async querybillno() {
      
      this.loading = true;
      
      let res = await this.$http.post(
        "std/refund/queryBillNoForCourse.htm",
        this.Qs.stringify({
          year_code: this.year_code        
        }),
        
        this.$http.headers.FORM
      );
      
      this.billList = res.data.array;
      this.loading = false;
    },

    async submit() {
       if(!this.item.std_mobile) {
        this.alert("请填写手机号码");
        return;
      }

      if(!this.item.refund_type) {
        this.alert("请选择退款类型");
        return;
      }

       if(!this.item.reason) {
        this.alert("请填写退款理由");
        return;
      }

      if(this.checkedCourse.length == 0) {
        this.alert("请选择订单信息");
        return;
      }
      
      if(this.uploadNeed){
            this.confirm("确定提交退款申请?", "操作确定", {
            confirm: function() {
              this.item.is_replenish = '';
              this.$refs.upload.submit();
            }
          });

      }else{
         this.alert("请上传证明材料");
         return;
      }
     
    },

    

    async replenishFile() {
       
      if(this.uploadNeed){
            this.confirm("确定提交补充证明材料吗?", "操作确定", {
            confirm: function() {
              this.item.is_replenish = '1';
              this.$refs.upload.submit();
            }
          });

      }else{
         this.alert("请上传补充证明材料");
         return;
      }
     
    },

    async billChange(){
      
      let bill_amount = 0;
       for (let index = 0; index < this.checkedCourse.length; index++) {
        const checked = this.checkedCourse[index];
        if(checked == true){
          bill_amount = bill_amount+this.billList[index].bill_amount
        }
      }

      this.item.bill_amount = bill_amount;
      this.$forceUpdate();
    },

     async refundTypeChange(){
        
      if(this.item.refund_type){
         
          let res = await this.$http.post(
          "std/refund/queryParam.htm",
          this.Qs.stringify({
            param_name: 'RefundType_'+this.item.refund_type        
          }),
          
          this.$http.headers.FORM
        );

       if(res.data.entity){
         this.mark = res.data.entity.param_value;
       }else{
        this.mark = '';
       }
        
       
        this.$forceUpdate();
      }
      
    },


    async del(item){

      this.confirm("确定删除退款申请吗?", "操作确定", {
            confirm: function() {
              this.confirmdel(item);
            }
          });

      
    }, 	

    async confirmdel(item){
      this.loading = true;
              let { data } = await this.$http.post(
                "std/refund/delete.htm",
                this.Qs.stringify({ id: item.id }),
                this.$http.headers.FORM
              );
              
              if (data.success) {
                this.alert("删除成功!");
                this.refresh();
              }else {
                this.alert(data.errorMsg);
              }
              this.loading = false;
    },

    async viewImg(item){
        this.item = item;
        let path = 'https://zk1.gxeea.cn:8001/ses-upload';
        if(this.item.file_path_one && this.item.file_path_one.indexOf(path) == -1){
          this.item.file_path_one = path+this.item.file_path_one;
        }

        if(this.item.file_path_two && this.item.file_path_two.indexOf(path) == -1){
          this.item.file_path_two = path+this.item.file_path_two;
        }

        if(this.item.file_path_three && this.item.file_path_three.indexOf(path) == -1){
          this.item.file_path_three = path+this.item.file_path_three;
        }

        if(this.item.file_path_four && this.item.file_path_four.indexOf(path) == -1){
          this.item.file_path_four = path+this.item.file_path_four;
        }

        if(this.item.file_path_five && this.item.file_path_five.indexOf(path) == -1){
          this.item.file_path_five = path+this.item.file_path_five;
        }

        if(this.item.file_path_six && this.item.file_path_six.indexOf(path) == -1){
          this.item.file_path_six = path+this.item.file_path_six;
        }

       

         if(this.item.replenish_file_path_one && this.item.replenish_file_path_one.indexOf(path) == -1){
          this.item.replenish_file_path_one = path+this.item.replenish_file_path_one;
        }

        if(this.item.replenish_file_path_two && this.item.replenish_file_path_two.indexOf(path) == -1){
          this.item.replenish_file_path_two = path+this.item.replenish_file_path_two;
        }

        if(this.item.replenish_file_path_three && this.item.replenish_file_path_three.indexOf(path) == -1){
          this.item.replenish_file_path_three = path+this.item.replenish_file_path_three;
        }

        if(this.item.replenish_file_path_four && this.item.replenish_file_path_four.indexOf(path) == -1){
          this.item.replenish_file_path_four = path+this.item.replenish_file_path_four;
        }

        if(this.item.replenish_file_path_five && this.item.replenish_file_path_five.indexOf(path) == -1){
          this.item.replenish_file_path_five = path+this.item.replenish_file_path_five;
        }

        if(this.item.replenish_file_path_six && this.item.replenish_file_path_six.indexOf(path) == -1){
          this.item.replenish_file_path_six = path+this.item.replenish_file_path_six;
        }

        this.payImgDialogVisible = true;
    } ,

    async saveData(){
      var cloneItem = JSON.parse(JSON.stringify(this.item));
      
      let reqCheckedCourse = [];
      for (let index = 0; index < this.checkedCourse.length; index++) {
        const checked = this.checkedCourse[index];
        if(checked == true)
          reqCheckedCourse.push(this.billList[index].course_id);
        
      }
      cloneItem.course_ids = reqCheckedCourse.join();
      cloneItem.std_reg_id = this.stdReg.id;
      
      let { data } = await this.$http.post(
        "std/refund/applyForCourse.htm",
        this.Qs.stringify(cloneItem),
        this.$http.headers.FORM
      );
      if (data.success) {
        if(this.item.is_replenish == '1'){
            this.alert("补充证明材料提交成功。");
        }else{
          this.alert("退款申请提交成功。");
        }
      
        this.init();
        this.$nextTick(() => {
          if(this.item.is_replenish == '1'){
             this.replenishDialogVisible = false;
             this.replenishVisible = false;
        }else{
           this.payDialogVisible = false;
           this.invoicingVisible = false;
        }

          
        });
      } else {
        this.alert(data.errorMsg);
      }
    },
    
customUpload(file) {
      
      let this_ = this;
      this.$refs["itemForm"].validate(valid => {
        if (valid) {
          this.fileUpload(file).then(response => {
            //上传成功提交表单
            if (response.data.success) {
              let filePath = response.data.entity;
              for (let i = 0; i < this_.files.length; i++) {
                const element = this_.files[i];
                if (element.uid == file.file.uid) {
                     if(this_.item.is_replenish == '1'){
                        if (i == 0) {
                          this_.item.replenish_file_path_one = filePath;
                        } else if (i == 1) {
                          this_.item.replenish_file_path_two = filePath;
                        } else if (i == 2) {
                          this_.item.replenish_file_path_three = filePath;
                        } else if (i == 3) {
                          this_.item.replenish_file_path_four = filePath;
                        } else if (i == 4) {
                          this_.item.replenish_file_path_five = filePath;
                        } else if (i == 5) {
                          this_.item.replenish_file_path_six = filePath;
                        }
                     }else{
                       if (i == 0) {
                          this_.item.file_path_one = filePath;
                        } else if (i == 1) {
                          this_.item.file_path_two = filePath;
                        } else if (i == 2) {
                          this_.item.file_path_three = filePath;
                        } else if (i == 3) {
                          this_.item.file_path_four = filePath;
                        } else if (i == 4) {
                          this_.item.file_path_five = filePath;
                        } else if (i == 5) {
                          this_.item.file_path_six = filePath;
                        }
                     }
                    
                 
                  //最后一个图片
                  if (this_.files.length == i + 1) {
                    this_.uploaded = true;
                    setTimeout(() => {
                      this_.saveData(filePath);
                    }, 500);
                  }
                }
              }
            } else {
              this.alert(response.data.errorMsg);
            }
          });
          return true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    fileUpload(fileobj) {
      let param = new FormData();
      param.append("file", fileobj.file);
      return this.$http.request({
        method: "post",
        url: "std/refund/upload.htm",
        headers: { "Content-Type": "multipart/form-data" },
        data: param
      });
    },
    handleRemove(file, fileList) {
      if (fileList.length == 0) {
        this.files = null;
      }
      this.fileList = [];
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制上传6个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件，已超过限制上传文件数。`
      );
    },
    beforeUpload(file, fileList) {
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isJPEG && !isPNG) {
        this.alert("上传图片必须是JPG/JPEG/PNG/格式!");
      }
      if (!isLt2M) {
        this.alert("上传图片大小不能超过 2MB!");
      }
      return (isJPG || isJPEG || isPNG) && isLt2M;
    },
    beforeRemove(file, fileList) {},
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.files = fileList;
        this.uploadNeed = true;
      } else {
        this.files = [];
        this.uploadNeed = false;
      }
    }

  },
 
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/public.scss";
.page {
  .page__btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 20px;
    span {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
    }
  }
}
</style>
