<template>
  <div class="">

    <div class="box ph-30">
      <el-card>
        <el-steps :active="activeStep" align-center>
          <el-step title="团队信息"/>
          <el-step title="教练/领队/其他"/>
          <el-step title="选手报名"/>
          <el-step title="提交审核"/>
        </el-steps>
      </el-card>

      <el-row class="mt20" :gutter="20">
        <el-col :lg="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <img src="@/assets/sign/tag01.png"/>
                教练<span class="tip">（教练/领队，至少选择一项）</span>
              </div>
            </template>
            <div class="chooseForm">
              <el-checkbox-group v-model="form.coachs" @change="changecoachs">
                <div class="addBttn" @click="addCoach(0)">+</div>
                <el-checkbox v-for="c in coachList" :label="c.id">
                  <el-avatar fit="cover" :size="60" :src="fillImgUrl(c.picUrl)"/>
                  <p class="name">{{ c.shortName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit/>
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <img src="@/assets/sign/tag02.png"/>
                领队<span class="tip">（教练/领队，至少选择一项）</span>
              </div>
            </template>
            <div class="chooseForm">
              <el-checkbox-group v-model="form.leader">
                <div class="addBttn" @click="addCoach(0)">+</div>
                <el-checkbox v-for="c in leaderList" :label="c.id">
                  <el-avatar fit="cover" :size="60" :src="fillImgUrl(c.picUrl)"/>
                  <p class="name">{{ c.shortName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit/>
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="12">
          <el-card class="mt20">
            <template #header>
              <div class="card-header">
                <img src="@/assets/sign/tag03.png"/>
                队医
              </div>
            </template>
            <div class="chooseForm">
              <el-checkbox-group v-model="form.doctor">
                <div class="addBttn" @click="addCoach(0)">+</div>
                <el-checkbox v-for="c in doctorList" :label="c.id">
                  <el-avatar fit="cover" :size="60" :src="fillImgUrl(c.picUrl)"/>
                  <p class="name">{{ c.shortName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit/>
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="12">
          <el-card class="mt20">
            <template #header>
              <div class="card-header">
                <img src="@/assets/sign/tag04.png"/>
                翻译
              </div>
            </template>
            <div class="chooseForm">
              <el-checkbox-group v-model="form.translator">
                <div class="addBttn" @click="addCoach(0)">+</div>
                <el-checkbox v-for="c in translatorList" :label="c.id">
                  <el-avatar fit="cover" :size="60" :src="fillImgUrl(c.picUrl)"/>
                  <p class="name">{{ c.shortName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit/>
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="12">
          <el-card class="mt20">
            <template #header>
              <div class="card-header">
                <img src="@/assets/sign/tag05.png"/>
                官员
              </div>
            </template>
            <div class="chooseForm">
              <el-checkbox-group v-model="form.official">
                <div class="addBttn" @click="addCoach(0)">+</div>
                <el-checkbox v-for="c in officialList" :label="c.id">
                  <el-avatar fit="cover" :size="60" :src="fillImgUrl(c.picUrl)"/>
                  <p class="name">{{ c.shortName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit/>
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="12">
          <el-card class="mt20">
            <template #header>
              <div class="card-header">
                <img src="@/assets/sign/tag06.png"/>
                其他
              </div>
            </template>
            <div class="chooseForm">
              <el-checkbox-group v-model="form.other">
                <div class="addBttn" @click="addCoach(0)">+</div>
                <el-checkbox v-for="c in otherList" :label="c.id">
                  <el-avatar fit="cover" :size="60" :src="fillImgUrl(c.picUrl)"/>
                  <p class="name">{{ c.shortName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit/>
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-card class="mt20">
        <div class="text-center">
          <el-button type="primary" class="w200px" plain round @click="goPrev()">上一步</el-button>
          <el-button type="primary" class="btn-lineG w200px" round @click="goNext()">下一步</el-button>
        </div>
      </el-card>


    </div>

    <dialogAddCoach ref="dialogAddCoachRef" @submitForm="getList"/>

  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {getCurrentInstance, onMounted} from '@vue/runtime-core'
import * as match from '@/apiPc/match'
import dialogAddCoach from './components/addCoach'

const {proxy} = getCurrentInstance()
const router = useRouter()
const route = useRoute()
import {ElMessage} from 'element-plus'
import {useRoute, useRouter} from 'vue-router'

const data = reactive({
  form: {
    coachs: [],
    leader: []
  },
  coachList: [],
  leaderList: [],
  otherList: [],
  doctorList: [],
  translatorList: [],
  officialList: [],
  hasChooseObj: {},
  groupId: '0',
  signType: '',
  activeStep: 1
})
const {
  form,
  coachList,
  leaderList,
  otherList,
  doctorList,
  translatorList,
  officialList,
  rules,
  signType,
  groupId,
  hasChooseObj,activeStep
} = toRefs(data)
let matchId = ''
onMounted(() => {
  matchId = route.query.matchId
  groupId.value = route.query.groupId
  signType.value = route.query.signType || ''
  getList()
})

function getList() {
  if (signType.value == '0') {
    geren()
  } else {
    tuandui()
  }
}

function changecoachs(e) {
  console.log(e)
}

// 获取报名时是否已选过
let hasChooseId

function tuandui() {
  Promise.all([
    match.getMyGroupForCpt(groupId.value, matchId),
    match.getChooseDoneGroupCoachs(matchId, groupId.value)
  ]).then((res) => {
    coachList.value = res[0].data.coaches
    leaderList.value = res[0].data.leaders
    doctorList.value = res[0].data.teamDoctors
    translatorList.value = res[0].data.translators
    officialList.value = res[0].data.officials
    otherList.value = res[0].data.others

    if (res[1].data.id != null) {
      hasChooseObj.value = res[1].data
      hasChooseId = res[1].data.id
      if (hasChooseObj.value.coachIds) {
        form.value.coachs = hasChooseObj.value.coachIds.split(',')
      } else {
        form.value.coachs = []
      }
      if (hasChooseObj.value.leaderIds) {
        form.value.leader = hasChooseObj.value.leaderIds.split(',')
      } else {
        form.value.leader = []
      }
      form.value.other = hasChooseObj.value.otherIds.split(',')
      form.value.doctor = hasChooseObj.value.teamDoctorIds.split(',')
      form.value.translator = hasChooseObj.value.translatorIds.split(',')
      form.value.official = hasChooseObj.value.officialIds.split(',')
    }
  })
}

function geren() {
  Promise.all([
    match.getMyPersonInfoWithcptId(matchId),
    match.getChooseDoneSingleCoachs(matchId)
  ]).then((res) => {
    coachList.value = res[0].data.coaches
    leaderList.value = res[0].data.leaders
    otherList.value = res[0].data.others
    doctorList.value = res[0].data.teamDoctors
    translatorList.value = res[0].data.translators
    officialList.value = res[0].data.officials

    if (res[1].data.id != null) {
      hasChooseObj.value = res[1].data
      hasChooseId = res[1].data.id
      form.value.coachs = hasChooseObj.value.coachIds.split(',')
      form.value.leader = hasChooseObj.value.leaderIds.split(',')
      form.value.other = hasChooseObj.value.otherIds.split(',')
      form.value.doctor = hasChooseObj.value.doctorIds.split(',')
      form.value.translator = hasChooseObj.value.translatorIds.split(',')
      form.value.official = hasChooseObj.value.officialIds.split(',')
    }
  })
}

function chooseDone() {
  // 返回团队报名
  router.go(-1)
}

function goNext() {
  console.log(form.value)
  if ((form.value.coachs.length < 1) && (form.value.leader.length < 1)) {
    ElMessage.error('至少选一个教练或领队')
    return
  }
  var obj = {
    cptId: matchId,
    coachIds: form.value.coachs?.toString() || '',
    leaderIds: form.value.leader?.toString() || '',
    otherIds: form.value.other?.toString() || '',
    teamDoctorIds: form.value.doctor?.toString() || '',
    translatorIds: form.value.translator?.toString() || '',
    officialIds: form.value.official?.toString() || ''
  }
  if (hasChooseId) {
    obj.id = hasChooseId
  }
  if (groupId.value && groupId.value != 0) {
    obj.unitId = groupId.value
  }
  if (signType.value == '0') {
    // 个人报名
    match.singleSignSavePerson(obj).then(res => {
      console.log(res)
      router.push({
        name: 'chooseProject',
        query: {
          matchId: matchId
        }
      })
    })
  } else if (signType.value == '1') {
    // 团队报名
    match.groupSignSavePerson(obj).then(res => {
      router.push({
        name: 'chooseSportsman',
        query: {
          matchId: matchId,
          groupId: groupId.value,
          signType: signType.value
        }
      })
    })
  }

  console.log(form.value)
}

function goPrev() {
  router.back()
}

function editPerson(id) {
  proxy.$refs['dialogAddCoachRef'].open({
    title: '编辑人员',
    id: id,
    groupId: groupId.value
  })
}

function addCoach() {
  proxy.$refs['dialogAddCoachRef'].open({
    title: '新建人员',
    id: 0,
    groupId: groupId.value
  })
}
</script>

<style scoped lang="scss">
.addBttn {margin-right: 20px;
  width: 60px;
  color: #7B7F83;
  font-size: 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px dashed #95A1A6;
  border-radius: 50%;

  &:hover {
    cursor: pointer;
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
  }
}

.card-header {
  display: flex;
  align-items: center;color: var(--el-color-primary);

  img {
    margin-right: 8px;
    flex: 0 0 auto;
  }
}

.panel-footer .el-button--success {
  padding: 0 40px;
}
.chooseForm{
  :deep(.el-form-item__content){background: rgba(245, 247, 249, 0.38);
    padding: 20px 40px 10px;}
  .el-checkbox{height: auto;}
  :deep(.el-checkbox__input){position: absolute;right: 0;top: 0;}
  .name{text-align: center;}
}
:deep(.el-avatar)>img{width: 100%;}

</style>