<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				发布服务需求
			</block>
			<block slot="right">

			</block>

		</cu-custom>

		<view style="width: 720rpx; margin: 15rpx; border-radius: 20rpx; background-color: #FFFFFF;">
			<view class="flex justify-between align-center"
				style="width: 680rpx; height: 100rpx; border-bottom: 2rpx solid #F3F3F3;margin: 0 20rpx; padding: 0 10rpx;"
				@click="showSelectCategory()">
				<view style="font-size: 30rpx;font-weight: bold;color: #111111;">服务类型</view>
				<view class="flex justify-end align-center">
					<view style="width: 190rpx; text-align: right;" v-if="publish.categoryId == ''">
						<!-- <u-input style="text-align: right;" placeholder="请选择单位时长" :disabled="true"></u-input> -->
						<text style="font-size: 28rpx;font-weight: 500;color: #999999;">请选择分类</text>
					</view>
					<view style="text-align: right;" v-else>
						<text style="font-size: 26rpx;font-weight: 500;color: #111111;"> {{getCategoryName()}}</text>
					</view>
					<view style="font-size: 30rpx;font-weight: 500;color: #111111; text-align: right; width: 50rpx;">
						<u-icon name="arrow-right" color="#666666" size="28"></u-icon>
					</view>
				</view>
			</view>

			<view class="flex justify-between align-center"
				style="width: 680rpx; height: 100rpx; border-bottom: 2rpx solid #F3F3F3;margin: 0 20rpx; padding: 0 10rpx;">
				<view style="font-size: 30rpx;font-weight: bold;color: #111111;">标题</view>
				<view style="width: 500rpx; text-align: right;">
					<input maxlength="30"  v-model="publish.name" style="text-align: right;" placeholder="请输入标题内容" type="text"
							placeholder-style="text-align: right; font-size: 28rpx;font-weight: 500;color: #999999;"></input>
				</view>
			</view>

			<view class="flex justify-between align-end"
				style="width: 680rpx; height: 90rpx; margin: 0 20rpx; padding: 0 10rpx 20rpx 10rpx;">
				<view style="font-size: 30rpx;font-weight: bold;color: #111111;">需求描述</view>
				<view style="font-size: 26rpx;font-weight: bold;">
					<text style="color: #FC6035;"
						v-if="publish.publishDesc.length > 0">{{publish.publishDesc.length}}</text>
					<text class="color-cc" v-else>{{publish.publishDesc.length}}</text>
					<text class="color-cc">/200</text>
				</view>
			</view>
			<view style="width: 670rpx; margin: 0 25rpx; ">
				<u-input v-model="publish.publishDesc" placeholder="请输入需求描述" height="200"
					style="background-color: #FAFAFA;padding: 20rpx;border-radius: 10rpx;font-size: 28rpx;color:#333;"
					maxlength="200" type="textarea" :clearable="false" />
			</view>

			<view class="flex justify-between align-end"
				style="width: 680rpx; height: 110rpx; margin: 0 20rpx; padding: 0 10rpx 20rpx 10rpx;">
				<view style="font-size: 30rpx;font-weight: bold;color: #111111;">上传视频/图片</view>
				<view style="font-size: 26rpx;font-weight: bold;">
					<text style="color: #FC6035;" v-if="imageList.length > 0">{{imageList.length}}</text>
					<text class="color-cc" v-else>{{imageList.length}}</text>
					<text class="color-cc">/9张</text>
				</view>
			</view>
			<view class="flex flex-wrap" style="width: 670rpx; margin: 0 25rpx; ">

				<view class="bg-f8 flex align-center justify-center margin-bottom-xs" v-for="(item,index) in imageList"
					:key="index" @tap.stop="$videoList(index,imageList,'resourceType')"
					style="position: relative;width: 160rpx;height: 160rpx; "
					:style="{'margin-right':  (index%3==0 &&index!=0)?'0rpx':'10rpx'}">
					<video :src="item.url" v-if="item.kind=='video'" :controls="false"
						style="position: relative;width: 160rpx;height: 160rpx;"></video>
					<image :src="item.url" v-else-if="item.kind=='image'"
						style="position: relative;width: 160rpx;height: 160rpx;">
					</image>
					<image src="../../static/close-r_icon.png"
						style="width: 40rpx;height: 40rpx;position: absolute;top: 10rpx;right: 10rpx;z-index: 999;"
						@tap.stop="delImg(index)"></image>
				</view>
				<view class="justify-between"  @click.stop="actionVideoShow=true" v-if="!hasVideo&&imageList.length<9"
					style="border:1rpx dashed #999;width: 160rpx;height:160rpx;flex-direction: column;border-radius: 10rpx;margin-right: 10rpx;">
					<view class="" style="width: 64rpx;height: 64rpx;margin:29rpx auto;">
						<image src="../../static/video_icon.png" mode="widthFix" style=""></image>
					</view>
					<view class=""
						style="background-color: #EEE;border-radius: 10rpx;height: 39rpx;text-align: center;padding: 0 10rpx;">
						15s
					</view>
				</view>
				<view class="flex align-center  justify-center  margin-bottom-xs" v-if="imageList.length<9"
					@click="changePhoto"
					style="border:1rpx dashed #999;width: 160rpx;height: 160rpx;border-radius: 10rpx;margin-right: 0rpx;">
					<image src="../../static/camera_icon.png" mode="widthFix" style="width: 64rpx;height: 64rpx;">
					</image>
				</view>
			</view>


			<view class="flex justify-between align-center"
				style="width: 680rpx; height: 100rpx; border-top: 2rpx solid #F3F3F3;margin: 30rpx 20rpx 0 20rpx; padding: 0 10rpx;"
				@click="chooseAddress()">
				<view style="font-size: 30rpx;font-weight: bold;color: #111111;">我的地址</view>
				<view class="flex justify-end align-center">
					<view class="address-text"
						style="width: 480rpx; text-align: right; font-size: 28rpx;font-weight: bold;color: #111111;"
						v-if="addressInfo">
						<text style="margin-top: 39rpx;">{{addressInfo.address}}
							<text> {{addressInfo.detailed}}</text>
						</text>
					</view>
					<view style="width: 190rpx; text-align: right;" v-else>
						<text style="font-size: 28rpx;font-weight: 500;color: #999999;">请选择地址</text>
					</view>
					<!-- <view style="text-align: right;"  v-else>
						<text style="font-size: 26rpx;font-weight: 500;color: #111111;">{{quote.singleTime + "小时"}}</text>
					</view> -->
					<view style="font-size: 30rpx;font-weight: 500;color: #111111; text-align: right; width: 50rpx;">
						<u-icon name="arrow-right" color="#666666" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view
			style="width: 720rpx; height: 440rpx; margin: 15rpx; border-radius: 20rpx; background: linear-gradient(0deg, #FFFFFF 0%, #FFF5F2 100%);">
			<view class="flex align-center justify-center" style="height: 90rpx;">
				<image src="../../static/publish/publish-left.png" style="width:120rpx;height:20rpx; "></image>
				<view style="font-size: 30rpx;font-weight: bold;color: #333333; margin: 0 30rpx;">任务流程</view>
				<image src="../../static/publish/publish-right.png" style="width:120rpx;height:20rpx; "></image>
			</view>
			<view
				style="width: 680rpx; height: 350rpx; background-color: #FFFFFF; border-radius: 20rpx; margin: 0 20rpx;">
				<view class="flex align-center justify-start" style="padding: 26rpx 0; ">
					<view style="width: 18rpx; margin: 0 34rpx 0 20rpx;">
						<view class="procedure-icon" style="border-color: #FF511B;"></view>
						<view class="procedure-line"></view>
						<view class="procedure-icon"></view>
						<view class="procedure-line"></view>
						<view class="procedure-icon"></view>
						<view class="procedure-line"></view>
						<view class="procedure-icon"></view>
						<view class="procedure-line"></view>
						<view class="procedure-icon"></view>
					</view>
					<view>
						<view class="procedure-text" style="color: #111111;">顾客发布服务需求</view>
						<view class="procedure-text">服务人员或商家报价接单</view>
						<view class="procedure-text"> 顾客根据报价选择【预约】哪个服务人员，下单</view>
						<view class="procedure-text">服务人员上门服务</view>
						<view class="procedure-text">完成任务</view>
					</view>
				</view>
			</view>
		</view>
		<com-select-picture :show="actionSheetShow" :length="maxLength" @addProperties="chooseImageSuccess"
			:maxLength="maxLength" @cancelSheet="cancelSheetClick" :Arr='imageList' chooseUploadFileType='image'>
		</com-select-picture>
		<com-select-picture :show="actionVideoShow" @addProperties="ChooseVideoSuccess" @cancelSheet="cancelVideoClick"
			chooseUploadFileType='video'></com-select-picture>

		<u-popup border-radius="20" v-model="categoryShow" mode="bottom" :safe-area-inset-bottom="true"
			@close="closeCategory">
			<view class="flex align-center justify-end" style="padding: 38rpx 54rpx; color: #111111;">
				<span class="font-34 text-bold">选择类型</span>
				<view style="width:30rpx;height:30rpx; margin-left: 228rpx;" @tap="categoryShow=false">
					<image src="../../static/close_x.png" style="width:30rpx;height:30rpx; "></image>
				</view>

			</view>

			<picker-view :indicator-style="indicatorStyle" @change="selectCategory" :value="categoryValue"
				class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in categoryList" :key="item.categoryId">{{item.categoryName}}
					</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in firstCategory" :key="item.categoryId">
						{{item.categoryName}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in secondCategory" :key="item.categoryId">
						{{item.categoryName}}</view>
				</picker-view-column>
			</picker-view>
			<view style="padding: 30rpx 70rpx;" @click="saveCategory">
				<view class="select_time_sure">确定</view>
			</view>

		</u-popup>
		<view style="height: 170rpx;"></view>
		<view class="button-container">
			<button class="submit-button text-df" :class="[canSubmit == true ? 'can-submit' : '']"
				@click="savePublish">发布</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				publish: {
					publishDesc: "",
					categoryId: "",
					parentCategoryId: "",
					name: "",
					addressId: "",
					memberId: "",
				},
				addressInfo: null,
				imageList: [],
				delList: [],
				maxLength: 9,
				actionSheetShow: false,
				actionVideoShow:false,
				hasVideo:false,
				canSubmit: false,
				categoryShow: false,
				indicatorStyle: `height: 100rpx;`,
				firstCategory: [],
				secondCategory: [],
				categoryValue: [0, 0, 0],
				selectedCategoryValue: [],
				categoryData: null,
				categoryList: [{
					"categoryId": 0,
					"bizType": 1,
					"categoryName": "家政分类",
				}, {
					"categoryId": 1,
					"bizType": 2,
					"categoryName": "维修分类",
				}],
				publishId: '',
				editCategory: false,

			}
		},
		onLoad(option) {
			this.getCategoryList()
			this.publishId = option.publishId;
			//查询详情
			if (this.publishId != undefined && this.publishId != null && this.publishId != '') {
				this.getPublish();
			}
		},
		onShow() {
			this.addressInfo = uni.getStorageSync("address");
			if (this.addressInfo != null) {
				// 更新addressid
				this.publish.addressId = this.addressInfo.addressId;
			}

		},
		watch: {
			'publish.publishDesc'(newVal, oldVal) {
				this.initButton()
			},
			'publish.categoryId'(newVal, oldVal) {
				this.initButton()
			},
			'publish.name'(newVal, oldVal) {
				this.initButton()
			},
			'publish.addressId'(newVal, oldVal) {
				this.initButton()
			},
		},
		methods: {
			getCategoryList() {
				this.$u.api.getCategoryList().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.categoryData = res.data
					} else {
						this.$api.msg("获取分类列表失败")
					}
				}).catch(err => {
					console.log(err)
					this.$api.msg("获取分类列表失败")
				})
			},
			showSelectCategory() {
				//todo 回显

				if (this.categoryList[this.categoryValue[0]].categoryId == 0) {
					this.firstCategory = this.categoryData.serviceList;
					this.secondCategory = this.firstCategory[this.categoryValue[1]].childrenCategory;
				} else {
					this.firstCategory = this.categoryData.repairList;
					this.secondCategory = this.firstCategory[this.categoryValue[1]].childrenCategory;
				}
				this.editCategory = false;
				this.categoryShow = true;
			},
			selectCategory: function(e) {
				const val = e.detail.value
				console.log(val)
				this.selectedCategoryValue = val;
				if (this.categoryList[val[0]].categoryId == 0) {
					this.firstCategory = this.categoryData.serviceList;
					if (this.firstCategory[val[1]] != null && this.firstCategory[val[1]].childrenCategory != null) {
						this.secondCategory = this.firstCategory[val[1]].childrenCategory;
					} else {
						this.secondCategory = []
					}

				} else {
					this.firstCategory = this.categoryData.repairList;
					if (this.firstCategory[val[1]] != null && this.firstCategory[val[1]].childrenCategory != null) {
						this.secondCategory = this.firstCategory[val[1]].childrenCategory;
					} else {
						this.secondCategory = []
					}
				}
			},
			saveCategory() {
				if (this.selectedCategoryValue != null && this.selectedCategoryValue.length > 0) {
					this.categoryValue = this.selectedCategoryValue;
				}

				let cateList = [];
				console.log(this.selectedCategoryValue)
				if (this.categoryList[this.categoryValue[0]].categoryId == 0) {
					cateList = this.categoryData.serviceList;
				} else {
					cateList = this.categoryData.repairList;
				}
				let firstCate = cateList[this.categoryValue[1]]
				if (firstCate.childrenCategory != null) {
					let secondCate = firstCate.childrenCategory[this.categoryValue[2]];
					this.publish.categoryId = secondCate.categoryId;
					this.publish.parentCategoryId = firstCate.categoryId;
				} else {
					this.publish.categoryId = firstCate.categoryId;
					this.publish.parentCategoryId = "";
				}
				this.categoryShow = false;
			},
			getCategoryName() {
				//判断是否是更新
				if (this.editCategory) {
					let categoryType = '';
					if (this.publish.bizType == 1) {
						categoryType = "家政分类";
					}
					if (this.publish.bizType == 2) {
						categoryType = "维修分类";
					}

					console.log(this.publish.parentCategoryId)
					if (this.publish.parentCategoryId != undefined) {
						console.log(categoryType + "/" + this.publish.parentCategoryName + "/" + this.publish.categoryName)
						return categoryType + "/" + this.publish.parentCategoryName + "/" + this.publish.categoryName;
					} else {
						console.log(categoryType + "/" + this.publish.categoryName)

						return categoryType + "/" + this.publish.categoryName
					}
					return ""
				} else {
					if (this.publish.categoryId != "") {
						if (this.publish.parentCategoryId != "") {
							let categoryType = "家政分类";
							let category = this.getChildrenData(this.categoryData.serviceList, this.publish
								.parentCategoryId);
							if (category == null) {
								categoryType = "维修分类";
								category = this.getChildrenData(this.categoryData.repairList, this.publish
									.parentCategoryId);
							}
							if (category == null) {
								return ""
							}
							let childrenCategory = this.getChildrenData(category.childrenCategory, this.publish
							.categoryId);
							return categoryType + "/" + category.categoryName + "/" + childrenCategory.categoryName;
						} else {
							let categoryType = "家政分类";
							let category = this.getChildrenData(this.categoryData.serviceList, this.publish.categoryId);
							if (category == null) {
								categoryType = "维修分类";
								category = this.getChildrenData(this.categoryData.repairList, this.publish.categoryId);
							}
							if (category == null) {
								return ""
							}
							return categoryType + "/" + category.categoryName
						}
					}
					return ""
				}

			},
			getChildrenData(categoryList, categoryId) {
				if (categoryList == null || categoryId == null) {
					return null;
				}
				for (let i = 0; i < categoryList.length; i++) {
					if (categoryList[i].categoryId == categoryId) {
						return categoryList[i]
					}
				}
				return null;
			},
			closeCategory() {
				console.log("close--------")
				this.categoryShow = false;
			},
			changePhoto() {
				if (this.imageList.length >= 9) {
					this.$api.msg('最多添加9张视频/图片')
				} else {
					this.actionSheetShow = true;
				}
			},
			//上传成功
			chooseImageSuccess(url) {
				this.imageList.push(url)
				this.$api.msg("上传成功")

			},
			//视频上传成功
			ChooseVideoSuccess(data) {
				this.imageList.unshift(data)
				this.$api.msg("上传成功")

				this.hasVideo = true;
			},
			delImg(index) {
				//判断是否是已经存储的数据
				console.log(index);
				console.log(this.imageList[index].imageId);
				if (this.imageList[index].imageId != undefined) {
					this.delList.push(this.imageList[index].imageId);
				}
				if (this.imageList[index].type == '002') {
							this.hasVideo = false;
							}
				this.imageList.splice(index, 1)

			},
			//取消上传
			cancelSheetClick() {
				this.actionSheetShow = false;
			},
			//视频取消上传
			cancelVideoClick() {
				this.actionVideoShow = false;
			},
			//选择地址
			chooseAddress() {
				// console.log(this.orderParam)
				this.publish.updateAddress = true;
				uni.navigateTo({
					url: '../mine/minePage/myAddress'
				})
			},
			initButton() {
				console.log("initButton")
				console.log(this.checkNecessary())
				if (this.checkNecessary() == null) {
					this.canSubmit = true;
				} else {
					this.canSubmit = false;
				}
			},
			checkNecessary() {
				if (this.publish.addressId == "") {
					return "请选择地址"
				}
				if (this.publish.categoryId == "") {
					return "请选择服务类型"
				}
				if (this.publish.name == "") {
					return "请输入标题内容"
				}
				if (this.publish.publishDesc == "") {
					return "请输入需求描述"
				}
				return null;
			},
			savePublish() {
				if (this.checkNecessary() != null) {
					this.$api.msg(this.checkNecessary())
					return
				}
				this.publish.memberId = uni.getStorageSync('userInfo').memberId;
				this.publish.publishImageList = this.imageList;

				if (this.publish.publishId != undefined) {
					//删除的图片
					this.publish.delList = this.delList;

					this.$u.api.editPublish(this.publish).then(res => {
						console.log(res)
						if (res.code == 200) {
							this.$api.msg("编辑成功")
							uni.redirectTo({
								url: '../mine/minePage/myPublish'
							})
						} else {
							this.$api.msg(res.msg)
						}
					}).catch(err => {
						console.log(err)
					})
				} else {
					console.log(this.publish)
					if(this.publish.addressId == undefined){
						this.$api.msg("请选择服务地址")
						return
					}
					
					this.$u.api.savePublish(this.publish).then(res => {
						console.log(res)
						if (res.code == 200) {
							this.$api.msg("发布成功")
							uni.redirectTo({
								url: '../mine/minePage/myPublish'
							})
						} else {
							this.$api.msg(res.msg)
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			//获取详情
			getPublish() {
				console.log("查询详情" + this.publishId);
				//获取详情
				this.$u.api.getPublishInfo(this.publishId).then(res => {
					console.log(res)
					if (res.code == 200) {
						console.log(res);
						this.publish = res.data;
						this.imageList = res.data.publishImageList;
						this.addressInfo = res.data.publishAddress;
						this.publish.categoryId = res.data.cateId;
						this.publish.addressId = this.addressInfo.addressId;
						this.publish.updateAddress = false;
						this.editCategory = true;
						for (var i = 0; i < this.imageList.length; i++) {
							if (this.imageList[i].type == '001') {
								this.imageList[i].kind = "image";
							}
							if (this.imageList[i].type == '002') {
								this.imageList[i].kind = "video";
							}
						}
					} else {
						this.$api.msg(res.msg)
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F3F3F3;
	}
</style>

<style scoped lang="scss">
	.procedure-text {
		font-size: 26rpx;
		font-weight: 500;
		color: #999999;
		line-height: 58rpx;
	}

	.procedure-icon {
		width: 18rpx;
		height: 18rpx;
		background: #FFFFFF;
		border: 3rpx solid #E0E0E0;
		border-radius: 50%;
	}

	.procedure-line {
		width: 10rpx;
		height: 42rpx;
		margin-right: 6rpx;
		border-right: 2rpx dashed #E0E0E0;
	}

	.button-container {
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		height: 130rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 23px 0px rgba(0, 0, 0, 0.11);
		z-index: 999;
		width: 100%;
		text-align: center;
	}

	.submit-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 640rpx;
		height: 90rpx;
		margin: 20rpx auto;
		border-radius: 20rpx !important;
		background-color: #FC6035;
		border-radius: 20rpx !important;
		color: white;
		// vertical-align: middle;
		// line-height: 3;
	}

	.picker-view {
		width: 750rpx;
		height: 400rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 100rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 32rpx;
		line-height: 100rpx;
	}

	.select_time_sure {
		background: #fc6035;
		box-shadow: 0rpx 5rpx 14rpx 0rpx #eb4553;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 400;
		text-align: center;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
	}

	.submit-button {
		background: #E0E0E0;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 400;
		text-align: center;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
	}

	.can-submit {
		background: #fc6035;
		box-shadow: 0rpx 5rpx 14rpx 0rpx #eb4553;
	}

	.address-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
</style>
