<template>
  <el-card>
    <div class="funcBtns">
      <el-button type="primary" @click="addMember">添加选手</el-button>
      <el-button type="primary" plain @click="importSportman">导入选手</el-button>
      <el-button type="primary" plain>
        <a href="/file/sportsmanTemplate.xlsx" target="_blank">下载模板</a>
      </el-button>
    </div>
    <div class="from-Card">
      <el-form :inline="true" :model="query" class="mt20" label-width="60" size="small">
        <el-form-item label="姓名">
          <el-input v-model="query.realName" style="width: 120px;" clearable/>
        </el-form-item>
        <el-form-item label="短名">
          <el-input v-model="query.shortName" style="width: 120px;" clearable/>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="query.phone" style="width: 120px;" clearable/>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="query.email" style="width: 120px;" clearable/>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-input v-model="query.idcType" style="width: 120px;" clearable/>
        </el-form-item>
        <el-form-item label="证件号">
          <el-input v-model="query.idcode" style="width: 120px;" clearable/>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="query.label" style="width: 120px;" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--            人员表格-->
    <person-table :table-data="tableData" @edit="editCoach" @delete="delperson"/>
    <el-table :data="tableData" class="mt20">
      <el-table-column type="index" label="序号" width="80" align="center"/>
      <el-table-column label="所属国家" prop="countryName"/>
      <el-table-column label="姓氏" prop="xing"/>
      <el-table-column label="名" prop="ming"/>
      <el-table-column label="短名" prop="shortName"/>
      <el-table-column label="性别" prop="sexStr"/>
      <el-table-column label="年龄" prop="age"/>
      <el-table-column label="出生日期" prop="birth" width="100"/>
      <el-table-column label="手机号码" prop="phone" width="120"/>
      <el-table-column label="邮箱" prop="email" width="150"/>
      <el-table-column label="证件类型" prop="idcTypeStr"/>
      <el-table-column label="证件号码" prop="idcCode" width="200"/>
      <el-table-column label="会员角色">
        <template #default="scope">
          <span v-for="item in scope.row.label?.split(',')" :key="item.id">
            <el-tag type="primary" size="mini" v-if="item==='0'" effect="dark" class="ml10">运动员</el-tag>
            <el-tag type="info" size="mini" v-if="item==='1'" effect="dark" class="ml10">教练</el-tag>
            <el-tag type="info" size="mini" v-if="item==='2'" effect="dark" class="ml10">领队</el-tag>
            <el-tag type="info" size="mini" v-if="item==='3'" effect="dark" class="ml10">队医</el-tag>
            <el-tag type="info" size="mini" v-if="item==='4'" effect="dark" class="ml10">翻译</el-tag>
            <el-tag type="info" size="mini" v-if="item==='5'" effect="dark" class="ml10">官员</el-tag>
            <el-tag type="info" size="mini" v-if="item==='6'" effect="dark" class="ml10">其他</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="详细地址" prop="address"/>
      <el-table-column label="操作" fixed="right" width="160" header-align="center" align="center">
        <template #default="scope">
          <a class="text-primary pd10" @click="editCoach(scope.row)">编辑</a>
          <a class="text-primary pd10" @click="delperson(scope.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <paginationPc
        v-show="total>0"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="total"
        @pagination="getList"
    />
  </el-card>

  <!--    添加人员-->
  <addCoach ref="dialogAddCoach" @submitForm="getList"/>
  <Import ref="dialogImportProps"/>
</template>

<script setup>
import addCoach from '../match/components/addCoach'
import personTable from '../match/components/personTable'
import Import from '../match/components/import'
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 {getGroupPersonList} from "@/apiPc/match";
import PersonTable from "@/viewsPc/match/components/personTable";

const tableData = ref([])
const query = ref({
  pageNum: 1, pageSize: 10
})
const total = ref(0)
const groupId = ref('1759813142128967681')
onMounted(() => {
  getList(groupId.value)
})

function addMember() {
  const params = {
    title: '添加人员',
    id: 0,
    groupId: groupId.value
  }
  proxy.$refs['dialogAddCoach'].open(params)
}

function importSportman() {
  const params = {
    title: '批量导入选手',
    groupId: groupId.value
  }
  proxy.$refs['dialogImportProps'].open(params)
}

function getList() {
  getGroupPersonList(query.value, groupId.value).then(res => {
    tableData.value = res.rows
    total.value = res.total
  })
}

function editCoach(row) {
  const params = {
    id: row.id,
    groupId: row.groupId
  }
  proxy.$refs['dialogAddCoach'].open(params)
}

function delperson(p) {
  //删除团队下的人
  ElMessageBox.confirm(`确定删除${p.realName}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    match.delPerson(p.id).then(res => {
      ElMessage.success('操作成功')
      getList(groupId.value)
    })
  })
}
</script>

<style scoped lang="scss">
.el-form--inline .el-form-item {
  width: auto;
}
</style>