<template>
	<div class="app-content">
		<!-- tabs -->
		<app-tabs :tabs="tabs" :currentTab="tabIndex" :isFixed="true" :borderLeft="true" @change="tabChange" itemWidth="50%" />
		<!-- 配送 -->
		<form @submit="formSubmit">
			<block v-if="tabIndex == 0">
				<app-delivery-module ref="appDelivery" />
			</block>
			<!-- 自取 -->
			<block v-else>
				<!-- 收花人 -->
				<div class="module-com">
					<!-- <tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">收花人姓名</div>
					<input placeholder-class="phcolor" class="tui-input" name="name" placeholder="请输入姓名" maxlength="50" type="number" />
					</tui-list-cell>-->
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">手机号</div>
						<input v-model="mentionForm.bookMobile" placeholder-class="phcolor" class="tui-input" name="phone" placeholder="请输入手机号" type="number" />
					</tui-list-cell>
				</div>
			</block>

			<!-- 商品金额 -->
			<div class="module-com shop-price-wrap">
				<div class="module-tit">商品金额</div>
				<div class="module-det">
					<app-list-module v-if="!$util.isEmpty(goodsInfo)" :info="goodsInfo" />
					<div class="shop-prompt">
						<div>总计</div>
						<div>￥{{ goodsInfo.price * option.goodsNum }}</div>
					</div>
				</div>
			</div>
			<!-- 可选优惠 -->
			<div class="module-com discount-wrap" v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.member && shopUser.userAsset.getCouponNum">
				<div class="module-tit">可选优惠</div>
				<div class="module-det">
					<app-coupon-sel ref="couponSel" :price="goodsInfo.price * option.goodsNum" :discountArr="['member', 'coupon']" />
				</div>
			</div>

			<!-- 匿名派送 -->
			<div class="none-name-delivery flex-center">
				<checkbox class="ljd-checkbox" @change="anonymityChange"></checkbox>
				<span class="none-name-text">匿名派送</span>
			</div>

			<app-trademark />
			<!-- 按钮 -->
			<div class="page-btn app-footer">
				<div class="flex-center">
					<span>应付款</span>
					<span class="app-price">
						<span>￥</span>
						<span class="app-size-40">{{ totalPrice }}</span>
					</span>
				</div>
				<!-- <button class="button-com red" @click="confirmFn" formType="submit">确认</button> -->
				<button class="button-com red" formType="submit">确认</button>
			</div>
		</form>
		<!-- 弹窗 -->
		<alert-module :show="showAlert" @click="hideAlert" @cancel="hideAlert">
			<div class="alt-content">
				<div>5公里内免运费</div>
				<div>
					<span>超过</span>
					<span class="app-price">5公里</span>
					<span>每增加1公里</span>
					<span class="app-price">+2元</span>
				</div>
			</div>
		</alert-module>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import AppTabs from '@/components/plugin/tabs'
import TuiListCell from '@/components/plugin/list-cell'
import AppDeliveryModule from '@/components/app-delivery'
import AppTrademark from '@/components/module/app-trademark'
import AppListModule from '@/components/module/app-order-list'
import AppCouponSel from '@/components/app-coupon-sel'
import AlertModule from '@/components/plugin/alert'
const form = require('@/utils/formValidation.js')
// api
import { getShopUser } from '@/utils/auth'
import { getOrderShop } from '@/utils/config'
import { createOrder } from '@/api/order'
export default {
	name: 'order-buy',
	components: {
		AppTabs,
		AppDeliveryModule,
		TuiListCell,
		AppListModule,
		AppCouponSel,
		AppTrademark,
		AlertModule
	},
	data() {
		return {
			goodsInfo: {},
			tabIndex: 0,
			tabs: [
				{
					name: '配送'
				},
				{
					name: '我要自提'
				}
			],
			showAlert: false,
			// form
			// 初始form
			form: {
				anonymity: '0', // 是否匿名 0不 1要
				sendDistance: '', // 配送距离，根据腾讯js进行计算
				goodsId: '', // 【商城下单特有字段】商品id
				goodsStyleId: '', // 【商城下单特有字段】商品款式id
				goodsNum: '', // 【商城下单特有字段】商品数量
				couponId: '0', // 优惠券id，默认0没有使用优惠券
				receiveLat: '', // 收花人纬度
				receiveLong: '' // 收花人经度
			},
			// 自提form
			mentionForm: {
				bookMobile: ''
			}
		}
	},
	computed: {
		...mapGetters({ orderShop: 'getOrderShop' }),
		...mapGetters({ shopUser: 'getShopUser' }),
		// 计算总金额
		totalPrice() {
			let totalPrice = this.goodsInfo.price * this.option.goodsNum
			let discountMember = this.$util.isEmpty(this.shopUser) ? this.shopUser.userAsset.discount * totalPrice : 1 * totalPrice
			discountMember = discountMember / 10
			return discountMember.toFixed(2)
		}
	},
	onLoad(option) {
		// this.init()
	},
	methods: {
		init() {
			let goodsInfo = uni.getStorageSync('buyGoodsDetil')
			// if (this.$util.isEmpty(goodsInfo)) {
			// 	this.$util.pageTo({
			// 		url: `/pages/goods/detail`,
			// 		query: {
			// 			id: this.option.goodsId
			// 		}
			// 	})
			// 	return false
			// }
			getOrderShop()
			getShopUser()
			goodsInfo.buyNum = this.option.goodsNum
			this.goodsInfo = goodsInfo
			// 初始化上个页面带入的值
			Object.keys(this.form).forEach((i, index) => {
				this.form[i] = this.option[i]
			})
		},
		// api
		// 生成订单
		createOrderFn() {
			let addForm = {}
			let form = this.tabIndex == 0 ? this.$refs.appDelivery.form : this.mentionForm
			let region = this.tabIndex == 0 ? this.$refs.appDelivery.region : {}
			if (this.$refs.couponSel) {
				addForm.couponId = this.$refs.couponSel.couponId
			}
			createOrder({
				needSend: this.tabIndex == 0 ? '1' : '0',
				...form,
				...this.form,
				...addForm,
				...region
			}).then(res => {
				uni.removeStorageSync('buyGoodsDetil')
				this.$util.pageTo({
					url: '/pages/callback/index',
					query: {
						pagestatus: 1,
						...res.data
					}
				})
			})
		},
		// operate
		confirmFn() {
			console.log(this.$refs.appDelivery)
			this.createOrderFn()
		},
		tabChange(e) {
			this.tabIndex = e.index
		},
		hideAlert() {
			this.showAlert = false
		},
		anonymityChange(e) {
			this.form.anonymity = this.form.anonymity == 1 ? 0 : 1
		},
		// 表单验证
		formSubmit(e) {
			console.log(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>
	.app-content {
		padding-top: 100px;
		padding-bottom: 120px;
		min-height: calc(100vh - 220px);
		.module-com {
			margin-bottom: 20px;
			background-color: #fff;
			.module-tit {
				padding: 20px 18px;
				font-size: 28px;
				font-weight: 600;
				border-bottom: 1px solid $borderColor;
			}
			.module-det {
				padding: 0 30px;
			}
		}
		// 公共
		.line-cell {
			.tui-title {
				width: 210px;
				color: $fontColor2;
			}
			.tui-input {
				width: calc(100% - 210px);
				font-size: 28px;
			}
			.tui-placeholder {
				color: #ccc;
			}
			.phcolor {
				color: #ccc;
			}
		}
		// 商品金额
		.shop-price-wrap {
			.shop-prompt {
				@include disFlex(center, space-between);
				color: $fontColor2;
				margin-top: 20px;
				padding-bottom: 20px;
			}
		}
		// 可选优惠
		.discount-wrap {
			.module-det {
				padding-top: 20px;
				padding-bottom: 20px;
			}
		}
		// 匿名派送
		.none-name-delivery {
			padding-left: 30px;
			margin-top: 40px;
			.none-name-text {
				margin-left: 14px;
				color: $fontColor2;
			}
		}
	}
	.page-btn {
		width: calc(100% - 60px);
		@include disFlex(center, space-between);
		padding: 0 30px;
		.app-price {
			margin-bottom: 8px;
			margin-left: 4px;
		}
		.red {
			width: 270px;
		}
	}
	// 弹窗
	/deep/.tui-alert-content {
		padding: 40px 40px;
	}
	.alt-content {
		& > div {
			margin: 10px 0;
		}
	}
</style>
