<template>
  <JeepayBackground :bgColorStyle="{}">
    <JeepayCustomNavbar textColor="#fff" bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="智能POS详情" backCtrl="back" />

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

	<JeepayCard editText="编辑信息" @editTap="go.to('PAGES_APP_POS_BIND', {deviceId: vdata.record.deviceId})">
	 
	 <JeepayDescview>
		 <JeepayDescviewItem title="设备名称" :desc="vdata.record.deviceName" />
		 <JeepayDescviewItem title="绑定应用" :desc="vdata.record.appId" />
		 <JeepayDescviewItem title="绑定门店" :desc="vdata.record.storeName" />
	 </JeepayDescview>
	 
	</JeepayCard>
	
	<JeepayCard title="其他设置" viewStyle="margin-top: 30rpx;">
		
		<JeepayTableListItem title="终端状态" subtitle="状态禁用后，当前终端将无法使用">
			<template #titleRight>
				 <JeepayStateSwitch v-model:state="vdata.record.state" :showSwitchType="true" :updateStateFunc="updateState" />
			</template>
		</JeepayTableListItem>
		
	</JeepayCard>

  </JeepayBackground>

  <JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { reqLoad, API_URL_SYS_DEVICE_LIST, $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'

const jeepayPopupConfirmRef = ref()

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

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


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

function refData(id){
	reqLoad.getById(API_URL_SYS_DEVICE_LIST, id).then(({ bizData }) => {
	  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_AUTOPOS_LIST)
    })
  })
}
const list = reactive([
  { label: '解绑设备', value: 'delete', color: 'red', fun: deleteFunc },
])

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

</script>

<style lang="scss" scoped>
.default-image {
  width: 50rpx;
  height: 50rpx;
}
</style>
