<!--
  组件功能： 设备通用渲染页面
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/12/06 13:25
-->
<template>
  <!-- 码牌 -->
  <template v-if="props.type == 'qrc'">
    <JeepayTableListItem :logo="codeImgListByQrc[record.qrcState]" :title="record.qrcAlias || '未命名'" :subtitle="record.qrcId" :state="record.qrcState" @tap="toDetailPage" />
  </template>

  <!-- 辅助终端  -->
  <template v-if="props.type == 'storeTerminal'">
    <JeepayTableListItem :logo="codeImgListByTerm[record.state]" :title="record.trmName" :subtitle="record.trmNo" :state="record.state" @tap="toDetailPage" />
  </template>

  <!-- 通用设备  -->
  <template v-if="props.type == 'device'">
    <JeepayTableListItem
      :logo="vdata[`imgListByType${props.record.deviceType}`][props.record.state]"
      :title="record.deviceName"
      :subtitle="record.deviceId"
      :state="record.state"
      @tap="toDetailPage"
    />
  </template>
  <template v-if="props.type == 'face'">
    <JeepayTableListItem :logo="faceImgListByFace[record.state]" :subtitle="record.deviceNo" :state="record.qrcState" @tap="toDetailPage">
      <template #title>
        {{ record.deviceName }}
        <JeepayTag :type="record.provider == 'wxpayQWPro' ? 'green-rgba' : 'blue'">{{ record.provider == 'wxpayQWPro' ? '青蛙刷脸Pro' : '蜻蜓F4' }}</JeepayTag>
      </template>
    </JeepayTableListItem>
  </template>
</template>

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

const codeImgListByQrc = ['/pageDevice/static/detailsLislImg/code-none.svg', '/pageDevice/static/devIconImg/icon-code.svg']

const codeImgListByTerm = ['/pageDevice/static/detailsLislImg/trm-none.svg', '/pageDevice/static/devIconImg/icon-term.svg']
const faceImgListByFace = ['/pageDevice/static/devIconImg/icon-face-0.svg', '/pageDevice/static/devIconImg/icon-face-1.svg']

// 定义传入属性
const props = defineProps({
  type: { type: String, default: 'device' }, // 类型

  record: { type: Object, default: () => {} }, // 渲染对象
})

const vdata = reactive({
  imgListByType1: ['/pageDevice/static/detailsLislImg/horn-none.svg', '/pageDevice/static/devIconImg/icon-horn.svg'],
  imgListByType2: ['/pageDevice/static/detailsLislImg/print-none.svg', '/pageDevice/static/devIconImg/icon-print.svg'],
  imgListByType3: ['/pageDevice/static/detailsLislImg/scanPos-none.svg', '/pageDevice/static/devIconImg/icon-scanPos.svg'],
  imgListByType4: ['/pageDevice/static/detailsLislImg/pos-none.svg', '/pageDevice/static/devIconImg/icon-pos.svg'],
  imgListByType5: ['/pageDevice/static/detailsLislImg/horn-none.svg', '/pageDevice/static/devIconImg/icon-horn.svg'],
  imgListByType7: ['/pageDevice/static/detailsLislImg/lite-none.svg', '/pageDevice/static/detailsLislImg/icon-lite.svg'],
})

function toDetailPage() {
  if (props.type == 'qrc') {
    return go.to('PAGES_APP_CODE_DETAILS', { codeId: props.record.qrcId })
  }

  if (props.type == 'storeTerminal') {
    return go.to('PAGES_APP_TERMINAL_DETAILS', { trmId: props.record.trmId })
  }

  // 通用设备  1-喇叭  2-打印机 3-扫码POS 4-智能POS
  if (props.record.deviceType) {
    const deviceId = props.record.deviceId
    switch (props.record.deviceType) {
      case 1:
        go.to('PAGES_APP_HORN_DETAILS', { deviceId })
        break
      case 2:
        go.to('PAGES_APP_PRINT_DETAILS', { deviceId })
        break
      case 3:
        go.to('PAGES_APP_SCANPOS_DETAILS', { deviceId })
        break
      case 4:
        go.to('PAGES_APP_POS_DETAILS', { deviceId })
        break
      case 6:
        go.to('PAGES_APP_FACE_DETAILS', { deviceId })
        break
      case 7:
        go.to('PAGES_LITE_DETAILS', { deviceId })
        break
    }
  }
}
</script>

<style lang="scss" scoped></style>
