<template>
  <div id="manageMoneyForm">
    <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="title">
              <el-input v-model="ruleForm.title" placeholder="请输入产品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收益率" prop="rate"> <el-input class="mongeyrate" v-model="ruleForm.rate" placeholder="收益率"></el-input>% </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品期限(个月)" prop="min_time">
              <el-input class="mongeyrates" v-model="ruleForm.min_time" placeholder="产品期限（小）"></el-input>个月~
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="max_time" class="formItem">
              <el-input class="mongeyrates" v-model="ruleForm.max_time" placeholder="产品期限（大）"></el-input>个月
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="起购价格(元)" prop="buymin">
              <el-input class="mongeyrate" v-model="ruleForm.buymin" placeholder="起购价格"></el-input>元
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="视频附件(请上传MP4格式文件)" prop="enclosure">
              <uploadFile
                :limit="1"
                :data="ruleForm.video"
                :isBtn="true"
                :url="`/files/financial/custom/upload`"
                @uploadSuccess="uploadFileSuccess"
                @remove="removeFile"
              ></uploadFile>
            </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>
import uploadFile from '@/layout/custom/uploadFile.vue';
export default {
  name: 'manageMoneyForm',
  props: {
    ruleForm: null,
    hkList: null,
    dbList: null,
  },
  components: {
    uploadFile,
  },
  data: () => ({
    rules: {
      rate: [
        { required: true, message: '请输入收益率', trigger: 'blur' },
        { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/, message: '请输入大于0的数字' },
      ],
      min_time: [
        { required: true, message: '请输入产品期限', trigger: 'blur' },
        { pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的正整数' },
      ],
      max_time: [
        { required: true, message: '请输入产品期限', trigger: 'blur' },
        { pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的正整数' },
      ],
      title: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
      buymin: [
        { 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');
    },
    uploadFileSuccess({ data }) {
      this.$set(this.ruleForm, 'video', data.uri);
    },
    removeFile(file) {
      this.$set(this.ruleForm, 'video', '');
    },
  },
};
</script>

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