<template>
	<BasicContainer ref='basicContainer' :option="option">
		<template #head>
			<view class="server_container">
				<view class="info_item_container ">
					<view class="row flex-c-sb pb20" @click="handleShowChooseTypeOfMerchandise">
						<text class="title pl20">商品类型</text>
						<text class="info pr20">{{details.form.Merchandise||'请选择'}}</text>
					</view>

					<view class="row flex-c-sb pt20 pb20" @click="handleShowChooseTypeOfGoodsCategory">
						<text class="title pl20">商品类目</text>
						<text class="info pr20">{{details.form.GoodsCategory||'请选择'}}</text>
					</view>

					<view class="row flex-c-sb">
						<text class="title pl20 mr20">单位</text>
						<view class="input flex1">
							<MyInput :border="false" :rules="{required: true, trigger: 'input', message: '请输入单位'}"
								v-model="details.form.unit" clearable placeholder="请输入" />
						</view>
					</view>

					<view class="row flex-c-sb">
						<text class="title pl20">产品名称</text>
						<view class="input flex1">
							<MyInput v-model="details.form.product_name" clearable placeholder="请输入" />
						</view>
					</view>

					<view class="row flex-c-sb">
						<text class="title pl20">数量</text>
						<view class="input flex1">
							<MyInput v-model="details.form.number" type="number" :min="0"
								@input="(e) => hadnleInputByNumber(e, 'number', 0)" placeholder="请输入" />
						</view>
					</view>

					<view class="row flex-c-sb">
						<text class="title pl20">单价</text>
						<view class="input flex1">
							<MyInput v-model="details.form.price" @input="(e) => hadnleInputByNumber(e, 'price', 2)"
								type="number" :min="0" placeholder="请输入" />
						</view>
					</view>

					<view class="row flex-c-sb pd20">
						<text class="title">总价</text>
						<text class="info">{{handleComputedMoney}}</text>
					</view>

					<view class="row  pt20 pb20">
						<view class="title pl20">
							特殊要求
						</view>
						<view class="mt10 pl20">
							<u-textarea v-model="details.form.remark"></u-textarea>
						</view>
					</view>

					<view class="row border-none  pt20">
						<view class="title pl20">
							图片
						</view>
						<!-- 图片列表 -->
						<view class="mt10 imgList flex">
							<!-- 单个图片 -->
							<block v-for="(item, index) in details.imgList" :key="item">
								<view class="image_conatiner mr20">
									<image :src="item.url" mode=""></image>

									<!-- 删除 -->
									<view class="removeIcon" @click="()=> handleRmove(index)">
										<u-icon name="close-circle-fill" color="#666" size="50"></u-icon>
									</view>
								</view>
							</block>

							<!-- 添加图片 -->
							<view class="image_conatiner addImg flex-c-c" @click="handleUploadFile">
								<u-icon name="photo-fill" color="#999" size="100"></u-icon>
							</view>
						</view>
					</view>
				</view>

				<!-- 站位容器 -->

				<!-- 提交按钮 -->
				<view class="submitButton" @click="handleSubmit">
					提 交
				</view>
			</view>
			<view class="footer_container">

			</view>
		</template>
	</BasicContainer>

	<!-- 弹窗选择商品类型 -->
	<MyDrawer ref="DrawerShowChooseTypeOfMerchandise">
		<template #content>
			<picker-view v-if="details.visible" :indicator-style="details.indicatorStyle" :immediate-change="true"
				:value="details.value.Merchandise" @change="(e)=> bindChange(e,'Merchandise')" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in details.pickerArrObj.Merchandise" :key="index">
						{{ item.label }}
					</view>
				</picker-view-column>
			</picker-view>
		</template>
	</MyDrawer>

	<!-- 弹窗选择商品类目 -->
	<MyDrawer ref="DrawerShowChooseTypeOfGoodsCategory">
		<template #content>
			<picker-view v-if="details.visible" :indicator-style="details.indicatorStyle" :immediate-change="true"
				:value="details.value.GoodsCategory" @change="(e)=> bindChange(e,'GoodsCategory')" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in details.pickerArrObj.GoodsCategory1" :key="index">
						{{ item.label }}
					</view>
				</picker-view-column>

				<picker-view-column>
					<view class="item" v-for="(item, index) in details.pickerArrObj.GoodsCategory2" :key="index">
						{{ item.label }}
					</view>
				</picker-view-column>
			</picker-view>
		</template>
	</MyDrawer>

	<tips ref="tip"></tips>

</template>

<script setup lang="ts">
	import { getCommonGoodsType, postInstallCommodityAdd, postInstallCommodityUpdate } from '@/api/user.js';
	import { nextTick, reactive, ref, computed } from 'vue';
	import utils from '@/utils/utils.js';
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'

	const option = reactive({
		title: '添加信息',
		haveData: true,
		pageLoading: false,
		haveReachBottom: false
	})

	const details = reactive({
		isShow: false,
		form: {
			// 单位
			unit: '',
			// 产品名称
			product_name: '',
			// 数量
			number: 0,
			// 单价
			price: 0,
			// 总价
			money: 0,
			// 类型
			Merchandise: '',
			MerchandiseId: '',
			// 类目
			GoodsCategory: '',
			GoodsCategoryId: [],
			// 备注
			remark: '',
			// 商品id
			id: ''
		},
		/** picker被选中的索引位置 */
		value: { Merchandise: [0], GoodsCategory: [0, 0] },
		/** picker行高度 */
		indicatorStyle: `height: 40px;`,
		visible: true,
		pickerArrObj: {
			Merchandise: [],
			// 3级
			GoodsCategory1: [],
			// 4级
			GoodsCategory2: []
		},
		goodsTypeArr: [],
		pageInfo: {
			type: 'add' as 'add' | 'edit',
			/** 商品大类Id */
			id: '',
			/** 安装单ID */
			install_id: ''
		},
		/** 图片list */
		imgList: [] as { name : string, url : string }[]
	})

	// 组件实例
	/** 选择商品类型 */
	const DrawerShowChooseTypeOfMerchandise = ref()
	/** 选择商品类目 */
	const DrawerShowChooseTypeOfGoodsCategory = ref()
	/** 弹窗 */
	const tip = ref()

	const initEditInfo = () => {
		details.form = uni.getStorageSync('taskServersDetails')

		console.log('details.form :>> ', details.form);

		const {
			commodity_type_ids,
			images
		} = details.form as any

		const typeId = commodity_type_ids[1]

		details.imgList = images

		for (let i = 0; i < details.pickerArrObj.Merchandise.length; i++) {
			const _value = details.pickerArrObj.Merchandise[i]

			if (_value.value !== typeId) continue

			details.form.Merchandise = _value.label || ''
			details.form.MerchandiseId = _value.value || ''
			details.value.Merchandise = [i]


			details.pickerArrObj.GoodsCategory1 = _value.children || []

			for (let j = 0; j < _value.children.length; j++) {
				const _val = _value.children[j]

				if (_val.value !== commodity_type_ids[2]) continue
				details.form.GoodsCategory = _val.label
				details.form.GoodsCategoryId = [_val.value]
				details.value.GoodsCategory = [j]
				details.pickerArrObj.GoodsCategory2 = (_val.children && _val.children) || []
			}

			if (commodity_type_ids.length !== 4) break

			for (let j = 0; j < details.pickerArrObj.GoodsCategory2.length; j++) {
				const _val = details.pickerArrObj.GoodsCategory2[j]

				if (_val.value !== commodity_type_ids[3]) continue
				details.form.GoodsCategory += ('/' + _val.label)
				details.form.GoodsCategoryId[1] = _val.value
				details.value.GoodsCategory[1] = j
			}

			break
		}

		console.log('details.pickerArrObj.Merchandise :>> ', details.pickerArrObj.Merchandise);
	}

	onLoad(async (e) => {
		console.log('e :>> ', e);
		const { type, id } = e
		option.title = type === 'add' ? '添加信息' : '修改信息'
		details.pageInfo = e

		option.pageLoading = true

		try {
			option.pageLoading = true

			await Promise.all([initGoodsTypeList(), initPage()])

			// 编辑时初始化数据
			type === 'edit' && initEditInfo()
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			option.pageLoading = false
		}
	})

	onShow(() => {


	})

	onUnload(() => {
		// 关闭后清除数据
		uni.removeStorageSync('taskServersDetails')
	})

	const initPage = async () => {
		if (details.pageInfo.type === 'add') return
	}

	/** 初始化获取goodsTypeList */
	const initGoodsTypeList = async () => {
		const res = await getCommonGoodsType({})
		const { code, data } = res

		if (code !== 200) return
		details.goodsTypeArr = (data && data.CommodityTypeTree) || []

		console.log('details.goodsTypeArr :>> ', details.goodsTypeArr);

		for (let i = 0; i < details.goodsTypeArr.length; i++) {
			const value = details.goodsTypeArr[i]

			console.log((value.value + '') !== (details.pageInfo.id + ''))

			if ((value.value + '') !== (details.pageInfo.id + '')) continue
			console.log('value :>> ', value);
			details.pickerArrObj.Merchandise = value.children
			break
		}
	}

	/** 关闭弹窗 */
	const hidePopUp = (node) => {
		details.visible = false
		node.value.details.showPopUp = false
	}

	/** 显示商品类型选择弹窗 */
	const handleShowChooseTypeOfMerchandise = () => {
		details.visible = true


		DrawerShowChooseTypeOfMerchandise.value.setDetails({
			title: '请选择商品类型',
			showPopUp: true,
			height: '50vh',
			success() {
				try {
					if (details.pickerArrObj.Merchandise.length === 0) return utils.handleToast('暂无可选类型')

					const _item = details.pickerArrObj.Merchandise[(details.value.Merchandise || [0])[0]]
					// 类型赋值
					details.form.Merchandise = _item.label
					details.form.MerchandiseId = _item.value
					// 类目picker赋值
					details.pickerArrObj.GoodsCategory1 = _item.children
					details.pickerArrObj.GoodsCategory2 = _item.children[0].children || []
					// 重置数据
					details.form.GoodsCategory = ''
					details.form.GoodsCategoryId = []
					details.value.GoodsCategory = [0, 0]
				} catch (err) {
					console.log('err :>> ', err);
				} finally {
					hidePopUp(DrawerShowChooseTypeOfMerchandise)
				}
			},
			close() {
				hidePopUp(DrawerShowChooseTypeOfMerchandise)
			}
		})
	}

	/** 显示商品类目 */
	const handleShowChooseTypeOfGoodsCategory = () => {
		details.visible = true
		DrawerShowChooseTypeOfGoodsCategory.value.setDetails({
			showPopUp: true,
			height: '50vh',
			success() {
				console.log('details.value.GoodsCategory :>> ', details.value.GoodsCategory);

				try {
					details.form.GoodsCategoryId = []

					if (details.pickerArrObj.GoodsCategory1.length === 0) return utils.handleToast('暂无可选类型')

					const _item1 = details.pickerArrObj.GoodsCategory1[(details.value.GoodsCategory || [0])[0]]
					const _item2 = details.pickerArrObj.GoodsCategory2[(details.value.GoodsCategory || [0, 0])[1]]

					console.log('_item1 :>> ', _item1);
					console.log('_item2 :>> ', _item2);

					if (!_item1) return
					details.form.GoodsCategoryId[0] = _item1.value
					details.form.GoodsCategory = _item1.label
					details.form.price = _item1.price || 0
					details.form.unit = _item1.unit || ''

					if (!_item2) return
					details.form.GoodsCategoryId[1] = _item2.value
					details.form.GoodsCategory += ('/' + _item2.label)
					details.form.price = _item2.price || 0
					details.form.unit = _item2.unit || ''
				} catch (err) {
					console.log('err :>> ', err);
				} finally {
					hidePopUp(DrawerShowChooseTypeOfGoodsCategory)
				}
			},
			close() {
				hidePopUp(DrawerShowChooseTypeOfGoodsCategory)
			}
		})
	}

	/** picker切换时执行 */
	const bindChange = function (e, type) {
		console.log('type :>> ', type);
		console.log('e :>> ', e);

		if (type === 'GoodsCategory' && (e.detail.value[0] !== details.value.GoodsCategory[0])) {
			console.log('111 :>> ', 111);
			const _item = details.pickerArrObj.GoodsCategory1[e.detail.value[0]]

			details.pickerArrObj.GoodsCategory2 = _item && _item.children ? _item.children : []

			details.value.GoodsCategory = [e.detail.value[0], 0]
			return
		}


		details.value[type] = e.detail.value

		console.log('details.value :>> ', details.value);
	}

	/** 输入框输入值 -- 数量
	 * @param {Object} e 数据
	 * @param {string} type 数据
	 * @param {number} precision 精度
	 */
	const hadnleInputByNumber = async (e : object, type : string, precision = 0) => {
		let value = e.detail.value + ''

		const _valueArr = value.split('.')

		const _secondNum = Number(_valueArr[1])

		if (_secondNum) {
			_valueArr[1] = (_secondNum + '').slice(0, precision)
		}

		if (precision > 0) value = _valueArr.slice(0, 2).join('.')
		else value = _valueArr[0]

		await nextTick()
		details.form[type] = utils.isNumber(value) ? Number(value) : 0
	}

	/** 计算总费用 */
	const handleComputedMoney = computed(() => {
		const { number, price } = details.form
		if (!utils.isNumber(number) || !utils.isNumber(price)) return 0
		return utils.computeNumber(Number(number), '*', Number(price)).result
	})

	/** 上传文件 */
	const handleUploadFile = () => {
		const successByUpload = (res) => {
			console.log('res :>> ', res);
			const { data } = res
			const _data = JSON.parse(data)

			console.log('_data :>> ', _data);
			const { code, data: img } = _data

			details.imgList.push({ url: img, name: img })
		}

		utils.handleUploadFile({
			successByUpload
		})
	}

	/** 移除图片 */
	const handleRmove = (index) => {
		tip.value.setdetails({
			isshow: true,
			content: '确认移除',
			cancelTxt: '取消',
			confirmTxt: '确认',
			success() {
				details.imgList.splice(index, 1)

				// 关闭弹窗
				tip.value.setdetails({ isshow: false })
			},
			cancel() {
				// 关闭弹窗
				tip.value.setdetails({ isshow: false })
			}
		})
	}

	/** 新增提交 */
	const addSubmit = async (submitData) => {
		console.log('111 :>> ', 111);
		return await postInstallCommodityAdd(submitData)
	}

	/** 编辑提交 */
	const editSubmit = async (submitData) => {
		console.log('222 :>> ', 222);
		submitData.id = details.form.id
		return await postInstallCommodityUpdate(submitData)
	}

	/** 提交 */
	const handleSubmit = async () => {
		console.log('22 :>> ', 22);
		if (!details.form.GoodsCategory) return utils.handleToast('请选择类目')
		if (!details.form.Merchandise) return utils.handleToast('请选择类型')
		if (!details.form.product_name) return utils.handleToast('请输入产品名称')
		if (!details.form.number) return utils.handleToast('请输入数量')
		if (!details.form.price) return utils.handleToast('请输入单价')
		console.log('11 :>> ', 11);
		try {
			option.pageLoading = true

			const submitData : {
				// 安装任务ID
				install_id : string
				//	商品类型,商品类型id集，树形类型每层得值
				commodity_type_ids : string[]
				// 单位
				unit : string
				// 产品名称
				product_name : string
				// 数量
				number : number
				// 单价
				price : number
				// 总价
				money : number
				// 备注
				remark : string
				// 图片合集
				images : { name : string, url : string }[]
				// 商品id
				id ?: string
			} = {
					install_id: details.pageInfo.install_id,
					commodity_type_ids: [details.pageInfo.id, details.form.MerchandiseId, ...details.form.GoodsCategoryId],
					unit: details.form.unit,
					product_name: details.form.product_name,
					number: details.form.number,
					price: details.form.price,
					money: handleComputedMoney.value,
					remark: details.form.remark,
					images: details.imgList
				}

			const res = details.pageInfo.type === 'add' ? await addSubmit(submitData) : await editSubmit(submitData)

			const { code, data } = res

			if (code !== 200) return
			uni.navigateBack()
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			option.pageLoading = false
		}

	}
</script>

<style scoped lang="scss">
	@import url('@/utils/style/common.scss');

	.server_container {
		background: #fff;

		:deep(.uni-input-placeholder) {
			text-align: right;
		}

		:deep(.uni-input-input) {
			text-align: right;
		}

		/* #ifdef MP-WEIXIN */
		input {
			text-align: right;
		}

		/* #endif */
	}


	.info_item_container {
		padding: 20upx;
	}

	// 行
	.row {
		background: #fff;
		// padding: 20upx;
		border-bottom: 4upx solid #eee;
		font-size: 0.9rem;
		// min-height: 80upx;

		&.border-none {
			border: none;
		}

		.input {
			height: 80upx;

			:deep(.input_container) {

				/* #ifdef MP-WEIXIN */
				input {
					text-align: right;
				}

				/* #endif */
			}
		}

		.title {
			font-weight: bold;
		}

		.info {
			color: #999;
		}

		// 图片列表
		.imgList {
			.image_conatiner {
				position: relative;

				.removeIcon {
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(40%, -40%);
					opacity: 0.9;
				}
			}

			.addImg {
				width: 160upx;
				height: 160upx;
				border-radius: 20upx;
				box-sizing: border-box;
				border: 2upx solid #eee;
			}

			image {
				width: 160upx;
				height: 160upx;
				border-radius: 20upx;
			}
		}

		:deep(.messageBox) {
			right: 20upx;
		}
	}

	// 提交按钮
	.submitButton {
		width: 80%;
		text-align: center;
		padding: 20upx;
		background: var(--subjectColor);
		color: #fff;
		border-radius: 60upx;
		position: fixed;
		bottom: 60upx;
		left: 50%;
		transform: translateX(-50%);
	}

	// 底部站位
	.footer_container {
		height: 140upx;
	}
</style>