<template>
	<view class="add-service">
		<view class="fixed-header">
			<view class="tip" v-if="formData.back_text && formData.state == 4">
				<image
					src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/390d9d12-3c30-4639-9ac3-7b604b606b6d.png"
					class="tip-icon"></image>
				<text>{{ formData.back_text }}</text>
			</view>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 服务名称 -->
			<view class="form-item">
				<text class="form-label required">服务名称</text>
				<input type="text" v-model="formData.title" placeholder="请输入服务名称" placeholder-class="placeholder"
					class="form-input" />
			</view>

			<!-- 服务价格 -->
			<view class="form-item" style="flex-wrap: wrap;">
				<text class="form-label required">服务定价</text>
				<input type="digit" v-model.number="formData.line_price" placeholder="请输入定价，最多两位小数"
					placeholder-class="placeholder" class="form-input" @input="inpPrice2" @blur="inpPrice2"
					@confirm="inpPrice2" step="0.01" />
				<view class="price-tip">
					<text class="price-tip-card">服务的基础定价，未参与任何优惠的价格</text>
				</view>
			</view>

			<!-- 服务价格 -->
			<view class="form-item" style="flex-wrap: wrap;">
				<text class="form-label required">服务售价</text>
				<input type="digit" v-model.number="formData.server_price" placeholder="请输入售价，最多两位小数"
					placeholder-class="placeholder" class="form-input" @input="inpPrice" @blur="inpPrice"
					@confirm="inpPrice" step="0.01" />
				<view class="price-tip">
					<text class="price-tip-card">服务参与单品优惠后的价格</text>
				</view>
			</view>

			<!-- 服务分类 -->
			<view class="form-item">
				<text class="form-label required">服务分类</text>
				<view class="form-right" @click="openServiceTypePicker">
					<text :class="[
              'form-value',
              formData.first_class_id ? '' : 'placeholder',
            ]">
						{{ serviceType || "选择分类" }}
					</text>
					<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/arrow_right.png"
						class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 服务子类 -->
			<view class="form-item" v-if="showCategory">
				<text class="form-label required">服务子类</text>
				<view class="form-right" @click="openCategoryPicker">
					<text :class="[
              'form-value',
              formData.second_class_id ? '' : 'placeholder',
            ]">
						{{ category || "选择子类" }}
					</text>
					<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/arrow_right.png"
						class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 是否允许该服务在门店售卖 -->
			<view class="form-item shopsale-box" v-if="artisanType == 1">
				<view class="form-label required">
					是否允许该服务在门店端售卖，以供门店下单购买。
					{{
            showShopPrice
              ? "门店下单购买后，您需到上门至门店进行服务，门店端展示价格为"
              : ""
          }}
					<text style="color: #e8101e" v-if="showShopPrice">{{
            shopPrice
          }}</text>
					{{ showShopPrice ? "元。" : "" }}
				</view>
				<view class="shopsale-change">
					<view class="shopsale-option" @click="changeSale(2)">
						<agree-radio :isAgree="formData.sj_see == 2"></agree-radio>
						<text class="option-text">允许</text>
					</view>
					<view class="shopsale-option" @click="changeSale(1)">
						<agree-radio :isAgree="formData.sj_see == 1"></agree-radio>
						<text class="option-text">不允许</text>
					</view>
				</view>
			</view>

			<!-- 服务时间 -->
			<view class="form-item">
				<text class="form-label required">服务时长</text>
				<input type="number" v-model="formData.server_time" placeholder="请输入服务时间"
					placeholder-class="placeholder" class="form-input" />
				<text class="pr-240">分钟</text>
			</view>

			<!-- 服务简介 -->
			<!-- <view class="form-item textarea-item">
        <text class="form-label">服务简介</text>
        <textarea 
          v-model="formData.detail"
          placeholder="详细描述商品的购买详情、使用情况及出售原因能够更快的出售商品哦~"
          placeholder-class="placeholder"
          class="form-textarea"
		  maxlength="-1"
        />
      </view> -->

			<view class="form-step">
				<view class="form-item">
					<text class="form-label">图文详情</text>
					<view class="form-detail">
						<text @click="goImgAndText">{{
              formData.graphic_details ? "已设置" : "去设置"
            }}</text>
					</view>
				</view>
			</view>

			<!-- 服务简介 -->
			<view class="detail-card">
				<view class="detail-title">
					<text class="form-label">服务简介</text>
				</view>

				<view class="detail-row">
					<text class="form-label required">服务内容</text>
					<view class="detail-textarea-wrap">
						<textarea class="detail-textarea" v-model="detailForm.effect" placeholder="请输入服务内容"
							placeholder-class="placeholder" maxlength="200"></textarea>
						<text class="detail-count">{{(detailForm.effect || '').length}}/200</text>
					</view>
				</view>

				<view class="detail-row">
					<text class="form-label required">适用人群</text>
					<view class="detail-textarea-wrap">
						<textarea class="detail-textarea" v-model="detailForm.crowd"
							placeholder="请输入不适用人群，例如：未成年人/孕妇不适用" placeholder-class="placeholder"
							maxlength="200"></textarea>
						<text class="detail-count">{{(detailForm.crowd || '').length}}/200</text>
					</view>
				</view>

				<view class="detail-row">
					<text class="form-label">产品清单</text>
					<view class="detail-textarea-wrap">
						<textarea class="detail-textarea" v-model="detailForm.product" placeholder="请输入产品清单"
							placeholder-class="placeholder" maxlength="200"></textarea>
						<text class="detail-count">{{(detailForm.product || '').length}}/200</text>
					</view>
				</view>

				<view class="detail-row">
					<text class="form-label">适用范围</text>
					<view class="detail-textarea-wrap">
						<textarea class="detail-textarea" v-model="detailForm.scope" placeholder="请输入使用时间/适用人数"
							placeholder-class="placeholder" maxlength="200"></textarea>
						<text class="detail-count">{{(detailForm.scope || '').length}}/200</text>
					</view>
				</view>

				<view class="detail-row">
					<text class="form-label">温馨提示</text>
					<view class="detail-textarea-wrap">
						<textarea class="detail-textarea" v-model="detailForm.tips" placeholder="请输入其他注意事项"
							placeholder-class="placeholder" maxlength="200"></textarea>
						<text class="detail-count">{{(detailForm.tips || '').length}}/200</text>
					</view>
				</view>
			</view>
			<view class="form-step">
				<view class="form-item">
					<text class="form-label required">服务流程</text>
					<text @click="addStep">添加</text>
				</view>
				<view class="step" v-for="(item, i) in formData.process">
					<text class="form-label">第{{ i + 1 }}步</text>
					<input type="text" class="step-inp" v-model="formData.process[i].text" />
					<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/delete_icon.png"
						class="delete-icon" mode="aspectFit" @click="deleteStep(i)"></image>
				</view>
			</view>

			<!-- 购买须知 -->
			<!-- <view class="form-item textarea-item">
        <text class="form-label">购买须知</text>
        <textarea 
          v-model="formData.purchase_notes"
          placeholder="详细描述商品的购买详情、使用情况及出售原因能够更快的出售商品哦~"
          placeholder-class="placeholder"
          class="form-textarea"
		  maxlength="-1"
        />
      </view> -->
			<!-- <circle-progress 
	       :progress="progress"
	       :size="300"
	       :strokeWidth="15"
	       color="rgba(252, 67, 124, 1)"
	       backgroundColor="rgba(245, 245, 245, 1)"
	     /> -->

			<!-- 上传短视频 -->
			<view class="form-item-up upload-item">
				<view>
					<text class="form-label">上传短视频</text>
					<text class="upload-tip">(仅可上传1个视频)</text>
				</view>
				<!-- <upload-video
			@addVideo="addVideo"
			@deleteVideo="deleteVideo"
			:video="formData.video"></upload-video> -->
				<ali-oss-uploader :max-count="1" :max-size="100" :type="artisanType + 1"
					:user-id="formData.publish_user_id" :width="'654rpx'" :kind="2" :file-string="formData.video"
					accept="video/*" button-text="上传视频" @success="uploadVideoSuc" @error="uploadVideoErr"
					@delete="uploadVideoDel" @ckeckisShowPer="ckeckisShowPer" @ckecknowQer="ckecknowQer">
				</ali-oss-uploader>
			</view>

			<!-- 服务图片 -->
			<view class="form-item-up upload-item">
				<view>
					<text class="form-label required">服务图片</text>
					<text class="upload-tip">(仅可上传9个图片)</text>
				</view>
				<!-- <upload-img
        	:photo="formData.photo"
        	:maxNum="9"
			:width="'654rpx'"
        	@addImg="addImg"
        	@deleteImage="deleteImage"></upload-img> -->
				<ali-oss-uploader v-model="formData.photo" :max-count="9" :max-size="5" :width="'654rpx'"
					:type="artisanType + 1" :user-id="formData.publish_user_id" button-text="上传图片"
					tips="最多上传3张图片，每张不超过5MB" @success="onUploadSuccess" @error="onUploadError" @delete="onFileDelete"
					@ckeckisShowPer="ckeckisShowPer" @ckecknowQer="ckecknowQer">
				</ali-oss-uploader>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<button class="btn-draft" @click="saveDraft" v-if="!state || state == 0">
				存草稿
			</button>
			<button class="btn-submit" @click="submitForm">提交</button>
		</view>

		<!-- 服务类型选择器 -->
		<popup-picker :show="showServiceTypePicker" title="选择服务类型" :columns="[serviceTypes]"
			:value="[selectedServiceTypeIndex]" @close="showServiceTypePicker = false"
			@confirm="handleServiceTypeConfirm" />

		<!-- 服务分类选择器 -->
		<PopupPickerMy :show="showCategoryPicker" title="选择服务分类" :columns="[categoryAll]" :value="selectedCategoryIndex"
			@close="showCategoryPicker = false" @confirm="handleCategoryConfirm" />
		<view class="mask" v-if="isShow" @click="isShow = false"></view>

		<!-- 获取权限提示匡内容 -->
		<view class="permission" :class="{ transform: isShowPer && nowQer === 'xc' }">
			<view class="per-tit">美融融plus 对储存空间/照片权限申请说明</view>
			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中读取相册和文件内容。</view>
		</view>
		<view class="permission" :class="{ transform: isShowPer && nowQer === 'xj' }">
			<view class="per-tit">美融融plus 对相机拍摄权限申请说明</view>
			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中所需内容。</view>
		</view>

		

	</view>
</template>

<script>
	import request from "../../utils/request";
	import PopupPicker from "@/components/popup-picker/popup-picker.vue";
	import PopupPickerMy from "@/components/popup-picker/PopupPickerMy.vue";
	import CircleProgress from "@/components/circle-progress/circle-progress.vue";
	import sparkMD5 from "spark-md5"; // 引入MD5计算库
	import {
		debounce
	} from "@/utils/debounce.js";
	import AliOssUploader from "../../components/ali-oss-uploader/ali-oss-uploader.vue";
	import permissionUtils from "../../utils/per";
	import locationService from "../../utils/locationService";
	import _public from "../../utils/public";

	export default {
		components: {
			PopupPicker,
			CircleProgress,
			AliOssUploader,
			PopupPickerMy,
		},
		data() {
			return {
				artisanType: getApp().globalData.artisanType,
				nowQer: "xc",
				progress: 0,
				isShow: false,
				state: null,
				isShowPer: false,
				formData: {
					publish_user_id: null,
					server_kind: getApp().globalData.artisanType,
					title: "",
					server_price: "",
					line_price: '',
					server_time: "",
					first_class_id: "",
					second_class_id: "",
					detail: [],
					process: [],
					video: "",
					photo: [],
					graphic_details: "",
					sj_see: null, // 1代表商家端不可见  2代表商家端可见
					// 新增的五个独立字段
					efficacy: "",
					crowd: "",
					product: "",
					scope: "",
					prompt: "",
				},
				ratio: null,
				// 服务简介部分
				detailForm: {
					effect: "",
					crowd: "",
					product: "",
					scope: "",
					tips: "",
				},
				detailOtherList: [],

				serviceTypes: [], // 服务分类
				categoryAll: [],
				showServiceTypePicker: false,
				showCategoryPicker: false,
				selectedServiceTypeIndex: 0,
				selectedCategoryIndex: [0],
				serviceType: "",
				category: "",
				imagesList: [], // 临时图片地址
				addDetailList: [],
				showCategory: false,
				showProgress: false,
				publish_user_id: null,
				isAdd: false,
				isDraft: false,
			};
		},
		onShow() {
			uni.$on("updateGraphicDetails", (data) => {
				this.$set(this.formData, "graphic_details", JSON.stringify(data));
				// 这里可以添加其他处理逻辑
			});
		},
		onLoad(options) {
			this.state = options.state || "";
			if (options.id) {
				this.formData.id = options.id;
				this.getInit();
			} else {
				request.post("/sj/firstclass", {}).then((res) => {
					this.serviceTypes = this.serviceTypes.concat(res.data);
				});
			}
			// 判断是否显示上门提醒弹窗
			const notShow = uni.getStorageSync('addServiceReminderNotShow');
			this.getUserInfo();
		},
		computed: {
			showShopPrice() {
				return (
					this.artisanType == 1 &&
					this.formData.sj_see == 2 &&
					this.formData.server_price &&
					this.formData.first_class_id
				);
			},
			shopPrice() {
				return _public.roundUpToTwoDecimals(
					this.formData.server_price,
					this.ratio
				);
			},
		},
		methods: {
			inpPrice2(e) {
				let that = this;
				let value = e.detail.value;

				// 1. 移除非数字和小数点
				value = value.replace(/[^\d.]/g, '');

				// 2. 确保只有一个小数点
				const parts = value.split('.');
				if (parts.length > 2) {
					value = parts[0] + '.' + parts.slice(1).join('');
				}

				// 3. 限制小数点后最多一位
				if (parts.length > 1) {
					value = parts[0] + '.' + parts[1].slice(0, 2);
				}
				// 4. 如果以小数点开头，前面补0
				if (value.startsWith('.')) {
					value = '0' + value;
				}
				that.$set(that.formData, 'line_price', value);
			},
			// 服务简介部分
			initDetailForm(detail = []) {
				// 先重置 detailForm 为空
				this.detailForm = {
					effect: "",
					crowd: "",
					product: "",
					scope: "",
					tips: "",
				};
				this.detailOtherList = [];

				// 优先从后端返回的新字段赋值
				if (this.formData.efficacy) this.detailForm.effect = this.formData.efficacy;
				if (this.formData.crowd) this.detailForm.crowd = this.formData.crowd;
				if (this.formData.product) this.detailForm.product = this.formData.product;
				if (this.formData.scope) this.detailForm.scope = this.formData.scope;
				if (this.formData.prompt) this.detailForm.tips = this.formData.prompt;

				// 如果新字段都为空，则尝试从旧的 detail 数组中提取（兼容旧数据）
				if (!this.formData.efficacy && !this.formData.crowd && !this.formData.product) {
					(detail || []).forEach((item) => {
						if (item.title === "服务内容" || item.title === "服务功效") {
							this.detailForm.effect = item.text || "";
						} else if (item.title === "适用人群") {
							this.detailForm.crowd = item.text || "";
						} else if (item.title === "产品清单") {
							this.detailForm.product = item.text || "";
						} else if (item.title === "适用范围" || item.title === "使用范围") {
							this.detailForm.scope = item.text || "";
						} else if (item.title === "温馨提示") {
							this.detailForm.tips = item.text || "";
						} else {
							this.detailOtherList.push({
								title: item.title || "",
								text: item.text || "",
								photo: item.photo || "",
							});
						}
					});
				}
			},

			syncDetailForm() {
				// 将 detailForm 的值映射到 formData 的新字段
				this.formData.efficacy = (this.detailForm.effect || "").trim();
				this.formData.crowd = (this.detailForm.crowd || "").trim();
				this.formData.product = (this.detailForm.product || "").trim();
				this.formData.scope = (this.detailForm.scope || "").trim();
				this.formData.prompt = (this.detailForm.tips || "").trim();
			},

			checkDetailForm() {
				if (!this.detailForm.effect || !this.detailForm.effect.trim()) {
					uni.showToast({
						title: "请输入服务内容",
						icon: "none",
					});
					return false;
				}
				if (!this.detailForm.crowd || !this.detailForm.crowd.trim()) {
					uni.showToast({
						title: "请输入适用人群",
						icon: "none",
					});
					return false;
				}
				// if (!this.detailForm.product || !this.detailForm.product.trim()) {
				// 	uni.showToast({
				// 		title: "请输入产品清单",
				// 		icon: "none",
				// 	});
				// 	return false;
				// }
				return true;
			},

			goImgAndText() {
				uni.navigateTo({
					url: `/pages/shop/add-img-text?list=${this.formData.graphic_details}`,
				});
			},
			ckeckisShowPer(value) {
				console.log("ckeckisShowPer==========", value);
				this.isShowPer = value;
			},
			ckecknowQer(value) {
				this.nowQer = value;
			},
			addVideo(value) {
				this.formData.video = value;
			},
			// addImg(arr) {
			// 	this.formData.photo = this.formData.photo.concat(arr);
			// },
			// deleteImage(index) {
			//   this.formData.photo.splice(index, 1)
			// },
			onUploadSuccess(file) {
				console.log("添加的图片", this.formData.photo);
			},
			onUploadError(error) {
				console.error("上传失败:", error);
				uni.showToast({
					title: "上传失败",
					icon: "none",
				});
			},
			onFileDelete(file, index) {
				console.log("删除文件:", this.formData.photo, index);
			},
			uploadVideoSuc(file) {
				this.formData.video = file;
			},
			uploadVideoErr() {},
			uploadVideoDel() {
				this.formData.video = null;
			},
			async getInit() {
				const firstclass = await request.post("/sj/firstclass");
				this.serviceTypes = this.serviceTypes.concat(firstclass.data);

				await request
					.post("/sj/servers/detail", {
						id: this.formData.id
					})
					.then((res) => {
						// 直接合并所有字段，避免遗漏
						this.formData = {
							...this.formData,
							...res.data
						};
						// 确保 detail 数组被保留（可能用于兼容）
						this.formData.detail = res.data.detail || [];
						// 调用初始化方法，它会优先使用新字段
						this.initDetailForm(res.data.detail || []);
						// 处理分类显示
						firstclass.data.filter((item, i) => {
							if (item.id == this.formData.first_class_id) {
								this.selectedServiceTypeIndex = i;
								this.serviceType = item.title;
								this.ratio = item.ratio;
							}
						});
					});
				request
					.post("/user/secondclass", {
						id: this.formData.first_class_id,
					})
					.then((result) => {
						if (result.data.length == 0 || !result.data) {
							this.showCategory = false;
						} else {
							this.categoryAll = result.data;
							this.categoryAll.filter((e, i) => {
								if (e.id == this.formData.second_class_id) {
									this.selectedCategoryIndex = [i];
									this.category = e.title;
								}
							});
							this.showCategory = true;
						}
					});
			},
			getUserInfo() {
				const type = this.artisanType == 1 ? 2 : this.artisanType == 2 ? 3 : 1;
				request
					.post("/user/getuser", {
						type: type,
					})
					.then((result) => {
						this.formData.publish_user_id = result.data.id;
					});
			},
			// 是否在商家端售卖
			changeSale(value) {
				this.formData.sj_see = value;
			},
			// 输入价格
			inpPrice(e) {
				let that = this;
				let value = e.detail.value;

				// 1. 移除非数字和小数点
				value = value.replace(/[^\d.]/g, "");

				// 2. 确保只有一个小数点
				const parts = value.split(".");
				if (parts.length > 2) {
					value = parts[0] + "." + parts.slice(1).join("");
				}

				// 3. 限制小数点后最多一位
				if (parts.length > 1) {
					value = parts[0] + "." + parts[1].slice(0, 2);
				}
				// 4. 如果以小数点开头，前面补0
				if (value.startsWith(".")) {
					value = "0" + value;
				}
				that.$set(that.formData, "server_price", value);
			},
			deleteStep(i) {
				this.formData.process.splice(i, 1);
			},
			addStep() {
				let i = this.formData.process.length + 1;
				let arr = {
					title: "第" + i + "步",
					text: "",
					photo: "",
				};
				this.formData.process.push(arr);
			},

			// 删除视频
			deleteVideo() {
				this.formData.video = "";
			},

			// 保存草稿
			saveDraft: debounce(function() {
				if (this.isDraft) return;
				this.syncDetailForm();
				const {
					title,
					server_price,
					line_price,
					server_time,
					first_class_id,
					second_class_id,
					detail,
					process,
					video,
					photo,
				} = this.formData;
				let item = {
					title,
					server_price,
					line_price,
					server_time,
					first_class_id,
					second_class_id,
					detail,
					process,
					video,
					photo,
				};
				// 检查是否所有字段都为空
				const isEmpty = Object.values(item).every((value) => {
					if (Array.isArray(value)) {
						return value.length === 0;
					}
					return !value;
				});

				if (isEmpty) {
					uni.showToast({
						title: "请至少填写一项内容",
						icon: "none",
					});
					return;
				}

				// 实现保存草稿逻辑
				this.formData.state = 0;
				let url = null;
				if (!this.formData.id) {
					url = "/user/serveradd";
				} else {
					url = "/user/serverchange";
				}
				request.post(url, this.formData).then((res) => {
					if (res.state == 1) {
						this.isDraft = true;
						const pages = getCurrentPages();
						const prevPage = pages[pages.length - 2]; // 上一个页面
						uni.showToast({
							title: res.msg,
							icon: "success",
							duration: 1000,
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								success: () => {
									prevPage.$vm.currentTab = 3;
									prevPage.$vm.state = 0;
									prevPage.$vm.getServicesList(); // 直接调用上个页面的刷新方法
								},
							});
						}, 500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
						this.isDraft = false;
					}
				});
			}, 500),

			// 提交表单
			submitForm: debounce(function() {
				if (this.isAdd) return;
				this.syncDetailForm();
				// 表单验证

				if (!this.formData.title) {
					uni.showToast({
						title: "请输入服务名称",
						icon: "none",
					});
					return;
				}
				if (!this.formData.line_price) {
					uni.showToast({
						title: '请输入服务定价',
						icon: 'none'
					})
					return
				}
				if (!this.formData.server_price) {
					uni.showToast({
						title: '请输入服务售价',
						icon: 'none'
					})
					return
				}

				if (!this.formData.first_class_id) {
					uni.showToast({
						title: "请选择服务分类",
						icon: "none",
					});
					return;
				}
				if (this.showCategory && !this.formData.second_class_id) {
					uni.showToast({
						title: "请选择服务子类",
						icon: "none",
					});
					return;
				}
				if (!this.formData.server_time) {
					uni.showToast({
						title: "请输入服务时长",
						icon: "none",
					});
					return;
				}
				if (this.formData.server_time < 10) {
					uni.showToast({
						title: "服务时长最短为10分钟",
						icon: "none",
					});
					return;
				}
				if (this.formData.server_time > 240) {
					uni.showToast({
						title: "服务时长最长为240分钟",
						icon: "none",
					});
					return;
				}
				if (!this.formData.sj_see && this.artisanType == 1) {
					uni.showToast({
						title: "请选择是否允许在门店端售卖",
						icon: "none",
					});
					return;
				}

				// 检查服务简介
				if (!this.checkDetailForm()) {
					return;
				}
				this.syncDetailForm();

				// 检查服务流程数组
				if (this.formData.process && this.formData.process.length > 0) {
					for (let item of this.formData.process) {
						if (!item.text) {
							uni.showToast({
								title: "请完善服务流程内容",
								icon: "none",
							});
							return;
						}
					}
				} else {
					uni.showToast({
						title: "请添加服务流程内容",
						icon: "none",
					});
					return;
				}

				// 检查视频和图片
				// if (!this.formData.video) {
				//   uni.showToast({
				//     title: '请上传服务视频',
				//     icon: 'none'
				//   })
				//   return
				// }
				if (!this.formData.photo || this.formData.photo.length === 0) {
					uni.showToast({
						title: "请上传服务图片",
						icon: "none",
					});
					return;
				}
				if (this.artisanType == 2) {
					delete this.formData.sj_see;
				}
				// 提交表单逻辑
				delete this.formData.state;
				let url = null;
				if (!this.formData.id) {
					url = "/user/serveradd";
				} else {
					url = "/user/serverupdate";
				}
				console.log(this.formData, '-0-0-0-0-0-');
				delete this.formData.shop_business_time
				delete this.formData.shop_head_photo
				delete this.formData.shop_address
				delete this.formData.shop_dependency
				delete this.formData.shop_class
				delete this.formData.team_buy
				
				

				request.post(url, this.formData).then((res) => {
					if (res.state == 1) {
						const pages = getCurrentPages();
						const prevPage = pages[pages.length - 2]; // 上一个页面
						uni.showToast({
							title: res.msg,
							icon: "success",
							duration: 600,
							mask: true,
						});
						this.isAdd = true;
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								success: () => {
									prevPage.$vm.currentTab = 1;
									prevPage.$vm.state = 1;
									prevPage.$vm.getServicesList(); // 直接调用上个页面的刷新方法
								},
							});
						}, 500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
						this.isAdd = false;
					}
				});
			}, 500),

			// 打开服务分类
			openServiceTypePicker() {
				console.log("open");
				// 实现分类选择逻辑
				this.showServiceTypePicker = true;
			},

			// 打开服务子类选择器
			openCategoryPicker() {
				// 实现子类选择逻辑
				if (!this.formData.first_class_id) {
					uni.showToast({
						title: "请先选择服务分类",
						icon: "none",
					});
				} else {
					this.showCategoryPicker = true;
				}
			},

			// 处理服务类型选择
			handleServiceTypeConfirm(e) {
				console.log("e", e);
				const selectedType = e.items[0];
				if (this.formData.first_class_id == selectedType.id) return;
				this.formData.first_class_id = selectedType.id;
				this.serviceType = selectedType.title;
				this.ratio = selectedType.ratio;
				this.formData.second_class_id = "";
				this.category = "";
				let id = selectedType.id;
				request
					.post("/user/secondclass", {
						id,
					})
					.then((res) => {
						if (res.data.length == 0 || !res.data) {
							this.showCategory = false;
							this.selectedCategoryIndex = [0];
						} else {
							this.categoryAll = res.data;
							this.showCategory = true;
							this.selectedCategoryIndex = [0];
							// this.formData.second_class_id = res.data[0].id;
							// this.category = res.data[0].title;
						}
					});
			},

			// 处理服务分类选择
			handleCategoryConfirm(e) {
				console.log(e, "selectedCategory", this.categoryAll);
				const selectedCategory = e.item;
				this.formData.second_class_id = selectedCategory.id;
				this.category = selectedCategory.title;
			},
		},
	};
</script>

<style lang="less">
	.add-service {
		padding: 24rpx 24rpx 0;
		box-sizing: border-box;
	}

	.form-container {
		margin-top: 20rpx;
	}

	.form-item {
		background-color: #fff;
		padding: 24rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-bottom: 24rpx;
	}

	.price-tip {
		width: 100%;
		margin-top: 40rpx;

		.price-tip-card {
			padding: 8rpx 12rpx;
			background: #FDF0F0;
			border-radius: 8rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #EE4853;
			line-height: 33rpx;
		}
	}

	.shopsale-box {
		flex-flow: column;
		justify-content: space-between;
		align-items: space-between;
	}

	.shopsale-change {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
	}

	.shopsale-option {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}

	.shopsale-option:last-child {
		margin-left: 220rpx;
	}

	.option-text {
		padding-left: 16rpx;
	}

	.form-item-up {
		background-color: #fff;
		padding: 24rpx;
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		align-items: flex-start;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-bottom: 24rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333333;
	}

	.form-input {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		color: #333333;
		align-items: center;
		text-align: center;
	}

	.form-right {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.form-value {
		font-size: 28rpx;
		color: #333333;
		margin-right: 16rpx;
	}

	.placeholder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}

	.textarea-item {
		padding-bottom: 30rpx;
	}

	.form-textarea {
		flex: 1;
		height: 198rpx;
		font-size: 28rpx;
		color: #333333;
		line-height: 1.5;
		margin-left: 32rpx;
	}

	.upload-item {
		padding-bottom: 30rpx;
	}

	.upload-tip {
		font-size: 24rpx;
		color: #999999;
		margin-left: 10rpx;
	}

	.upload-content {
		margin-top: 20rpx;
		position: relative;
	}

	.progress-box {
		width: 204rpx;
		height: 204rpx;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.progress-text {
		font-size: 42rpx;
		color: #ffffff;
		font-weight: 500;
	}

	.progress-lable {
		font-size: 28rpx;
		color: #ffffff;
	}

	.progress-box progress {
		/* width: 204rpx; */
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.video-preview,
	.image-preview,
	.upload-btn {
		width: 200rpx;
		height: 200rpx;
		margin-right: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.preview-video,
	.preview-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}

	.upload-btn {
		border: 2rpx dashed #dddddd;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.plus-icon {
		font-size: 60rpx;
		color: #999999;
	}

	.delete-btn {
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}

	.bottom-buttons {
		/* position: fixed;
  left: 0;
  right: 0;
  bottom: 0; */
		height: 100rpx;
		padding: 40rpx 0 64rpx;
		box-sizing: border-box;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.btn-draft,
	.btn-submit {
		width: 334rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 40rpx;
		margin: 0 24rpx;
	}

	.btn-draft {
		background-color: #ffffff;
		color: #e8101e;
		border: 2rpx solid #e8101e;
		box-sizing: border-box;
	}

	.btn-submit {
		background-color: #e8101e;
		color: #ffffff;
		width: 705rpx;
		height: 76rpx;
	}

	.form-step {
		background-color: #fff;
		margin-bottom: 24rpx;
	}

	.form-step .form-item {
		margin-bottom: 0;
	}

	.step {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx 24rpx;
	}

	.step-inp {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
		margin-left: 38rpx;
		padding: 0 24rpx;
		background-color: rgba(230, 230, 230, 0.5);
	}

	.step-textarea {
		font-size: 24rpx;
		flex: 1;
		height: 70rpx;
		border-radius: 6rpx;
		margin-left: 38rpx;
		padding: 24rpx;
		background-color: rgba(230, 230, 230, 0.5);
	}

	/* 选择器触发按钮样式 */
	.picker-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 32rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
	}

	.picker-label {
		font-size: 28rpx;
		color: #333333;
	}

	.picker-value {
		font-size: 28rpx;
		color: #666666;
	}

	.picker-arrow {
		width: 32rpx;
		height: 32rpx;
		margin-left: 16rpx;
	}

	.delete-icon {
		width: 32rpx;
		height: 32rpx;
		margin-left: 24rpx;
	}

	.form-detail {
		position: relative;
	}

	.required::before {
		content: "*";
		color: #ff0000;
		margin-right: 4rpx;
	}

	.step-inp,
	.form-input {
		height: 60rpx;
	}

	// 服务简介相关
	.detail-card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 0 24rpx 8rpx;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.detail-title {
		padding: 24rpx 0 25rpx;
	}

	.detail-title .form-label {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		line-height: 40rpx;
	}

	.detail-row {
		padding: 0 0 36rpx;
	}

	.detail-row .form-label {
		display: block;
		margin-bottom: 20rpx;
		line-height: 40rpx;
	}

	.detail-textarea-wrap {
		position: relative;
		background: #f7f7f7;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 52rpx;
		box-sizing: border-box;
	}

	.detail-textarea {
		width: 100%;
		height: 108rpx;
		min-height: 108rpx;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #333333;
		box-sizing: border-box;
	}

	.detail-count {
		position: absolute;
		right: 24rpx;
		bottom: 16rpx;
		font-size: 22rpx;
		color: #999999;
		line-height: 32rpx;
	}

	/* 平台特定样式 */
	/* #ifdef H5 */

	.form-input,
	.form-textarea {
		outline: none;
	}

	.upload-btn {
		cursor: pointer;
	}

	/* #endif */

	/* #ifdef APP-PLUS */
	.form-input {
		height: 90rpx;
	}

	.permission.transform {
		top: calc(var(--status-bar-height) + 88rpx + 30rpx);
		opacity: 1;
		visibility: visible;
	}

	/* #endif */

	/* #ifdef MP-WEIXIN */
	.form-input {
		height: 80rpx;
	}

	.bottom-buttons {
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* #endif */
	.tip {
		padding: 20rpx 30rpx;
		background: #feefec;
		font-weight: 400;
		font-size: 30rpx;
		color: #f31d2f;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;

		text-align: center;

		.tip-icon {
			width: 34rpx;
			height: 34rpx;
			margin-right: 10rpx;
			transform: translateY(6rpx);
		}
	}

	/* 淡入淡出动画 */
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}

	.popup-mask2 {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		// z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-content2 {
		width: 600rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.popup-message {
		font-size: 30rpx;
		color: #666666;
		text-align: center;
		margin-top: 40rpx;
		margin-bottom: 30rpx;
		line-height: 1.5;
	}

	.popup-buttons {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		padding: 20rpx 0 0 0;
		gap: 60rpx;
	}

	.popup-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 26rpx;
		border-radius: 40rpx;
	}

	.popup-btn-know {
		background-color: #e8101e;
		color: #ffffff;
	}

	.popup-btn-notshow {
		background-color: #ffffff;
		color: #e8101e;
		border: 1rpx #e8101e solid;
	}
</style>