<template>
	<view class="page-gray color-333 u-font-28">
		<view class="block">
			<view class="u-p-b-14 u-m-b-24 border-bottom">
				<view class="title"><span style="color: red;">*</span>设备名称</view>
				<view class="">
					<uni-easyinput :inputBorder="false" :padding-none="true" v-model="form.name"
						placeholder="设备名称"></uni-easyinput>
				</view>
			</view>
			<view class="u-p-b-14 u-m-b-24 border-bottom">
				<view class="title"><span style="color: red;">*</span>设备类型</view>
				<view class="u-m-t-16">
					<up-radio-group v-model="form.connectionType">
						<up-radio v-for="(item,index) in pageData.connectionTypeList" :key="index" :label="item.name"
							:name="item.value"></up-radio>
					</up-radio-group>

				</view>
			</view>
			<view class="u-p-b-14 u-m-b-24 border-bottom">
				<view class="title"><span style="color: red;">*</span>小票类型</view>
				<view class="u-m-t-16">
					<up-radio-group v-model="form.printType ">
						<up-radio v-for="(item,index) in pageData.receiptsList" :key="index" :label="item.name"
							:name="item.value"></up-radio>
					</up-radio-group>

				</view>
			</view>
			<view class="u-p-b-14 u-m-b-24 border-bottom">
				<view class="title"><span style="color: red;">*</span>打印机品牌</view>
				<view class="u-m-t-16">
					<up-radio-group v-model="form.brand">
						<up-radio v-for="(item,index) in pageData.brandList" :key="index" :label="item.name"
							:name="item.value"></up-radio>
					</up-radio-group>

				</view>
			</view>





			<view class="u-p-b-14 u-m-b-24 border-bottom">
				<view class="title"><span style="color: red;">*</span>ip地址/MAC地址</view>
				<view class="">
					<uni-easyinput :inputBorder="false" :padding-none="true" v-model="form.address"
						placeholder="ip地址/MAC地址"></uni-easyinput>
				</view>
			</view>
			<view class="u-p-b-14 u-m-b-24 border-bottom">
				<view class="title">端口</view>
				<view class="">
					<uni-easyinput :inputBorder="false" :padding-none="true" v-model="form.port"
						placeholder="端口"></uni-easyinput>
				</view>
			</view>
			<view class="u-p-b-24 u-m-b-24 border-bottom">
				<view class="title">小票尺寸</view>
				<view class="u-m-t-16">
					<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'receiptSize')">
						<label class="radio u-m-r-60" v-for="(item,index) in pageData.deciveSizeList" :key="index">
							<radio :value="item.value" :checked="form.receiptSize == item.value" class="scale7" />
							<text>{{item.label}}</text>
						</label>
					</radio-group>
				</view>
			</view>

			<view class="u-p-b-14 u-m-b-24 border-bottom">
				<view class="title"><span style="color: red;">*</span>打印数量</view>
				<view class="u-m-t-16">
					<up-number-box input-width="100" v-model="form.printNum"></up-number-box>

				</view>
			</view>

			<view class="u-p-b-14 u-m-b-24 border-bottom">
				<view class="title">打印内容</view>
				<view class="u-m-t-16">
					<view v-for="(pItem,pIndex) in printTypeList" :key="pIndex" class="u-m-b-16">
						<view>{{pItem.label}}</view>
						<view class="u-m-t-6">
							<up-checkbox-group v-model="printContentType[pIndex]">
								<up-checkbox :customStyle="{marginBottom: '16rpx',marginRight: '30rpx'}"
									v-for="(item,index) in pItem.list" :key="index" :label="item.label"
									:name="item.value"></up-checkbox>
							</up-checkbox-group>


						</view>
					</view>
				</view>
			</view>

			<view class="u-p-b-24 u-m-b-24 border-bottom">
				<view class="title">分类打印 </view>
				<view class="u-m-t-16">
					<!-- <radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'classifyPrint')">
						<label class="radio u-m-r-60" v-for="(item,index) in pageData.classifyPrintList" :key="index">
							<radio :value="item.value" :checked="form.classifyPrint == item.value"
								:disabled="returnClassifyPrintDisabled(item)" class="scale7" />
							<text>{{item.label}}</text>
						</label>
					</radio-group> -->


					<up-radio-group v-model="form.classifyPrint" placement="column">
						<up-radio v-for="(item,index) in pageData.classifyPrintList" :key="index" :label="item.label"
							:disabled="returnClassifyPrintDisabled(item)" :name="item.value"></up-radio>
					</up-radio-group>
				</view>
			</view>
			<view class="u-p-b-24 u-m-b-24 border-bottom" v-if="form.classifyPrint ==1">
				<view class="title">部分打印</view>
				<view class="u-m-t-16" style="display: flex;">
					<up-checkbox-group v-model="form.categoryIds">
						<up-checkbox v-for="item in pageData.partList" :key="item.id"
							:customStyle="{marginBottom: '16rpx',marginRight: '20rpx'}" :label="item.name"
							:name="item.id" style="margin-right: 40rpx;font-size: 28rpx;">
						</up-checkbox>
					</up-checkbox-group>
				</view>
			</view>


			<view class="u-p-b-24 u-flex u-row-between u-m-b-24 border-bottom">
				<view class="title">媒体音量</view>
				<view class="">
					<my-switch v-model="form.volumeSwitch"></my-switch>
				</view>
			</view>

			<view class="u-p-b-24 u-flex u-row-between u-m-b-24 border-bottom">
				<view class="title">启用状态</view>
				<view class="">
					<my-switch v-model="form.status"></my-switch>
				</view>
			</view>

		</view>

		<view style="height: 60rpx;"></view>
		<view class="">
			<view class="btn">
				<my-button shape="circle" @click="save">保存</my-button>
			</view>
		</view>

	</view>


</template>

<script setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import go from '@/commons/utils/go.js';
	import pickerItem from './components/picker-item.vue';
	import myRadioGroup from './components/my-radio-group.vue';

	import {
		devices,
		subTypes,
		brand,
		receipts,
		connectionType,
		printTypeList
	} from '@/pagePrinter/devices.js'
	import {
		getPrinterDetail,
		addPrinter,
		updatePrinter,
	} from '@/http/api/printer.js'
	import {
		categoryPage
	} from '@/http/api/cateGory.js'

	// 判断是否可选部分分类打印
	function returnClassifyPrintDisabled(item) {
		if (item.label != '打印所有') {
			if (printContentType.value[1].length <= 0) {
				return true
			} else {
				return false
			}
		}
		return false
	}

	const pageData = reactive({
		brandList: brand, // 打印机品牌列表
		receiptsList: receipts, // 小票
		connectionTypeList: connectionType, // 类型
		deciveSizeList: [ // 小票尺寸
			{
				label: '58mm',
				value: '58mm'
			},
			{
				label: '80mm',
				value: '80mm'
			},
		],
		classifyPrintList: [ // 分类打印
			{
				label: '打印所有',
				value: '0'
			},
			{
				label: '部分分类(仅打印制作单[厨房])',
				value: '1'
			},
		],
		printQtyList: [ // 打印数量
			{
				label: '顾客联+商家联「2张」',
				value: 'c1m1^2'
			},
			{
				label: '只打印商家联「1张」',
				value: 'm1^1'
			},
			{
				label: '只打印顾客联「1张」',
				value: 'c1^1'
			},
			{
				label: '2张顾客联+1张商家联「3张」',
				value: 'c2m1^3'
			},
		],
		printMethodList: [ // 打印方式
			{
				label: '打印全部',
				value: 'all'
			},
			{
				label: '仅打印制作单「厨房」',
				value: 'one'
			},
			{
				label: '仅打印结账单「前台」',
				value: 'normal'
			},
		],
		printTypeList: [ // 打印类型
			{
				label: '确认退款单',
				value: 'refund'
			},
			{
				label: '交班单',
				value: 'handover'
			},
			{
				label: '排队取号',
				value: 'queue'
			},
		],
		partList: [], // 部分打印
	})

	let form = reactive({
		id: null,
		sort: "0",
		volumeSwitch: 1,
		status: 1,
		brand: '',
		subType: 'cash',
		connectionType: "云打印",
		categoryIds:[],
		name: '',
		receiptSize: '58mm',
		classifyPrint: '0',
		printQty: 'm1^1',
		printMethod: "all",
		printContentType: []
	})
	const printContentType = ref(printTypeList.map(v => []))
	watch(() => printContentType.value, (newval, oldval) => {
		if (newval[0].length <= 0) {
			form.classifyPrint = '0'
		}
	}, {
		deep: true
	})
	onLoad((options) => {
		getlist()
		if (options.id) {
			getdetails(options.id)
		} else {}
		// Object.assign(option, opt)
	})

	/**
	 * 获取商品分类列表
	 */
	let getlist = async () => {
		const res = await categoryPage({
			page: 1,
			size: 500
		})
		let arr = []
		res.records.forEach(ele => {
			arr.push({
				id: ele.id,
				name: ele.name
			})
		})
		pageData.partList = arr
	}

	/**
	 * 获取打印机详情
	 */
	async function getdetails(id) {
		const res = await getPrinterDetail({
			id: id
		})

		res.categoryIds = res.categoryIds.split(',').filter(v => v);
		form = Object.assign(form, res)
		const arr = res.printContentType.split(',')
		printContentType.value = printTypeList.map(v => {
			const listValues = v.list.map(listitem => listitem.value)
			const selArr = listValues.filter(listItem => arr.includes(listItem))
			return selArr
		})
		console.log(printContentType.value);
	}


	function sizeChange(e, name) {
		form[name] = e.detail.value
	}

	/**
	 * 保存
	 */
	async function save() {
		// 效验
		if (!form.brand || !form.printType || !form.name || !form.address) {
			uni.$utils.showToast("请输入必填项")
			return
		}
		if (form.classifyPrint == 1 && form.categoryIds.length == 0) {
			uni.$utils.showToast("请选择部分分类")
			return
		}
		console.log('form',form);
		const submitJson = {
			...form,
			categoryIds: form.classifyPrint == 0 ? '' : form.categoryIds.join(','),
			printContentType: printContentType.value.flat().join(',')
		}
		console.log(submitJson);
		if (form.id) {
			delete form.createdAt
			delete form.updatedAt
			const res = updatePrinter(submitJson)
		} else {
			const res = addPrinter(submitJson)
		}
		go.back()
	}
</script>

<style lang="scss" scoped>
	.page-gray {
		padding: 32rpx 28rpx;
	}

	.block {
		background-color: #fff;
		padding: 32rpx 24rpx;
		border-radius: 18rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 0 5px #eee;
	}

	.title {
		font-weight: 700;
	}

	.radio {
		display: flex;
		align-items: center;
	}

	.fixed_b {
		left: 30rpx;
		right: 30rpx;
		bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		/* #ifdef H5 */
		bottom: 30rpx;
		/* #endif */
	}
</style>