<template>
	<view>
		<view>
			<view class="list-item" @click.stop="toDetail(item.deviceId)" v-for="(item, index) in dataList" :key="index">
				<view class="item-content">
					<view class="img">
						<image :src="icon" v-if="item.state"></image>
						<image :src="iconoff" v-else></image>
					</view>
					<view class="text">
						<view class="title" >
							<text>{{ item.deviceName }}</text>
						</view>
						<view class="content">
							<text>设备号:{{ item.deviceNo }}</text>
						</view>
						<view class="content">
							<text v-if="item.bindState">已绑定商户: {{ item.mchNo }}</text>
							<text v-else>未绑定</text>
						</view>
					</view>
				</view>
				<view class="switch" style="border-bottom:none">
					<view @click.stop>	
						<switch :checked="item.state == 1 ? true : false" @change="onChange($event, item)" style="margin-left: 10rpx;" color="#3981FF" />
					</view>
				</view>
				<image src="../../static/img/right.svg" style="width:40rpx; height:40rpx;"></image>
			</view>
			<jeepayListNull :list="dataList"></jeepayListNull>
			<!-- 更改状态对话框 -->
			<jeepayConfirm ref="switchStatePopup" />
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import { onBackPress, onShow } from '@dcloudio/uni-app';
import jeepayListNull from '@/components/jeepayListNull/jeepayListNull.vue';
import jeepayConfirm from '@/components/jeepayConfirm/jeepayConfirm.vue'
const emit = defineEmits(['onChange','handleClose','handleConfirm','toDetail'])
const props = defineProps({
	dataList:{type:Array},
	icon:{type:String},
	iconoff:{type:String}
	
})
const popup = ref();
const switchStatePopup = ref();
const data = reactive({
	deviceId: '', //设备Id
	placeholder: '搜索商户号、名称、设备号',
	phone: '',
	startSearch:false
});

const appSearchData = ref('');

const search = ref()



//状态按钮改变的事件
const onChange = (e, item) => {
	item.state = Number(e.detail.value)
	switchStatePopup.value.comfirmOpen(
		function handleConfirm() {
			let params ={
				deviceId: item.deviceId,
				state: item.state
			}
			emit('handleConfirm',params)
		},
		undefined,
		function handleClose() {
			item.state = Number(!e.detail.value)
			emit('handleClose')
		}
	);
	emit('onChange',item)
};

const toDetail =(deviceId) =>{
	emit('toDetail',deviceId)
}

</script>
<style>
page {
	background-color: #f5f7fa;
}
</style>
