<template>
  <div>
    <main-top>
      <div slot="con">
        <el-button @click="goto({ id: 'none',status: 0 })" type="primary">新增</el-button>
      </div>
    </main-top>
    <div class="tablecon flexcon">
      <accordion @select="handleMenu" :menu="menu" :default="subMenu" title="精品典藏" />
      <div class="tablebody">
        <search>
          <div slot="content" class="searchslot">
            <span>提交时间：</span>
            <el-date-picker v-model="search.date" type="daterange" value-format="yyyy-MM-dd" range-separator="-"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <span>标题：</span>
            <el-input class="elInput paddingmore" :maxlength="INPUTLENGTH" 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.date='',search.zone='',search.inputKey='',getList()">重置</el-button>
          </div>
        </search>
        <div class="table">
          <vtable :key="subMenu" :data="data" :page="page" :type="type" @pagechange="
            (data) => {
              page.pageNum = data;
            }
          " @pagesizechange="
              (data) => {
                page.size = data;
              }
            " @del="del" @submit="submit" :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" @click="del({item:scope.row,type:'goods'})">删除</span>
              </template>
            </el-table-column>
          </vtable>
        </div>
      </div>
    </div>

    <vdialog :show="showApplyDetail" @close="showApplyDetail=false" :tableData="alDetail"></vdialog>
  </div>
</template>

<script>

import { raw, menu, menuStr } from "./data";
import { getList } from "@/configue/api";

import { mapGetters } from "vuex";

export default {
  data() {
    return {
      type: 'goods',
      showApplyDetail: false,
      alDetail: {},
      search: {
        inputKey: "",
        date: "",
        unit: "",
        zone: ''
      },
      status: "all",
      menu,
      list: {},
      page: {
        size: 25,
        pageNum: 1,
      }
    };
  },

  methods: {
    selectStatus(item) {
      this.status = item.id;
    },
    handleMenu(data) {
      this.search = {
        inputKey: "",
        date: "",
        unit: "",
        zone: ''
      }
      this.$router.push({
        params: { ...this.$route.params, type: data },
      });
    },

    getList() {
      let { inputKey, date } = this.search;
      getList(
        this.type,
        {
          date,
          pageNum: this.page.pageNum,
          pageSize: this.page.size,
          searchKey: inputKey,
          type: this.subMenu
        },
        (data) => {
          this.list = data.data;
        }
      );
    },
  },
  computed: {
    ...mapGetters({
      activeMenu: "activeMenu",
      activeSub: "activeSub"
    }),
    data() {
      return raw[this.$route.params.type];
    },
    subMenu() {
      return this.$route.params.type
    }
  },
  watch: {
    subMenu: {
      deep: true,
      immediate: true,
      handler: function (newVal) {
        this.getAuth(this.activeMenu, menuStr[newVal])
        this.getList();
      }
    },
    activeMenu: {
      deep: true,
      immediate: true,
      handler: function (newVal) {
        this.getAuth(newVal, menuStr[this.subMenu])
      }
    }
  },
  mounted() {
  },
};
</script>
