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

    <div class="box ph-30">
      <div class="panel">
        <div class="panel-header">
          <h3 class="panel-title">选择教练/领队/其他</h3>
        </div>
        <div class="panel-body">
          <span class="tip">*至少选择一个教练或领队</span>
          <div class="text-right">
            <el-button type="success" @click="addCoach">新建教练</el-button>
          </div>

          <el-form
            ref="ruleFormRef" label-width="120px" label-position="top" class="chooseForm" :model="form"
            :rules="rules"
          >
            <el-form-item label="教练" prop="coachs">
              <el-checkbox-group v-model="form.coachs" @change="changecoachs">
                <el-checkbox v-for="c in coachList" :label="c.id">
                  <el-avatar :size="60" :src="c.picUrl" />
                  <p class="name">{{ c.realName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit />
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="领队" prop="leader">
              <el-checkbox-group v-model="form.leader">
                <el-checkbox v-for="c in leaderList" :label="c.id">
                  <el-avatar :size="60" :src="c.picUrl" />
                  <p class="name">{{ c.realName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit />
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="队医" prop="doctors">
              <el-checkbox-group v-model="form.doctor">
                <el-checkbox v-for="c in doctorList" :label="c.id">
                  <el-avatar :size="60" :src="c.picUrl" />
                  <p class="name">{{ c.realName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit />
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="翻译" prop="translator">
              <el-checkbox-group v-model="form.translator">
                <el-checkbox v-for="c in translatorList" :label="c.id">
                  <el-avatar :size="60" :src="c.picUrl" />
                  <p class="name">{{ c.realName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit />
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="官员" prop="official">
              <el-checkbox-group v-model="form.official">
                <el-checkbox v-for="c in officialList" :label="c.id">
                  <el-avatar :size="60" :src="c.picUrl" />
                  <p class="name">{{ c.realName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit />
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="其他" prop="other">
              <el-checkbox-group v-model="form.other">
                <el-checkbox v-for="c in otherList" :label="c.id">
                  <el-avatar :size="60" :src="c.picUrl" />
                  <p class="name">{{ c.realName }}
                    <el-icon @click.stop="editPerson(c.id)">
                      <Edit />
                    </el-icon>
                  </p>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>

          </el-form>

        </div>
        <div class="panel-footer text-center">
          <el-button type="success" plain round @click="goPrev()">上一步</el-button>
          <el-button v-if="signType!='2'" type="success" round @click="goNext()">下一步</el-button>
          <el-button v-else type="success" round @click="chooseDone()">确定</el-button>
        </div>
      </div>
    </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: '',
  rules: {
    // coachs: { required: true, message: '至少选择一个', trigger: 'change' },
    // leader: { required: true, message: '至少选择一个', trigger: 'change' }
  }
})
const { form, coachList, leaderList, otherList, doctorList, translatorList, officialList, rules, signType, groupId, hasChooseObj } = 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">
	.app-container{ padding: 0;background: #F5F7F9;}
  .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;}
	}
</style>