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

    <div class="box ph-30">
      <el-card>
        <el-steps active="1" align-center>
          <el-step :title="language==0?'团队信息':'Team Information'"  />
          <el-step :title="language==0?'教练/领队/其他':'Coach/Team Leader/Other'" />
          <el-step :title="language==0?'选手报名':'Participant Registration'" />
          <el-step :title="language==0?'提交审核':'Submit for review'" />
        </el-steps>
      </el-card>
      <div class="h20"></div>
      <div class="panel" style="box-shadow: var(--el-box-shadow)">
        <div class="border-info" style="margin: 20px">
          <el-row v-if="language==0">
            <el-col :lg="8"><div class="item"><label>赛事名称</label>{{matchInfo.name}}</div></el-col>
            <el-col :lg="8"><div class="item"><label>赛事类型</label>{{matchInfo.name}}</div></el-col>
            <el-col :lg="8"><div class="item"><label>赛事时间</label>{{matchInfo.beginTime?.slice(0,10)}} 至 {{ matchInfo.endTime?.slice(0,10) }}</div></el-col>
            <el-col :lg="8"><div class="item"><label>报名时间</label>{{ matchInfo.signBeginTime?.slice(0,10) }} 至{{ matchInfo.signEndTime?.slice(0,10) }}</div></el-col>
            <el-col :lg="16"><div class="item"><label>比赛地址</label>{{matchInfo.address}}</div></el-col>
          </el-row>
          <el-row v-else>
            <el-col :lg="8"><div class="item"><label>Event Name</label>{{matchInfo.name}}</div></el-col>
            <el-col :lg="8"><div class="item"><label>Event Type</label>{{matchInfo.name}}</div></el-col>
            <el-col :lg="8"><div class="item"><label>Event Date</label>{{matchInfo.beginTime?.slice(0,10)}} ~ {{ matchInfo.endTime?.slice(0,10) }}</div></el-col>
            <el-col :lg="8"><div class="item"><label>Registration Period</label>{{ matchInfo.signBeginTime?.slice(0,10) }} ~{{ matchInfo.signEndTime?.slice(0,10) }}</div></el-col>
            <el-col :lg="16"><div class="item"><label>Event Address</label>{{matchInfo.address}}</div></el-col>
          </el-row>

        </div>
        <div class="h20"></div>
          <el-form ref="ruleFormRef" label-width="120px" class="signForm" :model="form" :rules="rules">
            <el-row>
              <el-col :lg="8" :offset="2">
                <el-form-item label="团体Logo" prop="imgUrl">
                  <ImageUpload2 v-model="form.imgUrl" :crop-width="200" :crop-height="200" :limit="1"/>
                   <span class="tip">请上传不超过 <i>5M</i> 的文件 格式为 <i>png/jpg/jpeg</i> 的文件</span>
                </el-form-item>
              </el-col>
              <el-col :lg="10">
                <el-form-item label="团体名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入团体名称" />
                </el-form-item>
                <el-form-item label="负责人姓名" prop="contactPerson">
                  <el-input v-model="form.contactPerson" placeholder="请输入联系人" />
                </el-form-item>
                <el-form-item label="邮箱" required prop="contactEmail">
                  <el-input v-model="form.contactEmail" type="email" placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item label="详细地址" required prop="address">
                  <el-input type="textarea" v-model="form.address" class="mt10" placeholder="请输入详细地址"/>
                </el-form-item>
                <el-form-item label="团体类型" prop="type">
                  <el-select v-model="form.type" placeholder="请选择团体类型" style="width: 100%;">
                    <el-option label="普通院校" value="0" />
                    <el-option label="专业舞蹈学校" value="1" />
                    <el-option label="培训机构/俱乐部" value="2" />
                    <el-option label="地方协会" value="3" />
                    <el-option label="国家协会" value="4" />
                  </el-select>
                </el-form-item>
                <el-form-item label="参赛队名称" required prop="abreviations">
                  <el-input type="text" v-model="form.abreviations" placeholder="请输入内容"/>
                </el-form-item>

              </el-col>
            </el-row>
            <el-row v-if="participantsInfoArr&&participantsInfoArr.length>0">
              <el-col :span="16" :offset="4">
                <h3>补充信息</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'" 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 cache from "@/plugins/cache"
const language = ref(cache.local.get('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 {saveMyGroupForCpt} from "@/apiPc/match";

const data = reactive({
  isRanks: false,
  matchData:{
    enBo:{}
  },
  form: {},
  groupId: 0,
  cptId: 0,
  signType: false,
  regionsList: [],
  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' },
    contactEmail: { required: true, message: '请填写内容', trigger: 'blur' },
    abreviations: { required: true, message: '请填写内容', trigger: 'blur' },
    address: { required: true, message: '请填写内容', trigger: 'blur' }
  },
  coachOrLeaderFlag: '',
  matchInfo:{}
})
const {
  isRanks,matchData,
  rankList,
  form,
  groupId,
  signType,
  participantsInfoArr,
  cptId,
  rules,
  regionsList,matchInfo,
  coachOrLeaderFlag, accept
} = toRefs(data)
const uploadUrl = ref('/upload/upLoadToFileServer')

onMounted(() => {
  // 获取团体信息
  groupId.value = route.query.groupId
  getGroupInfo()
  cptId.value = route.query.matchId
  signType.value = route.query.signType

  getRegionsList()
  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 getGroupInfo() {
  match.getGroupInfo().then(res => {
    form.value = res.data
  })
}

function getTeamList() {
  return match.getMyTeamList(cptId.value, groupId.value).then(response => {
    rankList.value = response.data
  })
}

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

function submitForm() {
  proxy.$refs['ruleFormRef'].validate((valid, fields) => {
    if (valid) {
      console.log(form.value)
      for (const n of participantsInfoArr.value) {
        if (n.status == 0 && (!n.value && !n.fixWxFile)) {
          ElMessage.error(`请完善${n.name}信息`)
          return
        }
      }

      if (participantsInfoArr.value.length>0) {
        // 保存补充信息
        let fileInfo = {}
        for (var p of participantsInfoArr.value) {
          if (p.type == '2' && 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,
        signType: signType.value
      }
    })
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 0;
  background: #F5F7F9;
}
.border-info{
  .item{margin: 5px 0;color: #4C5359;  font-size: 14px;
    label{font-size: 14px;margin-right: 14px}
  }
}
.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>