<template>
  <view class="equipment-info">
    <!-- 背景图片 -->
    <image :src="props.bgImg" class="back-img" />

    <view class="content">
      <image :src="props.icon" class="code" />

      <view class="name">{{ props.qrcAlias }}</view>
      <view class="no">{{ props.qrcId }}</view>

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

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

const props = defineProps({
  bgImg: { type: String, default: "" }, // 背景图片
  icon: { type: String, default: "" }, // 居中的icon
  qrcAlias: { type: String, default: "" }, // 标题
  qrcId: { type: String, default: "" }, // iD
  info: { type: Object, default: () => {} },
  editIsShow: { type: Boolean, default: true }, // 是否展示编辑按钮
})

const emits = defineEmits(["editInfo"])

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

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

  .back-img {
    position: absolute;
    right: -30rpx;
    top: -20rpx;
    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: 93rpx;
      height: 93rpx;
    }
    .name {
      width: 500rpx;
      margin: 0 auto;
      text-align: center;
      font-weight: 700;
      line-height: 60rpx;
      color: #ffffff;
      font-size: 33rpx;
    }
    .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>
