<template>
	<BasicContainer ref="basicContainer" :option="option">
		<!-- 头部 -->
		<template #head></template>

		<!-- 主体 -->
		<template #body></template>
	</BasicContainer>

	<view class="">
		<view class="main_container">
			<!-- 到货信息 -->
			<view class="info_item border_bottom">
				<view class="info_item_title flex-c-sb" @click="details.popUpObj.afterSalesType = true">
					<view class="">
						到 货 信 息
					</view>
				</view>
			</view>

			<!-- 行 -- 售后类型 -->
			<view class="info_item border_bottom">
				<view class="info_item_title flex-c-sb" @click="details.popUpObj.afterSalesType = true">
					<view class="">
						到 货 状 态
					</view>

					<view>
						<text class="mr10 fwn info">
							{{ installSales.status >= 3? '已到货':'未到货' }}
						</text>
					</view>
				</view>
			</view>

			<!-- 行 -- 售后类型 -->
			<view class="info_item border_bottom">
				<view class="info_item_title flex-c-sb">
					<view class="">
						到 货 包 件
					</view>

					<!-- 新增售后包件 -->
					<view class="flex addBtn" @click="handleAddPackage">
						<view class="addButton">
							<u-icon name="close-circle" color="#2F8DFF" size="36"></u-icon>
						</view>

						<text class="ml10 fwn">
							添加
						</text>
					</view>
				</view>
			</view>

			<scroll-view class="scvmabx" :style="{height: details.scrollheight}" @scrolltolower="()=>{}" scroll-y="true"
				@touchmove.stop>
				<!-- 售后包件列表 -->
				<view :class="{packageList: true, pd20: details.packageList.length > 0}"
					:style="{height: (details.packageList.length > 0 ?(40 * details.packageList.length) + ((details.packageList.length - 1) * 10): 0)  + 'px'}">
					<block v-for="(item, index) in details.packageList">
						<view :class="{'packageItem': true, 'flex-c-sb': true, 'mt20': index !== 0}">
							<view class="inputBox flex1 flex">
								<input class="packageInput flex1" v-model="details.packageList[index]" placeholder="请输入包条码" />

								<view class="scanIcon flex-c-c" @click.stop="()=> handleScan(item)">
									<u-icon name="scan" color="#2F8DFF" size="60"></u-icon>
								</view>
							</view>

							<view class="ml20 flex-c-c" @click="()=> handleRemovePackage(index)">
								<u-icon name="trash" color="#8792AA" size="36"></u-icon>

								<text class="ml10 info">
									删除
								</text>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>



			<view class="felx-c-c mb20">
				<view class="button subColor" @click="handleArrivalNotice">
					到货确认
				</view>
			</view>
		</view>

		<MyDrawer ref="myDrawer">
			<template #content>
				<picker-view v-if="details.visible" :indicator-style="details.indicatorStyle" :immediate-change="true"
					:value="details.value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in details.pickerArr" :key="index">
							{{ item.label }}
						</view>
					</picker-view-column>
				</picker-view>
			</template>
		</MyDrawer>
	</view>
	<tips ref="tip" />
</template>

<script lang="ts" setup>
	import {
		postInstallAfterUpdate,
		postCenterInstallSalesTheArrival
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
	} from '@dcloudio/uni-app'
	import { nextTick, reactive, ref, toRefs, computed, defineExpose } from "vue";
	import utils from '@/utils/utils.js'
	import type { PropType } from 'vue';


	// 组件配置
	const option = reactive({
		// 标题
		title: '确认到货',
		// 下拉刷新回调函数
		async pullDownRefreshInitPage() {
			return null
		},
		// 触底加载回到函数
		reachBottomInitPage: async () => {
			return null
		},
		haveData: true,
		isEnd: false,
		pageLoading: false,
		haveReachBottom: false
	})


	const props = defineProps({
		/** 页面路由数据 */
		pageInfo: {
			type: Object as PropType<Object>,
			required: true,
		},
		/** 页面数据 */
		info: {
			type: Object as PropType<Object>,
			required: true,
		},
		/** 开启loading */
		handleSetLoading: {
			type: Function as PropType<Function>,
			required: true
		},
		/** 刷新数据 */
		handleRefresh: {
			type: Function as PropType<Function>,
			required: true
		},
		/** */
	})

	const pageInfo = computed(() => {
		console.log('props.pageInfo :>> ', props.pageInfo);

		if (props.pageInfo) return props.pageInfo
		else return {}
	})

	const installSales = computed(() => {
		console.log('props.info :>> ', props.info);

		if (props.info && props.info.installSales) return props.info.installSales
		else return {}
	})



	const myDrawer = ref()
	const tip = ref()


	let details = reactive({
		/** 主页面高度 */
		scrollheight: '80vh',
		/** 表单数据 */
		form: {
			type: '',
			typeName: '',
			/** 备注 */
			remark: ''
		},
		/** 售后包件列表 */
		packageList: [],
		/** 售后图片列表 */
		imgList: [],
		/** 扫描码值 */
		scancode: '',
		/** 是否显示弹窗 */
		popUpObj: {
			/** 异常类型 */
			afterSalesType: false
		},
		/** picker行高度 */
		indicatorStyle: `height: 40px;`,
		visible: false,
		value: [0],
		pickerArr: [
			{
				label: '调试',
				value: '1'
			},
			{
				label: '维修',
				value: '2'
			},
			{
				label: '理赔',
				value: '3'
			},
			{
				label: '待确认',
				value: '4'
			}, {
				label: '换货',
				value: '5'
			},
			{
				label: '工厂补单',
				value: '6'
			},

		],
		/** 页面信息 */
		pageInfo: {
			id: ''
		}
	})

	onLoad((e) => {
		details.pageInfo.id = e.id
	})

	onShow(async () => {
		// #ifdef APP
		// 初始化关闭监听
		uni.$off('scancodedate')
		// init()
		uni.$on('scancodedate', function (code) {
			console.log('code :>> ', code);
			if (code) {
				console.log(code);
				details.scancode = code
				scandata()
			}
		})
		// #endif

		await nextTick()
		// basicContainer.value.startPullDownRefresh()
		const _height = await utils.getViewDistanceFormTop('.scvmabx')

		details.scrollheight = Number(_height.replace('px', '')) - 100 + 'px'
	})

	const scandata = () => { }

	const initpage = () => { }

	/** 显示扫描 */
	const handleScan = (value) => {
		console.log('value :>> ', value);
		// #ifdef MP-WEIXIN
		// 微信小程序适配
		uni.scanCode({
			success(res) {
				console.log('res :>> ', res);
				console.log('res.result :>> ', res.result);
				for (let i = 0; i < details.packageList.length; i++) {
					const value = details.packageList[i]

					if (value === res.result) return utils.handleToast('码值已存在')
				}

				value = res.result
				// scandata()
			}
		})
		return
		// #endif
	}

	/** 新增售后包件 */
	const handleAddPackage = () => {
		details.packageList.push('')
	}

	/** 删除售后包件 */
	const handleRemovePackage = (index : number) => {
		details.packageList.splice(index, 1)
	}

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

		details.value = e.detail.value

	}

	/** 到货 */
	const handleArrivalNotice = () => {
		// postCenterInstallSalesTheArrival
		console.log('details.packageList :>> ', details.packageList);

		tip.value.setdetails({
			isshow: true,
			content: '确认到货',
			cancelTxt: '部分到货',
			confirmTxt: '确认到货',
			async success() {
				try {
					props.handleSetLoading(true)

					const submitData = {
						install_sales_id: pageInfo.value.id,
						status: 0,
						packages: details.packageList.filter(val => val)
					}

					const res = await postCenterInstallSalesTheArrival(submitData)

					const { code, data } = res

					if (code !== 200) return
					props.handleRefresh()

				} catch (err) {
					console.log('err :>> ', err);
					//TODO handle the exception
				} finally {
					props.handleSetLoading(false)
					// 关闭弹窗
					tip.value.setdetails({ isshow: false })

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

	defineExpose({ details })
</script>

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

	.info {
		color: #AFB4BA;
	}

	.main_container {
		// padding: 0 20upx;
		background-color: #fff;
	}

	// 行
	.info_item {
		margin: 0 20upx;
		padding: 20upx;

		.info_item_title {
			// padding: 0 0 20upx;
			font-weight: bold;
			height: 40upx;
			line-height: 40upx;
		}


		&.border_bottom {
			border-bottom: 2upx solid #eee;
		}

		:deep(.u-textarea) {
			background-color: #f5f5f6;
			border: none;
			height: 200upx;
		}

		// 添加
		.addBtn {
			color: #2F8DFF;

			.addButton {
				transform: rotate(45deg);
			}
		}

	}

	// 包件列表
	.packageList {
		background: #f5f5f6;
		transition: all 0.3s;
		overflow: hidden;

		.packageItem {
			$inputHeight: 80upx;

			.inputBox {
				position: relative;
				border-radius: calc($inputHeight / 2);
				overflow: hidden;
				background: #fff;

				.packageInput {
					height: $inputHeight;
					padding: 0 40upx;
				}

				.scanIcon {
					padding: 0 20upx;
					// position: absolute;
					// right: 40upx;
					// top: 50%;
					// transform: translateY(-50%);
				}
			}
		}
	}

	// 图片列表
	.imgList {
		flex-wrap: wrap;

		.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;
		}
	}

	.button {
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		// margin: 10upx;
		// border: 2upx solid #b5babf;
		border-radius: 80upx;
		margin: 0 10upx;
		padding: 0 10upx;
		// font-size: 0.75rem;

		&.subColor {
			background-color: var(--subjectColor);
			color: #fff;
		}
	}
</style>