<template>
  <el-card class="mb20">
    <div class="funcBtns">
      <el-button type="primary" @click="addMember">{{ language==0?'添加选手':'Add Player'}}</el-button>
      <el-button type="primary" plain @click="importSportman">{{  language==0?'导入选手':'Import Player' }}</el-button>
    </div>
    <div class="from-Card">
      <el-form :inline="true" :model="query" class="mt20" :label-width="language==0?60:80" size="small">
        <el-form-item :label="language==0?'姓名':'Name'">
          <el-input v-model="query.realName" style="width: 120px;" clearable/>
        </el-form-item>
        <el-form-item :label="language==0?'证件类型':'ID Type'" >
          <el-select v-model="query.idcType" style="width: 100px;" clearable>
            <el-option
                v-for="item in certificates"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'证件号码':'ID NO.'">
          <el-input v-model="query.idcode" style="width: 120px;" clearable/>
        </el-form-item>
        <el-form-item :label="language==0?'会员角色':'Role'">
          <el-select v-model="labelArr" multiple style="width: 100px;">
            <el-option v-for="l in labels" :key="l.value" :value="l.value" :label="language==0?(l.label):(l.enlabel)"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'WDSF':'WDSF'">
          <el-input v-model="query.wdsfMin" style="width: 120px;" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">{{ language==0?'查询':'Search' }}</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--            人员表格-->
    <person-table :table-data="tableData"  @edit="editCoach" @delete="delperson"/>
    <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" @submitForm="getList"/>
</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, getPerPersonList} from "@/apiPc/match";
import PersonTable from "@/viewsPc/match/components/personTable";
import useUserStore from "@/store/modules/user";
import {useStorage} from "@vueuse/core/index";
const language= useStorage('language',0)
const tableData = ref([])
const labelArr = ref([])
const labels = ref([
  {value: '0', label: '运动员', enlabel: 'Sportsman'},
  {value: '1', label: '教练', enlabel: 'Coach'},
  {value: '2', label: '领队', enlabel: 'Leader'},
  {value: '4', label: '队医', enlabel: 'Nurse'},
  {value: '5', label: '翻译', enlabel: 'Translator'},
  {value: '6', label: '官员', enlabel: 'Official'},
  {value: '3', label: '其他', enlabel: 'Other'}
])
const certificates = ref([
  {
    value: '0',
    label: language.value == 0 ? '居民身份证' : 'Resident ID card'
  },
  {
    value: '1',
    label: language.value == 0 ? '护照' : 'Passport'
  },
  {
    value: '2',
    label: language.value == 0 ? '其他' : 'Other'
  }
])
const query = ref({
  pageNum: 1, pageSize: 10
})
const total = ref(0)
const group = useUserStore().group || {}
const props = defineProps({
  user: {
    type: Object,
    required: true
  }
})
const groupId = ref(group.id|| 0)
onMounted(() => {
  getList(groupId.value)
})

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

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

function getList() {
  query.value.label =labelArr.value.toString()
  if(props.user.utype=='2'){
    getGroupPersonList(query.value, groupId.value).then(res => {
      tableData.value = res.rows
      total.value = res.total
    })
  }
  if(props.user.utype=='1'){
    getPerPersonList(query.value,props.user.userId).then(res => {
      tableData.value = res.rows
      total.value = res.total
    })
  }

}

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

function delperson(p) {
  //删除团队下的人
  let text = ''
  let t = '提示'
  let s = '确定'
  let c = '取消'
  let msg = '操作成功'
  if (language.value==0){
    text = `确定删除${p.realName}吗？`
  } else {
    text = `Delete ${p.realName}?`
    t = 'Tips'
    s = 'Confirm'
    c = 'Cancel'
    msg = ' Successful！'
  }
  ElMessageBox.confirm(text, t, {
    confirmButtonText: s,
    cancelButtonText: c,
    type: 'warning'
  }).then(() => {
    match.delPerson(p.id).then(res => {
      ElMessage.success(msg)
      getList(groupId.value)
    })
  })
}
</script>

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