<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>

            <span>博物馆：</span>
            <el-select v-model="search.museumId" placeholder="请选择所属博物馆">
              <el-option
                v-for="item in bwgList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>

            <el-button @click="getList" type="primary">查询</el-button>
            <el-button
              @click="
                (search = {
                  inputKey: '',
                  museumId: '',
                }),
                  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="website" label="场景链接" width="190">
              <template slot-scope="scope">
                <a
                  style="text-decoration: none"
                  :href="scope.row.website"
                  target="_blank"
                  :title="scope.row.website"
                >
                  {{
                    scope.row.website
                      ? scope.row.website.length > 20
                        ? scope.row.website.substring(0, 20) + "..."
                        : scope.row.website
                      : "-"
                  }}
                </a>
              </template>
            </el-table-column>

            <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"
                  :class="{ disabledAc: scope.row.display }"
                  @click="del({ item: scope.row, type: 'exhibition' })"
                  >删除</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 { getMuseumAllList } from "@/configue/api";
import { mapGetters } from "vuex";

export default {
  name: "Scene",
  data() {
    return {
      token: window.localStorage.getItem("token"),
      uploadUrl: this.$serverName + "cms/exhibition/upload",
      search: {
        inputKey: "",
        date: "",
        museumId: "",
      },
      list: {},
      page: {
        size: 25,
        pageNum: 1,
      },
      bwgList: [],
    };
  },
  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);
      this.getList();
    },
    uploadZip() {},
    getList() {
      let { inputKey, museumId } = this.search;
      this.$http({
        method: "post",
        data: {
          pageNum: this.page.pageNum,
          pageSize: this.page.size,
          searchKey: inputKey,
          museumId,
        },
        url: `cms/exhibition/list`,
      }).then((res) => {
        this.list = res.data;
        this.list.records.forEach((v) => {
          if (v.timeStart && v.timeEnd)
            v.myTime = v.timeStart + " 至 " + v.timeEnd;
          else v.myTime = "-";
        });
      });
    },
    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() {
    getMuseumAllList((data) => {
      this.bwgList = data.data;
      this.bwgList.unshift({ id: "", name: "全部" });
      console.log("------------", this.bwgList);
    });
  },
};
</script>
