<template>
  <div>
    <div v-if="!showSingle" class="grid-content">
      <el-tabs v-model="activeName">
        <el-tab-pane label="我的参赛队" name="first">
          <div style="margin: 0 15px;">
            <el-button type="primary" @click="newGroup">+新建参赛队</el-button>
          </div>
          <div style="padding: 20px">
            <el-row :gutter="20">
              <el-col v-for="(g,index) in dataList" :key="index" :span="8" class="mTop"> 
                <div class="matchItem bg">
                  <div class="flex">
                    <div v-if="g.imgUrl" class="leftImg">
                      <img :src="fillImgUrl(g.imgUrl) " mode="aspectFill">
                    </div>
                    <div class="rightWen">
                      <div class="name">{{ g.name }}</div>
                      <div class="pp"> <span class="labe">联系人：</span>
                        {{ g.contactPerson }}
                      </div>
                      <div class="pp"><span class="labe">类型：</span>{{ g.typeStr }}
                      </div>
                    </div>
                  </div>
                  <div class="bottomFunc">
                    <div class="textButtom" @click="viewSingle(g)">查看</div>
                    <span class="greenline">|</span>
                    <div class="textButtom" @click="del(g)">删除</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-empty v-if="dataList.length==0" description="还没有参赛队，点击新建参赛队立即创建吧~" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="showSingle" class="teamSingle">
      <div class="head">
        <span @click="showSingle=false">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          返回列表
        </span>

        <div class="fr">
          <el-button type="text" @click="editThisTeam">修改</el-button>
        </div>
      </div>
      <div class="team-body">
        <div class="flex">
          <div class="leftIMg">
            <img width="100" :src="fillImgUrl(baseFormData.imgUrl) ">
          </div>
          <div class="rightContent">
            <div class="rightTop">
              <div> {{ baseFormData.name }}</div>
            </div>
            <el-row>
              <el-col :span="12">参赛队简称： {{ baseFormData.abreviations }}</el-col>
              <el-col :span="12">参赛队类型：{{ baseFormData.typeStr }}</el-col>
              <el-col :span="12">联系人：{{ baseFormData.contactPerson }}</el-col>
              <el-col :span="12">联系方式： {{ baseFormData.contactTelno }}</el-col>
              <el-col :span="12">所在地区： {{ baseFormData.regionStr }}</el-col>
              <el-col :span="12">详细地址： {{ baseFormData.address }}</el-col>
            </el-row>
          </div>
          <!-- <el-descriptions border>
            <el-descriptions-item label="logo">
              <img width="100" :src="baseFormData.imgUrl">
            </el-descriptions-item>
            <el-descriptions-item label="参赛队名称">
              {{ baseFormData.name }}
            </el-descriptions-item>
            <el-descriptions-item label="参赛队简称">
              {{ baseFormData.abreviations }}
            </el-descriptions-item>
            <el-descriptions-item label="参赛队类型">
              <span>{{ baseFormData.typeStr }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="联系人">
              {{ baseFormData.contactPerson }}
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">
              {{ baseFormData.contactTelno }}
            </el-descriptions-item>
            <el-descriptions-item label="参赛队名称">
              {{ baseFormData.name }}
            </el-descriptions-item>
            <el-descriptions-item label="所在地区">
              {{ baseFormData.regionStr }}
            </el-descriptions-item>
            <el-descriptions-item label="详细地址">
              {{ baseFormData.address }}
            </el-descriptions-item>
          </el-descriptions> -->
        </div>
        <el-divider />

        <h3 style="padding: 0 20px;">人员管理
          <div class="fr">
            <el-button type="primary" @click="addMember">+添加人员</el-button>
          </div>
        </h3>
        <div class="memberList">
          <ul>
            <li
              v-for="(k,index) in kindList" :key="index" :class="current==index?'active':''"
              @click="changeKind(index)"
            >{{ k }}
            </li>
          </ul>


          <el-row :gutter="20" class="paddingRow">
            <el-col v-for="(p, index) in memberList" :key="index" :span="8" class="padding-10">
              <div class="matchItem">
                <div class="flex m-height">
                  <div v-if="p.picUrl" class="leftImg">
                    <img class="roundImg" :src="fillImgUrl(p.picUrl)" mode="aspectFill">
                  </div>
                  <div class="rightWen">
                    <div class="name">
                      <span>
                        {{ p.realName }}
                      </span>
                      <span v-for="l in p.labelArr" v-show="l==current" :key="l" class="tag-view">
                        <el-tag v-if="l == 2" type="warning">领队</el-tag>
                        <el-tag v-if="l == 1" type="primary">教练</el-tag>
                        <el-tag v-if="l == 0" type="success">运动员</el-tag>
                        <el-tag v-if="l == 4" type="primary">队医</el-tag>
                        <el-tag v-if="l == 5" type="warning">翻译</el-tag>
                        <el-tag v-if="l == 6" type="error">官员</el-tag>
                        <el-tag v-if="l == 3" type="info">其他</el-tag>
                      </span>
                      <!-- <span v-if="p.sex==0">（女）</span>
                      <span v-if="p.sex==1">（男）</span> -->
                    </div>
                    <div class="pp">
                      <span class="labe">证件类型：</span>
                      <span v-if="p.idcType == 0">居民身份证</span>
                      <span v-else-if="p.idcType == 1">护照</span>
                      <span v-else>其他</span>
                    </div>
                    <div class="pp">
                      <span class="labe">证件号：</span>{{ p.idcCode.replace(/^(\d{6})\d{8}(.{4}$)/g, `$1${Array(9).join('*')}$2`) }}
                    </div>
                    <div class="pp"><span class="labe">联系方式：</span>{{ p.phone }}</div>
                  </div>
                </div>
                <div class="bottomFunc">
                  <div class="textButtom" @click="goEditCoach(p.id, groupId)">编辑</div>
                  <span class="greenline">|</span>
                  <div class="textButtom" @click="delperson(p)">删除</div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-empty v-if="memberList.length==0" description="还没有成员" />
        </div>
      </div>
    </div>
    <!--    新建团队-->
    <dialogEditTeam ref="diaEditTeamRef" @submitForm="saveTeam" />

    <!--    添加人员-->
    <addCoach ref="dialogAddCoach" @submitForm="addCoachDone" />

  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'

const router = useRouter()
const { proxy } = getCurrentInstance()
import * as match from '@/apiPc/match'
import { ElMessage, ElMessageBox } from 'element-plus'
import dialogEditTeam from './component/teamInfo_form'
import addCoach from '../match/components/addCoach'

const kindList = ref(['运动员', '教练', '领队', '其他', '队医', '翻译', '官员'])
const typeList = ref([{ text: '学校', value: '0' }, { text: '场馆', value: '1' }, {
  text: '俱乐部',
  value: '2'
}, { text: '机构', value: '3' }])
const activeName = ref('first')
const current = ref(0)
const myform = ref({})
const showSingle = ref(false)
const baseFormData = ref({})
const groupId = ref('')

const regionsList = ref([])
const dataList = ref([])
const memberList = ref([])

onMounted(() => {
  getList()
  // getRegionsList()
})
function addMember() {
  const params = {
    title: '添加人员',
    id: 0,
    groupId: groupId.value
  }
  proxy.$refs['dialogAddCoach'].open(params)
}
function goEditCoach(id, groupId) {
  const params = {
    id: id,
    groupId: groupId
  }
  proxy.$refs['dialogAddCoach'].open(params)
}
function addCoachDone() {
  getInfo(groupId.value)
}

function getRegionsList() {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
}

function getList() {
  match.getMyGroupList().then(res => {
    dataList.value = res.data
  })
}

function newGroup() {
  proxy.$refs['diaEditTeamRef'].open({
    title: '新建参赛队'
  })
}

function editThisTeam() {
  proxy.$refs['diaEditTeamRef'].open({
    data: baseFormData.value,
    title: '编辑参赛队'
  })
}


function changeKind(n) {
  // debugger
  current.value = n
  switch (current.value) {
    case 0: {
      memberList.value = baseFormData.value.athletes
      getLabel(memberList.value)
      break
    }
    case 1: {
      memberList.value = baseFormData.value.coaches
      getLabel(memberList.value)
      break
    }
    case 2: {
      memberList.value = baseFormData.value.leaders
      getLabel(memberList.value)
      break
    }
    case 3: {
      memberList.value = baseFormData.value.others
      getLabel(memberList.value)
      break
    }
    case 4: {
      memberList.value = baseFormData.value.teamDoctors
      getLabel(memberList.value)
      break
    }
    case 5: {
      memberList.value = baseFormData.value.translators
      getLabel(memberList.value)
      break
    }
    case 6: {
      memberList.value = baseFormData.value.officials
      getLabel(memberList.value)
      break
    }
  }
}

function getLabel(list) {
  if (list.length > 0) {
    for (const m of list) {
      m.labelArr = m.label.split(',')
    }
  }
}

function viewSingle(n) {
  groupId.value = n.id
  showSingle.value = true
  getInfo(groupId.value)
}
function getInfo(id) {
  match.getGroupById(id).then(res => {
    baseFormData.value = res.data
    memberList.value = baseFormData.value.athletes
    getLabel(memberList.value)
  })
}
function saveTeam() {
  if (showSingle.value) {
    getInfo(groupId.value)
  } else {
    getList()
  }
}
function del(g) {
  // 删除团
  ElMessageBox.confirm('确定删除这个参赛队吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    match.deleteMyGroup(g.id).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  })
}
function delperson(p) {
  // 删除团队下的人
  ElMessageBox.confirm(`确定删除${p.realName}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    match.delPerson(p.id).then(res => {
      ElMessage.success('操作成功')
      getInfo(groupId.value)
    })
  })
}

</script>

<style scoped lang="scss">
.app-container {
  background: #F5F7F9;
}

.grid-content {
  background: #fff;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 15px;
}

.paddingRow{
  padding: 20px;
  .padding-10{
    padding: 10px;
      .matchItem{
      border: 1px solid #eee;
      background-color: #f5f7f9;
      overflow: hidden;
      padding: 10px;
      .leftImg {
        width: 100px;
        height: auto;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        
        img{
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
    }
  }
}


.memberList {
  ul {
    margin: 0 20px;
    display: flex;
    li{
      width: 60px;
      height: 20px;
      border-radius: 10px;
      background-color: #eee;
      text-align: center;
      margin-right: 20px;
      line-height: 20px;
      font-size: 14px;
      color: #000;
      cursor:pointer;
     
    }
     .active{
        color: #fff;
        background-color: #bf3031;
        opacity: 1;
      }
  }
}

.mTop{
  margin-top: 20px;
}
.bg{
  background-color: #FBFCFD ;
  border: 1px solid #eee;
  padding: 10px;
.flex{
  display: flex;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  .leftImg{
    width: 100px;
    display: flex;
    justify-content: center;
    margin-right: 20px;

    img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 0;
      margin: 0;
    }
  }
  .rightWen{
    .pp{
      .labe{
      font-size: 14px;
      color: #7B7F83;
    }
    }
  }
}
}
.bottomFunc{
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  div{
    color:#05539E ;
    font-size: 14px;
    width: 100px;
    text-align: center;
  }
  span{
    color: #eee;
    font-size: 14px;
  }
}

// 人员管理
.teamSingle{
  background-color: #fff;
  padding: 20px;

  .flex{
    display: flex;
    margin-top: 20px;
    .leftIMg{
      width: 100px;
      height: 100px;
      margin-right: 20px;
      img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    }
  .rightContent{
    .rightTop{
      color: #000000;
      font-weight: 500;
      font-size: 18px;
    }
    .el-row{
      .el-col-12{
      font-weight: 400;
      color: #4C5359;
      font-size: 14px;
      padding: 5px 0;
        }
      }
    }
    
  }
 .name{
  height: 25px;
  line-height: 25px;
  display: flex;
  .tag-view{
    margin-left: 10px;
  }
 }
 .pp{
  font-size: 14px;
  font-weight: 400;
  margin: 5px 0;
  .labe{
    font-size: 14px;
    color: #7B7F83;
  }
 }
}

.m-height{
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

</style>