<template>
	<view class="default-box-padding  bg-fff u-font-28 border-r-12 box-shadow u-m-b-30">
		<view class="u-flex u-row-between u-p-b-24 border-bottom">
			<view class="u-flex">
				<!-- <text>{{ subTypesName(data.subType)}}</text> -->
				<text>{{ data.name}}</text>
				<text class="color-999 u-font-24">（{{data.address}}）</text>
			</view>
			<view class="u-flex u-col-center">
				<template v-if="data.status">
					<text class="online">在线，状态正常</text>
				</template>
				<template v-else>
					<image class="icon-warning" src="/pagePrinter/static/icon/icon-warning.svg" mode=""></image>
					<text class="leave u-m-l-10">离线</text>
				</template>

			</view>
		</view>

		<view class="u-m-t-24">
			<view class="u-flex u-row-between">
				<view class="u-flex u-col-center">
					<image class="icon" src="/pagePrinter/static/icon/icon-setting.svg" mode=""></image>
					<view class="color-666 u-m-l-10">是否启用</view>
				</view>
				<view>
					<my-switch v-model="data.status" @change="openDiscountChange"></my-switch>
				</view>
			</view>
			<view class="u-flex u-row-between u-m-t-32">
				<view class="u-flex u-col-center">
					<image class="icon" src="/pagePrinter/static/icon/icon-type.svg" mode=""></image>
					<view class="color-666 u-m-l-10">类型</view>
				</view>
				<view>
					{{subTypesName(data.subType)}}
				</view>
			</view>
			<view class="u-flex u-row-between u-m-t-32">
				<view class="u-flex u-col-center">
					<image class="icon" src="/pagePrinter/static/icon/icon-category.svg" mode=""></image>
					<view class="color-666 u-m-l-10">分类</view>
				</view>
				<view>
					{{devicesName(data.contentType)}}
				</view>
			</view>
			<view class="u-m-t-32 u-flex u-row-right gap-20">
				<my-button v-if="data.connectionType == 'network'" shape="circle" :width="140" :height="56"
					type="cancel" @tap="delTableHandleEvent()" plain>删除</my-button>
				<my-button v-if="data.connectionType == 'network'" shape="circle" @click="toUrl" :width="140"
					:height="56" plain>编辑</my-button>
			</view>
		</view>
		<!-- 删除弹窗 -->
		<my-model desc="确认删除?" ref="delModel" @confirm="delModelConfirm"></my-model>

	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue';
	import { devices, models, subTypes } from '@/pagePrinter/devices.js'
	import go from '@/commons/utils/go.js'

	import myModel from '@/components/my-components/my-model.vue'
	import { updatePrinter, delPrinter } from '@/api/printer.js'
	
	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		}
	})
	const emit = defineEmits(['init'])
	const delModel=ref(null)
	
	/**
	 * 编辑
	 */
	let toUrl = () => {
		go.to('PAGES_PRINTER_ADD', {
			id: props.data.id
		})
	}

	function devicesName(value) {
		return devices.find(item => item.value == value).name
	}

	function modelsName(value) {
		return models.find(item => item.value == value).name
	}

	function subTypesName(value) {
		return subTypes.find(item => item.value == value).name
	}

	function timeFilter(s) {
		return dayjs(s).format('YYYY-MM-DD HH:mm:ss')
	}

	/**
	 * 状态修改
	 * @param {Object} d
	 */
	async function openDiscountChange(d) {
		delete props.data.createdAt
		delete props.data.updatedAt
		const res = await updatePrinter({
			...props.data
		})
		emit('init', '')
	}
	
	/**
	 * 删除
	 */
	function delTableHandleEvent() {
		delModel.value.open()
	}
	
	/**
	 * 删除分类确认
	 */
	async function delModelConfirm() {
		const res = await delPrinter(props.data.id)
		emit('init', '')
		delModel.value.close()
	}
</script>

<style lang="scss" scoped>
	.border-bottom {
		border-bottom: 1px solid rgb(240, 240, 240);
	}

	.box-shadow {
		box-shadow: 0 0 5px #eee;
	}

	.online {
		color: #0FC161;
	}

	.leave {
		color: #999;
	}

	.icon-warning {
		width: 34rpx;
		height: 30rpx;
	}

	.icon {
		width: 24rpx;
		height: 24rpx;
	}
</style>