<template>
  <div class="item">
    <div class="cover">
      <span class="logo">
        <img :src="imgMap[item.type]" alt="">
      </span>
      <img :src="item.QrCode" class="code" />
    </div>
    <div class="content">
      <h4>{{ item.title }}</h4>
      <div class="btns">
        <el-button type="primary" size="small" @click="viewLink(item.link)">預覽</el-button>
        <el-button type="primary" size="small" @click="copyLink(item.link)">復製鏈接</el-button>
      </div>
      <el-input placeholder="輸入鏈接" v-model="link" width="100%" />
    </div>
  </div>
</template>

<script>
import { copyText } from '@/util'
import { ref } from '@vue/reactivity'

export default {
  props: ['item'],
  setup(props) {
    const link = ref(props.item.link)
    const imgMap = {
      building: require('@/assets/image/edit_type_panorama.png'),
      house: require('@/assets/image/scene_map_3d.png'),
      garden: require('@/assets/image/photoview.png'),
    }

    return { imgMap, link }
  },
  methods: {
    copyLink() {
      copyText(this.link)
      this.$message('鏈接復製成功');
    },
    viewLink() {
      window.open(this.link)
    }
  },
}
</script>
<style lang="less" scoped>

.item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.cover {
  flex: none;
  margin-right: 8px;
  position: relative;

  .code {
    width: 126px;
    height: 126px;
    display: block;
    object-fit: cover;
  }

  .logo {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    position: absolute;
    left: 8px;
    top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 20px;
      height: 20px;
    }
  }
}

.content {
  flex: 1;
  
  > h4 {
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    color: #262626;
    margin-bottom: 8px;
  }

  > .btns {
    margin-bottom: 8px;
  }
}
</style>