<template>
	<div class="app-delivery-module">
		<!-- 配送公共组件 -->
		<!-- 收花人 -->
		<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>
			<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
				<div class="tui-title">收花人地址</div>
				<div class="tui-input">福建厦门</div>
			</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>
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">门牌号</div>
				<input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="楼号门牌号，如23号403室 (选填)" maxlength="50" type="number" />
			</tui-list-cell>
		</div>
		<!-- 订花人 -->
		<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="age" 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="age" placeholder="填了花送到了会通知您 (选填)" maxlength="50" type="number" />
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false" :arrow="true">
				<div class="tui-title">送达时间</div>
				<picker mode="date" :value="time" @change="selTimeFn" class="tui-input">
					<div v-if="time">{{ time }}</div>
					<div class="tui-placeholder" v-else>请选择送达时间</div>
				</picker>
			</tui-list-cell>
			<!-- 具体时间 -->
			<div class="delivery-time">
				<button class="button-com" :class="[timeTodaySel == 0 ? 'red' : 'default']" @click="timeTodaySelFn(0)">上午</button>
				<button class="button-com" :class="[timeTodaySel == 1 ? 'red' : 'default']" @click="timeTodaySelFn(1)">中午</button>
				<button class="button-com" :class="[timeTodaySel == 2 ? 'red' : 'default']" @click="timeTodaySelFn(2)">下午</button>
			</div>
		</div>
		<!-- 贺卡 -->
		<div class="module-com gift-wrap">
			<tui-list-cell :hover="false">
				<div class="gift-content">
					<div class="flex-center">
						<checkbox class="ljd-checkbox" checked @change="giftChange"></checkbox>
						<span class="need-gift">需要贺卡</span>
					</div>
					<div class="gitf-textarea">
						<app-textarea placeholder="请填写贺卡内容" v-model="gift" @blur="blursave('blur')" />
					</div>
				</div>
			</tui-list-cell>
		</div>
		<!-- 备注 -->
		<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="age" 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>
						<span>运费(6公里)</span>
						<i class="iconfont iconchangjianwentixiangguanwenti2"></i>
					</div>
					<div>￥2</div>
				</div>
				<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>
		<!-- 匿名派送 -->
		<div class="none-name-delivery flex-center">
			<checkbox class="ljd-checkbox" @change="giftChange"></checkbox>
			<span class="none-name-text">匿名派送</span>
		</div>
        <!-- 选择地区 -->
        <app-area-sel :show="showRegion" @hide="hideAreaSel" @change="changeAreaFn" />
	</div>
</template>

<script>
import tuiListCell from '@/components/plugin/list-cell'
import appDatePicker from '@/components/app-date-picker'
import appTextarea from '@/components/app-textarea'
import appListModule from '@/components/module/app-order-list'
import appCouponSel from '@/components/app-coupon-sel'
import appAreaSel from '@/components/app-area-sel'
export default {
	name: 'app-delivery-module',
	components: {
		tuiListCell,
		appDatePicker,
		appTextarea,
		appListModule,
		appCouponSel,
		appAreaSel
	},
	data() {
		return {
			time: '',
			timeTodaySel: 0,
			region: [],
			gift: '',
			showRegion: false
		}
	},
	methods: {
		selTimeFn(e) {
			this.time = e.detail.value
		},
		selRegionFn() {
			this.showRegion = true
		},
		changeAreaFn(item) {
			console.log(item)
		},
		hideAreaSel() {
			this.showRegion = false
		},
		timeTodaySelFn(index) {
			this.timeTodaySel = index
		},
		giftChange() {
			this.aaa = !this.aaa
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-delivery-module {
		.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;
			}
		}
		// 今天时间选择
		.delivery-time {
			@include disFlex(center, center);
			background-color: #fff;
			padding: 20px 0;
			// border-top: 1px solid $borderColor;
			.button-com {
				padding-top: 14px;
				padding-bottom: 10px;
				margin: 0 10px;
			}
		}
		// 贺卡
		.gift-wrap {
			.gift-content {
				width: 100%;
			}
			.need-gift {
				margin-left: 14px;
				color: $fontColor2;
			}
			.gitf-textarea {
				margin-top: 40px;
			}
		}
		// 商品金额
		.shop-price-wrap {
			.shop-prompt {
				@include disFlex(center, space-between);
				color: $fontColor2;
                margin: 20px 0;
                .iconfont {
                    color: $fontColor3;
                    margin-left: 8px;
                }
			}
		}
		// 可选优惠
		.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;
			}
        }
	}
</style>
