<template>
  <el-dialog
    v-model="show" :close-on-click-modal="false" :title="language==0?'背号查询':'Competition Number'" append-to-body
    center class="pcloginpop"
    close-icon="CircleClose" destroy-on-close
    style="min-width: 350px;max-width: 500px"
  >
    <div v-loading="loading" style="min-height: 500px;height: 50vh;">
      
      <div v-if="!type||type==''">
        <div class="rItem" @click="type='0'">{{ language == 0 ? '个人查询' : 'Personal Query' }}</div>
        <div class="rItem" @click="type='1'">{{ language == 0 ? '团队查询' : 'Team Query' }}</div>
      </div>
      <div class="searchBox">
        <div v-if="type=='0'">
          <div class="flex mt30">
            <el-input
              v-model="query" :placeholder="language==0?'输入会员号 / 姓名查询':'Enter WDSF MIN / Name to Query'"
              clearable
              @blur="search" @empty="search" @enter="search"
            />
            <el-button class="btn-lineG" style="color: #fff" @click="search">{{
              language == 0 ? '查询' : 'Search'
            }}
            </el-button>
          </div>
          
          <div v-if="list.length>0">
            <div v-for="(form, index) in list" :key="index" class="nowteamItem">
              <div class="info">
                <div class="nowName text-center">
                  <span class="text-primary">{{ form.number }}</span>
                </div>
                <div>
                  <label>{{ language == 0 ? '选手1' : 'Name1' }}：</label>{{ form.maleName }}
                  <span v-if="form.maleWdsf"> - {{ form.maleWdsf }}</span>
                </div>
                <div>
                  <label>{{ language == 0 ? '选手2' : 'Name2' }}：</label>{{ form.femaleName }}
                  <span v-if="form.femaleWdsf"> - {{ form.femaleWdsf }}</span>
                </div>
                <div>
                  <label>{{ language == 0 ? '代表队' : 'Represent' }}：</label>
                  {{ form.groupName }}
                </div>
                <div v-if="form.zuInfo">
                  <label> {{ language == 0 ? '组别' : 'Event' }}：</label>{{ form.zuInfo }}
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <el-empty />
          </div>
        </div>
        <div v-if="type=='1'">
          <div class="flex mt20">
            <el-input
              v-model="query2"
              :placeholder="language==0?'请输入代表队名称至少两字符':'Enter the representing team name,At least two characters'"
              clearable
              @blur="searchTeam" @empty="searchTeam" @enter="searchTeam"
            />
            <el-button class="btn-lineG" style="color: #fff" @click="searchTeam">
              {{ language == 0 ? '查询' : 'Search' }}
            </el-button>
          </div>
          <span class="tip">*{{ language == 0 ? '模糊查询' : 'Fuzzy query' }}</span>
          <div v-if="showGroupList" class="text-danger text-center">
            {{ language == 0 ? '找到多个团体' : 'Found multiple teams' }}
          </div>
          <div v-if="showGroupList" class="groupList">
            <ul>
              <li v-for="(item, index) in groupList" :key="index" @click="showDetail(item)">{{ item }}
                <el-icon class="fr">
                  <ArrowRight />
                </el-icon>
              </li>
            </ul>
          </div>
          <div v-if="teamlist.length>0" class="temell mt20">
            <el-collapse v-model="activeNames" accordion>
              <el-collapse-item
                v-for="(team,index) in teamlist" :key="index" :name="index"
                :title="team[0][0].groupName"
              >
                <div v-for="(p,jndex) in team" :key="jndex" class="nowteamItem">
                  <div class="fontSize14 text-bold">{{ p[0].zuInfo }}</div>
                  <div v-for="f in p" :key="f.id">
                    <span class="nowName text-primary">{{ f.number }}</span>
                    <span class="mr10">{{ language == 0 ? '选手1' : 'Name1' }}：{{ f.maleName }} </span>
                    <span>{{ language == 0 ? '选手2' : 'Name2' }}：{{ f.femaleName }} </span>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    
    </div>
    <div v-if="list.length>0||groupList.length>0" class="text-center">
      下滑查看更多
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getBackNumber, getTeamBackNumber, getTeamBackNumberPre } from '@/apiPc/common'
import { useStorage } from '@vueuse/core/index'

const language = useStorage('language', 0)
const show = ref(false)
// const form = ref({})
const list = ref([])
const loading = ref(false)
const groupList = ref([])
const teamlist = ref([])
const query = ref('')
const query2 = ref('')
const type = ref('')
const cptId = ref('')
const activeNames = ref(0)
const showGroupList = ref(false)

const search = () => {
  if (!query.value) {
    ElMessage.warning(language.value == 0 ? '请输入会员号/姓名' : 'Please enter WDSF MIN / Name')
    return
  }
  getBackNumber({ query: query.value, cptId: cptId.value }).then(res => {
    if (!res.data || res.data.length == 0) {
      list.value = []
      // 提示 '未找到结果，请重新查询'
      ElMessage.warning(language.value == 0 ? '未找到结果，请重新查询' : 'No result')
      return
    }
    list.value = res.data
  })
}
const searchTeam = () => {
  teamlist.value = []
  if (!query2.value || query2.value.length < 2) {
    ElMessage.warning(language.value == 0 ? '请输入代表队名称至少两字符' : 'Enter the representing team name,At least two characters')
    return
  }
  loading.value = true
  getTeamBackNumberPre({ query: query2.value, cptId: cptId.value }).then(res => {
    loading.value = false
    if (!res.data || res.data.length == 0) {
      groupList.value = []
      // 提示 '未找到结果，请重新查询'
      ElMessage.warning(language.value == 0 ? '未找到结果，请重新查询' : 'No result')
      return
    }
    groupList.value = res.data
    if (groupList.value.length == 1) {
      showDetail(groupList.value[0])
    }
    if (groupList.value.length > 1) {
      showGroupList.value = true
    }
  })
}

const open = (param) => {
  console.log(param)
  cptId.value = param.cptId
  show.value = true
  list.value = []
  teamlist.value = []
  groupList.value = []
  query.value = ''
  type.value = ''
}
defineExpose({
  open
})

function showDetail(name) {
  query2.value = name
  showGroupList.value = false
  loading.value = true
  getTeamBackNumber({ query: name, cptId: cptId.value }).then(res => {
    loading.value = false
    teamlist.value = res.data
  })
}
</script>

<style lang="scss" scoped>
.tip {
  font-size: 12px;
  margin: 4px 0 0;
  display: inline-block;
}

.rItem {
  max-height: 130px;
  cursor: pointer;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  max-width: 350px;
  text-align: center;
  line-height: 130px;
  padding: 1px;
  font-size: 30px;
  color: #fff;
  margin: 20px auto;
  background: linear-gradient(90deg, #8623FC, #453DEA);
  
  &:hover {
    background: linear-gradient(90deg, #453DEA, #8623FC);
    box-shadow: 0 4px 10px #453DEA;
    border: none;
  }
}

.nowteamItem {
  width: 100%;
  border: 1px solid #c8c5ff;
  margin-top: 20px;
  position: relative;
  border-radius: 4px;
  padding: 0 0 20px;
  background: #FFFFFF;
  box-sizing: border-box;
  
  .info {
    .nowName {
      font-family: "DIN Alternate";
      font-size: 60px;
      font-weight: bold;
      overflow: hidden;
      display: block;
      margin: 10px;
    }
    
    label {
      text-align: right;
      font-size: 14px;
      padding-left: 7%
    }
    
    div {
      font-size: 14px;
      color: #333;
      margin: 6px 0 0;
    }
  }
}

.temell {
  .nowteamItem {
    padding: 10px;
    margin: 0 0 10px;
    
    .nowName {
      font-size: 15px;
      font-weight: bold;
      margin-right: 10px
    }
    
    .text-bold {
      font-weight: bold;
    }
    
    .fontsize14 {
      font-size: 14px;
    }
  }
}

.groupList {
  max-height: 70vh;
  overflow: auto;
  border: 1px solid #e1e1e1;
  margin-top: 10px;
  
  li {
    padding: 10px;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
  }
}

.searchBox {
  height: 50vh;
  //overflow: hidden;
  overflow-y: hidden;
}
</style>