<template>
  <div class="goodsList">
    <van-sticky>
      <m-header :backUrl="backUrl2" :isFixed="false" name="商品列表" />
      <!-- <template #left>
        <van-dropdown-menu
          active-color="#01C1B5"
          style=" padding-right: 0.1rem;"
        >
          <van-dropdown-item :title="valueText1" v-model="value1" :options="option1" @change="onOptionChange" />
          <van-dropdown-item
            :title="valueText2"
            v-model="value2"
            :options="option2"
            @change="onOptionChange"
          />
        </van-dropdown-menu>
      </template> -->
      <search @onSearch="onSearch" placeholder="请输入商品名称"> </search>
      <van-dropdown-menu active-color="#01C1B5" style="background-color: #fff">
        <van-dropdown-item
          :title="valueText1"
          v-model="value1"
          :options="option1"
          @change="onOptionChange"
        />
        <van-dropdown-item
          :title="valueText2"
          v-model="value2"
          :options="option2"
          @change="onOptionChange"
        />
      </van-dropdown-menu>
    </van-sticky>
    <div>
      <van-list
        v-model="loading"
        class="studentContainer"
        v-if="dataShow"
        key="data"
        :immediate-check="false"
        :finished="finished"
        finished-text=""
        @load="getList"
      >
        <van-cell-group>
          <van-cell
            style="align-items: flex-start"
            v-for="(item, index) in dataList"
            :key="index"
            class="input-cell"
            @click="onChoiceGood(item)"
            :center="true"
          >
            <template slot="icon">
              <div class="logo-section">
                <van-image class="logo" :src="item.pic" alt="" />
                <div class="sellOut" v-if="item.stock <= 0">
                  <img
                    src="../images/icon-sell-out.png"
                    fit="cover"
                    class="sellOutImg"
                  />
                </div>
              </div>
            </template>
            <template slot="title">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
              >
                {{ item.name }}
              </div>
              <van-tag plain color="#C2A076" style="margin: 0.04rem 0"
                >品牌：{{ item.brandName }}</van-tag
              >
              <p style="padding: 0.02rem 0; font-size: 0.14rem; color: #808080">
                型号：{{ item.productSn }}
              </p>
              <div class="price-section">
                <div>
                  <span class="money"
                    ><span style="font-weight: 400; font-size: 0.14rem"
                      >现价:</span
                    ><i>￥</i>{{ item.price | moneyFormat }}</span
                  ><del>原价:￥{{ item.originalPrice | moneyFormat }}</del>
                </div>
                <div style="font-size: 0.14rem; color: #808080">×1</div>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
      <m-empty class="empty" msg="暂无商品" v-else />
    </div>
    <van-popup
      v-model="addGoodsShow"
      closeable
      position="bottom"
      round
      @close="
        () => {
          addGoodsShow = false;
        }
      "
    >
      <addGoodsCart
        :show="addGoodsShow"
        :item="selectGoodsItem"
        @onAddCart="onAddCart"
      />
    </van-popup>
  </div>
</template>

<script>
import MHeader from "@/components/header";
import MEmpty from "@/components/MEmpty";
import Search from "@/components/Search";
import addGoodsCart from "./addGoodsCart";
import { mallHomeContent, mallProductSearch } from "../api";
export default {
  components: { MHeader, MEmpty, Search, addGoodsCart },
  data() {
    return {
      loading: false,
      finished: false,
      params: {
        pageNum: 1,
        pageSize: 20,
      },
      dataShow: true, // 是否有数据
      backUrl2: {
        callBack: () => {
          this.$emit("input", false);
        },
      },
      value1: "all",
      valueText1: "分类: 全部",
      option1: [],
      value2: "all",
      valueText2: "类型: 全部",
      search: null,
      option2: [],
      dataList: [],
      addGoodsShow: false,
      selectGoodsItem: {},
    };
  },
  async mounted() {
    try {
      // 获取分类数据
      const res = await mallHomeContent({});
      const all = {
        text: "全部",
        value: "all",
      };
      this.option1 = [all];
      const productCategoryList = res.data.productCategoryList || [];
      productCategoryList.forEach((item) => {
        this.option1.push({
          text: item.name,
          value: item.id,
        });
      });
      this.option2 = [all];
      const productAttributeCategoryList =
        res.data.productAttributeCategoryList || [];
      productAttributeCategoryList.forEach((item) => {
        this.option2.push({
          text: item.name,
          value: item.id,
        });
      });
    } catch {}

    this.loading = true;
    this.getList();
  },
  methods: {
    onSearch(value) {
      // 商品搜索
      this.search = value;
      this.params.pageNum = 1;
      this.dataList = [];
      this.loading = true;
      this.finished = false;
      this.dataShow = true;
      this.getList();
    },
    onOptionChange() {
      this.option1.forEach((item) => {
        if (item.value == this.value1) {
          this.valueText1 = item.value == "all" ? " 分类: 全部" : item.text;
        }
      });

      this.option2.forEach((item) => {
        if (item.value == this.value2) {
          this.valueText2 = item.value == "all" ? "类型: 全部" : item.text;
        }
      });

      this.params.pageNum = 1;
      this.dataList = [];
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getList();
    },
    onAddCart(item) {
      this.addGoodsShow = false;
      this.$emit("getChoiceGood", { ...item });
      this.$emit("input", false);
    },
    onChoiceGood(item) {
      this.selectGoodsItem = item;
      this.addGoodsShow = true;
    },
    async getList() {
      try {
        let params = this.params;
        params.productAttributeCategoryId =
          this.value2 == "all" ? null : this.value2;
        params.productCategoryId = this.value1 == "all" ? null : this.value1;
        params.keyword = this.search ? this.search : null;
        const res = await mallProductSearch(params);
        this.loading = false;
        let result = res.data;
        params.pageNum = result.pageNum;
        this.dataList = this.dataList.concat(result.list);
        if (params.pageNum >= result.totalPage) {
          this.finished = true;
        }
        params.pageNum++;
        // 判断是否有数据
        this.dataShow = this.dataList.length <= 0 ? false : true;
      } catch {
        this.finished = true;
        this.dataShow = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/commonLess/variable.less");
.studentContainer {
  /deep/.van-cell-group {
    margin-top: 0;
  }
  /deep/.van-cell__title {
    font-size: 0.16rem;
    color: @mFontColor;
    // flex: 1 auto;
    flex-basis: 70% !important;
  }
  .logo-section {
    flex-basis: 30%;
    position: relative;
  }

  .logo {
    width: 0.82rem;
    height: 0.82rem;
    // margin-right: .12rem;
    border-radius: 0.05rem;
    overflow: hidden;
  }

  .input-cell {
    padding: 0.12rem 0.16rem;

    .van-radio {
      justify-content: flex-end;
    }
  }

  /deep/.van-cell__value {
    height: 0.2rem;
  }

  .van-tag {
    margin-left: 0.08rem;
  }
}
.input-cell {
  .price-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    del {
      font-size: 0.12rem;
      color: #666666;
      padding-left: 0.1rem;
    }
  }

  .money {
    color: #ff3535;
    font-weight: 600;
    font-size: 0.16rem;
    i {
      font-style: normal;
      font-size: 0.14rem;
    }
  }
}
/deep/.van-dropdown-menu__bar {
  background: transparent;
  box-shadow: inherit;
  height: 34px;
}

.sellOut {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0.82rem;
  height: 0.82rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.05rem;
  .sellOutImg {
    width: 0.6rem;
    height: 0.6rem;
  }
}
</style>
