<template>
  <el-dialog
      v-model="show" :close-on-click-modal="false" :title="language==0?'背号查询':'Back Number'" append-to-body
      center class="pcloginpop"
      close-icon="CircleClose" destroy-on-close
      width="460px"
  >
    <div style="min-height: 300px" v-loading="loading">

      <div v-if="!type||type==''">
        <div @click="type='0'" class="rItem">{{ language==0?'个人查询':'Personal Query' }}</div>
        <div @click="type='1'" class="rItem">{{ language==0?'团队查询':'Team Query' }}</div>
      </div>

      <div v-if="type=='0'">
        <div class="flex mt30">
          <el-input :placeholder="language==0?'输入会员号 / 姓名查询':'Enter WDSF MIN / Name to Query'" v-model="query" clearable
                    @enter="search" @blur="search" @empty="search"/>
          <el-button @click="search" class="btn-lineG" style="color: #fff">{{
              language == 0 ? '查询' : 'Search'
            }}
          </el-button>
        </div>

        <div v-if="list.length>0">
          <div class="nowteamItem" v-for="(form, index) in list" :key="index">
            <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 :placeholder="language==0?'请输入代表队名称至少两字符':'Enter the representing team name,At least two characters'"
                    v-model="query2" clearable
                    @enter="searchTeam" @blur="searchTeam" @empty="searchTeam"/>
          <el-button @click="searchTeam" class="btn-lineG" style="color: #fff">
            {{language == 0 ? '查询' : 'Search' }}
          </el-button>
        </div>
        <span class="tip">*{{ language == 0 ?'模糊查询':'Fuzzy query' }}</span>
        <div class="text-danger text-center" v-if="showGroupList">{{ language == 0 ?'找到多个团体':'Found multiple teams' }}</div>
        <div class="groupList" v-if="showGroupList">
          <ul>
            <li v-for="(item, index) in groupList" @click="showDetail(item)" :key="index">{{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 :name="index" :title="team[0][0].groupName" v-for="(team,index) in teamlist" :key="index">
              <div class="nowteamItem" v-for="(p,jndex) in team" :key="jndex">
                <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>
  </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 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}).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}).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) => {
  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}).then(res => {
    loading.value = false
    teamlist.value = res.data
  })
}
</script>

<style scoped lang="scss">
.tip{font-size: 12px;margin: 4px 0 0;display: inline-block;}
.rItem{
  height: 130px;
  cursor: pointer;border: 1px solid #e1e1e1;border-radius: 4px;
  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;}
}
</style>