<template>
  <el-row>
    <el-col :span="20" :offset="2"><h3>队伍信息</h3></el-col>
    <el-col :span="20" :offset="2" class="rankArea">
      <el-form :inline="true" label-width="120px">
        <!--        已有队伍-->
        <div v-for="(r,index) in rankList" class="rankBox">
          <el-icon class="del" @click="delRank(r)">
            <Close />
          </el-icon>
          <el-row>
            <el-col :span="6">
              <el-form-item label="队伍logo：">
                <el-avatar :size="120" :src="r.imgUrl" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="队伍名称：">
                <span>{{ r.name }}</span>
              </el-form-item>
              <el-form-item v-if="props.coachOrLeaderFlag=='1'" label="领队：">
                <div v-if="r.leaderNames" class="goChooseBox">
                  <el-tag v-for="(tag,index) in r.leaderNames.split(',')" :key="index" class="mx-1" :disable-transitions="false">
                    {{ tag }}
                  </el-tag>
                </div>
              </el-form-item>
              <el-form-item v-if="props.coachOrLeaderFlag=='1'" label="翻译：">
                <div v-if="r.translatorNames" class="goChooseBox">
                  <el-tag v-for="(tag,index) in r.translatorNames.split(',')" :key="index" class="mx-1" :disable-transitions="false">
                    {{ tag }}
                  </el-tag>
                </div>
                <span v-else>暂无</span>
              </el-form-item>
              <el-form-item v-if="props.coachOrLeaderFlag=='1'" label="其他：">
                <div v-if="r.otherNames" class="goChooseBox">
                  <el-tag v-for="(tag,index) in r.otherNames.split(',')" :key="index" class="mx-1" :disable-transitions="false">
                    {{ tag }}
                  </el-tag>
                </div>
                <span v-else>暂无</span>
              </el-form-item>
            </el-col>
            <el-col v-if="props.coachOrLeaderFlag=='1'" :span="8">
              <el-form-item label="教练：">
                <div v-if="r.coachNames" class="goChooseBox">
                  <el-tag
                    v-for="(tag,index) in r.coachNames.split(',')"
                    :key="index" class="mx-1"
                    :disable-transitions="false"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </el-form-item>
              <el-form-item label="队医：">
                <div v-if="r.teamDoctorNames" class="goChooseBox">
                  <el-tag v-for="(tag,index) in r.teamDoctorNames.split(',')" :key="index" class="mx-1" :disable-transitions="false">
                    {{ tag }}
                  </el-tag>
                </div>
                <span v-else>暂无</span>
              </el-form-item>
              <el-form-item label="官员：">
                <div v-if="r.officialNames" class="goChooseBox">
                  <el-tag
                    v-for="(tag,index) in r.officialNames.split(',')"
                    :key="index" class="mx-1"
                    :disable-transitions="false"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
                <span v-else>暂无</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" :offset="22">
              <el-button  type="primary" link class="fr" @click="editRank(r)">编辑</el-button>
            </el-col>
          </el-row>
        </div>
        <el-button type="success" plain @click="addRank">+添加队伍</el-button>
        <el-button v-if="rankList.length>0||showAdd" type="success" plain @click="addCoach">+添加教练/领队</el-button>
      </el-form>
    </el-col>
  </el-row>

  <!--  添加人员-->
  <addCoachdialog ref="dialogAddCoach" @submitForm="getGroupInfo" />
  <!--  队伍信息-->
  <editRankdialog ref="dialogEditRank" @submitForm="getList" />
</template>

<script setup>
import { computed, reactive } from 'vue'
import * as match from '@/apiPc/match'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import { ElMessage, ElMessageBox } from 'element-plus'
import addCoachdialog from './addCoach'
import editRankdialog from './editRank'

const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const data = reactive({
  form: {},
  rankList: [],
  group: {},
  groupId: '',
  teamType: [{ label: '学校', value: '0' }, { label: '俱乐部', value: '1' }],
  rules: {
    imgUrl: { required: true, message: '请上传图标', trigger: 'blur' },
    name: { required: true, message: '请填写名称', trigger: 'blur' }
  }
})
const { teamType, rules, rankList, form, group, groupId } = toRefs(data)
const backRankId = ''
let cptId = ''
const props = defineProps({
  coachOrLeaderFlag: {
    type: String
  }
})
onMounted(() => {
  cptId = route.query.matchId
  groupId.value = route.query.groupId
  getList()
  getGroupInfo()
})
// 弹窗加人
const addCoach = () => {
  const params = {
    id: 0,
    groupId: groupId.value
  }
  proxy.$refs['dialogAddCoach'].open(params)
}

function getGroupInfo() {
  match.getGroupById(groupId.value).then(res => {
    group.value = res.data
  })
}

function getList() {
  // 获取队伍列表
  match.getMyTeamList(cptId, groupId.value).then(response => {
    rankList.value = response.data
  })
}

function delRank(r) {
  ElMessageBox.confirm(
    '确定删除该队伍吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      match.delRank(r.id).then(response => {
        getList()
        ElMessage({
          type: 'success',
          message: '已删除'
        })
      })
    })
}
function addRank() {
  const params = {
    form: {},
    cptId: cptId,
    title: '新建队伍',
    coachOrLeaderFlag: props.coachOrLeaderFlag,
    group: group.value
  }
  proxy.$refs['dialogEditRank'].open(params)
}
function editRank(rank) {
  const params = {
    form: rank,
    cptId: cptId,
    title: '编辑队伍',
    coachOrLeaderFlag: props.coachOrLeaderFlag,
    group: group.value
  }
  proxy.$refs['dialogEditRank'].open(params)
}
</script>

<style lang="scss" scoped>
.rankArea {
  background: #FBFCFD;
  border-radius: 10px;
  padding: 25px 30px;
}

.rankBox {
  background: #FFFFFF;
  padding: 20px;
  position: relative;
  border-radius: 10px;
  margin: 0 0 20px;
}

:deep(.el-upload--picture-card) {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

:deep(.el-upload-list__item.is-success .el-upload-list__item-status-label) {
  display: none;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.del {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 20px;
  z-index: 1;
}

.mx-1 {
  margin: 5px
}
</style>