<template>
    <app-modal class="goods-details-address" direction="right" height="100%" v-model:show="showModal">
        <app-view class="g-form">
            <template #header>
                <app-navbar :title="formItem.THJDeliveryMode === 2 ? '自提信息' : '代办运输信息'" @back="closed" />
            </template>
            <Form ref="formRef" class="goods-details-address__form g-form__container" @submit="onSubmit">
                <CellGroup inset>
                    <template #title>
                        <span>联系信息</span>
                        <span @click="showContact = true" style="color: #333;">
                            <Icon name="add-o" />
                            添加联系信息
                        </span>
                    </template>
                    <Field v-model="formItem.ContactName" name="username" label="联系人" placeholder="必填"
                        :rules="formRules.ContactName" />
                    <Field v-model="formItem.ContactInfo" name="username" label="联系方式" placeholder="必填"
                        :rules="formRules.ContactInfo" />
                    <Field v-model="formItem.DesAddress" type="textarea" name="username" label="目的地地址" placeholder="必填"
                        :rules="formRules.DesAddress" v-if="formItem.THJDeliveryMode === 3" />
                </CellGroup>
                <CellGroup inset>
                    <template #title>
                        <span>发票信息</span>
                        <span style="color: #333;">
                            <Icon name="add-o" />
                            添加发票信息
                        </span>
                    </template>
                    <Field v-model="formItem.ReceiptInfo" type="textarea" name="username" label="发票信息" rows="3"
                        placeholder="选填" :rules="formRules.ReceiptInfo" />
                </CellGroup>
            </Form>
            <template #footer>
                <div class="g-form__footer">
                    <Button type="primary" @click="formRef?.submit" round block>确认</Button>
                </div>
            </template>
        </app-view>
        <app-contact v-model:show="showContact" @change="contactChange" />
    </app-modal>
</template>

<script lang="ts" setup>
import { shallowRef, reactive, PropType } from 'vue'
import { CellGroup, Button, Field, Form, FormInstance, FieldRule, Icon } from 'vant'
import AppModal from '@/components/base/modal/index.vue'
import AppContact from '../contact/index.vue'

const props = defineProps({
    formData: {
        type: Object as PropType<Proto.SpotPresaleDestingOrderReq>,
        required: true
    }
})

const emit = defineEmits(['updated'])
const formRef = shallowRef<FormInstance>()
const showModal = shallowRef(true)
const showContact = shallowRef(false) // 显示联系人选择列表
const formItem = reactive({ ...props.formData })

// 表单验证规则
const formRules: { [key in keyof Proto.SpotPresaleDestingOrderReq]?: FieldRule[] } = {
    ContactName: [{
        required: true,
        message: '请输入联系人',
    }],
    ContactInfo: [{
        required: true,
        message: '请输入联系方式',
    }],
    DesAddress: [{
        required: true,
        message: '请输入目的地地址',
    }],
}

// 选择联系信息
const contactChange = (item: Model.UserReceiveInfoRsp) => {
    formItem.ContactName = item.receivername
    formItem.ContactInfo = item.phonenum

    if (formItem.THJDeliveryMode === 3) {
        formItem.DesAddress = [item.provincename, item.cityname, item.districtname, item.address].join(' ')
    } else {
        formItem.DesAddress = ''
    }
}

const onSubmit = () => {
    emit('updated', formItem)
    closed()
}

// 关闭弹窗
const closed = () => {
    if (showContact.value) {
        showContact.value = false
    } else {
        showModal.value = false
    }
}

// 暴露组件属性给父组件调用
defineExpose({
    closed,
})
</script>

<style lang="less">
@import './index.less';
</style>