<template>
  <el-dialog v-model="show" :title="title" append-to-body destroy-on-close width="1000px">
    <div class="from-Card">
      <el-form
        ref="formRef" :inline="true" :model="query" class="mt20" label-width="60"
        size="small"
      >
        <el-form-item :label="language==0?'姓名':'Name'">
          <el-input v-model="query.realName" clearable style="width: 120px;" />
        </el-form-item>
        <el-form-item v-if="!isNational" :label="language==0?'证件类型':'ID Type'">
          <el-select v-model="query.idcType" clearable style="width: 100px;" @change="getList">
            <el-option
              v-for="item in certificates"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="!isNational" :label="language==0?'证件号码':'ID NO.'">
          <el-input v-model="query.idcCode" clearable style="width: 120px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">{{ language == 0 ? '查询' : 'Search' }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <p v-if="noPhotoCanSign == 0" class="text-danger">
      {{
        language == 0 ? '*完善信息才可报名' : '*Please complete the information before signing up'
      }}
    </p>
    
    <el-table
      ref="allSportmenTable" v-loading="loading" :data="tableData" height="60vh"
    >
      <el-table-column
        :label="language==0?'序号':'Index'" align="center" type="index"
        width="70"
      />
      <el-table-column v-if="isNational" :label="language==0?'WDSF 会员号':'WDSF MIN'" prop="wdsfMin" width="100" />
      <el-table-column
        v-if="!isNational" :label="language==0?'姓名':'Real Name'" align="center" min-width="100"
        prop="realName"
      />
      <el-table-column
        v-if="isNational" :label="language==0?'姓氏':'Surname'" align="center" min-width="100"
        prop="xing"
      />
      <el-table-column v-if="isNational" :label="language==0?'名':'Name'" align="center" min-width="100" prop="ming" />
      <el-table-column
        v-if="isNational" :label="language==0?'代表':'Representing'" align="center" min-width="120"
        prop="representing"
      />
      <el-table-column
        v-if="!isNational" :label="language==0?'所属国家/地区':'Nationality'" align="center"
        min-width="110" prop="countryName"
      />
      <el-table-column :label="language==0?'性别':'Gender'" prop="sexStr" />
      <el-table-column
        v-if="isNational" :label="language==0?'年龄组':'Age group'" align="center" min-width="100"
        prop="ageGroup"
      />
      <el-table-column
        v-if="isNational" :label="language==0?'舞种':'Division'" align="center" min-width="100"
        prop="division"
      />
      <el-table-column v-if="!isNational" :label="language==0?'年龄':'Age'" prop="age" />
      <el-table-column v-if="!isNational" :label="language==0?'出生日期':'Date of Birth'" prop="birth" width="130" />
      <el-table-column v-if="!isNational" :label="language==0?'证件类型':'ID Type'" prop="idcTypeStr" width="120" />
      <el-table-column v-if="!isNational" :label="language==0?'证件号码':'ID NO.'" prop="idcCode" width="200" />
      <el-table-column :label="language==0?'操作':'Actions'" align="center" fixed="right" width="100">
        <template #default="scope">
          <el-button v-if="scope.row.ocrFlag=='0'" link type="danger" @click="editPerson(scope.row)">
            {{ language == 0 ? '完善信息' : 'Complete' }}
          </el-button>
          <el-button v-else disabled link type="danger">
            {{ language == 0 ? '完善信息' : 'Complete' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <paginationPc
      v-show="total>0"
      v-model:limit="query.pageSize"
      v-model:page="query.pageNum"
      :total="total"
      @pagination="getList"
    />
  </el-dialog>
  
  <!--  国内赛运动员-->
  <!--  <add-coach ref="dialogAddCoach" @submitForm="getList" />-->
  <!--  国际赛运动员-->
  <checkOcr ref="checkOcrRef" @submitForm="getList" />
  <Import ref="dialogImportProps" @submitForm="getList" />
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue'
import { getCurrentInstance } from 'vue'
import * as match from '@/apiPc/match'
import checkOcr from '../components/checkOcr'
import Import from '../components/import'
import { useStorage } from '@vueuse/core/index'
import { getPerPersonList } from '@/apiPc/match'
import { resetForm } from '/@/utils/ruoyi'

const language = useStorage('language', 0)
const { proxy } = getCurrentInstance()
const data = reactive({
  query: {
    pageSize: 10,
    pageNum: 1
  },
  tableData: [],
  show: false,
  loading: false,
  title: '运动员',
  noPhotoCanSign: 0,
  total: 0,
  isNational: false
})
const { query, tableData, show, title, loading, noPhotoCanSign, total, isNational } = toRefs(data)

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'
  }
])
let groupId
const type = ref('1')


const open = (id, val) => {
  query.value = {
    pageSize: 10,
    pageNum: 1
  }
  show.value = true
  query.value.id = id
  query.value.mateFlag = '1'
  type.value = val
  getList()
}

const getList = async() => {
  loading.value = true
  let res
  if (type.value == 1) {
    res = await match.getPerPersonList(query.value, query.value.id)
  } else {
    res = await match.getGroupPersonList(query.value, query.value.id)
  }
  
  tableData.value = res.rows
  total.value = res.total
  loading.value = false
}

function editPerson(row) {
  console.log(isNational.value)
  const params = {
    id: row.id,
    title: language.value == 0 ? '编辑人员' : 'Edit Person',
    groupId: groupId,
    label: '0'
  }
  proxy.$refs['checkOcrRef'].open(params)
}

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