<template>
  <el-dialog
    v-model="show" :title="title" width="500px" append-to-body :close-on-click-modal="false"
    destroy-on-close @close="cancel"
  >
    <el-form label-width="120">
    <el-form-item required :label="item.realName" v-for="item in list">
      <el-input :disabled="item.checked"
          v-model="item.wdsfMin" placeholder="输入WDSF会员号"
      >
        <template #append>
          <view @click="checkCode(item)" class="checkbb">
            <el-icon v-if="item.checked" color="#13ce66" size="24"><CircleCheck /></el-icon>
            <text class="text-primary" v-else>验证</text>
          </view>
        </template>
      </el-input>
    </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, toRefs, watch } from 'vue'
import { getCurrentInstance, nextTick, onMounted } from '@vue/runtime-core'
import * as match from '@/apiPc/match'
import { SuccessFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['submitForm', 'cancel'])
const uploadUrl = ref('/upload/upLoadToFileServer')
const route = useRoute()
import {useStorage} from "@vueuse/core/index";
const language= useStorage('language',0)

const data = reactive({
  form: {},
  show: false,
  list: [],
  title: '',
  groupId: '0'
})
const { form, show, countryList, list, title, groupId } = toRefs(data)
let extraId = 0
let personId
let matchId

const open = (params) => {
  console.log(params)
  show.value = true
  title.value = params.title
  matchId = params.matchId
  groupId.value= params.groupId
  list.value = params.list
  init()
}
defineExpose({ open })
watch(show, (value) => {
  if (!value) {
    form.value = {}
    list.value = []
  }
})

function init() {
  for (let n of list.value){
    if (n.wdsfMin) {
      n.checked = true
    } else {
      n.checked = false
    }
  }
}
function checkCode(item) {
  if (!item.wdsfMin) {
    if (language.value == 0) {
      ElMessage.warning('请填写WDSF卡号')
    } else {
      ElMessage.warning('Please fill in your WDSF code')
    }
    return
  }

  match.checkNoRepeat({card: item.wdsfMin,groupId: groupId.value}).then(res => {
    if(res.data.wdsfFlag=='0'){
      if (language.value == 0) {
        ElMessage.warning('验证失败,卡号不存在')
      } else {
        ElMessage.warning('Verification failed, card number does not exist')
      }
      return
    }
    if(res.data.wdsfFlag=='1'){
      item.checked = true
    }
  })
}
function submitForm() {
  var arr = []
  for(var n of list.value){
    arr.push({
      id: n.id,
      wdsfMin: n.wdsfMin
    })
  }
  // match.saveWdsfMin(arr).then(res=>{
  //   show.value = false
  // })

  // emit('submitForm')
}

function cancel() {
  show.value = false
  emit('cancel')
}
</script>

<style lang="scss">
.threeFour {
  width: 100%;

  :deep(.el-upload--picture-card) {
    width: 120px;
    height: 160px;
  }

  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 120px;
    height: 160px;
  }
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

.red {
  color: #f56c6c;
}
.checkbb{width: 30px;display: flex;align-items: center;text-align: center;}
</style>