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

    <div class="tabs">
      <van-tabs style="max-width: 90%;" line-height="0" v-model:active="active" :ellipsis="false"
        title-active-color="#13774d" 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="r" style="width: 5.4vw;" src="/img/filter.png" alt="">
    </div>


    <BaseList url="/v1/client/EProsClient" class="goods_list" :params="{ mallstate: 2, 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>
            <p>¥{{ item.originalprice }}</p>
            <div class="money">
              <div>
                <span>¥
                  <b>{{ item.saleprice }}</b>.00
                </span>
              </div>

              <img class="r" style="width: 5.6vw;" src="/img/cart.png" alt="">
            </div>
          </div>
        </div>
      </template>
    </BaseList>

    <!-- <div class="goods_list">
      <div class="goods_item" v-for="item in goods" :key="item.id" @click="toDetail(item.id)">
        <img :src="item.Icon" alt="">
        <div>
          <span class="title">{{ item.SubTitle }}</span>
          <p>¥{{ item.OPrice }}</p>
          <div class="money">
            <div>
              <span>¥
                <b>{{ item.Price }}</b>.00
              </span>
            </div>

            <img class="r" style="width: 5.6vw;" src="/img/cart.png" alt="">
          </div>
        </div>
      </div>
    </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: 'Agriculture',
  activated() {
    this.getTab()
  },
  data() {
    return {
      active: '',
      showLeft: false,
      tabs: []
    }
  },
  mounted() {
    this.getTab()
  },
  methods: {
    getTab() {
      this.$get('/v1/client/EProcatesClient/2').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>
.finished-text {
  width: 100%;
}
</style>