<template>
	<div class="app-content">
		<!-- tabs -->
		<app-tabs :tabs="tabs" :currentTab="tabIndex" :isFixed="true" :borderLeft="true" @change="tabChange" itemWidth="50%" />
		<!-- 配送 -->
		<block v-if="tabIndex == 0">
			<app-delivery-module />
		</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 placeholder-class="phcolor" class="tui-input" name="phone" placeholder="请输入电话" maxlength="50" type="number" />
				</tui-list-cell>
			</div>
			<!-- 商品金额 -->
			<div class="module-com shop-price-wrap">
				<div class="module-tit">商品金额</div>
				<div class="module-det">
					<app-list-module v-for="(item, subIndex) in 2" :key="subIndex" />
					<div class="shop-prompt">
						<div>总计</div>
						<div>￥400</div>
					</div>
				</div>
			</div>
			<!-- 可选优惠 -->
			<div class="module-com discount-wrap">
				<div class="module-tit">可选优惠</div>
				<div class="module-det">
					<app-coupon-sel :discountArr="['member', 'coupon']" />
				</div>
			</div>
		</block>

		<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">580</span>
					<span>.00</span>
				</span>
			</div>
			<button class="button-com red">确认</button>
		</div>
		<!-- 弹窗 -->
		<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 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'
export default {
	name: 'order-buy',
	components: {
		appTabs,
		appDeliveryModule,
		tuiListCell,
		appListModule,
		appCouponSel,
		appTrademark,
		alertModule
	},
	data() {
		return {
			tabIndex: 0,
			tabs: [
				{
					name: '配送'
				},
				{
					name: '我要自提'
				}
			],
			showAlert: false
		}
	},
	methods: {
		tabChange(e) {
			this.tabIndex = e.index
		},
		hideAlert() {
			this.showAlert = false
		}
	}
}
</script>

<style lang='scss' scoped>
	.app-content {
		padding-top: 100px;
		padding-bottom: 120px;
		min-height: 0;
		.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: 20px 0;
			}
		}
		// 可选优惠
		.discount-wrap {
			.module-det {
				padding-top: 20px;
				padding-bottom: 20px;
			}
		}
	}
	.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>
