<template>
	<view class="container">
		<form @submit="onSubmit">
			<view class="page-block">
				<view class="page-title-block">
					<view class="title">基本信息</view>
				</view>
				<view class="content">
					<view class="cell flex flex-y-center arr-r" v-if="type==1">
						<view class="title-block required">
							<text>所属门店</text>
						</view>
						<view class="desc">
							<picker mode="selector" :range="tableTypeList" range-key="title"
								@change="onTableTypeChange">
								<view>
									{{tableTypeActive}}
								</view>
							</picker>
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>设备名称</text>
						</view>
						<view class="desc">
							<input type="text" :value="info.name" name="name" class="input-box" placeholder="请输入"
								placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="cell flex flex-y-center arr-r">
						<view class="title-block required">
							<text>设备位置</text>
						</view>
						<view class="desc">
							<picker mode="selector" :range="printerAddrList" @change="onPrinterAddrChange">
								<view :class="[printerAddr?'':'desc-placeholder','input-box']">{{printerAddr || '请选择'}}
								</view>
							</picker>
						</view>
					</view>
					<view class="cell flex flex-y-center arr-r">
						<view class="title-block required">
							<text>设备状态</text>
						</view>
						<view class="desc" @click="onPrinterStatusChange">
							<view class="input-box">{{printerStatus}}</view>
						</view>
					</view>
					<view class="cell flex flex-y-center arr-r">
						<view class="title-block required">
							<text>打印标签</text>
						</view>
						<view class="desc">
							<picker mode="selector" :range="listlabel" @change="onPrinterlabel" :range-key="'tag_name'">
								<view :class="[printerTypelabel?'':'desc-placeholder','input-box']">
									{{printerTypelabel || '请选择'}}
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="page-block">
				<view class="page-title-block">
					<view class="title">设备信息</view>
				</view>
				<view class="content">
					<view class="cell flex flex-y-center arr-r">
						<view class="title-block ">
							<text>设备类型</text>
						</view>
						<view class="desc">
							<picker mode="selector" :range="printerTypeList" @change="onPrinterTypeChange"
								:range-key="'name'">
								<view :class="[printerType?'':'desc-placeholder','input-box']">
									{{printerType|| '请选择'}}
								</view>
							</picker>
						</view>
					</view>
					
					<block v-if="printerTypeid==1">
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>设备编码</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.dyj_id" name="dyj_id" class="input-box"
									placeholder="请输入打印机设备编码" placeholder-class="desc-placeholder">
							</view>
						</view>

						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>API秘钥</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.dyj_key" name="dyj_key" class="input-box"
									placeholder="请输入打印机API秘钥" placeholder-class="desc-placeholder">
							</view>
						</view>
					</block>

					<block v-if="printerTypeid==2">
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>打印机终端号</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.dyj_id" name="dyj_id" class="input-box"
									placeholder="请输入打印机终端号" placeholder-class="desc-placeholder">
							</view>
						</view>

						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>打印机终端密钥</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.token" name="token" class="input-box"
									placeholder="请输入打印机终端密钥" placeholder-class="desc-placeholder">
							</view>
						</view>

						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>用户id(管理中心系统集成里获取)</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.yy_id" name="yy_id" class="input-box"
									placeholder="请输入用户id" placeholder-class="desc-placeholder">
							</view>
						</view>
				
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>apikey(管理中心系统集成里获取</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.api" name="api" class="input-box"
									placeholder="请输入apikey" placeholder-class="desc-placeholder">
							</view>
						</view>
						
					</block>

					<block v-if="printerTypeid==3||printerTypeid==7">
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>飞鹅账号</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.fezh" name="fezh" class="input-box"
									placeholder="请输入飞鹅账号" placeholder-class="desc-placeholder">
							</view>
						</view>

						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>飞鹅UKEY</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.fe_ukey" name="fe_ukey" class="input-box"
									placeholder="请输入UKEY" placeholder-class="desc-placeholder">
							</view>
						</view>

						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>打印机编号</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.fe_dycode" name="fe_dycode" class="input-box"
									placeholder="请输入打印机编号" placeholder-class="desc-placeholder">
							</view>
						</view>
						
					</block>

					<block v-if="printerTypeid==4">
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>打印机设备编码</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.xx_sn" name="xx_sn" class="input-box"
									placeholder="请输入打印机设备编码" placeholder-class="desc-placeholder">
							</view>
						</view>
					</block>

					<block v-if="printerTypeid==5">

						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>佳搏商户编号</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.jia_bercode" name="jia_bercode" class="input-box"
									placeholder="请输入打印机商户编号" placeholder-class="desc-placeholder">
							</view>
						</view>
						
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>佳搏秘钥</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.jia_apikey" name="jia_apikey" class="input-box"
									placeholder="请输入秘钥" placeholder-class="desc-placeholder">
							</view>
						</view>

						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>佳搏设备号</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.jia_deviceid" name="jia_deviceid" class="input-box"
									placeholder="请输入打印机设备号" placeholder-class="desc-placeholder">
							</view>
						</view>
						
					</block>

					<block v-if="printerTypeid==6">
					
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>芯烨云后台注册账号</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.xyy_user" name="xyy_user" class="input-box"
									placeholder="请输入芯烨云后台注册账号" placeholder-class="desc-placeholder">
							</view>
						</view>
						
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>芯烨云UserKey</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.xyy_user_key" name="xyy_user_key" class="input-box"
									placeholder="请输入芯烨云UserKey" placeholder-class="desc-placeholder">
							</view>
						</view>
						
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>打印机编号</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.xyy_no" name="xyy_no" class="input-box"
									placeholder="请输入打印机编号" placeholder-class="desc-placeholder">
							</view>
						</view>
					</block>
					
					<block v-if="printerTypeid==8">
					
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>商米AppID</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.shangmi_appid" name="shangmi_appid" class="input-box"
									placeholder="请输入商米AppID" placeholder-class="desc-placeholder">
							</view>
						</view>
						
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>商米AppKey</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.shangmi_appkey" name="shangmi_appkey" class="input-box"
									placeholder="请输入商米AppKey" placeholder-class="desc-placeholder">
							</view>
						</view>
						
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>商米SN</text>
							</view>
							<view class="desc">
								<input type="text" :value="info.shangmi_sn" name="shangmi_sn" class="input-box"
									placeholder="请输入商米SN" placeholder-class="desc-placeholder">
							</view>
						</view>
					</block>
					
					
				</view>
			</view>

			<!--  -->
			<view class="page-block">
				<view class="page-title-block">
					<view class="title">打印信息</view>
				</view>
				<view class="content">
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>打印次数</text>
						</view>
						<view class="desc">
							<input type="text" :value="info.num" name="num" class="input-box" placeholder="请输入打印次数"
								placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="tips">
						易联云打印机打印次数在易联云后台控制
						喜讯打印机最大值为4
					</view>
				</view>
			</view>
			
			<!--  -->
			<view class="footer-bar" style="position: relative;">
				<view class="content flex flex-center" style="background: none;">
					<button hover-class="none" class="btn" form-type="submit">
						立即添加
					</button>
				</view>
			</view>

		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				printerAddrList: ['前台', '厨房', '排队取号','标签打印（仅限飞鹅）'],
				printerAddr: '',
				printerStatus: '开启',

				printerTypeList: [{
						name: '365',
						id: 1
					}, {
						name: '易联云(型号:k4)',
						id: 2
					}, {
						name: '飞鹅(型号:FP-58W)',
						id: 3
					}, {
						name: '喜讯(型号:XP58IIQR)',
						id: 4
					},
					{
						name: '佳搏(SH584)',
						id: 5
					},
					{
						name: '芯烨云(XP-T58H)',
						id: 6
					},
					{
						name: '飞鹅(型号:FP-N20W)(仅限标签打印)',
						id: 7
					},
					{
						name: '商米(型号:NT211)',
						id: 8
					},
				],

				printerType: '365',
				printerTypeid: 1,
				location: 1,
				state: 1,
				listlabel: [],
				printerTypelabel: "",
				tag_id: "",
				type: 2,
				tableTypeList: [],
				tableTypeActive: "请选择",

			}
		},

		onLoad(e) {
			this.type = e.type || 2;
			if (e.type == 1) {
				this.shop_store_index()
			} else {
				this.store_id = uni.getStorageSync("store_id")
				this.getData()
			}
			if (e.id) {
				this.printinfo(e.id)
			}
		},

		methods: {
			shop_store_index() {
				this.request({
					url: 'Smdcshop/shop_store_index',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					}
				}).then(res => {
					if (res.code == 200) {
						this.tableTypeList = res.data;
					}
				})
			},

			onTableTypeChange(e) {
				this.tableTypeActive = this.tableTypeList[e.detail.value].title;
				this.store_id = this.tableTypeList[e.detail.value].id;
				this.printerTypelabel = '';
				this.tag_id = '';
				this.$nextTick(()=>{
					this.getData();
				})
			},
			
			printinfo(id) {
				this.request({
					url: 'Smdcshop/print_update_info',
					data: {
						id,
					}
				}).then(res => {
					if (res.code == "200") {
						this.info = res.data;
						// 打印位置
						this.location = res.data.location;
						this.printerAddr = this.printerAddrList[Number(res.data.location) - 1]
						// 设备状态
						this.state = res.data.state;
						this.printerStatus = this.state == 1 ? '开启' : '关闭';
						// 标签
						for (let i of this.listlabel) {
							if (i.id == res.data.tag_id) {
								this.printerTypelabel = i.tag_name
							}
						}
						this.tag_id = res.data.tag_id;

						// 设备类型
						for (let i of this.printerTypeList) {
							if (i.id == res.data.type) {
								this.printerType = i.name
							}
						}
						this.printerTypeid = res.data.type;
					}
				})
			},

			getData(page) {
				this.request({
					url: 'Smdcshop/print_tag',
					data: {
						store_id: this.store_id
					}
				}).then(res => {
					if (res.code == "200") {
						this.listlabel = res.data
					}
				})
			},

			onPrinterlabel(e) {
				this.printerTypelabel = this.listlabel[e.detail.value].tag_name;
				this.tag_id = this.listlabel[e.detail.value].id;
			},

			onPrinterAddrChange(e) {
				console.log(e)
				this.printerAddr = this.printerAddrList[e.detail.value]
				this.location = Number(e.detail.value) + 1; //打印机位置：1前台，2后厨 3标签打印机
			},

			onPrinterStatusChange() {
				let statusArr = ['开启', '关闭']
				uni.showActionSheet({
					itemList: statusArr,
					success: (r) => {
						console.log(r.tapIndex)
						this.state = Number(r.tapIndex) + 1
						this.printerStatus = statusArr[r.tapIndex]
					}
				})
			},

			onPrinterTypeChange(e) {
				this.printerType = this.printerTypeList[e.detail.value].name;
				this.printerTypeid = this.printerTypeList[e.detail.value].id;
			},
			
			onSubmit(e) {
				
				let params = {
						state: this.state,
						location: this.location,
						tag_id: this.tag_id,
						store_id: this.store_id,
						type: this.printerTypeid,
						dyj_id:'',
						dyj_key:'',
					},
					url;
				var data = Object.assign(params, e.detail.value);
				console.log(data, "data")
				if (this.info.id) {
					params.id = this.info.id
					url = "Smdcshop/print_update"
				} else {
					url = 'Smdcshop/print_add'
				}

				if (data.name == "") {
					uni.showToast({
						title: "请输入名称",
						icon: 'none'
					})
					return false
				}

				this.request({
					url,
					data: data
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},



		}
	}
</script>

<style>
	@import url("../static/css/common.css");

	page {
		background-color: #F4F5F7;
	}
	.tips{
		font-size: 26rpx;
		color: red;
		padding: 20rpx 0;
	}
</style>
