<template>
  <div class="item-layer">
    <div class="cover" :style="{backgroundImage: `url(${thumb}?time=${Date.now()})`, cursor: isShare ? 'pointer' : 'initial'}" @click="isShare && $emit('gotoLink')">
      <img src="@/assets/image/scene_share.png" class="share" @click.stop="$emit('shareItem', data)" v-if="isShare">
      <!-- <div class="loadding" v-if="data.status === 0">
        <i class="el-icon-loading"></i>
        <p>计算中</p>
      </div> -->
    </div>
    <h4>
      {{data.sceneName}}
      <el-dropdown @command="handleCommand" class="items" v-if="(auth.delete && data.status !== 0) || (auth.update && data.status === 2) || (data.status !== 2)">
        <i class="el-icon-more"></i>
        <template v-slot:dropdown>
          <el-dropdown-menu class="menu-items-vrmodel">
            <el-dropdown-item command="delete" v-if="auth.delete && data.status !== 0">删除</el-dropdown-item>
            <el-dropdown-item command="update" v-if="auth.update && data.status === 2">编辑</el-dropdown-item>
            <el-dropdown-item command="update" v-else-if="data.status !== 2">查看</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </h4>
    <p>拍摄时间：{{data.createTime}}</p>
    <p>S/N：{{data.snCode}}</p>
  </div>
</template>


<script>
// -1 计算失败  0 计算中 1 计算成功并可以外网访问，不能编辑 2计算成功只能内网，能编辑
import auth from "@/state/viewAuth";
import err from '@/assets/image/vrmodel-err.png'
import calc from '@/assets/image/vrmodel-calc.png'

export default {
  props: ['data'],
  setup() {
    return { auth }
  },
  methods: {
    handleCommand(data) {
      this.$emit(data, this.data)
    }
  },
  computed: {
    thumb() {
      return this.data.status === -1 ? err : (this.data.status === 0 ? calc : this.data.thumb)
    },
    isShare() {
      return this.data.status === 1 || this.data.status === 2
    }
  }
}
</script>

<style lang="scss" scoped>
.cover {
  position: relative;
  padding-top: 50%;
  background-size: cover;
  background-position: center center;
  

  .share {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }

  .loadding {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    p {
      color: #fff;
    }

    i {
      font-size: 3rem;
      color: #fff;
    }
  }
}

.item-layer {
  h4, p {
    line-height: 1.6em;
  }

  h4 {
    color: #262626;
    font-weight: normal;
    position: relative;

    
  }

  p {
    color: #909399;
    font-size: 0.8rem;
  }
}
</style>

<style lang="scss">
.item-layer {
  .items {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
      
    i {
      float: right;
      font-size: 1.2em;
      cursor: pointer;
      outline: none;
    }
  }
}

.menu-items-vrmodel {
  transform: translateX(-50%) translateY(calc(-100% - 30px));
}

</style>