<template>
  <div>
    <main-top>
      <div slot="con"></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">
                <span class="o-span"  @click="goto(scope.row)">详情</span>
                <span class="o-delete" v-if="scope.row.id != 1" @click="del({item:scope.row,type:'museum'})">删除</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 { delscene } from "@/configue/api";

import { mapGetters } from "vuex";

export default {
  data() {
    return {
      search: {
        inputKey: "",
        date: ""
      },
      list: {},
      page: {
        size: 25,
        pageNum: 1,
      },
    };
  },
  components: {
    MainTop,
    search,
    vtable,
  },
  methods: {
    getList() {
      let { inputKey } = this.search;
      this.$http({
        method: "post",
        data: {
          pageNum: this.page.pageNum,
          pageSize: this.page.size,
          searchKey: inputKey,
        },
        url: `cms/museum/list`,
      }).then((res) => {
        this.list = res.data;
      });
    },
    delScene(data) {
      this.confirm("删除后，信息将无法恢复，是否继续？", () => {
        delscene(
          {
            id: data.id,
          },
          () => {
            this.$alert("删除成功", "提示", {
              confirmButtonText: "确定",
              callback: () => {
                this.this.getList()
              },
            });
          }
        );
      });
    }
  },
  computed: {
    ...mapGetters({
      activeMenu: "activeMenu",
      activeSub: "activeSub"
    }),
    subMenu() {
      return this.$route.params.type;
    },
    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>
