<template>
  <com-dialog
    v-if="show"
    title="选择模型"
    :show="show"
    @submit="enter"
    @update:show="val => $emit('update:show', val)">
    <el-form label-width="90px" inline="true">
      <el-form-item label="VR模型：">
        <el-input v-model="search.state.sceneName" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
    
    <el-table
      ref="multipleTable"
      :data="dataList.state"
      tooltip-effect="dark"
      class="table-layer"
      style="width: 100%"
      @row-click="selectRow"
    >
      <el-table-column width="35" v-slot:default="{ row }">
        <el-radio :modelValue="modelValue" @update:modelValue="v => $emit('update:modelValue', v)" :label="row.num">
          &nbsp;
        </el-radio>
      </el-table-column>
      <el-table-column label="场景封面" v-slot:default="{ row }">
        <div class="table-img">
          <img src="@/assets/image/vrmodel-err.png" v-if="row.status === -1">
          <img src="@/assets/image/vrmodel-calc.png" v-else-if="row.status === 0">
          <img :src="`${row.thumb}?time=${Date.now()}`" v-else>
          <!-- <div v-if="row.status === 0">计算中</div> -->
        </div>
      </el-table-column>
      <el-table-column label="模型名称" prop="sceneName"></el-table-column>
      <!-- <el-table-column label="S/N" prop="snCode"></el-table-column> -->
      <!-- <el-table-column label="协作者" prop="name"></el-table-column> -->
      <!-- <el-table-column label="浏览数量" prop="viewCount"></el-table-column>
      <el-table-column label="所属架构" v-slot:default="{ row }" >
        <span>{{row.departmentName || '暂无'}}</span>
      </el-table-column>
      <el-table-column label="分类" v-slot:default="{row}">
        <span>{{getTypeName(row.sceneType)}}</span>
      </el-table-column>
      <el-table-column label="拍摄时间" prop="createTime"></el-table-column> -->
    </el-table>

    <div class="pag-block no-sizes">
      <com-pagination
        @size-change="pag.sizeChange"
        @current-change="pag.currentChange"
        :current-page="pag.state.currPage"
        :page-size="pag.state.size"
        layout="total, prev, pager, next"
        :total="pag.state.total"/>
    </div>

  </com-dialog>
</template>

<script>
import comDialog from "@/components/dialog";
import getTableState from "@/state/tableRef";
import comPagination from "@/components/pagination";
import {SCENE_TYPE, getName} from '@/constant'
import {
  getSceneList,
} from '@/request/config'

export default {
  props: ['show', 'modelValue'],
  setup() {
    const state = getTableState({
      getUrl: getSceneList,
      searchAttr: { startTime: "", endTime: '', sceneName: '', snCode: '', pageSize: 8 },
      pagAttr: {totalNum: 'total'}
    });
    return { ...state }
  },
  components: {
    "com-dialog": comDialog,
    comPagination
  },
  methods: {
    selectRow(row) {
      this.$emit('update:modelValue', row)
    },
    getTypeName: getName(SCENE_TYPE),
    enter() {
      if (!this.modelValue) {
        this.$alert('未选择模型无法保存!', '提示')
      } else {
        this.$emit('enter', this.dataList.state.find(({num}) => num === this.modelValue))
      }
    }
  }
}
</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: 600px;
  overflow-y: auto;
}
</style>