<template>
  <div>
    <van-dialog
      style="--el-dialog-padding-primary: 0px; border-radius: 20px"
      v-model:show="visible"
      width="295"
      destroy-on-close
      :z-index="99"
      :show-close="false"
      @closed="onDialogClosed"
    >
      <div
        class="flex w-full flex-col items-center rounded-[20px] bg-gradient-to-b from-[#ffe6c0] to-[#fffffe] py-30"
      >
        <img
          src="~/assets/img/note-create/userinfo_modal_h.png"
          class="w-70 absolute left-10 top-5"
        />
        <img
          src="~/assets/img/note-create/user_xian.png"
          class="w-114 absolute left-1/2 -translate-x-1/2 top-57 -tan z-50"
        />
        <div class="absolute top-10 right-10 z-100">
          <img class="w-32 h-32" @click="visible = false" :src="close_circle" alt="" />
        </div>
        <div class="text-xl font-semibold text-black-3">请完善您的个人信息</div>
        <div class="mt-20 w-255">
          <van-form
            ref="formRef"
            style="--van-cell-background: transparent !important"
            class="w-full"
            @submit="handleSubmit"
          >
            <van-cell-group style="--van-cell-background: transparent !important; padding: 0">
              <van-field
                clearable
                autocomplete="off"
                :rules="formRules.showName"
                v-model="formData.showName"
                label-width="40"
                placeholder=""
              >
                <template #label>
                  <div class="w-40 h-40 h-40 flex items-center">
                    <span class="text-[#ee0a24] pr-2">*</span>
                    姓名:
                  </div>
                </template>
              </van-field>
              <van-field
                clearable
                autocomplete="off"
                :rules="formRules.address"
                v-model="formData.address"
                label-width="40"
                placeholder=""
              >
                <template #label>
                  <div class="w-40 h-40 h-40 flex items-center">
                    <span class="text-[#fff]/[0] pr-2">*</span>
                    住址:
                  </div>
                </template>
              </van-field>
              <van-field
                clearable
                autocomplete="off"
                :rules="formRules.email"
                v-model="formData.email"
                label-width="40"
                placeholder=""
              >
                <template #label>
                  <div class="w-40 h-40 h-40 flex items-center">
                    <span class="text-[#ee0a24] pr-2">*</span>
                    邮箱:
                  </div>
                </template>
              </van-field>
              <van-field
                clearable
                autocomplete="off"
                :rules="formRules.job"
                v-model="formData.job"
                label-width="40"
                placeholder=""
              >
                <template #label>
                  <div class="w-40 h-40 h-40 flex items-center">
                    <span class="text-[#fff]/[0] pr-2">*</span>
                    职业:
                  </div>
                </template>
              </van-field>
            </van-cell-group>
          </van-form>
        </div>
      </div>
      <template #footer>
        <div class="flex justify-around mb-20">
          <button
            native-type="submit"
            @click="handleSubmit"
            class="flex h-40 w-110 cursor-pointer items-center justify-center rounded-full bg-primary text-xl font-semibold text-white hover:opacity-80"
          >
            提交
          </button>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script setup>
import close_circle from '~/assets/img/note-create/close.svg'
const visible = defineModel('visible', false)

const emit = defineEmits(['submitOk'])

function onDialogClosed() {}

const formData = reactive({
  showName: '',
  address: '',
  email: '',
  job: ''
})

const formRules = {
  showName: [
    {
      required: true,
      message: '请输入昵称',
      trigger: 'blur'
    }
  ],
  address: [
    {
      required: false,
      message: '请输入住址',
      trigger: 'blur'
    }
  ],
  email: [
    {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur'
    }
  ],
  job: [
    {
      required: false,
      message: '请输入职业',
      trigger: 'blur'
    }
  ]
}

const formRef = ref(null)

async function handleSubmit() {
  if (!formRef.value) return

  if (formData.showName && formData.email) {
    try {
      await request('/website/tourism/publishTravelNotes/savePerfect', {
        method: 'post',
        body: formData
      })
      visible.value = false
      emit('submitOk')
    } catch (error) {}
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-cell {
  background: transparent !important;
  padding: 0px 0px 10px 0px;
}

::v-deep .van-cell-group {
  background: transparent !important;
}

::v-deep .van-field__body {
  border: 1px solid #fd9a00;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background-color: white;
  padding-left: 10px;
}
</style>
