<template>
  <div class="chooseProductEdit-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" class="chooseProductEdit-back">
        <!-- 自定义的二级文字标题 -->
        <template slot="subTitle">
          <a id="chooseProductEdit-back-btn" href="javascript:;" @click="handleBack">
            <a-icon type="left" />
            返回列表
          </a>
          <span style="margin: 0 15px;color: #666;font-weight: bold;">类目名称：{{ detailsData&&detailsData.categoryName }}</span>
        </template>
      </a-page-header>
      <a-card size="small" :bordered="false" class="chooseProductEdit-cont table-page-search-wrapper">
        <!-- 主要内容 -->
        <main-content ref="mainCon" :itemCategorySn="$route.params.sn"></main-content>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
// 组件
import mainContent from '@/views/easyPassManagement/shoppingProducts/list'
// 接口
import { shopCategoryDetail } from '@/api/shopCategory'
export default {
  name: 'ChooseProductEdit',
  mixins: [commonMixin],
  components: { mainContent },
  data () {
    return {
      spinning: false,
      detailsData: null, // 类目详情
      tableHeight: 0 // 表格高度
    }
  },
  methods: {
    //  返回列表并刷新
    handleBack () {
      this.$router.push({ name: 'shoppingManagementList', query: { closeLastOldTab: true } })
    },
    // 获取目录详情
    getCategoryDetail () {
      this.spinning = true
      shopCategoryDetail({ categorySn: this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          this.detailsData = res.data || {}
        }
        this.spinning = false
      })
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) {
      // 页签刷新时调用
      this.getCategoryDetail()
    }
  },
  activated () {
    // 如果是新页签打开或者进入新的子页（例：存在列表第2条数据编辑页页签时再打开第4条数据的编辑页），则重置当前页面
    if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
      this.getCategoryDetail()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>

<style lang="less">
.chooseProductEdit-wrap {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  > .ant-spin-nested-loading {
    height: 100%;
  }
  .chooseProductEdit-cont {
    margin-top: 6px;
  }
}
</style>
