<template>
  <view class="equipment-info">
    <!-- 背景图片 -->
    <image src="/static/equipmentImg/big-code.svg" class="back-img" />

    <view class="content">
      <view class="code" @tap="down">
        <image :src="info.qrcodeUrl" />
      </view>

      <view class="name">{{ info.qrcAlias ? info.qrcAlias : "未命名" }}</view>
      <view class="no">{{ info.qrcId }}</view>

      <view class="edit" @tap="edit">
        <image src="/static/equipmentImg/edit.svg" />
        编辑信息
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"

const vdata = defineProps({
  info: { type: Object, default: () => {} },
})

const emits = defineEmits(["downUrl", "editInfo"])

const down = () => emits("downUrl")
const edit = () => emits("editInfo")
</script>

<style scoped lang="scss">
.equipment-info {
  //   position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  //   overflow: hidden;

  .back-img {
    position: absolute;
    right: -30rpx;
    top: 0;
    width: 100%;
    height: 650rpx;
  }
  .content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    .code {
      margin-top: 70rpx;
      margin-bottom: 20rpx;
      width: 360rpx;
      height: 360rpx;
      border-radius: 20rpx;
      background: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 300rpx;
        height: 300rpx;
      }
    }
    .name {
      width: 500rpx;
      margin: 0 auto;
      text-align: center;
      line-height: 60rpx;
      color: #ffffff;
      font-size: 33rpx;
      font-weight: 700;
    }
    .no {
      font-size: 25rpx;
      color: rgba(255, 255, 255, 0.6);
      margin-top: 12rpx;
      margin-bottom: 30rpx;
    }
    .edit {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      padding: 25rpx 42rpx;
      border-radius: 10rpx;
      margin-bottom: 50rpx;
      color: #7737fe;
      font-size: 28rpx;

      image {
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }
    }
  }
}
</style>
