<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 style="min-height: 300px" v-loading="loading">

      <div v-if="!type||type==''">
        <div @click="type='0'" class="rItem">{{ language==0?'按项目查询':'Query by project' }}</div>
        <div @click="type='1'" class="rItem">{{ language==0?'按团队查询':'Query by team' }}</div>
      </div>

      <div v-if="type=='0'">
        <div class="flex mt30">
          <el-input :placeholder="language==0?'输入项目/ 项目编号查询':'Enter project name or code 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" class="mt30">
          <el-timeline>
            <el-timeline-item placement="top"
                v-for="(form, index) in list" :key="index"
                :timestamp="form.date + '  ' + form.timeStr"
            >
              <div class="text-primary">{{ form.projectName }}</div>
              <div>{{form.danceType}}</div>
              <div>{{form.address}}</div>
              <div></div>
            </el-timeline-item>
          </el-timeline>
        </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  accordion>
            <el-collapse-item :name="index" :title="team[0].title" v-for="(team,index) in teamlist" :key="index">
              <el-timeline>
                <el-timeline-item placement="top"
                                  v-for="(form, index) in team" :key="index"
                                  :timestamp="form.date + '  ' + form.timeStr"
                >
                  <div class="text-primary">{{ form.projectName }}</div>
                  <div>{{form.danceType}}</div>
                  <div>{{form.address}}</div>
                  <div></div>
                </el-timeline-item>
              </el-timeline>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {
  getquerySchedule2Pre,
  getqySchedule,
  getqySchedule2,
  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 showGroupList = ref(false)
const search = () => {
  if (!query.value) {
    ElMessage.warning(language.value == 0 ? '请输入搜索关键词' : 'Enter project name or code to Query')
    return
  }
  getqySchedule({projectName: 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
  getquerySchedule2Pre({groupName: 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 = ''
  loading.value = false
}
defineExpose({
  open
})
function showDetail(name) {
  query2.value = name
  showGroupList.value = false
  loading.value = true
  getqySchedule2({groupName: 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>