<template>
  <com-dialog
    v-if="show"
    title="VR模型"
    :show="show"
    hideFloor
    @update:show="val => $emit('update:show', val)">

    <el-table
      ref="multipleTable"
      :data="dataList"
      tooltip-effect="dark"
      class="table-layer"
      style="width: 100%"
    >
      <el-table-column label="场景封面" v-slot:default="{ row }">
        <div class="table-img">
          <img :src="`${row.vrCover}?time=${Date.now()}`">
          <!-- <div v-if="row.status === 0">计算中</div> -->
        </div>
      </el-table-column>
      <el-table-column label="模型名称" prop="vrModelName"></el-table-column>
    </el-table>

  </com-dialog>
</template>

<script>
import comDialog from "@/components/dialog";

export default {
  props: ['show', 'data'],
  setup(props) {
    return { dataList: [props.data] }
  },
  components: {
    "com-dialog": comDialog
  }
}
</script>

<style lang="scss" scoped>

.table-img {
  width: 100px;
  position: relative;

  img {
    width: 100%;
  }

  div {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
}

.table-layer {
  height: 400px;
  overflow-y: auto;
}
</style>