<template>
	<view class="server_container">
		<view class="mt20 row flex-c-sb border-none">
			<text class="title">总价</text>
			<text class="info">{{totalPrice}}</text>
		</view>
		<!-- 安装信息 -->
		<block v-for="item in goodsTypeArr">
			<view class="mt20">
				<PullDownBox ref="serversInfoRef">
					<template #title>
						<view class="server_list_container_header">
							<view class="row flex-c-sb border-none">
								<view class="title">
									{{ item.label }}
								</view>

								<!-- 新增 -->
								<view class="flex-c-c" @click.stop="() => handleAdd(item)">
									<view class="mr10">
										<u-icon name="plus-circle" color="#2979ff" size="30"></u-icon>
									</view>

									<view class="specialInfo">添加</view>
								</view>
							</view>
						</view>
					</template>

					<template #content>
						<view class="server_list_container_info">
							<block v-for="(value, index) in item.renderList || []" :key="item.id">
								<view :class="{info_item: true, mt20: index !== 0}">
									<view class="title flex-c-sb">
										<view class="flex-c-c">
											<view class="fwb mr20">第 {{ index + 1 }} 组</view>

											<view class="button flex-c-c" @click="() => handleEdit(value, item)">
												<u-icon name="edit-pen" color="#d3832a" size="36"></u-icon>

												<view class="ml10">编辑</view>
											</view>
										</view>

										<view class="flex-c-c">
											<u-icon name="trash" color="#fff" size="36"></u-icon>

											<view class="ml10">删除</view>
										</view>
									</view>

									<view class="info_item_container pb0">
										<view class="row flex-c-sb">
											<text class="title">商品类型</text>
											<text class="info">{{ value.type_name }}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">商品类目</text>

											<text class="info">{{ value.commodity_type }}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">单位</text>
											<text class="info">{{ value.unit }}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">产品名称</text>
											<text class="info">{{ value.product_name }}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">数量</text>
											<text class="info">{{ value.number }}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">单价</text>
											<text class="info">{{ value.price }}</text>
										</view>

										<view class="row flex-c-sb">
											<text class="title">总价</text>
											<text class="info">{{ value.money }}</text>
										</view>

										<view class="row">
											<view class="title">特殊要求</view>
											<view class="mt10 info">
												{{ value.remark || '暂无数据' }}
											</view>
										</view>

										<view class="row pb0 border-none">
											<view class="title">图片</view>
											<view class="mt10 flex flex-wrap">
												<block v-for="item in value.images">
													<view class="mb20 mr20" @click="()=> handleShowImg(item)">
														<image :src="item.url" mode=""></image>
													</view>
												</block>
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</template>
				</PullDownBox>
			</view>
		</block>

		<ShowImgBox v-model="details.showImg" :imgUrl="details.showImgUrl" />
	</view>
</template>

<script setup lang="ts">
	import { reactive, computed, ref } from 'vue'
	import utils from '@/utils/utils.js'

	import type { PropType } from 'vue'

	const props = defineProps({
		/** 页面路由数据 */
		pageInfo: {
			type: Object as PropType<Object>,
			required: true,
		},
		/** 页面数据 */
		info: {
			type: Object as PropType<Object>,
			required: true,
		},
		/** 商品品类信息 */
		goodsTypeArr: {
			type: Object as PropType<Object>,
			required: true,
		},
	})

	const serversInfoRef = ref()

	const serversInfo = computed(() => {
		const _type = utils.getObjType(props.info)

		if (_type === 'object' && utils.getObjType(props.info.service) === 'array') {
			return props.info.service
		} else return []
	})

	/** 价格统计 */
	const totalPrice = computed(() => {
		let _total = 0

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

			_total = utils.computeNumber(_total, '+', item.money).result
		}

		return _total
	})

	/** 商品品类数据 */
	const goodsTypeArr = computed(() => {
		const _type = utils.getObjType(props.goodsTypeArr)

		if (_type === 'object' && utils.getObjType(props.goodsTypeArr.CommodityTypeTree) === 'array') {
			const { CommodityTypeTree } = props.goodsTypeArr as any

			const _arr : {}[] = []

			const _serverArr = [...serversInfo.value]

			for (let i = 0; i < CommodityTypeTree.length; i++) {
				const item = CommodityTypeTree[i]

				const pushItem = { ...item }

				const filterArr = [..._serverArr]

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

					const { commodity_type_ids } = value

					if (utils.getObjType(commodity_type_ids) !== 'array') continue

					const [firstType, secondType] = commodity_type_ids

					if (firstType === pushItem.value) {
						if (pushItem.children) {
							// 转译商品类型
							for (let i = 0; i < pushItem.children.length; i++) {
								const val = pushItem.children[i]

								if (val.value !== secondType) continue
								value.type_name = val.label
								break
							}
						}

						pushItem.renderList ? pushItem.renderList.push(value) : (pushItem.renderList = [value])

						for (let i = 0; i < _serverArr.length; i++) {
							const ite = _serverArr[i]

							// 根据内存地址判断删除的值
							if (ite !== value) continue

							_serverArr.splice(i, 1)
							break
						}
					}
				}

				// 判断是否存在子类信息, 并判断组件是否已渲染
				pushItem.children &&
					serversInfoRef.value &&
					serversInfoRef.value[i] &&
					serversInfoRef.value[i].handleShowPullDown(true)

				_arr.push(pushItem)
			}

			return _arr
		} else return []
	})

	const details = reactive({
		showImg: false,
		showImgUrl: ''
	})

	/** 新增服务内容 */
	const handleAdd = item => {
		console.log('item :>> ', item)
		uni.navigateTo({
			url:
				'/pagesHome/pages/addInfo/addInfo?type=add&id=' +
				item.value +
				'&install_id=' +
				props.pageInfo.id,
		})
	}

	/** 编辑 */
	const handleEdit = (value, item) => {
		uni.setStorageSync('taskServersDetails', value)

		uni.navigateTo({
			url:
				'/pagesHome/pages/addInfo/addInfo?type=edit&id=' +
				item.value +
				'&install_id=' +
				props.pageInfo.id,
		})
	}

	const handleShowImg = (item) => {
		details.showImg = true
		details.showImgUrl = item.url
	}
</script>

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

	.server_container {
		background-color: #f5f5f6;

		:deep(.Pulldown-title-container) {
			padding: 0;
		}

		:deep(.Pulldown_content) {
			padding: 0;
		}

		:deep(.PullDownBox) {
			border-radius: 0;
		}
	}

	// 头部
	.server_list_container_header {
		background-color: #fff;
		// padding-top: 20upx;
	}

	// 列表信息
	.server_list_container_info {
		background-color: #f5f5f6;
		padding: 20upx;

		.info_item {
			background: #fff;
			border-radius: 20upx;
			overflow: hidden;

			.button {
				padding: 8upx 20upx;
				background-color: #fff;
				border-radius: 6upx;
				font-weight: bold;
				color: var(--subjectColor);
			}

			&>.title {
				padding: 20upx;
				background-color: var(--subjectColor);
				color: #fff;
			}

			.info_item_container {
				padding: 20upx;
			}
		}

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

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

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

		/* #endif */
	}

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

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

		&.border-none {
			border: none;
		}

		.title {
			font-weight: bold;
		}

		.info {
			color: #999;
		}

		.specialInfo {
			color: #509fff;
		}
	}

	.pb0 {
		padding-bottom: 0upx !important;
	}
</style>