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

    <div class="pd20">
      <el-form :model="form" label-width="160px" :label-position="language==0?'left':'top'">
        <fieldset class="fieldset-form">
          <legend>{{ language==0?'机构类型':'Institution Type' }}</legend>
          <div class="pt30">
            <el-form-item :label="language==0?'选择机构类型':'Select institution type'" required >
              <el-radio-group v-model="form.type" disabled>
                <el-radio-button value="0">{{ language==0?'普通院校':'School' }}</el-radio-button>
                <el-radio-button value="1">{{ language==0?'专业舞蹈学校':'Professional dance school' }}</el-radio-button>
                <el-radio-button value="2">{{ language==0?'培训机构/俱乐部':'Company/Club' }}</el-radio-button>
                <el-radio-button value="3">{{ language==0?'地方协会':'Local Association' }}</el-radio-button>
                <el-radio-button value="4">{{ language==0?'国家协会':'National Association' }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </div>
        </fieldset>
        <fieldset class="fieldset-form mt30">
          <legend>{{ language==0?'机构基础信息':'Institutional Basic Information' }} </legend>
          <div class="pt30" style="max-width: 500px">
            <el-form-item :label="language==0?'所属国家/地区':'Country'" required>
              <el-select filterable v-model="form.countryId" :disabled="form.type!='4'">
                <el-option v-for="item in countryList" :key="item.id" :label="language==0?item.name:item.enName" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item :label="language==0?'详细地址':'Detailed Address'" 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"/>
            </el-form-item>
            <el-form-item :label="language==0?'机构名称':'Team Name'" required prop="name">
              <el-input type="text" v-model="form.name" :placeholder="language==0?'请输入内容':''"/>
            </el-form-item>
            <el-form-item :label="language==0?'联系人姓名':'Contact Person'" required prop="contactPerson">
              <el-input type="text" v-model="form.contactPerson" :placeholder="language==0?'请输入内容':''"/>
            </el-form-item>
            <el-form-item :label="language==0?'联系人电话':'Contact Phone'"  required prop="contactTelno">
              <el-input v-model="form.contactTelno" type="phone" :placeholder="language==0?'请输入内容':''"/>
            </el-form-item>
            <el-form-item :label="language==0?'联系人邮箱':'Contact Email'" required prop="contactEmail">
              <el-input v-model="form.contactEmail" type="email" :placeholder="language==0?'请输入内容':''"/>
            </el-form-item>

          </div>
        </fieldset>
        <fieldset class="fieldset-form mt30">
          <legend>{{ language==0?'机构认证信息':'Institutional certification information' }} </legend>
          <div class="pt30" style="max-width: 500px">
            <el-form-item :label="language==0?'机构代码':'Organization Code'" required >
              <el-input type="text" v-model="form.orgCode" :placeholder="language==0?'请输入内容':''"/>
            </el-form-item>
            <el-form-item :label="language==0?'机构证件':'Institutional documents'" required >
              <file-upload :is-show-tip="false"  v-model="form.orgCert" :button-text="language==0?'上传文件':'Upload'"/>
            </el-form-item>

          </div>
        </fieldset>
        <fieldset class="fieldset-form mt30">
          <legend>{{ language==0?'机构法人信息':'Institutional legal person information' }} </legend>
          <div class="pt30" style="max-width: 500px">
            <el-form-item :label="language==0?'法人姓名':'Legal Person Name'" required>
              <el-input type="text" v-model="form.legalName" :placeholder="language==0?'请输入内容':''"/>
            </el-form-item>
            <el-form-item :label="language==0?'法定代表人身份文件':'Identity documents of the legal representative'" required >
              <file-upload  :is-show-tip="false" v-model="form.legalFile" :button-text="language==0?'上传文件':'Upload'"/>
            </el-form-item>

          </div>
        </fieldset>

      </el-form>
      <div class="text-center mt30">
        <el-button type="primary" class="btn-lineG w200px" @click="submit" style="opacity: 0.5;" round>{{ language==0?'提交审核':'Submit' }}</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";
import cache from "@/plugins/cache";
import {useStorage} from "@vueuse/core/index";
const language= useStorage('language',0)
const form = ref({})
const regionsList = ref([])
const countryList = ref([])
function submit() {
  ElMessage.warning(language.value==0?'暂未开放':'Building,Not yet open')
  return
  commitAudit(form.value).then(res => {

  })
}

onMounted(() => {
  getCountryList()
  getRegionsList()
  getData()
})
function getCountryList() {
  match.countryList().then(res => {
    countryList.value = res.data
  })
}
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>