<template>
  <el-dialog
    v-model="show"
    :close-on-click-modal="false"
    :title="language==0?'成绩查询':'RESULT QUERY'"
    align-center
    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>
        <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 rollY">
          <div v-for="val in list" :key="val.id">
            <el-image
              v-for="obj in val.resultUrl"
              :key="obj"
              :src="fillImgUrl(obj)"
              :preview-teleported="true"
              :preview-src-list="[fillImgUrl(obj)]"
              class="resultUrlImag"
            />
          </div>
        </div>
        <div v-else>
          <el-empty />
        </div>
      </div>
    </div>
    <div v-if="list.length>0" class="text-center">
      {{ language == 0 ? '下滑查看更多' : 'Scroll down to view more' }}
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getqySchedule
} from '@/apiPc/common'
import { useStorage } from '@vueuse/core/index'
import { fillImgUrl } from '/@/utils/ruoyi'

const language = useStorage('language', 0)
const show = ref(false)
const list = ref([])
const loading = ref(false)
const groupList = ref([])
const teamlist = ref([])
const query = ref('')
const type = ref('')
const cptId = ref()

const search = () => {
  if (!query.value) {
    ElMessage.warning(language.value == 0 ? '请输入项目编号' : 'Please enter the project number')
    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
    for (const val of list.value) {
      if (val.resultUrl) val.resultUrl = val.resultUrl.split(',')
    }
  }).catch(e => {
    loading.value = false
  })
}

const open = (param) => {
  cptId.value = param.cptId
  show.value = true
  list.value = []
  teamlist.value = []
  groupList.value = []
  query.value = ''
  type.value = ''
  loading.value = false
  // search()
}


defineExpose({
  open
})

</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 {
  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-y: auto;
}

.rollY {
  height: 45vh;
  overflow-y: auto;
}

.resultUrlImag {
  width: 100%;
  margin-bottom: 10px;
}
</style>