<template>
  <q-card class="bg-white q-pa-md" style="max-width: 500px; min-width: 375px; ">
    <div class="text-h6 q-mb-lg">
      {{ $t('v102.to.m.t') }}
    </div>
    <div class="row items-center">
      <span class="f12 text-grey-900 text-subtitle2 text-weight-bold" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile }">{{ $t('v102.ticket.gi') }}：</span>
      <span class="col f12">
        <q-radio v-model="m.MailingState" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="1" :label="$t('v102.ticket.zq')" />
        <q-radio v-model="m.MailingState" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="2" :label="$t('v102.ticket.yj')" />
      </span>
    </div>
    <div v-if="m.MailingState == 1" class="bg-light-blue-1 q-pa-md fz14 rounded-borders q-mt-md">
      <div class="text-weight-bold">{{ $t('v102.ticket.zqs') }}</div>
      <div class="text-grey-900 q-mt-sm f12">{{ $t('v102.ticket.zqd') }}</div>
    </div>
    <div>
      <div class="q-mt-md">
        <span class="f12 text-grey-900 text-subtitle2 text-weight-bold">{{ $t('v102.ticket.sj') }}</span>
      </div>
      <div class="row items-center q-mt-md text-grey-600 q-mb-md" v-if="$q.platform.is.desktop">
        <div class="col q-mr-md">{{ $t('v102.ticket.sjc.c1') }}</div>
        <div class="col q-mr-md">{{ $t('v102.ticket.sjc.c2') }}</div>
        <div class="col-2 q-mr-md">{{ $t('v102.ticket.sjc.c3') }}</div>
        <div class="col q-mr-md">{{ $t('v102.ticket.sjc.c4') }}</div>
        <div class="col-4" v-if="m.MailingState == 2">{{ $t('v102.ticket.sjc.c5') }}</div>
      </div>
      <div style="border-top: 1px dashed #eee" :class="{ 'row items-center': $q.platform.is.desktop, column: $q.platform.is.mobile }">
        <q-input dense standout v-model="m.Name" class="col q-mt-md" :class="{ 'q-mr-md': $q.platform.is.desktop }" :placeholder="$t('v102.ticket.sjcp.c1')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestName"/>
        <q-input dense standout v-model="m.EName" class="col q-mt-md" :class="{ 'q-mr-md': $q.platform.is.desktop }" :placeholder="$t('v102.ticket.sjcp.c2')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestEName"/>
        <div class="col q-mt-md" :class="{ 'q-mr-md': $q.platform.is.desktop }">
          <q-radio v-model="m.Sex" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="Number(1)" :label="$t('v102.ticket.sex.man')" />
          <q-radio v-model="m.Sex" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="Number(2)" :label="$t('v102.ticket.sex.women')" />
        </div>
        <q-input dense standout v-model="m.Mobile" class="col q-mt-md" :class="{ 'q-mr-md': $q.platform.is.desktop }" :placeholder="$t('v102.ticket.sjcp.c4')" :rules="[ val => val && val.length == 11 || ' ']" ref="guestMobile"/>
        <q-input v-if="m.MailingState == 2" dense standout v-model="m.MailingAddress" class="col-4 q-mt-md" :placeholder="$t('v102.ticket.sjcp.c5')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestAddress"/>
      </div>
    </div>
    <div class="q-mt-md">
      <q-input v-model="m.Remark" standout autogrow :label="$t('v102.ticket.or')" />
    </div>
    <div class="q-mt-lg text-right">
      <!-- v-close-popup flat dense -->
      <q-btn color="negative" class="q-px-lg" :label="$t('v102.to.m.c')" v-close-popup flat dense @click="close" />
      <q-btn color="primary" class="q-ml-md q-px-lg" :label="$t('v102.to.m.s')"  flat dense @click="submit"/>
    </div>
  </q-card>
</template>

<script lang="ts">
import { ref, defineComponent, reactive, toRefs, watch} from 'vue'
import { ApiResult } from 'src/@types/enumHelper'
import TicketService from '../../../api/ticket'
import message from '../../../utils/message'
import { useI18n } from 'vue-i18n'
export default defineComponent({
  props: ['order'],
  setup(props, context) {
    watch(
      () => props.order,
      (n, o) => {
        // data.m = JSON.parse(JSON.stringify(n))
      }
    )
    const { t } = useI18n()
    const guestName = ref(null) as any
    const guestEName = ref(null) as any
    const guestMobile = ref(null) as any
    const guestAddress = ref(null) as any

    const data = reactive({
      m: {} as any,
      loading: false
    })
    data.m=JSON.parse(JSON.stringify(props.order))
    

    const methods = {
      close(){
        context.emit('close')
      },
      submit(){
        if(data.loading) return
        data.loading = true
        let flag = false
        guestName.value.validate()
        guestEName.value.validate()
        guestMobile.value.validate()
          if(data.m.MailingState=='2'){
            guestAddress.value.validate()
            flag = !guestName.value.hasError && !guestEName.value.hasError && !guestMobile.value.hasError && !guestAddress.value.hasError
          }else{
            flag = !guestName.value.hasError && !guestEName.value.hasError && !guestMobile.value.hasError
            data.m.MailingAddress = ''
          }
          if(!flag) return
          let m = {
            IsUpdateMailing: 1,
            OrderId: data.m.OrderId,
            CouponsId: data.m.CouponsId,
            Money: data.m.Money,
            UseDate: data.m.UseDate,
            Birthday: data.m.Birthday,
            DetailList: data.m.DetailList,
            MailingState: data.m.MailingState,//邮寄状态 1自取 2邮寄
            MailingAddress: data.m.MailingAddress,//MailingState =2 填写邮寄
            Name: data.m.Name,
            EName: data.m.EName,
            Sex: data.m.Sex,//1男2女
            Mobile: data.m.Mobile,
            Remark: data.m.Remark,
          }
          let param = Object.assign(m)
          TicketService.setTicketOrder(param)
            .then(r => {
              if (r.data.resultCode == ApiResult.SUCCESS) {
                context.emit('success')
                message.successMsg(`${t('success')}`)
              } else {
                message.errorMsg(r.data.message)
              }
              data.loading = false
            }).catch(e => {
              data.loading = false
              message.errorMsg(e.message)
            })
      }
    }
    
    return { 
      ...toRefs(data),
      ...methods,
      guestName,
      guestEName,
      guestMobile,
      guestAddress
    }
  }
})
</script>

<style></style>
