<template>
	<base-page>
		<view class="common-wrap common-form fixd">
			<view class="common-title">门店设置</view>
			<view class="common-form-item">
				<label class="form-label">门店名称</label>
				<view class="form-input-inline">
					<input type="text" v-model="storeData.store_name" class="form-input" />
				</view>
				<text class="form-word-aux-line">门店的名称（招牌）</text>
			</view>
			<view class="common-form-item store-img">
				<label class="form-label">门店图片</label>
				<view class="form-input-inline upload-box" @click="addImg">
					<view class="upload" v-if="storeData.store_image">
						<image :src="$util.img(storeData.store_image)" @error="$util.img(defaultImg.store)" mode="heightFix"></image>
					</view>
					<view class="upload" v-else>
						<text class="iconfont iconyunshangchuan"></text>
						<view>点击上传</view>
					</view>
				</view>
				<text class="form-word-aux-line">门店图片在PC及移动端对应页面及列表作为门店标志出现。建议图片尺寸：100 * 100像素，图片格式：jpg、png、jpeg。</text>
			</view>
			
			<view class="common-form-item">
				<label class="form-label">门店类型</label>
				<view class="form-inline">
					<radio-group @change="storeTypeChange" class="form-radio-group">
						<label class="radio form-radio-item">
							<radio value="directsale" :checked="storeData.store_type=='directsale'"/>直营店
						</label>
						<label class="radio form-radio-item">
							<radio value="franchise" :checked="storeData.store_type=='franchise'" />加盟店
						</label>
					</radio-group>
				</view>
			</view>
			
			<view class="common-form-item">
				<label class="form-label">门店电话</label>
				<view class="form-input-inline">
					<input type="number" v-model="storeData.telphone" class="form-input" />
				</view>
			</view>
			
			<view class="common-form-item">
				<label class="form-label">门店地址</label>
				<view class="form-inline">
					<pick-regions ref="selectArea" :default-regions="defaultRegions" @getRegions="handleGetRegions">
						<view class="form-input-inline long">
							<view class="form-input">{{storeData.full_address}}</view>
						</view>
					</pick-regions>
				</view>
			</view>
			<view class="common-form-item">
				<label class="form-label"></label>
				<view class="form-inline">
					<view class="form-input-inline long">
						<input type="text" v-model="storeData.address" class="form-input" />
					</view>
					<view class="form-input-inline short btn" @click="getlatlng()">查找</view>
				</view>
			</view>
			
			<view class="common-form-item store-img">
				<label class="form-label">地图定位</label>
				<view class="form-inline">
					<view class="map-box">
						<image src="../../static/location.png" class="map-icon"></image>
						<map style="width: 100%; height: 100%;" :latitude="storeData.latitude" :longitude="storeData.longitude" :markers="covers" @markertap="markertap" @regionchange="tap">
						</map>
					</view>
				</view>
			</view>
			
			<view class="common-btn-wrap">
				<button type="default" class="screen-btn" @click="saveFn">保存</button>
				<button type="default" class="" @click="$util.redirectTo('/pages/store/index')">返回</button>
			</view>
			<nc-loading :layer-background="{ background: 'rgba(255,255,255,.8)' }" ref="loading"></nc-loading>
		</view>
	</base-page>
</template>

<script>
	export default {
		data() {
			return {
				storeData:{
					'store_name' : '',
					'store_image' : '',
					'status' : 0,
					'telphone' : '',
					'open_date' : '',
					'is_o2o' : 0,
					'is_pickup' : 0,
					'time_type' : 0,
					'start_time' : '00:00',
					'end_time' : '23:59',
					'stock_type' : 'all',
					'time_week' : '',
					'latitude' : 39.909,
					'longitude' : 116.39742,
					'province_id' : 110000,
					'city_id' : 110100,
					'district_id' : 110101,
					'address' : '西长安街1号',
					'full_address' : '北京市-北京市-东城区',
					'store_type' : 'directsale'
				},
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/location.png'
				}],
				defaultRegions:[],
			};
		},
		onLoad() {},
		onShow() {
			this.getData();
			// uni.setLocale('zh-Hans')
		},
		methods: {
			getData() {
				this.$api.sendRequest({
					url: '/store/storeapi/store/info',
					success: res => {
						if (res.code >= 0) {
							this.storeData = res.data;
							this.storeData.start_time = this.timeFormat(this.storeData.start_time);
							this.storeData.end_time = this.timeFormat(this.storeData.end_time);
							this.defaultRegions = [this.storeData.province_id, this.storeData.city_id, this.storeData.district_id];
							
							this.$refs.selectArea.handleDefaultRegions();
							this.$refs.loading.hide();
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				});
			},
			addImg() {
				this.$util.upload(1, {
					path: 'image'
				}, res => {
					if (res.length > 0) {
						
						this.storeData.store_image = res[0];
						this.$forceUpdate();
					}
				});
			},
			 
			tap(e){
				if(e.detail && e.detail.centerLocation){
					this.storeData.latitude = e.detail.centerLocation.latitude;
					this.storeData.longitude = e.detail.centerLocation.longitude;
					this.covers = [
						{
							latitude: this.storeData.latitude,
							longitude: this.storeData.longitude,
							iconPath: '/static/location.png'
						}
					]
					this.getAddress();
					this.$forceUpdate();
				}
			},
			handleGetRegions(regions) {
				this.storeData.full_address = '';
				this.storeData.full_address += regions[0] != undefined ? regions[0].label : '';
				this.storeData.full_address += regions[1] != undefined ? '-' + regions[1].label : '';
				this.storeData.full_address += regions[2] != undefined ? '-' + regions[2].label : '';
				// this.storeData.address = '';
				
				this.storeData.province_id = regions[0] != undefined ? regions[0].value : '';
				this.storeData.city_id = regions[1] != undefined ?  regions[1].value : '';
				this.storeData.district_id = regions[2] != undefined ? regions[2].value : '';
				 this.defaultRegions = [this.storeData.province_id, this.storeData.city_id, this.storeData.district_id];
				 this.$forceUpdate();
				 this.getlatlng();
				 
			},
			//获取详细地址
			getAddress() {
				let value = this.storeData.latitude+','+this.storeData.longitude;
				this.$api.sendRequest({
					url: '/cashier/storeapi/address/tranaddressinfo',
					data: {
						latlng: value
					},
					success: res => {
						if (res.code == 0) {
							this.storeData.full_address = '';
							this.storeData.full_address += res.data.province != undefined ? res.data.province : '';
							this.storeData.full_address += res.data.city != undefined ? '-' + res.data.city : '';
							this.storeData.full_address += res.data.district != undefined ? '-' + res.data.district : '';
							this.storeData.address = res.data.address != undefined ? res.data.address : '';
							
							this.storeData.province_id = res.data.province_id != undefined ? res.data.province_id : '';
							this.storeData.city_id = res.data.city_id != undefined ?  res.data.city_id : '';
							this.storeData.district_id = res.data.district_id != undefined ?  res.data.district_id : '';
							this.defaultRegions = [this.storeData.province_id, this.storeData.city_id, this.storeData.district_id];
							this.$forceUpdate();
						}
					}
				});
			},
			//获取详细地址
			getlatlng() {
				let value = this.storeData.full_address+this.storeData.address;
				this.$api.sendRequest({
					url: '/cashier/storeapi/address/getaddressbyname',
					data: {
						'address': value
					},
					
					success: res => {
						if (res.code == 0) {
							this.storeData.latitude = res.data.latitude;
							this.storeData.longitude = res.data.longitude;
							// if(this.storeData.address == '') this.getAddress();
						}
					}
				});
			},
			
			storeTypeChange(e){
				this.storeData.store_type = e.detail.value;
			},
			 
			getSaveData() {
				let data = Object.assign({}, this.storeData);
				data.start_time = this.timeTurnTimeStamp(data.start_time);
				data.end_time = this.timeTurnTimeStamp(data.end_time);
				data.time_week = this.storeData.time_week.toString();
				return data;
			},
			checkData(data){
				if(data.store_name == ''){
					this.$util.showToast({
						title: '请输入门店名称'
					});
					return false;
				}
				
				if(!data.district_id || data.address == ''){
					this.$util.showToast({
						title: '请选择门店地址'
					});
					return false;
				}
				return true;
			},
			saveFn() {
				let data = this.getSaveData();
				if(this.checkData(data)){
					if(this.flag) return false;
					this.flag = true;
					this.$api.sendRequest({
						url: '/cashier/storeapi/store/editstore',
						data: data,
						success: res => {
							this.flag = false;
							this.$util.showToast({
								title: res.message
							});
							if(res.code >= 0){
								this.$refs.loading.show();
								this.getData();
							}
						}
					});
				}
			},
			timeTurnTimeStamp(_time){
				let data = _time.split(":");
				return data[0]*3600 + data[1]*60;
			},
			timeFormat(time){
				let h = time / 3600;
				
				let i = time % 3600 / 60;
				h = h < 10 ? '0'+h : h; 
				i = i < 10 ? '0'+i : i;
				return h+':'+i;
			}
		}
	}
</script>

<style lang="scss">
	.common-wrap {
		padding: 30rpx;
		background-color: #fff;
	}
	.upload-box{
		border: .01rem dashed #e6e6e6!important;
		width: 2.5rem!important;
		height: 1.2rem!important;
		display: flex;
		align-items: center;
		justify-content: center;
		.upload{
			text-align: center;
			color: #5a5a5a;
			.iconfont{
				font-size: 0.3rem;
				
			}
			image{
				max-width: 100%;
				height: 1.2rem!important;
			}
		}
	}
	.store-img{
		align-items: flex-start!important;
	}
	.map-box{
		width: 6.5rem;
		height: 5rem;
		position: relative;
		.map-icon{
			position: absolute;
			top: calc(50% - 0.36rem);
			left: calc(50% - 0.18rem);
			width: 0.36rem;
			height: 0.36rem;
			z-index: 100;
		}
	}
	.form-input{
		font-size: 0.16rem;
	}
	.form-input-inline.btn{
		height: 0.37rem;
		line-height: 0.35rem;
		box-sizing: border-box;
		border: 0.01rem solid #e6e6e6;
		text-align: center;
		cursor: pointer;
	}
	.common-title{
		font-size: 0.18rem;
		margin-bottom: 0.2rem;
	}
</style>
