<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

import { GetTopBanners, GetProductList } from '@/api/product'

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 組件的方法
  },
  watch: {
    // watch擅長處理的場景：一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)
  },
  computed: {
    // computed擅長處理的場景：一個(gè)數(shù)據(jù)受多個(gè)數(shù)據(jù)影響
  },
  beforeCreate: function() {
    // 在實(shí)例初始化之后，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。
  },
  created: function() {
    // 實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(data observer)，屬性和方法的運(yùn)算， watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。
  },
  beforeMount: function() {
    // 在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。
  },
  mounted: function() {
    // 編譯好的HTML掛載到頁面完成后執(zhí)行的事件鉤子
    // el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。
    // 此鉤子函數(shù)中一般會(huì)做一些ajax請(qǐng)求獲取數(shù)據(jù)進(jìn)行數(shù)據(jù)初始化
    console.log("Home done");
  },
  beforeUpdate: function() {
    // 數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。 你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過程。
  },
  updated: function() {
    // 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。
    // 當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無限循環(huán)。
    // 該鉤子在服務(wù)器端渲染期間不被調(diào)用。
  },
  beforeDestroy: function() {
    // 實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。
  },
  destroyed: function() {
    // Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。 該鉤子在服務(wù)器端渲染期間不被調(diào)用。
  }
};
</script>

export default {
  data() {
    return {
      activeName: 'all',
      currentDate: new Date(),
      banners: [],
      productlist: [],
      pageinfo: {
        pageindex: 1,
        pagesize: 10,
        total: 0
      },
      producttype: 'all'
    };
  },
  created() {
    this.loadbanners()
    this.getlist()
  },

<el-row :gutter="20" style="padding:20px">
  <el-button type="primary" icon="el-icon-search" :plain="producttype !='all'" @click="handleClick($event, 'all')">全部</el-button>
  <el-button type="success" icon="el-icon-search" :plain="producttype !='1'" @click="handleClick($event, '1')">框架產(chǎn)品</el-button>
  <el-button type="warning" icon="el-icon-search" :plain="producttype !='2'" @click="handleClick($event, '2')">軟件產(chǎn)品</el-button>
  <el-button type="danger" icon="el-icon-search" :plain="producttype !='3'" @click="handleClick($event, '3')">開發(fā)組件</el-button>
</el-row>

<el-col :span="4"><div class="grid-content bg-purple" />
<el-card class="box-card">
  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
  <div style="padding: 14px;">
    <span>好吃的漢堡</span>
    <div class="bottom clearfix">
      <time class="time">價(jià)格：￥200</time>
      <el-button type="text" class="button" @click="loadbanners()">操作按鈕</el-button>
    </div>
  </div>
</el-card>
</el-col>

<el-col v-for="(item, index) in productlist" :key="index" :span="4" style="min-width:250px">
<div class="grid-content bg-purple">
  <el-card class="box-card">
    <img :src="item.Picture" class="image" style="width:200px;height:200px">
    <div style="padding: 14px;">
      <span>{{ item.ProductName }}</span>
      <div class="bottom clearfix">
        <!-- <time class="time">價(jià)格：￥{{ item.Price }}</time> -->
        <el-button type="text" class="button">操作按鈕</el-button>
      </div>
    </div>
  </el-card>
</div>
</el-col>

 <el-pagination
      background
      layout="prev, pager, next"
      :page-sizes="[10,20,50]"
      :total="pageinfo.total"
      :current-page="pageinfo.pageindex"
      :page-size="pageinfo.pagesize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

getlist() {
      // 構(gòu)造分頁查詢條件
      var param = {
        type: this.producttype === 'all' ? '' : this.producttype,
        pageindex: this.pageinfo.pageindex,
        pagesize: this.pageinfo.pagesize
      };

      this.listLoading = true
      // 發(fā)起數(shù)據(jù)查詢請(qǐng)求，并設(shè)置本地Data的值
      GetProductList(param).then(data => {
        this.productlist = data.list
        this.pageinfo.total = data.total_count
        this.listLoading = false
      })
    },

// 單擊某類別的時(shí)候，進(jìn)行查詢
    handleClick(e, type) {
      // console.log(e, type);

      this.producttype = type
      this.pageinfo.pageindex = 1;

      this.getlist()
    },
    // 頁面數(shù)量改變后查詢處理
    handleSizeChange(val) {
      console.log(`每頁 ${val} 條`);
      this.pageinfo.pagesize = val;
      this.getlist()
    },
    // 頁碼改變后查詢處理
    handleCurrentChange(val) {
      console.log(`當(dāng)前頁: ${val}`);
      this.pageinfo.pageindex = val;
      this.getlist()
    }