<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="100px" class="demo-ruleForm">
            <el-col :span="24">
              <el-form-item label="金融机构名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入金融机构名称" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="机构类型" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择机构类型" disabled>
                  <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">
                <el-image :src="ruleForm.logo" style="width:100px" @click="showLogo(ruleForm.logo)"></el-image>
              </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="请选择融资轮次" disabled> </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="请选择" disabled> </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="组织形式" prop="form">
                <el-input v-model="ruleForm.form" placeholder="请输入组织形式" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="法定代表人" prop="representative">
                <el-input v-model="ruleForm.representative" placeholder="请输入法定代表人" disabled></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="请输入办公区域" disabled></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="请输入注册地址" disabled></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="请输入创立时间" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="组织机构号码" prop="code">
                <el-input v-model="ruleForm.code" placeholder="请输入组织机构号码" disabled></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="请输入所属地区" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="管理资金规模(亿)" prop="size">
                <el-input v-model="ruleForm.size" placeholder="请输入管理资金规模" disabled></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="请输入注册资本" disabled></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="请输入实缴资金" disabled></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="请输入机构简介" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="clickBtn">
              <span v-if="ruleForm.status === '1'">
                <el-form-item>
                  <el-button type="primary" @click="submitForm()">审核通过</el-button>
                  <el-button type="danger" @click="resetForm()">审核拒绝</el-button>
                </el-form-item>
              </span>
              <span v-if="ruleForm.status === '2'">
                <el-form-item>
                  <el-button type="primary" @click="outForm()">下架产品</el-button>
                </el-form-item>
              </span>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="logoDialog">
      <el-image :src="logoImage" style="height:100%;width:100% "></el-image>
    </el-dialog>
  </div>
</template>

<script>
import upload from '@/components/upload.vue';
export default {
  name: 'mainForm',
  props: {
    formTitle: null,
    ruleForm: null,
    sshy: null,
    rzlc: null,
  },
  components: {},
  data: () => ({
    logoDialog: false,
    logoImage: '',
    rules: {},

    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', { data: this.ruleForm });
    },
    outForm() {
      this.$emit('outForm', { data: this.ruleForm });
    },
    showLogo(logoUrl) {
      if (logoUrl) {
        this.$set(this, `logoImage`, logoUrl);
        this.$set(this, `logoDialog`, true);
      } else {
        this.$set(this, `logoDialog`, false);
      }
    },
    // 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() {},
  },
};
</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;
}
</style>
