<template>
  <el-dialog
      v-model="show" :title="title" width="500px" append-to-body :close-on-click-modal="false"
      destroy-on-close :show-close="false"
  >
    <el-form label-width="120" v-model="list">
      <el-form-item required :label="item.realName" v-for="item in list">
        <div v-show="item.checked==2">{{ item.wdsfMin }}</div>
        <el-input :disabled="item.checked==1" type="number" v-show="item.checked!=2"
                  v-model="item.wdsfMin" :placeholder="language==0?'绑定WDSF会员号':'Bind WDSF MIN'"
        >
          <template #append>
            <view @click="checkCode(item)" class="checkbb">
              <el-icon v-if="item.checked==1" color="#13ce66" size="24">
                <CircleCheck/>
              </el-icon>
              <text class="text-primary" v-else-if="item.checked==0">{{ language == 0 ? '验证' : 'Check' }}</text>
            </view>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" @click="submitForm">{{ language == 0 ? '保 存' : 'Save' }}</el-button>
        <el-button @click="cancel">{{ language == 0 ? '取 消' : '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) => {
  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 = 2
      console.log(n.checked)
    } else {
      n.checked = 0
    }
  }
}

function checkCode(item) {
  if (!item.wdsfMin) {
    if (language.value == 0) {
      ElMessage.warning('请填写WDSF卡号')
    } else {
      ElMessage.warning('Please fill in your WDSF code')
    }
    return
  }
  for (var n of list.value) {
    if (n.wdsfMin == item.wdsfMin && n.id != item.id) {
      ElMessage.warning(language.value == 0 ? '不能重复绑定' : 'Cannot be bound repeatedly')
      return
    }
  }
  match.checkNoRepeat({card: item.wdsfMin, groupId: groupId.value}).then(res => {
    if (res.data) {
      item.checked = 1
    } else {
      ElMessage.warning(language.value == 0 ? '不满足绑定条件' : 'Not meet the binding conditions')
      return
    }
  })
}

function submitForm() {
  var obj = {}
  for (var n of list.value) {
    if (n.checked == 0) {
      ElMessage.warning(language.value == 0 ? `请点击验证${n.realName}的WDSF卡号` : `Please verify ${n.realName}'s  card number`)
      return
    }
    if (n.checked == 1) {
      obj[n.id] = n.wdsfMin
    }
  }
  console.log(obj)
  if(obj=={}){
    return
  }
  match.saveWdsfMin(obj, groupId.value).then(res => {
    if (res.data) {
      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: 40px;
  display: flex;
  align-items: center;
  text-align: center;
}
</style>