<template>
  <el-card :body-style="{'padding':'0'}">
    <div class="indexTitle"><h3 class="leftboderTT">团队认证</h3></div>

    <div class="pd20">
      <el-form :model="form" label-width="160px">
        <fieldset class="fieldset-form">
          <legend>机构类型</legend>
          <div class="pt30">
            <el-form-item label="选择机构类型" required>
              <el-radio-group v-model="form.type">
                <el-radio-button label="0">普通院校</el-radio-button>
                <el-radio-button label="1">专业舞蹈学校</el-radio-button>
                <el-radio-button label="2">培训机构/俱乐部</el-radio-button>
                <el-radio-button label="3">地方协会</el-radio-button>
                <el-radio-button label="4">国家协会</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </div>
        </fieldset>
        <fieldset class="fieldset-form mt30">
          <legend>机构基础信息 </legend>
          <div class="pt30" style="max-width: 500px">
            <el-form-item label="所属国家" required>
              <el-select filterable v-model="form.countryId">
                <el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址" required prop="address">
              <el-cascader v-if="form.countryId == 240"
                           v-model="form.regionId"
                           style="width: 100%;"
                           :options="regionsList"
                           :props="{ label:'text' }"
              />
              <el-input type="textarea" v-model="form.address" class="mt10" placeholder="请输入详细地址"/>
            </el-form-item>
            <el-form-item label="机构名称" required prop="name">
              <el-input type="text" v-model="form.name" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="联系人姓名" required prop="contactPerson">
              <el-input type="text" v-model="form.contactPerson" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="联系人电话" required prop="contactTelno">
              <el-input v-model="form.contactTelno" type="phone" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="联系人邮箱" required prop="contactEmail">
              <el-input v-model="form.contactEmail" type="email" placeholder="请输入内容"/>
            </el-form-item>

          </div>
        </fieldset>
        <fieldset class="fieldset-form mt30">
          <legend>机构认证信息 </legend>
          <div class="pt30" style="max-width: 500px">
            <el-form-item label="机构代码" required prop="orgCode">
              <el-input type="text" v-model="form.orgCode" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="机构证件" required prop="orgCert">
              <file-upload  v-model="form.orgCert"/>
            </el-form-item>

          </div>
        </fieldset>
        <fieldset class="fieldset-form mt30">
          <legend>机构法人信息 </legend>
          <div class="pt30" style="max-width: 500px">
            <el-form-item label="法人姓名" required prop="orgCode">
              <el-input type="text" v-model="form.orgCode" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="法定代表人身份文件" required prop="orgCert">
              <file-upload  v-model="form.orgCert"/>
            </el-form-item>

          </div>
        </fieldset>

      </el-form>
      <div class="text-center mt30">
        <el-button type="primary" class="btn-lineG w200px" round>提交审核</el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import {commitAudit, getGroupInfo} from "@/apiPc/match";
import {onMounted} from "@vue/runtime-core";
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus'
import FileUpload from "@/components/FileUpload";
import * as match from "@/apiPc/match";

const form = ref({})
const regionsList = ref([])
function submit() {
  commitAudit().then(res => {

  })
}

onMounted(() => {
  getRegionsList()
  getData()
})
function getRegionsList() {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
}
function getData() {
  getGroupInfo().then(res => {
    form.value = res.data
  })
}
</script>

<style scoped lang="scss">
.indexTitle {
  margin: 20px 0 12px;
  padding: 0 20px 15px;
  border-bottom: 1px solid #e5e5e5;

  h3 {
    font-size: 16px;
    color: var(--el-color-primary);
  }
}

fieldset {
  :deep(.el-radio-button.el-radio-button--default) {
    margin-right: 8px;
    border-radius: 5px;

    .el-radio-button__inner {
      background: rgba(69, 61, 234, 0.1);
      border-radius: 5px;
      color: #000000;
    }

    &.is-active {
      background: linear-gradient(90deg, #8623FC, #453DEA);

      .el-radio-button__inner {
        color: #fff;
      }
    }
  }
}


</style>