<template>
  <div>
    <main-top>
      <div slot='con'>
        <el-button @click="goto({ id: 'none'})" type="primary">新增</el-button>
      </div>
    </main-top>
    <div class="tablecon noSubmune">
      <div class="tablebody">
        <search>
          <div slot="content" class="searchslot">
            <span>场景名称：</span>
            <el-input
              class="elInput paddingmore"
              :maxlength="25"
              show-word-limit
              v-model="search.inputKey"
              @keydown.enter.native="getList"
              placeholder="请输入场景名称"
            ></el-input>
            <el-button @click="getList" type="primary">查询</el-button>
            <el-button
              @click="
                search = {
                  inputKey: '',
                },
                getList()
              "
              >重置</el-button
            >
          </div>
        </search>
        <div class="table">
          <vtable
            :key="subMenu"
            :data="data"
            :page="page"
            :type="subMenu"
            @pagechange="
              (data) => {
                page.pageNum = data;
              }
            "
            @pagesizechange="
              (data) => {
                page.size = data;
              }
            "
            :tableData="list"
          >
            <el-table-column slot="operate" label="操作" width="190">
              <template slot-scope="scope">

                <el-upload
                  style="display: inline-block;"
                  :action="uploadUrl"
                  :headers="{ token }"
                  :data="{type:'zip',id:scope.row.id}"
                  :show-file-list="false"
                  :on-success="handleThumbSuccess"
                  :on-error="handleError"
                  :before-upload="beforeAvatarUpload"
                  >
                  <span class="o-span">上传</span>
                </el-upload>
                <span class="o-span"  @click="goto(scope.row)">编辑</span>
                <span class="o-delete" @click="del({item:scope.row,type:'scene'})">删除</span>
              </template>
            </el-table-column>
          </vtable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MainTop from "@/components/main-top";
import search from "@/components/search";
import vtable from "@/components/table";
import { raw } from "./data";

import { mapGetters } from "vuex";

export default {
  data() {
    return {
      token:window.localStorage.getItem('token'),
      uploadUrl: this.$serverName + "cms/exhibition/upload",
      search: {
        inputKey: "",
        date: ""
      },
      list: {},
      page: {
        size: 25,
        pageNum: 1,
      },
    };
  },
  components: {
    MainTop,
    search,
    vtable,
  },
  methods: {
    
    showLoading(){
      this.loading = this.$loading(this.loadOption)
    },
    beforeAvatarUpload(file){
      this.currentIdx = 0
      let type = this.isZip(file.name);
      if (!type) {
        this.$message.error('只允许上传zip包');
        return type
      }
      const isLt2G = file.size / 1024 / 1024 / 1024 <  2;
      if (!isLt2G) {
        this.$message.error("上传图片大小不能超过 2GB!");
        return isLt2G;
      }
      this.showLoading()
    },
    handleError(){
      this.$alert("上传失败,请稍后再试", "提示", {
        confirmButtonText: "确定",
        callback: () => {
          this.loading.close()
        },
      });
    },
    handleThumbSuccess(res){
      this.loading.close()
      let { data } = res;
      this.$emit('update',data.filePath)
    },
    uploadZip(){

    },
    getList() {
      let { inputKey } = this.search;
      this.$http({
        method: "post",
        data: {
          pageNum: this.page.pageNum,
          pageSize: this.page.size,
          searchKey: inputKey,
        },
        url: `cms/exhibition/list`,
      }).then((res) => {
        this.list = res.data;
      });
    },
    openLink(item){
      window.open(`/panorama/edit.html?id=${item.id}`, "_blank");
    },

  },
  computed: {
    ...mapGetters({
      activeMenu: "activeMenu",
      activeSub:"activeSub"
    }),
    subMenu() {
      return 'exhibition';
    },
    data() {
      return raw["scene"];
    },
  },
  watch: {
    subMenu:{
      deep:true,
      immediate:true,
      handler:function () {
        this.getAuth(this.activeMenu,'场景')
        this.getList();
      }
    },
    activeMenu:{
      deep:true,
      immediate:true,
      handler:function (newVal) {
        this.getAuth(newVal,'场景')
      }
    }
  },
  mounted() {
  },
};
</script>
