<template>
  <el-dialog
      v-model="show" :title="title" width="800px" append-to-body close-icon="CircleClose" center
      :close-on-click-modal="false" class="pcloginpop"
      destroy-on-close
  >
<!--    随性人员-->
    <div class="pd10"></div>
    <el-form ref="dialogRef" :model="form" :rules="language==0?rules:rules_cn" label-width="160px" inline>
      <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" :limit="1" :is-show-tip="false" :button-text="'Upload'"/>
          </el-form-item>
          <el-form-item :label="language==0?'出生日期':'birth'" prop="birth" required>
            <el-date-picker
                v-model="form.birth"
                style="width: 100%;"
                type="date" format="YYYY-MM-DD" 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" :value="l.value" :label="language==0?l.label:l.enlabel"/>
            </el-select>
          </el-form-item>


        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" class="btn-lineG w200px" round @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: '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'}
  ],
  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.error('Please upload  your passport file')
    return
  }
  if(Array.isArray(form.value.passportUrl)){
    form.value.passportUrl = form.value.passportUrl[0].url
  } else {
    form.value.passportUrl = form.value.passportUrl
  }
  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>