<template>
  <el-dialog
    v-model="show" :close-on-click-modal="false" :title="language==0?'日程查询':'Schedule inquiry'" append-to-body
    center class="pcloginpop"
    close-icon="CircleClose" destroy-on-close
    width="460px"
  >
    <div v-loading="loading" style="min-height: 500px;height: 50vh;">
      
      <div v-if="!type||type==''">
        <div class="rItem" @click="type='0'">{{ language == 0 ? '按项目查询' : 'Query by project' }}</div>
        <div class="rItem" @click="type='1'">{{ language == 0 ? '按团队查询' : 'Query by team' }}</div>
        <div class="rItem" @click="type='2'">{{ language == 0 ? '按姓名查询' : 'Query by name' }}</div>
      </div>
      
      <div v-if="type=='0'">
        <div class="flex mt30">
          <el-input
            v-model="query"
            :placeholder="language==0?'输入项目/ 项目编号查询':'Enter project name or code 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" class="mt30">
          <el-timeline>
            <el-timeline-item
              v-for="(form, index) in list"
              :key="index" :timestamp="form.date + '  ' + form.timeStr"
              placement="top"
            >
              <div class="text-primary">
                <span v-if="language==1&&form.projectNameEn">{{ form.projectNameEn }}</span>
                <span v-else-if="form.projectName">{{ form.projectName }}</span>
                <span class="fr">{{ form.changCi }} <i
                  v-if="form.changCi"
                >/ </i> {{ language == 0 ? form.lun : form.lunEn }} </span>
              </div>
              <div>{{ form.danceType }}</div>
              <div>{{ form.address }}</div>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div v-else>
          <el-empty />
        </div>
      </div>
      <div class="searchBox">
        <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 accordion>
              <el-collapse-item v-for="(team,index) in teamlist" :key="index" :name="index" :title="team[0].title">
                <el-timeline>
                  <el-timeline-item v-for="(form, index) in team" :key="index" placement="top">
                    
                    <div class="text-primary" style="position: relative;top:-15px">
                      {{ form.date + '  ' + form.timeStr + ' / ' + form.address }}
                      <span v-if="form.lunEn"> / {{ form.lunEn }}</span>
                      <span v-else-if="form.lun"> / {{ form.lun }}</span>
                      <span v-if="form.changCi "> / {{ language == 0 ? '场次' : 'Session' }}：{{ form.changCi }}</span>
                    </div>
                    <div v-if="form.projectNameEn" class="tname">{{ form.projectNameEn }}</div>
                    <div v-if="form.projectName" class="tname">{{ form.projectName }}</div>
                    <div>{{ form.danceType }}</div>
                  </el-timeline-item>
                </el-timeline>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        
        <div v-if="type=='2'">
          <div class="flex mt30">
            <el-input
              v-model="query3"
              :placeholder="language==0?'输入选手姓名查询':'Enter the name of the player to Query'" clearable
              @blur="personalSearch" @empty="personalSearch" @enter="personalSearch"
            />
            <el-button class="btn-lineG" style="color: #fff" @click="personalSearch">{{
              language == 0 ? '查询' : 'Search'
            }}
            </el-button>
          </div>
          <div v-if="list.length>0" class="temell mt20">
            <el-timeline>
              <el-timeline-item v-for="(team,j) in list" :key="j" placement="top">
                <div v-for="(form, index) in team" v-show="index==0" :key="index">
                  <div class="text-primary" style="position: relative;top:-15px">
                    {{ form.date + '  ' + form.timeStr + ' / ' + form.address }}
                    <span v-if="form.lunEn"> / {{ form.lunEn }}</span>
                    <span v-else-if="form.lun"> / {{ form.lun }}</span>
                    <span v-if="form.changCi "> / {{ language == 0 ? '场次' : 'Session' }}：{{ form.changCi }}</span>
                  </div>
                  <div v-if="form.projectNameEn" class="tname">{{ form.projectNameEn }}</div>
                  <div v-if="form.projectName" class="tname">{{ form.projectName }}</div>
                  <div>{{ form.danceType }}</div>
                </div>
                <div v-for="(form, index) in team" v-show="index>0" :key="index" style="margin: 8px 0 0">
                  {{ form.date + '  ' + form.timeStr + ' / ' + form.address }}
                  <span v-if="form.lunEn"> / {{ form.lunEn }}</span>
                  <span v-else-if="form.lun"> / {{ form.lun }}</span>
                  <span v-if="form.changCi "> / {{ language == 0 ? '场次' : 'Session' }}：{{ form.changCi }}</span>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    
    
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getquerySchedule2Pre,
  getqySchedule,
  getqySchedule2,
  getTeamBackNumber,
  getTeamBackNumberPre, queryScheduleSingle
} 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 query3 = ref('')
const type = ref('')
const showGroupList = ref(false)
const cptId = ref()

const search = () => {
  if (!query.value) {
    ElMessage.warning(language.value == 0 ? '请输入搜索关键词' : 'Enter project name or code to Query')
    return
  }
  getqySchedule({ projectName: 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
  }).catch(e => {
    loading.value = false
  })
}
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
  getquerySchedule2Pre({ groupName: 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
    }
  }).catch(e => {
    loading.value = false
  })
}
const personalSearch = () => {
  if (!query3.value) {
    ElMessage.warning(language.value == 0 ? '请输入搜索关键词' : 'Enter project name or code to Query')
    return
  }
  loading.value = true
  queryScheduleSingle({ query: query3.value, cptId: cptId.value }).then(res => {
    loading.value = false
    if (!res.data || res.data.length == 0) {
      list.value = []
      // 提示 '未找到结果，请重新查询'
      ElMessage.warning(language.value == 0 ? '未找到结果，请重新查询' : 'No result')
      return
    }
    list.value = res.data
  })
}
const open = (param) => {
  console.log(param)
  cptId.value = param.cptId
  show.value = true
  list.value = []
  teamlist.value = []
  groupList.value = []
  query.value = ''
  type.value = ''
  loading.value = false
}
defineExpose({
  open
})

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

<style lang="scss" scoped>
.tname {
  font-size: 14px;
  font-weight: bold;
  position: relative;
  top: -8px
}

.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;
  }
}

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