<template>
	<view>
		<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>


		<wd-form ref="form" :model="shopData" :rules="formRules">
			<!-- 基础信息 -->
			<wd-cell-group title="基础信息" border>
				<wd-input label="商城名称" label-width="100px" v-model="shopData.name" />

				<!-- 商城LOGO -->
				<wd-cell-group class="flex py-2 w-full" title="商城LOGO">

					<view class="ml-3">
						<yUpload v-model="shopData.logo_url" :size="1"></yUpload>
					</view>

				</wd-cell-group>

				<!-- 门头照图片 -->
				<wd-cell-group class="flex py-2 w-full" title="门头照图片">

					<view class="ml-3">
						<yUpload v-model="shopData.shop_url" :size="1"></yUpload>
					</view>

				</wd-cell-group>

				<!-- <wd-input label="联系人" label-width="100px" v-model="shopData.contact" /> -->
				<wd-input label="联系方式" label-width="100px" v-model="shopData.mobile" />
				<!-- 其他基础信息字段可以根据需要添加 -->
			</wd-cell-group>

			<!-- 地址信息 -->
			<wd-cell-group class="flex py-2 w-full" title="所在地区">
				<view class="ml-3">
					<!-- 省市区选择器 -->
					<uni-data-picker placeholder="请选择省市区" popup-title="请选择" :localdata="addrList" :map="{
						text: 'name',
						value: 'id',
					}" v-model="shopData.district" @change="select">
					</uni-data-picker>
				</view>
			</wd-cell-group>
			
			

			<wd-input label="详细地址" label-width="100px" v-model="shopData.detail" use-suffix-slot>
			</wd-input>
			
			<!-- 地址信息 -->
			<wd-cell-group class="flex py-2 w-full" title="经纬度">
				<view class="ml-3" style="display: flex;align-items: center;">
					{{ shopData.latlngCurrent }}
					<view>
						<wd-button @click="getLoa">定位</wd-button>
					</view>
				</view>
			</wd-cell-group>

			<!-- 其他信息 -->
			<wd-cell-group title="其他信息" border>
				<!-- 云喇叭通知表单项 -->
				<wd-form-item label="云喇叭通知：" prop="zhangyou_device_name">
					<wd-input v-model="shopData.zhangyou_device_name" placeholder="请输入设备编号" clearable />

					<div style="color: #666;font-size: 12px;">
						掌优4G云喇叭编号
					</div>
				</wd-form-item>

				<wd-form-item label="抖音门店ID：" prop="zhangyou_device_name">
					<wd-input v-model="shopData.douyin_shop_id" placeholder="请输入抖音门店ID" clearable />
				</wd-form-item>

				<wd-form-item label="支付宝门店ID：" prop="zhangyou_device_name">
					<wd-input v-model="shopData.ali_shop_id" placeholder="请输入支付宝门店ID" clearable />
				</wd-form-item>

			</wd-cell-group>

			<view class="p-3 bg-white rounded mb-2">
				<div class="name mb-2 text-xs">非营业时间下单</div>
				<view class="bg-white px-3 py-2 rounded flex items-center">
					<wd-switch v-model="shopData.is_opening" :active-value="1" :inactive-value="0" />
				</view>
			</view>

			<view class="p-3 bg-white rounded mb-2">
				<div class="name mb-2 text-xs">状态</div>
				<view class="bg-white px-3 py-2 rounded flex items-center">
					<wd-switch v-model="shopData.status" :active-value="1" :inactive-value="0" />
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="mt-2 px-12 py-3 bg-slate-50">
				<wd-button type="primary" size="large" @click="handleSubmit" block>
					保存
				</wd-button>
			</view>
		</wd-form>
	</view>
</template>

<script>
	import {
		ref
	} from 'vue';
	import yUpload from "@/components/yUpload/index.vue";
	import uniDataPicker from "@/components/uni-data-picker/components/uni-data-picker/uni-data-picker.vue";
	import system from '@/api/modules/system.js';
	import index from '@/api/mall/index.js';
	import kevyloading from "@/components/kevy-loading/kevy-loading";
	import utils from '@/utils/utils.js'
	import shop from '@/api/store/shop.js';


	/**
	 * 从本地存储中获取用户信息
	 */
	const user_info = uni.getStorageSync("user_info");

	export default {
		components: {
			yUpload,
			uniDataPicker,
			kevyloading
		},
		data() {
			return {
				utils,
				user_info,
				// 表单数据
				shopData: {
					name: '',
					logo_url: '',
					mobile: '',
					district: null,
					latlngCurrent: '',
					pay_time: '',
					confirm_time: '',
					sale_time: '',
					pay_type: [],
					delivery_type: [],
					after_sale_name: '',
					after_sale_phone: '',
					after_sale_address: '',
					ali_express_app_code: '',
					zhangyou_device_name: '',
				},
				shippingOptions: [{
						label: "邮寄",
						value: 1
					},
					{
						label: "自提",
						value: 2
					},
				],
				// 表单验证规则
				formRules: {
					name: [{
						required: true,
						message: "请输入门店名称",
						trigger: "blur"
					}],
					// 在这里添加其他字段的验证规则
				},
				// 地区选择器的数据
				addrList: [
					// 在这里添加省市区的数据
				],
				loading: false
			};
		},
		onLoad(e) {
			this.getDistrict();
			this.getShopSetting();
		},
		methods: {
			/**
			 * 获取省市区数据
			 */
			async getDistrict() {
				const res = await system.getDistrict();
				this.addrList = res.data;
			},

			/**
			 * 获取门店设置
			 */
			async getShopSetting() {
				this.loading = true;
				const res = await index.getShopSetting();

				if (res.data.id) {
					this.shopData = res.data;
				}
				this.loading = false;
			},

			/**
			 * 处理省市区选择变化
			 * @param {Object} value - 选择的值
			 */
			areaChange(value) {
				// 处理省市区选择变化的逻辑
			},

			/**
			 * 处理省市区选择
			 * @param {Object} detail - 选择器详细信息
			 */
			select({
				detail
			}) {
				if (detail.value.length) {
					const [province_id, city_id, district_id] = detail.value.map(
						(el) => el.value
					);

					this.shopData.province_id = province_id;
					this.shopData.city_id = city_id;
					this.shopData.district_id = district_id;
					this.shopData.district = [province_id, city_id, district_id];
				}
			},

			getLoa() {
				let that = this
				
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						
						that.shopData.latitude = res.latitude;
						that.shopData.longitude = res.longitude;
						
						that.shopData.latlngCurrent = res.latitude + ',' + res.longitude;
						
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '定位失败'
						})
					}
				});
				
				return
				
				if (navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(function(position) {
						that.shopData.latitude = position.coords.latitude;
						that.shopData.longitude = position.coords.longitude;

						that.shopData.latlngCurrent = position.coords.latitude + ',' + position.coords.longitude;
						console.log(position)
						// 在这里处理获取到的经纬度
					}, function(error) {
						// 处理获取经纬度失败的情况
						console.log(error)
						uni.showToast({
							icon: 'none',
							title: '定位失败'
						})
					});
				} else {
					// 浏览器不支持 Geolocation 接口
					console.log('浏览器不支持 Geolocation 接口')
					uni.showToast({
						icon: 'none',
						title: '当前浏览器不支持定位'
					})
				}
			},

			/**
			 * 处理表单提交
			 */
			async handleSubmit() {
				// 处理表单提交的逻辑
				const res = await shop.edit({
					...this.shopData
				});

				if (res.code == 0) {
					setTimeout(() => {
						uni.showToast({
							title: '保存成功!',
							icon: 'success'
						});
					}, 100);
					uni.navigateBack()
				}
			},
		},
	};
</script>

<style>
	/* 在这里添加样式，根据需要自定义表单样式 */
</style>