<template>
  <el-dialog v-model="show" :title="title" width="1000px" append-to-body :close-on-click-modal="false">

    <el-form label-width="120px" label-position="top" class="chooseForm" :model="form">
      <el-row :gutter="20">
        <el-col :span="24" />

        <el-col :span="8">
          <el-form-item>
            <p class="title">可选项目</p>
            <el-radio-group v-model="form.project" @change="chooseThisProject">
              <div v-for="c in projectList" :key="c" class="athleteBox">
                <el-radio :label="c">
                  <p class="name">{{ c.name }}
                  </p>
                </el-radio>
              </div>
            </el-radio-group>
            <el-empty v-if="projectList.length==0" :image="`/img/order_no.png`" :image-size="228"  description="无可选项目" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <p class="title">可选组别</p>
            <el-radio-group v-model="form.groupId" @change="chooseThisGroup">
              <div v-for="c in signGroupList" :key="c" class="athleteBox">
                <el-radio :label="c.id">
                  <p class="name">{{ c.name }}
                  </p>
                </el-radio>
              </div>
            </el-radio-group>
            <el-empty v-if="signGroupList.length==0" style="width: 100%;" description="无可选组别" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-radio-group v-model="form.levelId" @change="chooseThisLevel">
              <div v-if="signlevelListBoy.length>0">
                <p class="title">男子组</p>
                <div v-for="c in signlevelListBoy" :key="c" class="athleteBox">
                  <el-radio :label="c.id">{{ c.name }}</el-radio>
                </div>
              </div>
              <div v-if="signlevelListGirl.length>0">
                <p class="title">女子组</p>
                <div v-for="c in signlevelListGirl" :key="c" class="athleteBox">
                  <el-radio :label="c.id">{{ c.name }}</el-radio>
                </div>
              </div>
            </el-radio-group>
            <div v-if="signLevelList.length>0">
              <p class="title">可选级别</p>
              <el-radio-group :key="c" v-model="form.levelId" @change="chooseThisLevel">
                <div v-for="c in signLevelList" :key="c" class="athleteBox">
                  <el-radio :label="c.id">{{ c.name }}</el-radio>
                </div>
              </el-radio-group>
            </div>
            <div v-if="signLevelList.length==0&&signlevelListGirl.length==0&&signlevelListBoy.length==0" style="width: 100%">
              <p class="title">可选级别</p>
              <el-empty style="width: 100%;" description="无可选级别" />
            </div>

          </el-form-item>

        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" @click="levelDone">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, nextTick, onMounted } from '@vue/runtime-core'
import { reactive, toRefs, watch } from 'vue'
import * as match from '@/apiPc/match'
import { ElMessage, ElMessageBox } from 'element-plus'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['submitForm'])

const data = reactive({
  projectList: [],
  signGroupList: [],
  signLevelList: [],
  signlevelListBoy: [],
  signlevelListGirl: [],
  show: false,
  title: '',
  matchId: '',
  form: {}
})
const { show, projectList, title, form, matchId, signGroupList, signLevelList, signlevelListBoy, signlevelListGirl } = toRefs(data)
let personId = ''
onMounted(() => {
  getMyself()
})
const getMyself = () => {
  match.getMyPersonInfo().then(res => {
    personId = res.data.id
  })
}

const getProjectList = (id) => {
  projectList.value = []
  match.getCanSignProjectList(id).then(res => {
    for (const p of res.data) {
      if (p.canSign == '1') {
        projectList.value.push(p)
      }
    }
  })
}
const chooseThisProject = (e) => {
  console.log(e)
  getSignGroupList(e.id, personId)
  form.value.levelId = ''
  form.value.groupId = ''
  signLevelList.value = []
  signlevelListBoy.value = []
  signlevelListGirl.value = []
}
// 获取组别
const getSignGroupList = (projectId, personId) => {
  signGroupList.value = []
  match.getCanSignGroupListFromSelectPerson(projectId, personId).then(res => {
    for (var g of res.data) {
      if (g.canSign == '1') {
        signGroupList.value.push(g)
      }
    }
  })
}
const chooseThisGroup = (e) => {
  console.log(e)
  getLevels(form.value.groupId, personId)
}
// 获取级别
const getLevels = (groupId, personId) => {
  signLevelList.value = []
  signlevelListBoy.value = []
  signlevelListGirl.value = []
  match.getCanSignlevelListFromSelectPerson(groupId, personId).then(res => {
    for (const l of res.data) {
      l.text = l.name
      l.value = l.id
      if (l.levelType == '1') {
        signlevelListBoy.value.push(l)
      } else if (l.levelType == '2') {
        signlevelListGirl.value.push(l)
      } else {
        signLevelList.value.push(l)
      }
    }
  })
}
const levelDone = () => {
  if (!form.value.levelId) {
    ElMessage.error('请选择级别')
    return
  }
  const obj = {
    levelId: form.value.levelId,
    athleteIds: personId,
    groupId: '',
    teamId: ''
  }
  saveOne(obj)
}
const saveOne = (obj) => {
  match.sportsmanDone(obj).then(res => {
    if (res.msg.indexOf('Exception:') > -1) {
      const msg = res.msg.slice(10)
      ElMessageBox.confirm(msg).then(() => {

      })
      return
    }
    show.value = false
    emit('submitForm')
  })
}
watch(show, (val) => {
  if (!val) {
    form.value = {}
  }
})

function cancel() {
  show.value = false
}
const open = (params) => {
  show.value = true
  title.value = params.title || '项目列表'
  matchId.value = params.matchId
  getProjectList(matchId.value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.el-radio-group{    width: 100%;display: block;}
.athleteBox{height: 40px;    display: flex;align-items: center;
  .el-radio__label{display: flex;align-items: center;margin: 0 20px;}
  .el-radio__inner{ scale: 1.5;}
  .name{margin: 0 20px;font-size: 16px;}
}
.athleteBox:hover{background: #efefef;}
p.title{font-size: 16px;margin: 0 0 15px;}
.el-form-item{min-height: 400px;border: 1px solid #eee;padding:10px 20px}
</style>