
<template>
    <div id="loanproForm">
        <el-row>
            <el-col :span="24" class="form">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                    <el-col :span="24">
                        <el-form-item label="产品名称" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="请输入产品名称"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="利率范围" prop="mongey_min_rate">
                            <el-input class="mongeyrate" v-model="ruleForm.mongey_min_rate" placeholder="利率范围（小）"></el-input>%~
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="mongey_max_rate" class="formItem">
                            <el-input class="mongeyrate" v-model="ruleForm.mongey_max_rate" placeholder="利率范围（大）"></el-input>%
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="贷款期限(月)" prop="claims_min_term">
                            <el-input class="mongeyrate" v-model="ruleForm.claims_min_term" placeholder="贷款期限（小）"></el-input>~
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="claims_max_term" class="formItem">
                            <el-input class="mongeyrate" v-model="ruleForm.claims_max_term" placeholder="贷款期限（大）"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="贷款额度(万元)" prop="claims_min_money" >
                            <el-input class="mongeyrate" v-model="ruleForm.claims_min_money" placeholder="贷款额度（小）"></el-input>~
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="claims_max_money" class="formItem">
                            <el-input class="mongeyrate" v-model="ruleForm.claims_max_money" placeholder="贷款额度（大）"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="担保方式" prop="ensure_id">
                            <el-select v-model="ruleForm.ensure_id" placeholder="请选择担保方式">
                                <el-option v-for="(item, index) in dbList" :key="index" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="还款方式" prop="repayment_id">
                            <el-select v-model="ruleForm.repayment_id" placeholder="请选择还款方式">
                                <el-option v-for="(item, index) in hkList" :key="index" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="简介内容">
                            <el-input type="textarea" v-model="ruleForm.news" placeholder="请输入简介内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="btn">
                        <el-button size="small" @click="resetForm('ruleForm')" >取消</el-button>
                        <el-button type="primary" size="small" @click="submitForm('ruleForm')">提交</el-button>
                    </el-col>
                </el-form>
            </el-col>
        </el-row>
    </div>
    <!--:disabled="isAble"-->
</template>

<script>
  export default {
    name: 'loanproForm',
    props: {
      ruleForm: null,
      hkList: null,
      dbList: null,
    },
    components: {},
    data: () => ({
      rules: {
        mongey_min_rate: [
          { required: true, message: '请输入利率', trigger: 'blur' },
          { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/, message: '请输入大于0的数字' },
        ],
        mongey_max_rate: [
          { required: true, message: '请输入利率', trigger: 'blur' },
          { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/, message: '请输入大于0的数字' },
        ],
        claims_min_term: [
          { required: true, message: '请输入贷款期限', trigger: 'blur' },
          { pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的正整数' },
        ],
        claims_max_term: [
          { required: true, message: '请输入贷款期限', trigger: 'blur' },
          { pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的正整数' },
        ],
        claims_min_money: [
          { required: true, message: '贷款额度', trigger: 'blur' },
          { pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的正整数' },
        ],
        claims_max_money: [
          { required: true, message: '贷款额度', trigger: 'blur' },
          { pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的正整数' },
        ],
        ensure_id: [{ required: true, message: '请选择担保方式', trigger: 'blur' }],
        repayment_id: [
          { required: true, message: '请输入贷款期限', trigger: 'blur' },
          { pattern: /^\+?[1-9]\d*$/, message: '请选择还款方式' },
        ],
        claimsmoney: [
          { required: true, message: '请输入贷款额度', trigger: 'blur' },
          { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/, message: '请输入大于0的数字' },
        ],
      },
    }),
    created() {},
    computed: {},
    methods: {
      submitForm() {
        this.$emit('submitForm', { data: this.ruleForm });
      },
      resetForm() {
        this.$emit('resetForm');
      },
    },
  };
</script>

<style lang="less" scoped>
    .form {
        padding: 0 200px 0 0;
    }
    .mongeyrate {
        width: 95%;
    }
    /deep/.formItem .el-form-item__content {
        margin-left: 0 !important;
    }
    .btn {
        text-align: center;
        padding: 30px 0;
    }
</style>
