<template>
  <div class="item-layer">
    <div
      class="cover"
      :style="{
        backgroundImage: `url(${data.isFolder ? require('@/assets/image/folder-bg.png') : thumb}?time=${Date.now()})`,
        cursor:'pointer',
      }"
      @click="$emit('gotoLink')"
    >
   
    </div>
    <h4>
      {{ data.isFolder ? data.name : data.sceneName }}
      <!-- <el-dropdown trigger="click" >
        <span class="el-dropdown-link">
          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
            <el-dropdown-item :icon="CirclePlusFilled">
              Action 2
            </el-dropdown-item>
            <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
            <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
            <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown> -->
      <el-dropdown popper-class="elcls" @command="handleCommand" :hide-timeout="10" class="items asdsa " v-if="(data.status !== 0 && data.status !== -1)">
        <i class="el-icon-more"></i>
        <template #dropdown>
          <el-dropdown-menu  v-if="data.isFolder" class="menu-items-vrmodel">
            <el-dropdown-item  command="rename" >重命名</el-dropdown-item>
            <el-dropdown-item  command="move" >移動</el-dropdown-item>
            <el-dropdown-item command="deletefold" >刪除</el-dropdown-item>
          </el-dropdown-menu>
          <el-dropdown-menu v-else class="menu-items-vrmodel">
            <el-dropdown-item v-if="(data.status === 1||data.status === -2)&&data.payStatus === 1" command="update">編輯</el-dropdown-item>
            <el-dropdown-item v-if="data.payStatus === 1" command="move">移動</el-dropdown-item>
            <el-dropdown-item command="delete">刪除</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </h4>

    <template v-if="data.isFolder">
      <p>創建時間：{{ data.createTimeStr }}</p>
      <p>場景數量：{{ data.sceneNum }}</p>
    </template>

    <template v-else>
      <p>拍攝時間：{{ data.createTime }}</p>
      <p>S/N：{{ data.snCode }}</p>
    </template>
    
  </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";
import fengcun from "@/assets/image/vrmodel-fengcun.png";

// payStatus  
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.payStatus !== 1 ? fengcun : this.data.thumb);
    }
  },
};
</script>

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

  .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));
}

.elcls{
  z-index: 999999!important;
}
</style>
