<template>
  <div class="gift-list">
    <div class="links-tools-row">
      <el-select v-model="giftVal" style="width: 200px;" multiple placeholder="礼品类型">
        <el-option
          v-for="item in giftOptions"
          :key="item.integralMallCategoryId"
          :label="item.categoryName"
          :value="item.integralMallCategoryId"
        ></el-option>
      </el-select>
      <el-input v-model="giftName" style="width: 200px; margin-left: 20px;" placeholder="输入礼品名称" @keyup.native.enter="handleSearch"></el-input>
    </div>

    <div class="goods-link-content">
      <ul class="goods-link-list">
        <li
          :class="item.mallProId == selectGoodId? 'goods-link-item goodSelect': 'goods-link-item'"
          v-for="(item, index) in goodsList"
          :key="index"
          @click="selectGoodLinkItem(item)"
        >
          <img :src="item.mainImageUrl" alt="商品图片">
          <div class="inline-block goods-message">
            <p class="limit-2 pro-name">{{item.giftCategoryName}}</p>
            <p class="gray-color pro-code">货号：{{item.proCode}}</p>
            <span class="pro-price">￥{{item.mallProSpuPrice}}</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="links-tools-page">
      <el-pagination
        @current-change="handleChangePage"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  name: "gift-list",

  props: {
    pname: String
  },

  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 0,
      giftVal: null,
      giftOptions: [],
      goodsList: [],
      giftName: ""
    };
  },

  created() {
    const host = window.location.origin;
    if (host.indexOf("localhost") != "-1") {
      this.baseUrl = "http://gicdev.demogic.com";
    } else {
      this.baseUrl = host;
    }
  },

  methods: {
    // 分类
    getGiftList() {
      this.axios
        .get(`${this.baseUrl}/api-integral-mall/load-category?requestProject=${this.pname}`)
        .then(res => {
          const resData = res.data;
          if (resData.errorCode === 0) {
            if (!!resData.result && resData.result.length) {
              this.giftOptions = resData.result;
            }
          }
        });
    },
    // 分页换页
    handleChangePage(val) {
      this.cardCurrentPage = val;
      this.getGiftList();
    },

    // 分页数据
    getData() {
      const params = {
        requestProject: this.pname,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        category: this.giftVal,
        giftName: this.giftName
      };

      this.axios.post(`${this.baseUrl}/api-integral-mall/page-gift`,qs.stringify(params)).then(res => {
        const data = res.data;
        alert(data);
        if (data.errorCode == 0) {
          if (!!data.result && data.result.rows && data.result.rows.length) {
            this.goodsList = data.result.rows;
          }
          this.total = data.result.total || 0;
        }
      });

    },

    selectGoodLinkItem(item) {

    },

    handleSearch() {
      this.getGiftList();
    }
  },

  mounted() {
    this.getGiftList();
    alert(1);
    this.getData();
  }
};
</script>
