<template>
  <div id="mainForm">
    <el-row>
      <el-col :span="24" class="mainForm">
        <el-col :span="24" class="top">
          <span class="shu"></span><span class="title">{{ formTitle }}</span>
        </el-col>
        <el-col :span="24">
          <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="24">
              <el-form-item label="机构类型" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择机构类型">
                  <el-option label="能发布债权产品" value="0"></el-option>
                  <el-option label="能发布股权产品" value="1"></el-option>
                  <el-option label="既能发布债权产品又能发布股权产品" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="机构logo" prop="logo">
                <upload
                  :limit="1"
                  tip="请上传500×500px的图片，大小不超过2M"
                  :data="ruleForm.logo"
                  type="logo"
                  :url="`/files/teacher/upload`"
                  @upload="uploadSuccess"
                ></upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="融资轮次" prop="round">
                <el-select style="width:100%" v-model="ruleForm.round" multiple placeholder="请选择融资轮次" @change="changeRound">
                  <el-option v-for="item in rzlc" :key="item.value" :label="item.name" :value="item.name"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="行业" prop="profession">
                <el-select style="width:100%" v-model="ruleForm.profession" multiple placeholder="请选择" @change="changeProfession">
                  <el-option v-for="item in sshy" :key="item.value" :label="item.name" :value="item.name"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="组织形式" prop="form">
                <el-input v-model="ruleForm.form" placeholder="请输入组织形式"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="法定代表人" prop="representative">
                <el-input v-model="ruleForm.representative" placeholder="请输入法定代表人"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="办公区域" prop="business_addr">
                <el-input v-model="ruleForm.business_addr" placeholder="请输入办公区域"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="注册地址" prop="registered_addr">
                <el-input v-model="ruleForm.registered_addr" placeholder="请输入注册地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="创立时间" prop="establish_time">
                <el-input v-model="ruleForm.establish_time" placeholder="请输入创立时间"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="组织机构号码" prop="code">
                <el-input v-model="ruleForm.code" placeholder="请输入组织机构号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="所属地区" prop="belong_addr">
                <el-input v-model="ruleForm.belong_addr" placeholder="请输入所属地区"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="管理资金规模(亿)" prop="size">
                <el-input v-model="ruleForm.size" placeholder="请输入管理资金规模"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="注册资本(万)" prop="registered_capital">
                <el-input v-model="ruleForm.registered_capital" placeholder="请输入注册资本"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="实缴资金(万)" prop="contributed_capital">
                <el-input v-model="ruleForm.contributed_capital" placeholder="请输入实缴资金"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="机构简介" prop="introduction">
                <el-input v-model="ruleForm.introduction" type="textarea" placeholder="请输入机构简介"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="clickBtn">
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">取消</el-button>
                <el-button type="warning" @click="shenheForm()">审核</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/upload.vue';
export default {
  name: 'mainForm',
  props: {
    formTitle: null,
    ruleForm: null,
    sshy: null,
    rzlc: null,
  },
  components: {
    upload, //图片上传
  },
  data: () => ({
    rules: {
      name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
      type: [{ required: true, message: '请选择机构类型', trigger: 'blur' }],
      logo: [{ required: true, message: '请上传机构logo', trigger: 'blur' }],
      size: [{ pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的正整数' }],
      registered_capital: [{ pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的正整数' }],
      contributed_capital: [{ pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的正整数' }],
      // profession: [{ required: true, message: '请选择所属行业', trigger: 'blur' }],
      // form: [{ required: true, message: '请输人组织形式', trigger: 'blur' }],
      // round: [{ required: true, message: '请选择融资轮次', trigger: 'blur' }],
      // representative: [{ required: true, message: '请输人法定代表人', trigger: 'blur' }],
      // business_addr: [{ required: true, message: '请输人办公地址', trigger: 'blur' }],
      // belong_addr: [{ required: true, message: '请输人所属地区', trigger: 'blur' }],
      // registered_addr: [{ required: true, message: '请输人注册地址', trigger: 'blur' }],
      // establish_time: [{ required: true, message: '请输人创立时间', trigger: 'blur' }],
      // establish_time: [{ required: true, message: '请输人创立时间', trigger: 'blur' }],
      // size: [{ required: true, message: '请输入管理资金规模', trigger: 'blur' }],
      // registered_capital: [{ required: true, message: '请输入注册资本', trigger: 'blur' }],
      // introduction: [{ required: true, message: '请输入机构简介', trigger: 'blur' }],
      // registered_capital: [{ required: true, message: '请输入注册资本', trigger: 'blur' }],
      // contributed_capital: [{ required: true, message: '请输入实缴资金', trigger: 'blur' }],
      // status: [{ required: true, message: '请选择发布状态', trigger: 'blur' }],
      // belong_addr: [{ required: true, message: '请输入所属地区', trigger: 'blur' }],
    },

    props: { multiple: true },

    value: [],
    value: [],

    value1: [],
    value2: [],
  }),
  created() {},
  computed: {},
  methods: {
    handleChange(value) {
      console.log(value);
    },
    submitForm(ruleForm) {
      this.$emit('submitForm', { data: this.ruleForm });
    },
    resetForm() {
      this.$emit('resetForm');
    },
    shenheForm() {
      this.$emit('shenheForm', { data: this.ruleForm });
    },

    uploadSuccess({ type, data }) {
      if (type !== 'logo') {
        let arr = _.get(this.ruleForm, type);
        if (arr !== undefined) {
          this.ruleForm[type].push({ name: data.name, uri: data.uri });
        } else {
          let newArr = [{ name: data.name, uri: data.uri }];
          this.$set(this.ruleForm, `${type}`, newArr);
        }
      } else {
        this.$set(this.ruleForm, `${type}`, data.uri);
      }
    },
    clickDown() {},
    changeRound(round) {
      const data = round[round.length - 1];
      if (data === '不限') {
        round = ['不限'];
        this.$set(this.ruleForm, `round`, round);
      } else {
        round = round.filter(item => item !== '不限');
        this.$set(this.ruleForm, `round`, round);
      }
    },
    changeProfession(profession) {
      const data = profession[profession.length - 1];
      if (data === '不限') {
        profession = ['不限'];
        this.$set(this.ruleForm, `profession`, profession);
      } else {
        profession = profession.filter(item => item !== '不限');
        this.$set(this.ruleForm, `profession`, profession);
      }
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.top .shu {
  float: left;
  width: 4px;
  height: 20px;
  background: rgba(233, 2, 29, 1);
}
.top .title {
  float: left;
  padding: 0 10px;
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: rgba(40, 40, 40, 1);
}
/deep/.el-textarea__inner {
  min-height: 100px !important;
}
/deep/.select {
  width: 632px;
}
.selects {
  width: 473px;
  margin: 0 15px 0 0;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
  color: #e9021d;
}
/deep/.el-radio__input.is-checked .el-radio__inner {
  border-color: #e9021d;
  background: #e9021d;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #e9021d;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #e9021d;
  border-color: #e9021d;
}
/deep/.el-checkbox-button,
.el-checkbox-button__inner {
  margin: 0 15px 0 0;
}
/deep/.el-checkbox-button__inner {
  padding: 7px 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
/deep/.el-checkbox-button__inner:hover {
  color: #e9021d;
}
/deep/.el-checkbox-button:first-child .el-checkbox-button__inner {
  border-left: 1px solid #ccc;
  border-radius: 5px;
}
/deep/.el-checkbox-button:last-child .el-checkbox-button__inner {
  border-radius: 5px;
}
/deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
  color: #e9021d;
  background-color: #ffffff;
  border-color: #e9021d;
}
/deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
  box-shadow: none;
}
/deep/.el-switch.is-checked .el-switch__core {
  border-color: #e9021d;
  background-color: #e9021d;
}
.clickBtn .el-button {
  width: 100px;
  height: 40px;
  padding: 0;
  color: #ffffff;
  background: #b9b9b9;
  border-radius: 4px;
  margin: 40px;
}
.clickBtn {
  text-align: center;
  margin: 40px 0;
  border-top: 1px solid #ccc;
}
.clickBtn .el-button:first-child {
  background-color: #e9021d;
}
.clickBtn .el-button:last-child {
  background: #e6a23c;
}
</style>
