<template>
	<JeepayBackground :bgColorStyle="{ height: '706rpx' }">
		<JeepayCustomNavbar textColor="#fff" bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="云音响详情" backCtrl="back" />

		<JeepayTableListItem
			viewClass="list-item-by-detail"
			logo="/pageDevice/static/detailsLislImg/horn-white.svg"
			:title="vdata.deviceName"
			:subtitle="vdata.deviceNo"
			:moreBtnList="list"
		/>

		<view class="create-time">
			<view class="time-title">设备厂商</view>
			<view class="dev-info">{{ datamap?.provider(vdata.provider) }}</view>
		</view>
		<view class="create-time" style="border: none; padding-top: 0">
			<view class="time-title">创建时间</view>
			<view class="time-info">{{ vdata.createdAt }}</view>
		</view>
		<JeepayCard editText="编辑信息" @editTap="toEdit">
			<JeepayDescview>
				<JeepayDescviewItem title="设备编号" :desc="vdata.deviceParams?.deviceNo" />
				<JeepayDescviewItem title="设备名称" :desc="vdata.deviceName" />
				<JeepayDescviewItem title="绑定门店" :desc="vdata.storeName" />
			</JeepayDescview>
		</JeepayCard>
		<JDetailsSwitch title="设备状态" subTitle="状态禁用后，该设备将无法使用">
			<template #titleRight>
				<JeepayStateSwitch v-model:state="vdata.state" :showSwitchType="true" :updateStateFunc="confirmSwitch" />
			</template>
		</JDetailsSwitch>
		<view class="store-info">
			<JDetailsCell title="播报类型" :info="vdata.bindType == 0 ? '门店所有订单' : '来自受支持码牌的订单'" @tap="refBindType.open(vdata.bindType)" />
		</view>
		<JeepayCard
			viewStyle="margin-top:30rpx"
			title="受支持的云音响设备"
			subtitle="以下云音响设备将会播报来自当前码牌的订单"
			v-if="vdata.bindType == 1"
			@clickTitle="qrcId.open(vdata.storeId, vdata.qrcIdList, vdata.deviceId, vdata.bindQrcId)"
		>
			<template #titleRight>
				<image class="selected-qrcId" src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
			</template>
			<block v-for="v in vdata.qrcList" :key="v.qrcId">
				<qrcCode :title="v.qrcAlias" :subTitle="v.qrcId" />
			</block>
		</JeepayCard>

		<JSinglePopup ref="more" :list="list" activeColor="#FF5B4C" />
		<JSinglePopup ref="refBindType" :list="typeList" @confirm="editBindType" />
		<JeepayPopupConfirm ref="tips" />
		<uni-popup ref="popupDialog" type="dialog">
			<uni-popup-dialog
				mode="base"
				:before-close="true"
				title="播报金额"
				@close="
					() => {
						popupDialog.close();
						more.open();
					}
				"
				@confirm="testDevice"
			>
				<uni-easyinput :inputBorder="false" :clearable="false" v-model="vdata.amount" type="digit" placeholder="请输入播报金额" />
			</uni-popup-dialog>
		</uni-popup>
		<selectedQrcId ref="qrcId" @updateDetails="getDetails(vdata.deviceId)" />

		<view class="launch-box" v-if="vdata.provider === 'lkls'">
			<button @click="toLaunch(vdata.deviceNo)" style="background: #41b5ff; margin: 0 40rpx; margin-top: 40rpx; color: #fff">发布投放</button>
		</view>
	</JeepayBackground>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import infoBox from '@/commons/utils/infoBox.js';
import { reqLoad, API_URL_SYS_DEVICE_LIST, API_URL_SYS_CODE_LIST, $speakTest, $deviceUnbind } from '@/http/apiManager.js';
import qrcCode from './components/qrcCode.vue';
import datamap from '@/commons/utils/datamap.js';
import selectedQrcId from './components/selectedQrcId.vue';
import emit from '@/commons/utils/emit.js';
import go from '@/commons/utils/go.js';

// 监听 更新事件
onUnload(() => uni.$off(emit.ENAME_REF_SPEAKER_DETAIL));
uni.$on(emit.ENAME_REF_SPEAKER_DETAIL, function (data) {
	getDetails(vdata.deviceId);
});

onLoad((options) => {
	getDetails(options.deviceId);
});
const more = ref(null);
const tips = ref(null);
const refBindType = ref(null);
const popupDialog = ref(null);
const qrcId = ref(null);
const vdata = reactive({
	amount: ''
});

// 发布投放
const toLaunch = (deviceNo) => {
	uni.navigateTo({
		url: `/pages/release/release?deviceNo=${deviceNo}`
	});
};

const list = reactive([
	{
		label: '播报测试',
		value: 'test',
		fun: () => {
			vdata.amount = '';
			popupDialog.value.open();
		}
	},
	{ label: '解除绑定', value: 'remove', color: '#FF5B4C', fun: confirm }
]);
function confirm() {
	more.value.close();
	tips.value
		.open('确认解除绑定吗？', { confirmColor: '#FF5B4C' })
		.then((res) => {
			$deviceUnbind(vdata.deviceId).then((res) => {
				infoBox.showSuccessToast('解绑成功').then(() => {
					go.back(1, emit.ENAME_REF_SPEAKER_LIST);
				});
			});
		})
		.catch((err) => {
			more.value.open('remove');
		});
}
const typeList = [
	{ label: '门店所有订单', value: 0 },
	{ label: '来自受支持码牌的订单', value: 1 }
];
const getDetails = (params) => {
	reqLoad.getById(API_URL_SYS_DEVICE_LIST, params).then(({ bizData }) => {
		vdata.provider = bizData.provider;
		console.log(bizData, 'bizDatabizDatabizData');
		Object.assign(vdata, bizData);

		vdata.deviceParams = JSON.parse(vdata.deviceParams || '{}');
	});
};
// 修改设备状态
const confirmSwitch = (bol) => {
	return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, { state: bol }).then((res) => {
		emit.refPageAndSearchEmit(emit.ENAME_REF_SPEAKER_LIST);
	});
};
// 播报测试
function testDevice() {
	if (!vdata.amount) {
		return infoBox.showErrorToast('请输入播报金额');
	}
	$speakTest(vdata.deviceId, { amount: vdata.amount }).then((res) => {
		popupDialog.value.close();
	});
}
// 修改绑定设备信息
const editBindType = (val) => {
	tips.value
		.open('确认修改播报类型吗？')
		.then((res) => {
			vdata.bindType = val.value;
			return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, { bindType: vdata.bindType, qrcIdList: vdata.qrcIdList || [] });
		})
		.catch(() => {
			refBindType.value.open(vdata.bindType);
		});
};
// 去编辑页面
const toEdit = () => {
	go.to('PAGES_APP_HORN_BIND', { devId: vdata.deviceId });
};
</script>

<style lang="scss" scoped>
.create-time {
	display: flex;
	justify-content: space-between;
	margin: 0 75rpx;
	padding: 50rpx 0;
	font-size: 30rpx;
	border-top: 1rpx solid rgba(255, 255, 255, 0.2);
	.time-title {
		color: rgba(255, 255, 255, 0.7);
	}
	.time-info {
		color: #fff;
	}
}
.store-info {
	padding: 0.1rpx;
	margin: 0 35rpx;
	background-color: #fff;
	border-radius: $J-b-r32;
	overflow: hidden;
}
.default-img {
	width: 50rpx;
	height: 50rpx;
}

.dev-info {
	padding: 3rpx 15rpx;
	border-radius: 6rpx;
	background: rgba(255, 255, 255, 0.15);
	font-size: 26rpx;
	color: #fff;
}
.selected-qrcId {
	width: 40rpx;
	height: 40rpx;
	transform: rotate(90deg);
}
</style>
