<template>
	<view class="page-gray color-333 u-font-28">
		<view class="block">
			<picker-item title="打印机品牌" required v-model="form.contentType" :modelValue="form.contentType"
				:list="pageData.brandList"></picker-item>
			<picker-item title="小票打印" required v-model="form.subType" :modelValue="form.subType"
				:list="pageData.receiptsList"></picker-item>
			<picker-item title="类型" required v-model="form.connectionType" :modelValue="form.connectionType"
				:list="pageData.connectionTypeList"></picker-item>	
			<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="">
					<uni-easyinput :inputBorder="false" :padding-none="true" v-model="form.address"
						placeholder="设置打印机编号"></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-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" class="scale7" />
							<text>{{item.label}}</text>
						</label>
					</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.selectcheckbox">
						<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-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,'printQty')">
						<label class="radio u-m-r-60" v-for="(item,index) in pageData.printQtyList" :key="index">
							<radio :value="item.value" :checked="form.printQty == item.value" class="scale7" />
							<text>{{item.label}}</text>
						</label>
					</radio-group>
				</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,'printMethod')">
						<label class="radio u-m-r-60" v-for="(item,index) in pageData.printMethodList" :key="index">
							<radio :value="item.value" :checked="form.printMethod == item.value" class="scale7" />
							<text>{{item.label}}</text>
						</label>
					</radio-group>
				</view>
			</view>


			<view class="u-p-b-24 u-m-b-24 border-bottom">
				<view class="title">打印类型</view>
				<view class="u-m-t-16" style="display: flex;">
					<up-checkbox-group v-model="form.printType">
						<up-checkbox v-for="(item,index) in pageData.printTypeList" :key="index" :customStyle="{marginBottom: '16rpx',marginRight:'40rpx'}" :label="item.label" :name="item.value" ></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.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 } 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 } from '@/pagePrinter/devices.js'
	import { getPrinterDetail, addPrinter, updatePrinter } from '@/http/api/printer.js'
	import { categoryPage } from '@/http/api/cateGory.js'

	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",
		status: 1,
		contentType: '',
		subType: '',
		connectionType: "network",
		printType: [],
		name: '',
		receiptSize: '58mm',
		classifyPrint: '0',
		printQty: 'm1^1',
		printMethod: "all",
		selectcheckbox:[]
	
	})
	
	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})
		if (res.categoryList) {
			let arrs = []
			res.categoryList.forEach(eles => {
				arrs.push(eles)
			})
			res.selectcheckbox = arrs
		}
		form = Object.assign(form, res)
		if(form.printType)form.printType = JSON.parse(form.printType)
		
	}
	
	
	function sizeChange(e, name) {
		form[name] = e.detail.value
	}
	
	/**
	 * 保存
	 */
	async function save() {
		// 效验
		if (!form.contentType || !form.subType || !form.name || !form.address) {
			uni.$utils.showToast("请输入必填项")
			return
		}
		if (form.classifyPrint == 1 && form.selectcheckbox.length == 0) {
			uni.$utils.showToast("请选择部分分类")
			return
		}
		// 部分分类处理
		if (form.classifyPrint == 1) {
			let idstr = ''
			let arr = []
			form.selectcheckbox.forEach(element => {
				idstr += element + ','
				arr.push(pageData.partList.filter(ele => ele.id == element)[0])
			})
			console.log(form.selectcheckbox)
			form.categoryIds = idstr.substring(0, idstr.length - 1)
			form.categoryIds = JSON.stringify(form.selectcheckbox)
			form.categoryList = JSON.stringify(arr)
		}
		delete form.selectcheckbox;
		form.printType = JSON.stringify(form.printType)
		if (form.id) {
			delete form.createdAt
			delete form.updatedAt
			const res = updatePrinter({
				...form
			})
		} else {
			const res = addPrinter({
				...form
			})
		}
		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>