<template>
  <div class="pointmall">
    <div class="top">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img style="width: 100%;" src="/img/pointmall_bg.jpg" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- <div class="search">
        <img src="/img/search-w.png" alt="">
        <input type="text" placeholder="搜索您想要的产品">
      </div> -->
    </div>

    <div class="contaiar">
      <div class="tabs">
        <van-tabs style="max-width: 90%;" background="transparent" line-height="0.8vw" line-width="9.33vw;"
          v-model:active="active" :ellipsis="false" color="#ca2904" title-active-color="#ca2904"
          title-inactive-color="#4e4e4e">
          <van-tab title="全部" name=""></van-tab>
          <van-tab v-for="i in tabs" :name="i.id" :title="i.name"></van-tab>
        </van-tabs>
        <!-- <img @click="showLeft = true" class="filter_img" style="width: 5.4vw;" src="/img/filter.png" alt=""> -->
      </div>


      <BaseList url="/v1/client/EProsClient" class="goods_list" :params="{ mallstate: 5, pid: active }">
        <template #default="{ item }">
          <div class="goods_item" :key="item.id" @click="toDetail(item.id)">
            <img :src="$file(item.img)" alt="">
            <div>
              <span class="title">{{ item.name }}</span>
              <div class="money">
                <div>
                  <b>{{ item.jifen?.toFixed(2) }}</b>积分
                </div>
              </div>
            </div>
          </div>
        </template>
      </BaseList>
    </div>


  </div>


  <van-popup v-model:show="showLeft" position="left" :style="{ width: '30%', height: '100%' }">
    <div v-for="i in tabs">
      <div @click="changeTab(i.id)" style="height: 10vw;width: 100%;border-bottom: solid 1px #f5f5f5;"
        class="box box-center-center">
        {{ i.name }}
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: 'PointMall',
  activated() {
    this.getTab()
  },
  data() {
    return {
      active: '',
      showLeft: false,
      tabs: [],
      goods: [
        {
          id: 1, Icon:
            '/img/avatar.png', SubTitle:
            '积分礼品测试商品1', OPrice: '99.00',
          Price: '9.90'
        },
        {
          id: 2, Icon:
            '/img/avatar.png', SubTitle:
            '积分礼品测试商品2', OPrice:
            '199.00', Price: '19.90'
        },
        {
          id: 3, Icon:
            '/img/avatar.png', SubTitle:
            '积分礼品测试商品3', OPrice:
            '299.00', Price: '29.90'
        },
      ]
    }
  },
  mounted() {
    this.getTab()
  },
  methods: {
    getTab() {
      this.$get('/v1/client/EProcatesClient/5').then(res => {
        this.tabs = res.data
      })
    },
    changeTab(id) {
      this.active = id;
      this.showLeft = false;
    },
    toDetail(e) {
      this.$navigate(`/GoodsDetail?id=${e}`)
    }
  },
  computed: {
    filteredGoods() {
      // if (this.active === 0) {
      //   return this.goods
      // }
      // const categoryId = this.active
      // return this.goods.filter(item => item.CategoryId === categoryId)
    }
  }
}
</script>

<style scoped>
.pointmall {
  &::before {
    content: '';
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: #f5f5f5;
    z-index: -1;
  }
}

.finished-text {
  width: 100%;
}

.top {
  position: relative;
  z-index: 0;
}

.contaiar {
  position: relative;
  background-color: #f5f5f5;
  border-radius: 8vw 8vw 0vw 0vw;
  margin-top: -12vw;
  z-index: 1;

  .tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 0 8vw 0 0; */
    margin-top: 4vw;
    position: relative;

    .filter_img {
      width: 5.4vw;
      height: 5.4vw;
      position: absolute;
      right: 5vw;
    }
  }
}

.goods_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 4vw;
  margin-top: 4vw;

  .goods_item {
    background-color: #fefefe;
    border-radius: 2vw;
    margin-bottom: 4vw;
    width: 44.8vw;
    max-width: 44.8vw;

    img {
      width: 44.8vw;
      height: 44.8vw;
      background-color: #fefefe;
      border-radius: 2vw 2vw 0vw 0vw;
    }

    >div {
      padding: 3.2vw;
    }

    .title {
      width: 38.4vw;
      max-width: 38.4vw;
      font-size: 3.47vw;
      overflow: hidden !important;
      text-overflow: ellipsis;
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      line-height: 4vw;
      height: 8vw;
      color: #333;
      margin-bottom: 2.93vw;
    }

    .point_box {
      display: flex;
      align-items: center;
      margin-bottom: 3.2vw;
      height: 5.33vw;
      background-color: #fff6dd;
      border-radius: 0.8vw;
      border: solid 0.27vw #f1c98c;
      padding: 0 2vw;
      width: fit-content;

      img {
        width: 3.33vw;
        height: 3.2vw;
        margin-right: 1.6vw;
      }

      span {
        font-size: 3.2vw;
        color: #d9a452;
      }
    }

    .money {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #333;
      font-size: 3.2vw;

      b {
        font-size: 4vw;
        color: #ea3e23;
        margin-right: 1.2vw;
      }
    }


  }
}
</style>