<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="rules"
                   :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" :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?'参赛队名称':'Name of participating team'" required prop="abreviations">
                  <el-input type="text" v-model="form.abreviations" :placeholder="language==0?'请输入内容':''"/>
                </el-form-item>
                <el-form-item :label="language==0?'团体名称':'Team Name'" prop="name">
                  <el-input v-model="form.name" :placeholder="language==0?'请输入团体名称':''" />
                </el-form-item>
                <el-form-item :label="language==0?'负责人姓名':'Contact Person'" prop="contactPerson">
                  <el-input v-model="form.contactPerson" placeholder="请输入联系人" />
                </el-form-item>
                <el-form-item :label="language==0?'邮箱':'Email'" required prop="contactEmail">
                  <el-input v-model="form.contactEmail" type="email" placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item :label="language==0?'团体类型':'Group type'" prop="type">
                  <el-select v-model="form.type" :placeholder="language==0?'请选择团体类型':''" style="width: 100%;">
                    <el-option :label="language==0?'普通院校':'School'" value="0" />
                    <el-option :label="language==0?'专业舞蹈学校':'Professional dance school'" value="1" />
                    <el-option :label="language==0?'培训机构/俱乐部':'Company/Club'" value="2" />
                    <el-option :label="language==0?'地方协会':'Local Association'" value="3" />
                    <el-option :label="language==0?'国家协会':'National Association'" value="4" />
                  </el-select>
                </el-form-item>
                <el-form-item :label="language==0?'详细地址':'Detailed Address'" required prop="address">
                  <el-input type="textarea" v-model="form.address" class="mt10" placeholder="请输入详细地址"/>
                </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'" 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";

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: route.query.groupId||0,
  cptId: route.params.id||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(() => {
  // 获取团体信息
  getGroupInfo()
  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;
}

.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>