<template>
  <div class="index">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      label-width="80px"
      class="form"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input clearable v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出资额" prop="money">
            <el-input clearable v-model="form.money" placeholder="请输入出资额(万元)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="证件类型" prop="cardType">
            <el-select clearable v-model="form.cardType" placeholder="请选择证件类型">
              <el-option
                v-for="(item, index) in cardTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号码" prop="card">
            <el-input clearable v-model="form.card" placeholder="请输入证件号码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="出资方式" prop="type">
            <el-select clearable v-model="form.type" placeholder="请选择出资方式">
              <el-option
                v-for="(item, index) in contributionList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否公开" prop="is_show">
            <el-radio-group v-model="form.is_show">
              <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{
                i.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-form-item label="地址" prop="address">
          <el-input
            v-model="form.address"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入地址"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="简介" prop="brief">
          <el-input
            v-model="form.brief"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入简介"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" class="button">
        <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
      </el-col>
    </el-form>
  </div>
</template>
<script setup>
// 基础
const cloneDeep = inject('cloneDeep')
// 表单
const ruleFormRef = inject('ruleFormRef')
// 字典表
const cardTypeList = inject('cardTypeList')
const isUseList = inject('isUseList')
const contributionList = inject('contributionList')
// 接口
import { InvestmentStore } from '@/store/api/user/investment'
const investmentStore = InvestmentStore()
const form = ref({})
const rules = reactive({
  // nick_name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  // gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  // phone: [{ required: true, validator: validatePhoneNumber, trigger: 'blur' }],
  // account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  // password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  // refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
})
// 注册
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = cloneDeep(form.value)
      const res = await investmentStore.update(data)
      if (res.errcode === 0) {
        console.log(res)
      } else ElMessage.error(res.message)
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<style scoped lang="scss">
.index {
  .button {
    text-align: center;
  }
}
</style>
