<template>
<basic-container>
   <nav-box root-node-id="0" @change="navChange"></nav-box>
    <div style="height: 15px;"></div>
    <div class="good-li" v-loading="loading" v-if="goodList.length > 0">
      <goods-item v-for="(item, l) in goodList" :key="l" :item="item"></goods-item>
    </div>
    <avue-empty v-else/>
    <div class="paging">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="query.size"
        :page-count="query.current"
        @current-change="currentChange"
        @size-change="sizeChange"></el-pagination>
    </div>
    <div style="height: 20px;"></div>
  </basic-container>
</template>

<script>
import navBox from "@/components/nav-box/main";
import goodsItem from "@/components/goods-item/main";
import {getList} from "@/api/redenvelopemall/goodsinfo";
const DIC = {
  STATUS: [{
    label: '有效',
    value: '1'
  }, {
    label: '无效',
    value: '0'
  }]
};

export default {
  components: {
    navBox,
    goodsItem
  },
  data() {
    return {
      categoryData: [],
      props: {
        label: "title",
        value: "key"
      },
      parentCategoryId: '',
      modifyCategoryBox: false,
      form: {},
      query: {},
      selectionList: [],


      loading: false,
      data: [],
      goodList: [],
      total: 0,
      query: {
        current: 1,
        size: 10
      },
      activeId: ''
    };
  },
  computed: {
  },
  methods: {
    sizeChange(pageSize){
      this.query.pageSize = pageSize;
      this.navThree(this.activeId)
    },
    currentChange(currentPage){
      this.query.current = currentPage;
      this.navThree(this.activeId)
    },
    navChange(id) {
      this.activeId = id
      this.query = { current: 1, size: 10}
      this.navThree(id)
    },
    navThree(id) {
      this.loading = true
      getList(this.query.current, this.query.size, {goodsCategoryId: id, descs: 'create_time'}).then(res => {
        this.goodList = res.data.data.records;
        this.total = res.data.data.total;
        this.loading = false
      })
    }
  }
};
</script>

<style scoped lang="scss">
  .good-li {
    display: flex;
    flex-wrap: wrap;
    .goods-item {
      margin-right: 10px;
      margin-bottom: 16px;
    }
  }
  .paging {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>
