<template>
  <div class="border-info" style="margin: 20px" v-loading="loading">
    <el-row>
      <el-col :lg="8">
        <div class="item"><label>{{ language == 0 ? '教练' : 'Coach' }}</label>
          <span v-for="c in names.coachList">{{ c.realName}}, </span>
          <span v-if="!names.coachList">--</span>
        </div>
        <div class="item"><label>{{ language == 0 ? '翻译' : 'Translator' }}</label>
          <span v-for="c in names.translatorList">{{ c.realName }},</span>
          <span v-if="!names.translatorList">--</span>
        </div>
      </el-col>
      <el-col :lg="8">
        <div class="item">
          <label>{{ language == 0 ? '领队' : 'Team leader' }}</label>
          <span v-for="c in names.leaderList">{{ c.realName }},</span>
          <span v-if="!names.leaderList">--</span>
        </div>
        <div class="item">
          <label>{{ language == 0 ? '官员' : 'Official' }}</label>
          <span class="mr5" v-for="c in names.officialList">{{ c.realName }},</span>
          <span v-if="!names.officialList">--</span>
        </div>
      </el-col>
      <el-col :lg="8">
        <div class="item">
          <label>{{ language == 0 ? '队医' : 'Team doctor' }}</label>
          <span class="mr5" v-for="c in names.teamDoctorList">
            {{ c.realName }},
          </span>
          <span v-if="!names.teamDoctorList">--</span>
        </div>
        <div class="item">
          <label>{{ language == 0 ? '其他' : 'Other' }}</label>
          <span class="mr5" v-for="c in names.otherList">
            {{ c.realName }},
          </span>
          <span v-if="names.otherList?.length==0">--</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import * as match from "@/apiPc/match";
import {onMounted} from "@vue/runtime-core";
import useUserStore from "@/store/modules/user";

const props = defineProps({
  matchId: {
    type: String,
    required: true
  }
})
const names = ref({})
const loading = ref(true)
import {useStorage} from "@vueuse/core/index";
const user = useUserStore().user
const group = useUserStore().group || {}
const language= useStorage('language',0)
onMounted(() => {
  if (user.utype == '2') {
    tuandui()
  }
  if(user.utype == '1'){
    geren()
  }
})

function geren() {
  match.getChooseDoneSingleCoachs(props.matchId).then(res => {
    names.value = res.data
    loading.value = false
  })
}

function tuandui() {
  match.getChooseDoneGroupCoachs(props.matchId, group.id).then(res => {
    names.value = res.data
    loading.value = false
  })
}
</script>

<style scoped lang="scss">
.border-info {
  .item {
    margin: 5px 0;
    color: #4C5359;
    font-size: 14px;

    label {
      font-size: 14px;
      margin-right: 14px
    }
  }
}
</style>