<template>
	<view>
		<view class="create-form">
			<view class="header">
				<view @click="updLogo">
					<image class="logo" v-if="cover.showpath" :src="cover.showpath" mode="aspectFill" />
					<image class="logo" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
				</view>
				<view class="inputs">
					<input type="text" v-model="name" placeholder="门店/部门名称" />
				</view>
				<view class="inputs">
					<input type="number" v-model="mobile" placeholder="门店联系电话" />
				</view>
			</view>
			<view class="info">
				<view class="inputs">
					<label class="inputs-label">营业时间</label>
					<picker mode="time" @change="pickerTime" :value="startTime" data-key="startTime">
						<view class="time-text">
							{{startTime  || '选择营业时间'}}
							<uni-icons class="time-icon" type="arrowdown" size="18" color="#999"></uni-icons>
						</view>
					</picker>
				</view>
				<view class="inputs">
					<label class="inputs-label">闭店时间</label>
					<picker mode="time" @change="pickerTime" :value="endTime" data-key="endTime">
						<view class="time-text">
							{{endTime || '选择闭店时间'}}
							<uni-icons class="time-icon" type="arrowdown" size="18" color="#999"></uni-icons>
						</view>
					</picker>
				</view>
				<view class="inputs addrss-input">
					<label class="inputs-label">门店地址</label>
					<textarea class="inputs-textarea" v-model="address" placeholder="输入门店地址" auto-height/>
					<view class="addrss-icon" @click="onLocation">
						<uni-icons type="location-filled" size="20" color="#c82626"></uni-icons>
					</view>
				</view>
			</view>
			<view class="info">
				<view class="inputs">
					<label class="inputs-label">门店简介</label>
					<textarea class="inputs-textarea" v-model="description" placeholder="门店简介..." />
				</view>
			</view>
		</view>
		<view class="create-btns">
			<button class="item-btn btn-submit" type="default" @click="createShop">{{type === 'add' ? '创建': '保存'}}</button>
			<button class="item-btn btn-delete" type="default" @click="onDeleteShop" v-if="type === 'edit'">删除</button>
		</view>
	</view>
</template>

<script>
	import { create, putShop, deleteShop, editInfo } from '@/apis/interfaces/shop'
	import { uploads } from '@/apis/interfaces/uploading'
	export default {
		data() {
			return {
				type		: 'add',
				id			: '',
				cover		: {
					showpath: '',
					path	: '',
				},
				name		: '',
				mobile		: '',
				address		: '',
				startTime	: '',
				endTime		: '',
				description	: '',
				latitude	: '',
				longitude	: ''
			};
		},
		onLoad() {
			if(this.$Route.query.id){
				this.type = 'edit'
				this.getInfo()
			}
		},
		methods:{
			// 获取编辑信息
			getInfo(){
				editInfo(this.$Route.query.id).then(res => {
					this.id			= res.store_id
					this.cover 		= res.cover
					this.name  		= res.name
					this.mobile		= res.mobile
					this.address	= res.address
					this.startTime	= res.start_time
					this.endTime	= res.end_time
					this.description= res.description
					this.latitude	= res.latitude
					this.longitude	= res.longitude
				})
			},
			// 获取地址
			onLocation(){
				uni.chooseLocation({
					success: res => {
						this.address = res.address
						this.longitude = res.longitude
						this.latitude = res.latitude
					},
					fail: err => {
						uni.showToast({
							title: err,
							icon : 'none'
						})
					}
				})
			},
			// 选择营业时间
			pickerTime(e){
				this[e.target.dataset.key] = e.detail.value
			},
			// 编辑创建
			createShop(){
				let data = {
					cover	    : this.cover.path,
					name	    : this.name,
					mobile	    : this.mobile,
					address	    : this.address,
					latitude    : this.latitude,
					longitude   : this.longitude,
					description : this.description,
					start_time	: this.startTime,
					end_time	: this.endTime
				}
				
				if(this.type === 'edit'){
					putShop(this.id, {...data}).then(res => {
						uni.showModal({
							title		: '提示',
							content		: res,
							showCancel	: false,
							success		: modalRes => {
								this.$Router.back()
							}
						})
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
					return
				}
				create({...data}).then(res => {
					uni.showModal({
						title		: '提示',
						content		: res,
						showCancel	: false,
						success		: modalRes => {
							this.$Router.back()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 删除门店
			onDeleteShop(){
				deleteShop(this.id).then(res => {
					uni.showModal({
						title		: '提示',
						content		: res,
						showCancel	: false,
						success		: modalRes => {
							this.$Router.back()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 上传logo
			updLogo(){
				uni.chooseImage({
					crop: { width: 188, height: 188 },
					success: path => {
						uploads([{
							name: 'logo',
							uri : path.tempFilePaths[0]
						}]).then(res => {
							this.cover = {
								showpath: res.url[0],
								path: res.path[0]
							}
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 门店信息
	.create-form{
		.header{
			position: relative;
			background: white;
			padding-left: $padding + 150;
			.logo{
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				position: absolute;
				left: $padding;
				top: 26rpx;
				border: dashed 2rpx $border-color;
				box-sizing: border-box;
			}
			.inputs{
				position: relative;
				padding-right: $padding;
				input,
				.time-text{
					line-height: 80rpx;
					height: 80rpx;
					font-size: $title-size-lg;
				}
				&::after{
					position: absolute;
					left: 0;
					bottom: 0;
					right: 0;
					content: " ";
					height: 1rpx;
					background: $border-color;
				}
				&:last-child::after{
					display: none;
				}
				.time-text{
					padding-right: 80rpx;
					.time-icon{
						position: absolute;
						height: 80rpx;
						line-height: 80rpx;
						text-align: right;
						width: 80rpx;
						right: $padding;
						top: 0;
					}
				}
			}
		}
		.info{
			@extend .header;
			margin-top: $margin;
			padding-left: 0;
			background: white;
			.inputs{
				padding-left: $padding + 150;
				.inputs-label{
					position: absolute;
					left: $padding;
					top: 0;
					font-size: $title-size-lg;
					line-height: 80rpx;
					height: 80rpx;
					width: 150rpx;
				}
				.inputs-textarea{
					width: 100%;
					padding: 20rpx 0;
					height: 160rpx;
					font-size: $title-size-lg;
					line-height: 40rpx;
				}
				&.addrss-input{
					padding-right: $padding + 100;
					.addrss-icon{
						position: absolute;
						height: 80rpx;
						line-height: 80rpx;
						text-align: right;
						width: 80rpx;
						right: $padding;
						top: 0;
					}
				}
			}
		}
	}
	// 按钮组
	.create-btns{
		padding: $padding;
		.item-btn{
			border-radius: 0;
			background: white;
			font-size: $title-size;
			line-height: 90rpx;
			height: 90rpx;
			&::after{
				border: none;
			}
		}
		.btn-submit{
			background: $text-price;
			color: white;
			font-weight: bold;
			margin-bottom: $margin;
		}
		.btn-delete{
			border: solid 1rpx $border-color;
			color: $text-gray;
		}
	}
</style>
