<template>
  <com-head :options="headList" showCtrl>
    <el-form label-width="90px" inline="true">
      <el-form-item label="SN码：">
        <el-input v-model="search.state.snCode" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="VR模型：">
        <el-input v-model="search.state.sceneName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="拍摄时间：">
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="searh-btns">
        <el-button @click="search.reset">重置</el-button>
        <el-button type="primary" @click="search.submit">查询</el-button>
      </el-form-item>
    </el-form>
  </com-head>

  <div class="body-layer">
    <div class="body-head">
      <h3>场景列表</h3>
      <div class="table-ctrl-right">
        <el-button type="primary" v-if="currModel === 2 && auth.belong" @click="editCompanyHandle"  :disabled="!dataList.state.length">场景归属</el-button>
        <el-button type="primary" v-if="currModel === 2 && auth.delete" @click="dataList.deleteSelect"  :disabled="!dataList.state.length">删除</el-button>
        <!-- <el-input placeholder="搜索场景" suffix-icon="el-icon-search" class="search-scene" v-model="search.state.searchKey" style="width: auto" /> -->
        <i class="el-icon-menu" :class="{active: currModel === 1}" @click="currModel = 1"></i>
        <i class="el-icon-s-fold" :class="{active: currModel === 2}" @click="currModel = 2"></i>
      </div>
    </div>

    <el-table
      v-if="currModel === 2"
      ref="multipleTable"
      :data="dataList.state"
      tooltip-effect="dark"
      style="width: 100%"
      @row-click="selectRow"
      @selection-change="dataList.changeSelectRows"
    >
      <!-- -1 计算失败  0 计算中 1 计算成功并可以外网访问，不能编辑 2计算成功只能内网，能编辑 -->
      <el-table-column type="selection" width="55" v-if="auth.belong || auth.delete"></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-column label="操作" v-slot:default="{ row }">
        <span class="oper-span" @click="editModel(row)" v-if="auth.update && row.status === 2">编辑</span>
        <span class="oper-span" @click="editModel(row)" v-else-if="row.status !== 2">查看</span>
        <span class="oper-span" @click="dataList.delete(row)" v-if="auth.delete">删除</span>
        <span class="oper-span" @click="(row.status === 1 || row.status === 2) && shareHandle(row)" :class="{disable: row.status !== 1 && row.status !== 2}">分享</span>
      </el-table-column>
    </el-table>

    <div v-else class="mode2-layer">
      <div class="grid-data" v-if="dataList.state.length">
        <model-item
          v-for="item in dataList.state"
          :data="item"
          :key="item.id"
          @gotoLink="gotoLink(item)"
          @shareItem="shareHandle"
          @delete="data => dataList.delete(data)"
          @update="data => editModel(data)" />
      </div>
      <div class="un-data" v-else>
        暂无数据
      </div>
    </div>

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

    <com-share
      v-if="shareItem.show"
      v-model:show="shareItem.show"
      :link="getShowModelUrl(shareItem.data)"
      :codeImg="getShareImg(shareItem.data)" />

    
  
    <com-dialog
      title="场景归属"
      v-model:show="editCompany.show"
      @submit="updateItemCompany"
    >
      <el-form ref="form" label-width="100px" class="camera-from">
        <el-form-item label="所属架构：" class="mandatory">
          <com-company v-model="editCompany.departmentId" hideAll />
        </el-form-item>
      </el-form>
    </com-dialog>
  </div>
</template>

<script>
import { ref, watch } from "vue";
import getTableState from "@/state/tableRef";
import auth from "@/state/viewAuth";
import user from '@/state/user'
import comHead from "@/components/head";
import comShare from "@/components/share";
import comDialog from "@/components/dialog";
import ModelItem from "./item";
import comPagination from "@/components/pagination";
import comCompany from "@/components/company-select";
import {SCENE_TYPE, getName} from '@/constant'
import { dateFormat } from '@/util'
import {
  getSceneList,
  deleteScene,
  updateSceneDepartment
} from '@/request/config'
import axios from 'axios';


export default {
  name: 'vrmodel',
  setup() {
    const state = getTableState({
      getUrl: getSceneList,
      delUrl: deleteScene,
      searchAttr: { startTime: "", endTime: '', sceneName: '', snCode: '' },
      pagAttr: {totalNum: 'total'}
    });
    const shareItem = ref({data: null, show: false})
    const editCompany = ref({departmentId: 0, show: false})
    const headList = ref([{ name: "我的场景", value: 2 }]);
    const currModel = ref(1)
    const time = ref(null)

    watch(time, () => {
      if (time.value) {
        state.search.value.state.startTime = dateFormat(new Date(time.value[0]), 'yyyy-MM-dd hh:mm:ss')
        state.search.value.state.endTime = dateFormat(new Date(time.value[1]), 'yyyy-MM-dd 23:59:59')
      } else {
        state.search.value.state.startTime = state.search.value.state.endTime = ''
      }
    })
    watch(
      [() => state.search.value.state.startTime, () => state.search.value.state.endTime],
      () => {
        if (!state.search.value.state.startTime || !state.search.value.state.endTime) {
          time.value = null
        }
      }
    )
    watch(
      () => state.pag.value.state.total,
      () => headList.value[0].name = '我的场景（' + state.pag.value.state.total +'）'
    )

    return { ...state, headList, currModel, time, shareItem, auth, editCompany };
  },
  methods: {
    getShareImg(item) {
      const link = process.env.VUE_APP_PREFIX + '/sceneQRcode/' + item.num + '.png'
      return link
    },
    getEditModelUrl(item) {
      const link = '/epc.html?m=' + item.num + '&token=' + user.value.token
      return process.env.VUE_APP_INTRANET_DOMAIN + link
      // return process.env.VUE_APP_INTRANET_DOMAIN + link
    },
    getShowModelUrl(item) {
      let link = '/spc.html?m=' + item.num
      // 1 计算成功并可以外网访问，不能编辑 2计算成功只能内网，能编辑
      if (item.status === 1) {
        return process.env.VUE_APP_DOMAIN + link
      } else {
        return process.env.VUE_APP_INTRANET_DOMAIN + link
      }
    },
    gotoLink(data) {
      window.open(this.getShowModelUrl(data))
    },
    editModel(item) {
      window.open(this.getEditModelUrl(item))
    },
    shareHandle(item) {
      this.shareItem.show = true
      this.shareItem.data = item
    },
    editCompanyHandle() {
      if (this.dataList.selectRows.length) {
        this.editCompany.show = true
      } else {
        this.$alert('请选择要更改的场景!', '提示')
      }
      // this.editCompany.data = {...item}
      
    },
    getTypeName: getName(SCENE_TYPE),
    async updateItemCompany() {
      await Promise.all(
        this.dataList.selectRows.map(item => 
          axios.post(updateSceneDepartment, {sceneNum: item.num, departmentId: this.editCompany.departmentId})
        )
      )
      this.editCompany.show = false
      this.search.submit()
    }
  },
  components: {
    "com-head": comHead,
    "com-dialog": comDialog,
    'com-share': comShare,
    "com-company": comCompany,
    'model-item': ModelItem,
    "com-pagination": comPagination
  },
};
</script>

<style lang="scss" scoped>
.table-ctrl-right {
  .search-scene {
    margin: 0 20px 0 26px;
  }
  i {
    margin-left: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      color: var(--primaryColor);
    }
  }
}

.mode2-layer {
  flex: 1;
  overflow-y: auto;
}
.grid-data {
  display: grid;
  grid: auto-flow / 1fr 1fr 1fr 1fr;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  padding-right: 30px;
}
.table-img {
  width: 50px;
  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;
  }
}
.un-data {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #909399;
}

.oper-depar {
  cursor: pointer;
}

.camera-from {
  width: 320px;
  margin: 50px auto 0;
}
</style>