<template>
  <div class="app-container">

    <div class="box ph-30">
      <el-card>
        <team-sign-step :language="language" :active-step="0"/>
      </el-card>
      <div class="h20"></div>
      <div class="panel" style="box-shadow: var(--el-box-shadow)">
        <match-info-row :match-id="cptId" :language="language"/>
        <div class="h20"></div>
          <el-form ref="ruleFormRef" label-width="120px" class="signForm"
                   :model="form" :rules="language==0?rules:rules_en"
                   :label-position="language==0?'left':'top'">
            <el-row>
              <el-col :lg="8" :offset="2">
                <el-form-item :label="language==0?'团体Logo':'Group Logo'" prop="imgUrl">
                  <ImageUpload2 v-model="form.imgUrl" :is-show-tip="false" :crop-width="200" :crop-height="200" :limit="1"/>
                   <span class="tip" v-if="language==0">请上传不超过 <i>5M</i> 的文件 格式为 <i>png/jpg/jpeg</i> 的文件</span>
                   <span class="tip" v-else>Please upload a file in the format of
                     <i>png/jpg/jpeg</i> that does not exceed <i>5MB</i>
                   </span>
                </el-form-item>
              </el-col>
              <el-col :lg="10">
                <el-form-item :label="language==0?'代表国家/地区':'Representing'" required>
                  <el-select filterable v-model="form.countryId" @change="changeCountryId">
<!--                    <el-option v-for="item in countryList" :key="item.id" :label="language==0?item.name:item.enName" :value="item.id"/>-->
                    <el-option v-for="item in countryList" :key="item.id" :label="item.noc||item.enName" :value="item.id"/>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="form.type!='4'" :label="language==0?'参赛队名称':'Name of participating team'" required>
                  <el-input type="text" v-model="form.abreviations" :placeholder="language==0?'请输入内容':''"/>
                </el-form-item>
<!--                <el-form-item v-if="form.type!='4'" :label="language==0?'团体名称':'Team Name'" prop="name" required>-->
<!--                  <div>-->
<!--                    <span v-if="language==0">{{form.country.name}}代表队</span>-->
<!--                    <span v-else>{{form.country.enName}} Delegation</span>-->
<!--                  </div>-->
<!--                  <el-input v-model="form.name" :placeholder="language==0?'请输入团体名称':''" />-->
<!--                </el-form-item>-->
                <el-form-item :label="language==0?'联系人姓名':'Contact Person'" required prop="contactPerson">
                  <el-input v-model="form.contactPerson" :placeholder="language==0?'请输入联系人':''" />
                </el-form-item>
                <el-form-item :label="language==0?'联系人邮箱':'Email'" required prop="contactEmail">
                  <el-input v-model="form.contactEmail" type="email" :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?'专业/业余':'Professional/Amateur'" required prop="majorFlag">-->
<!--                  <el-select v-model="form.majorFlag">-->
<!--                    <el-option :label="language==0?'专业':'Professional'" value="1" />-->
<!--                    <el-option :label="language==0?'业余':'Amateur'" value="0" />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item :label="language==0?'团体类型':'Group type'" prop="type">-->
<!--                  <el-select :disabled="language==1" v-model="form.type" :placeholder="typeOptions[language].selectPlaceholder" style="width: 100%;">-->
<!--                    <el-option v-for="(o,index) in typeOptions[language].options" :label="o.text"-->
<!--                               :key="index" :value="o.value" />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
                <el-form-item :label="language==0?'详细地址':'Detailed Address'" prop="address">
                  <el-input type="textarea" v-model="form.address" class="mt10" :placeholder="language==0?'请输入详细地址':''"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="participantsInfoArr&&participantsInfoArr.length>0">
              <el-col :span="16" :offset="4">
                <h3>{{ language==0?'补充信息':'Supplemental information'}}</h3>
                <el-form-item v-for="(s,index) in participantsInfoArr" :key="index">
                  <template #label>
                    <span v-if="s.status == 0" class="red">*</span>{{ s.name }}
                  </template>
                  <el-input v-if="s.type == '0'" v-model="s.value" />
                  <el-input v-if="s.type == '1'" v-model="s.value" type="number" />
                  <el-select v-if="s.type == '4'" v-model="s.value" class="m-2">
                    <el-option v-for="item in s.option" :key="item.id" :label="item.name" :value="item.name" />
                  </el-select>
                  <ImageUpload v-if="s.type == '3'" v-model="s.value" :limit="1" :is-show-tip="false" />
                  <!-- 文件 2-->
                  <FileUpload v-if="s.type == '2'" :button-text="language==0?'上传文件':'Upload file'" :is-show-tip="false" v-model="s.fixWxFile" :action="uploadUrl" :accept="accept" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>


        <div class="panel-footer text-center">
          <el-button type="primary" class="btn-lineG w200px" round @click="submitForm()">
            {{ language==0?'下一步':'NEXT' }}
          </el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import { useRoute, useRouter } from 'vue-router'
import { toRefs } from '@vueuse/shared'
import TeamSignStep from './components/teamSignStep'
import MatchInfoRow from "@/viewsPc/match/components/matchInfo-row";

const language= useStorage('language',0)

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
import * as match from '@/apiPc/match'
import { ElMessage } from 'element-plus'
import _ from 'lodash'
import {useStorage} from "@vueuse/core/index";

const data = reactive({
  isNational: false,
  matchData:{
    enBo:{}
  },
  form: {
    country:{}
  },
  typeOptions: {
    0: {
      selectPlaceholder: '请选择团体类型',
      options: [
        {value:'0',text:'普通院校'},
        {value:'1',text:'专业舞蹈学校'},
        {value:'2',text:'培训机构/俱乐部'},
        {value:'3',text:'地方协会'},
        {value:'4',text:'国家协会'},
      ]
    },
    1: {
      selectPlaceholder: 'Please select group type',
      options: [
        {value:'0',text:'School'},
        {value:'1',text:'Professional dance school'},
        {value:'2',text:'Company/Club'},
        {value:'3',text:'Local Association'},
        {value:'4',text:'National Association'},
      ]
    }
  },
  groupId: route.query.groupId||0,
  cptId: route.query.matchId||0,
  signType: false,
  regionsList: [],
  countryList: [],
  participantsInfoArr: [],
  rankList: [],
  accept: '.doc, .pdf, .docx, .zip',
  rules: {
    // imgUrl: { required: true, message: '请上传', trigger: 'blur' },
    // name: { required: true, message: '请填写', trigger: 'blur' },
    // type: { required: true, message: '请选择', trigger: 'change' },
    contactPerson: { required: true, message: '请填写内容', trigger: 'blur' },
    contactTelno: { required: true, message: '请填写内容', trigger: 'blur' },
    contactEmail: { required: true, message: '请填写内容', trigger: 'blur' },
    // abreviations: { required: true, message: '请填写内容', trigger: 'blur' },
    // address: { required: true, message: '请填写内容', trigger: 'blur' }
  },
  rules_en: {
    // imgUrl: { required: true, message: 'required', trigger: 'blur' },
    // name: { required: true, message: 'required', trigger: 'blur' },
    // type: { required: true, message: 'required', trigger: 'change' },
    contactPerson: { required: true, message: 'required', trigger: 'blur' },
    contactTelno: { required: true, message: 'required', trigger: 'blur' },
    contactEmail: { required: true, message: 'required', trigger: 'blur' },
    // abreviations: { required: true, message: 'required', trigger: 'blur' },
    // address: { required: true, message: 'required', trigger: 'blur' }
  },
  coachOrLeaderFlag: '',
  matchInfo:{}
})
const {
  isNational,matchData,
  rankList,
  form,
  groupId,
  signType,
  participantsInfoArr,
  cptId,
  rules,rules_en,
  regionsList,countryList,matchInfo,
  coachOrLeaderFlag, accept,typeOptions
} = toRefs(data)
const uploadUrl = ref('/upload/upLoadToFileServer')

onMounted(() => {
  console.log(cptId.value,route.query,route.params)
  // 获取团体信息
  getGroupInfo()
  signType.value = route.query.signType
  isNational.value = route.query.isNational

  getRegionsList()
  getCountryList()
  match.getMatchById({ id: cptId.value }).then(res => {
    coachOrLeaderFlag.value = res.data.coachOrLeaderFlag
    matchInfo.value = res.data
    if (res.data.groupInfo) {
      participantsInfoArr.value = JSON.parse(res.data.groupInfo)
    }

    // 获取补充信息
    match.getMyGroupForCpt(groupId.value, cptId.value).then(res => {
      if (res.data.groupInfo && res.data.groupInfo.groupInfo) {
        const groupInfo = JSON.parse(res.data.groupInfo.groupInfo)
        if (groupInfo.length > 0) {
          // 补充字段信息
          participantsInfoArr.value = groupInfo
          for (var n of participantsInfoArr.value) {
            if (n.type == '3' && n.value.url) {
              // 图片
              n.value = n.value.url
            }
            if (n.type == '2') {
              // 文件
              var arr = [{
                name: n.value.name,
                url: n.value.url
              }]
              n.fixWxFile = arr
            }
          }
        }
      }
    })
  })
})

function getRegionsList() {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
}
function getCountryList() {
  match.countryList().then(res => {
    countryList.value = res.data
  })
}
function changeCountryId(e) {
  console.log(e)
  for (var c of countryList.value){
    if (c.id == e) {
      form.value.country = c
    }
  }
}
function getGroupInfo() {
  match.getGroupInfo().then(res => {
    form.value = res.data
    if(form.value.countryId){
      changeCountryId(form.value.countryId)
    }
  }).catch(err => {
      router.push({name: 'home'})
      return
  })
}

function goPrev() {
  router.go(-1)
}

function submitForm() {
  proxy.$refs['ruleFormRef'].validate((valid, fields) => {
    if (valid) {
      if(form.value.type!='4'&&(form.value.abreviations=='')){
        ElMessage.warning(language.value==0?`请输入参赛队名称`:`Please complete Name of participating team`)
        return
      }
      console.log(form.value)
      for (const n of participantsInfoArr.value) {
        if (n.status == 0 && (!n.value && (!n.fixWxFile||n.fixWxFile.length==0))) {
          ElMessage.warning(language.value==0?`请完善${n.name}信息`:`Please complete ${n.name} information`)
          return
        }
      }

      if (participantsInfoArr.value.length>0) {
        // 保存补充信息
        let fileInfo = {}
        for (var p of participantsInfoArr.value) {
          if (p.type == '2' && p.fixWxFile) {
            console.log(p.fixWxFile)
            const temp = p.fixWxFile[0]?.name.split('.')
            fileInfo = {
              url: p.fixWxFile[0].url,
              name: p.fixWxFile[0].name,
              extname: temp[temp.length - 1]
            }
            p.value = fileInfo
          }
        }
        const obj = {
          cptId: cptId.value,
          groupId: groupId.value,
          groupInfo: JSON.stringify(participantsInfoArr.value)
        }
        match.saveMyGroupExtraInfo(obj).then(res => {

        })
      }
      // 保存团体信息
      form.value.cptId = cptId.value
      form.value.groupId = groupId.value
      match.saveMyGroupForCpt(form.value).then(res => {
        goNext()
      })
    } else {
      console.log(form.value, fields)
    }
  })
}

function goNext() {
    // 选教练
    router.push({
      name: `chooseCoach`,
      query: {
        matchId: cptId.value,
        groupId: groupId.value,
        isNational: isNational.value
      }
    })
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 0;
  background: #F5F7F9;
}

.panel-footer .el-button--success {
  padding: 0 40px;
}
.bili43{
  :deep(.fileItem) {
    width: 200px;
    height: 150px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 200px;
    height: 150px;
  }
}
.signForm {
  .el-form-item__label {
    color: #4C5359;
  }
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;font-style: normal;
    margin: 0 4px 0 0;
  }
}

.threeFour {
  width: 100%;
}

:deep(.el-upload--picture-card) {
  width: 120px;
  height: 120px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 120px;
  height: 120px;
}

.red {
  color: #f56c6c;
}
</style>