<template>
	<div class="app-content">
		<form @submit="formSubmit">
			<app-delivery-module ref="appDelivery" />
			<!-- 匿名派送 -->
			<div class="none-name-delivery flex-center">
				<checkbox class="ljd-checkbox" @change="anonymityChange"></checkbox>
				<span class="none-name-text">匿名派送</span>
			</div>
			<!-- 按钮 -->
			<div class="app-footer">
				<button class="admin-button-com blue middle" formType="submit">提交</button>
			</div>
		</form>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import AppDeliveryModule from '@/components/app-delivery'
const form = require('@/utils/formValidation.js')
// api
import { getShopUser } from '@/utils/auth'
import { getOrderShop } from '@/utils/config'
import { updateSheet } from '@/api/order'
export default {
	name: 'fill-form',
	components: {
		AppDeliveryModule
	},
	data() {
		return {
			// 初始form
			form: {
				anonymity: '0' // 是否匿名 0不 1要
			}
		}
	},
	computed: {
		...mapGetters({ orderShop: 'getOrderShop' }),
		...mapGetters({ shopUser: 'getShopUser' })
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			getOrderShop()
			getShopUser()
		},
		confirmFn() {
			let form = this.$refs.appDelivery.form ? this.$refs.appDelivery.form : {}
			let region = this.$refs.appDelivery.region ? this.$refs.appDelivery.region : {}
			updateSheet({
				id: this.option.id,
				...this.form,
				...form,
				...region
			}).then(res => {
				this.$util.pageTo({
					url: '/admin/order/ship',
					query: {
						id: this.option.id,
						pagestatus: 1
					}
				})
			})
		},
		// operate
		anonymityChange(e) {
			this.form.anonymity = this.form.anonymity == 1 ? 0 : 1
		},
		// 表单验证
		formSubmit(e) {
			// 表单规则
			let rules = [
				// {
				// 	name: 'receiveUserName',
				// 	rule: ['required'],
				// 	msg: ['请输入姓名']
				// }
			]
			// 进行表单检查
			let formData = e.detail.value
			let checkRes = form.validation(formData, rules)
			// 验证通过!
			if (!checkRes) {
				this.confirmFn()
			} else {
				this.$msg(checkRes)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	// 匿名派送
	.none-name-delivery {
		padding-left: 30px;
		margin-top: 40px;
		.none-name-text {
			margin-left: 14px;
			color: $fontColor2;
		}
	}
	.app-footer {
		.admin-button-com {
			width: 90%;
		}
	}
</style>
