<template>
  <el-dialog
    v-model="show" :close-on-click-modal="false" :title="title" append-to-body center
    class="pcloginpop"
    close-icon="CircleClose" destroy-on-close
    width="800px"
  >
    
    <!--    随性人员-->
    <div class="pd10" />
    <el-form ref="dialogRef" :model="form" :rules="language==0?rules:rules_cn" inline label-width="160px">
      <el-row :gutter="30">
        <el-col :lg="24">
          
          <el-form-item :label="language==0?'姓氏':'surname'" prop="xing" required>
            <el-input v-model="form.xing" />
          </el-form-item>
          <el-form-item :label="language==0?'名':'name'" prop="ming" required>
            <el-input v-model="form.ming" />
          </el-form-item>
          <!--          <el-form-item :label="language==0?'证件类型':'ID type'" prop="idcType" required>-->
          <!--            <el-select v-model="form.idcType" style="width: 100%;">-->
          <!--              <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?'护照号':'PassPort Number'" prop="idcCode" required>
            <el-input v-model="form.idcCode" />
          </el-form-item>
          <el-form-item :label="language==0?'护照文件':'Passport File'" required>
            <file-upload v-model="form.passportUrl" :button-text="'Upload'" :is-show-tip="false" :limit="1" />
          </el-form-item>
          <el-form-item :label="language==0?'出生日期':'Date of Birth'" prop="birth" required>
            <el-date-picker
              v-model="form.birth"
              format="YYYY-MM-DD"
              style="width: 100%;" type="date" value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item :label="language==0?'性别':'sex'" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
              <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item :label="language==0?'主要会员角色':'roles'" prop="labelArr">
            <el-select v-model="form.labelArr" multiple>
              <el-option v-for="l in labels" :key="l.value" :label="language==0?l.label:l.enlabel" :value="l.value" />
            </el-select>
          </el-form-item>
        
        
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button class="btn-lineG w200px" round type="primary" @click="submitForm">{{
          language == 0 ? '确定' : 'Save'
        }}
        </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 { ElMessage } from 'element-plus'
import { nationList } from '@/assets/js/data'
import _ from 'lodash'
import cache from '@/plugins/cache'
import { useStorage } from '@vueuse/core/index'

const language = useStorage('language', 0)
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 { proxy } = getCurrentInstance()
const emit = defineEmits(['submitForm'])
const data = reactive({
  form: {
    idcType: '1',
    sex: '0'
  },
  rules: {
    xing: [{ required: true, message: '必填', trigger: 'blur' }],
    ming: [{ required: true, message: '必填', trigger: 'blur' }],
    idcCode: [{ required: true, message: '必填', trigger: 'blur' }],
    birth: [{ required: true, message: '必填', trigger: 'change' }],
    sex: [{ required: true, message: '必填', trigger: 'change' }],
    labelArr: [{ required: true, message: '必填', trigger: 'blur' }]
  },
  rules_cn: {
    xing: [{ required: true, message: 'required', trigger: 'blur' }],
    ming: [{ required: true, message: 'required', trigger: 'blur' }],
    idcCode: [{ required: true, message: 'required', trigger: 'blur' }],
    birth: [{ required: true, message: 'required', trigger: 'change' }],
    address: [{ required: true, message: 'required', trigger: 'blur' }],
    sex: [{ required: true, message: 'required', trigger: 'change' }],
    labelArr: [{ required: true, message: 'required', trigger: 'blur' }]
  },
  show: false,
  labels: [
    // {value: '0', label: '运动员', enlabel: 'Athletes'},
    { value: '1', label: '教练', enlabel: 'Coach' },
    { value: '2', label: '领队', enlabel: 'Head of team' },
    { value: '4', label: '队医', enlabel: 'Team doctor' },
    { value: '5', label: '翻译', enlabel: 'Interpreter' },
    { value: '6', label: '官员', enlabel: 'Official' },
    { value: '3', label: '其他', enlabel: 'Other' }
  ],
  title: 'Add accompanying personnel',
  cptId: ''
})
const {
  form,
  rules,
  rules_cn,
  show,
  title,
  cptId,
  labels,
  uType
} = toRefs(data)
let editgay = false
const open = (params) => {
  console.log(params)
  show.value = true
  cptId.value = params.cptId
  title.value = params.title
  if (params.id != 0) { // 编辑
    editgay = true
    match.getPersonInfoById(params.id).then(res => {
      form.value = res.data
      form.value.id = params.id
      if (form.value.label) {
        // {0:0,1:1,2:3}
        form.value.labelArr = form.value.label.split(',')
      }
    })
  }
}
defineExpose({ open })
watch(show, (value) => {
  if (!value) {
    form.value = {}
  }
  nextTick(() => {
    proxy.$refs['dialogRef'].clearValidate()
  })
})

function submitForm() {
  if (!form.value.passportUrl) {
    ElMessage.warning('Please upload  your passport file')
    return
  }
  if (Array.isArray(form.value.passportUrl)) {
    form.value.passportUrl = form.value.passportUrl[0].url
  }
  proxy.$refs['dialogRef'].validate((valid) => {
    if (valid) {
      form.value.label = form.value.labelArr.toString()
      if (editgay) {
        // id不是0
        match.editPersonInfo(form.value).then(res => {
          ElMessage.success('保存成功')
          show.value = false
          emit('submitForm')
        })
      } else {
        form.value.cptId = cptId.value
        match.savePersonForMyPerson(form.value).then(res => {
          ElMessage.success('保存成功')
          show.value = false
          emit('submitForm')
        })
      }
    }
  })
}

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

<style lang="scss">
.threeFour {
  width: 100%;
  
  .el-upload--picture-card {
    width: 120px;
    height: 160px;
  }
  
  .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;
  }
}

.shenfen {
  .el-upload--picture-card {
    width: 320px;
    height: 200px;
  }
  
  .el-upload-list--picture-card .el-upload-list__item {
    width: 320px;
    height: 200px;
  }
}

.touxiang {
  :deep(.el-upload--picture-card ) {
    width: 140px;
    height: 200px;
  }
}

.touxiang {
  :deep(.el-upload-list__item ) {
    width: 140px;
    height: 200px;
  }
  
}

.el-form--inline .el-form-item {
  width: 100%
}


.boxDialog {
  .el-dialog__header {
    background: linear-gradient(#ed2c22, #fe6d45);
    margin-right: 0;
    height: 52px;
    
    span {
      color: #fff;
    }
  }
}

</style>