<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/print-white.svg"
			:title="vdata.record.deviceName"
			:subtitle="vdata.record.deviceId"
			:moreBtnList="list" />
		<view class="create-time">
		  <view class="time-title">设备厂商</view>
		  <view class="dev-info">{{ datamap.provider(vdata.record.provider) }}</view>
		</view>
		<view class="create-time" style="border: none; padding-top: 0">
		  <view class="time-title">创建时间</view>
		  <view class="time-info">{{ vdata.record.createdAt }}</view>
		</view>
		<JeepayCard editText="编辑信息" @editTap="go.to('PAGES_APP_PRINT_BIND', {deviceId: vdata.record.deviceId})">
		 <JeepayDescview>
			 <JeepayDescviewItem title="设备名称" :desc="vdata.record.deviceName" />
			 <JeepayDescviewItem title="绑定门店" :desc="vdata.record.storeName" />
			 <JeepayDescviewItem title="打印参数" :desc="['仅打印', '仅播报', '打印并播报'][vdata.record.bizConfigParams?.printMode - 1]" />
			 <JeepayDescviewItem title="打印联数" :desc="vdata.record.bizConfigParams?.printNum" />
		 </JeepayDescview>
		 
		</JeepayCard>
		
		<JDetailsSwitch title="设备状态" subTitle="状态禁用后，该设备将无法使用">
		  <template #titleRight>
		    <JeepayStateSwitch v-model:state="vdata.record.state" :showSwitchType="true" :updateStateFunc="updateState" />
		  </template>
		</JDetailsSwitch>
  </JeepayBackground>
  <JSinglePopup ref="more" :list="list" activeColor="#FF5B4C" />
  <JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
	<uni-popup ref="popupDialog" type="dialog" :mask-click="false">
	  <uni-popup-dialog mode="base" title="金额" :before-close="true" @close="close" @confirm="testDevice">
	    <uni-easyinput v-model="vdata.amount" type="digit" placeholder="请输入金额" />
	  </uni-popup-dialog>
	</uni-popup>
</template>

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

const jeepayPopupConfirmRef = ref()
const popupDialog = ref(null)
const more = ref(null)

onLoad((options) => {
  refData(options.deviceId)
})

const vdata = reactive({
	record: {},
	amount: ''
})

// 监听 更新事件 
onUnload(() => uni.$off(emit.ENAME_REF_PRINTER_DETAIL))

uni.$on(emit.ENAME_REF_PRINTER_DETAIL, function(data){
	refData(vdata.record.deviceId)
})

// 获取设备详情
const refData = (id) => {
  reqLoad.getById(API_URL_SYS_DEVICE_LIST, id).then(({ bizData }) => {
		bizData.bizConfigParams = JSON.parse(bizData.bizConfigParams)
    vdata.record = bizData
  })
}

function deleteFunc () {
  jeepayPopupConfirmRef.value.open('您确认解绑设备吗？',{ confirmColor: '#FF5B4C' }).then(() => {
    $deviceUnbind(vdata.record.deviceId).then(() => {
      infoBox.showSuccessToast('解绑成功')
      return go.back(1, emit.ENAME_REF_PRINTER_LIST)
    })
  })
}

const list = reactive([
  { label: '打印测试', value: 'test', fun: () => {
			vdata.amount = ''
      popupDialog.value.open()
    }},
  { label: '解除绑定', value: 'remove', color: '#FF5B4C', fun: deleteFunc },
])

// 更新状态
function updateState(state) {
  return reqLoad.updateById(API_URL_SYS_DEVICE_LIST, vdata.record.deviceId, { state: state }).then(() => {
		emit.refPageAndSearchEmit(emit.ENAME_REF_PRINTER_LIST) // 修改列表页面。
    infoBox.showSuccessToast('修改成功')
  })
}

// 关闭金额弹出框
function close() {
	popupDialog.value.close()
	more.value.open()
}
// 打印测试
function testDevice() {
	if (!vdata.amount) {
		return infoBox.showToast('请输入金额')
	}
	$printTest(vdata.record.deviceId, vdata.amount).then(() => {
		popupDialog.value.close()
	})
}

</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;
}
.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;
}
</style>
