<template>
	<view class="page-gray color-333 u-font-28">
		<view class="block">
			<!-- <up-popup :show="show" @close="close" @open="open"> -->
			<picker-item title="打印机品牌" required v-model="form.contentType" :modelValue="form.contentType"
				:list="brandt.list"></picker-item>
			<picker-item title="小票打印" required v-model="form.subType" :modelValue="form.subType"
				:list="receipt.list"></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">
							<radio value="58mm" :checked="form.receiptSize == '58mm'" class="scale7" />
							<text>58mm</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="80mm" :checked="form.receiptSize == '80mm'" class="scale7" />
							<text>80mm</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">
							<radio value="0" :checked="form.classifyPrint == '0'" class="scale7" />
							<text>打印所有</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="1" :checked="form.classifyPrint == '1'" class="scale7" />
							<text>部分分类(仅打印制作单[厨房])</text>
						</label>
						<!-- <label class="radio u-m-r-60">
							<radio value="2" :checked="form.classifyPrint == '2'" class="scale7" />
							<text>部分商品</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 partList" :key="item.id" :customStyle="{marginBottom: '8px'}"
							: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,'tablePrint')">
						<label class="radio u-m-r-60">
							<radio value="0" :checked="form.tablePrint == '0'"  class="scale7" />
							<text>打印所有</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="1" :checked="form.tablePrint == '1'" class="scale7" />
							<text>打印部分桌台</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,'printQty')">
						<label class="radio u-m-r-60">
							<radio value="c1m1^2" :checked="form.printQty == 'c1m1^2'" class="scale7" />
							<text>顾客联+商家联「2张」</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="m1^1" :checked="form.printQty == 'm1^1'" class="scale7" />
							<text>只打印商家联「1张」</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="c1^1" :checked="form.printQty == 'c1^1'" class="scale7" />
							<text>只打印顾客联「1张」</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="c2m1^3" :checked="form.printQty == 'c2m1^3'" class="scale7" />
							<text>2张顾客联+1张商家联「3张」</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">
							<radio value="all" :checked="form.printMethod == 'all'" class="scale7" />
							<text>打印全部</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="one" :checked="form.printMethod == 'one'" class="scale7" />
							<text>仅打印制作单[厨房]</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="normal" :checked="form.printMethod == 'normal'" class="scale7" />
							<text>仅打印结账单[前台]</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 :customStyle="{marginBottom: '8px'}" label="确认退款单" name="refund"
							style="margin-right: 40rpx;font-size: 28rpx;">
						</up-checkbox>
						<up-checkbox :customStyle="{marginBottom: '8px'}" label="交班单" name="handover"
							style="margin-right: 40rpx;font-size: 28rpx;">
						</up-checkbox>
						<up-checkbox :customStyle="{marginBottom: '8px'}" label="排队取号" name="queue"
							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,'printReceipt')">
						<label class="radio u-m-r-60">
							<radio value="0" class="scale7" />
							<text>全部打印</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="1" :checked="form.printReceipt == '1'" class="scale7" />
							<text>仅厨房</text>
						</label><label class="radio u-m-r-60">
							<radio value="2" :checked="form.printReceipt == '2'" class="scale7" />
							<text>仅前台</text>
						</label>
					</radio-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> -->
					<my-switch v-model="form.status"></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="">
					<uni-number-box v-model="form.sort"></uni-number-box>
				</view>
			</view> -->
			<!-- 	<view class="u-p-b-24 u-m-b-24 border-bottom">
				<view class="title font-bold">商品分类</view>
				<view class="u-m-t-16 u-flex u-row-between " @click="categoryShow">
					<view class="color-333" v-if="form.sort">{{form.sort}}</view>
					<view class="color-999" v-else>请选择</view>
					<uni-icons type="right" color="#999" size="16"></uni-icons>
				</view>
			</view> -->
		</view>

		<view style="height: 60rpx;"></view>
		<view class="">
			<view class="btn">
				<my-button shape="circle" @click="save">保存</my-button>
			</view>
		</view>
		<!-- 消息提示 -->
		<up-toast ref="uToastRef"></up-toast>

		<!-- 选择分类 -->
		<choose-category v-model="chooseCategoryShow"></choose-category>
	</view>


</template>

<script setup>
	import {
		devices,
		models,
		subTypes,
		brand,
		receipts,
	} from '@/pagePrinter/devices.js'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		computed,
		watch,
		onMounted,
		toRef,
		getCurrentInstance

	} from 'vue';
	import go from '@/commons/utils/go.js';
	import pickerItem from './components/picker-item.vue';
	import myRadioGroup from './components/my-radio-group.vue';
	import * as Api from '@/http/yskApi/devices.js'
	import chooseCategory from './components/choose-category.vue';

	//选择分类
	let chooseCategoryShow = ref(false)

	function categoryShow() {
		chooseCategoryShow.value = true
	}
	// brand
	const brandt = reactive({
		list: brand,
		selIndex: '',
	})
	const refs = getCurrentInstance()
	// 小票
	const receipt = reactive({
		list: receipts,
		selIndex: '',
	})
	let userId = ref(null)
	//品牌
	const brands = reactive({
		list: devices,
		selIndex: '',
	})
	let partList = ref([])
	//设备尺寸
	const deciveSize = reactive({
		list: [{
				label: '58mm',
				value: '0'
			},
			{
				label: '80mm',
				value: '1'
			},
		],
		selIndex: 1
	})

	let getlist = async () => {
		const res = await Api.tbShopCategoryget({
			shopId: uni.getStorageSync("shopId"),
			sort: "sort,desc",
			page: 0,
			size: 500
		})
		let arr = []
		res.content.forEach(ele => {
			arr.push({
				id: ele.id,
				name: ele.name
			})
			if (ele.childrenList.length > 0) {
				ele.childrenList.forEach(element => {
					arr.push({
						id: element.id,
						name: element.name
					})
				})
			}
		})
		partList.value = arr
	}

	function sizeChange(e, name) {
		form[name] = e.detail.value
	}
	//打印份数
	const printerNums = reactive({
		list: new Array(4).fill(1).map((v, index) => {
			return {
				label: index * 1 + 1 + '份',
				value: '' + index
			}
		}),
		selIndex: 0
	})
	//尾部留空
	const feets = ref([0, 1, 2, 3, 4, 5, 8].map(v => {
		return v + '行'
	}))
	let form = reactive({
		sort: "0",
		status: 1,
		connectionType: "network",
		printType: [],
		name: '',
		receiptSize: '58mm',
		classifyPrint: '0',
		printQty: 'm1^1',
		printType: ["refund", 'handover', 'queue'],
		printMethod: "all",
		selectcheckbox:[]

	})
	async function save() {

		// 效验
		if (!form.contentType || !form.subType || !form.name || !form.address) {
			refs.ctx.$refs.uToastRef.show({
				type: 'default',
				message: "请输入必填项",
			})
			return
		}
		if (form.classifyPrint == 1 && form.selectcheckbox.length == 0) {
			refs.ctx.$refs.uToastRef.show({
				type: 'default',
				message: "请选择部分分类",
			})
			return
		}
		// 部分分类处理
		if (form.classifyPrint == 1) {
			let idstr = ''
			let arr = []
			form.selectcheckbox.forEach(element => {
				idstr += element + ','
				arr.push(partList.value.filter(ele => ele.id == element)[0])
			})
			form.categoryIds = idstr.substring(0, idstr.length - 1)
			form.categoryList = JSON.stringify(arr)
		}
		if (userId.value) {
			delete form.createdAt
			delete form.updatedAt
			const res = await Api.tbPrintMachine({
				...form
			}, 'put')
		} else {
			const res = await Api.tbPrintMachine({
				...form
			})
		}
		go.back()
		// go.to('/pagePrinter/index/index')
	}
	// watch(() => form.config.model, (newval) => {
	// 	console.log(newval);
	// })
	// const option = reactive({})
	async function getdetails() {
		const res = await Api.printerd(userId.value)
		if (res.categoryIds) {
			let arr = res.categoryIds.split(',')
			let arrs = []
			arr.forEach(eles => {
				arrs.push(eles * 1)
			})
			res.selectcheckbox = arrs
		}
		form = Object.assign(form, res)
		form.printType = JSON.parse(form.printType)
	}
	onLoad((options) => {
		getlist()
		if (options.id) {
			// 有id是编辑，获取详情
			userId.value = options.id
			getdetails()
		} else {
			userId.value = null
		}
		// Object.assign(option, opt)
	})
	// show(()=>{
	// 	getlist()
	// })
</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>