<template>
  <el-dialog :visible="innerVisible" title="申请预付" width="380px" center :close-on-click-modal="false" @close="onClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" size="mini" label-width="80px">
      <el-form-item label="预付类型" prop="prepaymentType">
        <el-select style="width:100%" placeholder="预付类型" v-model="ruleForm.prepaymentType">
          <el-option />
        </el-select>
      </el-form-item>

      <el-form-item label="支付比例" prop="paymentRatio">
        <el-select style="width:100%" v-model="ruleForm.paymentRatio" placeholder="支付比例">
          <el-option />
        </el-select>
      </el-form-item>

      <el-form-item class="flex-end">
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
/**
 * @props
  prepaymentType  //预付类型
  paymentRatio  //支付比例
*/

export default {
  props:['visible'],
  computed:{
    innerVisible:{
      get(){
        return this.visible
      },
      set(newVal){
        this.$emit('update:visible',newVal)
      }
    }
  },
  data(){
    return {
      ruleForm:{
          prepaymentType:"",  //预付类型
          paymentRatio:"" //支付比例
      },
      rules:{
        prepaymentType:[{
          required:true,
          trigger:'change',
          message:'请选择预付类型'
        }],
        paymentRatio:[{
          required:true,
          trigger:'change',
          message:'请选择支付比例'
        }],
      }
    }
  },
  methods:{
    onClose(){
      this.ruleForm = {
        prepaymentType:"",  //预付类型
        paymentRatio:"" //支付比例
      }
      this.innerVisible = false
    },
    async onSubmit(){
      try {
        await this.$refs.ruleForm.validate()
        console.log('todo...')
      }catch(err){
        console.log(err)
      }
    }
  }
}
</script>
