<template>
  <view class="content">
    <view class="x-c">
      <image style="width: 80px; height: 80px" :src="`/static/images/menus/${icon}.png`"></image>
    </view>
    <view class="pt50 pb50 fs30">
      <span>{{ title }}</span>
    </view>
    <view class="x-c">
      <u-icon size="150" color="#0055A2" name="scan" @click="handleScan"></u-icon>
    </view>
    <!-- #ifdef H5 -->
    <up-search
      shape="square"
      placeholder="请输入设备id"
      actionText="查询"
      :clearabled="false"
      :showAction="true"
      @custom="handleInputSearch"
    ></up-search>
    <!-- #endif -->
  </view>
</template>

<script setup>
let props = defineProps({
  title: {
    type: String,
    default: '请扫描设备'
  },
  icon: {
    type: String,
    default: 'useRecord'
  }
})
const emits = defineEmits(['deviceId'])
const customIconsMap = new Map([
  ['useRecord', '&#xe66e;'],
  ['dailyCheck', '&#xe614;'],
  ['maintain', '&#xe60e;'],
  ['periodCheck', '&#xe676;'],
  ['calibration', '&#xe83b;'],
  ['accept', '&#xe6de;'],
  ['transfer', '&#xe603;']
])
function iconMap(key) {
  return customIconsMap.get(key)
}

function handleScan() {
  uni.scanCode({
    onlyFromCamera: true,
    success: function (res) {
      emits('scanResult', res.result)
    }
  })
}
function handleInputSearch(e) {
  emits('deviceId', e)
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'CustomFont';
  src: url('@/static/iconfont/iconfont.ttf');
}
.content {
  padding-top: 100px;
  text-align: center;
  background-color: #fff;
  box-sizing: border-box;
  height: 100%;
}
</style>
