<template>
  <div class="drinks_coffee">
    <div class="head">
      <van-image
        width="25"
        height="20"
        :src="i1"
        style="vertical-align: bottom"
      />
      欢迎点餐
      {{ User.name }}
    </div>
    <div class="body">
      <van-search shape="round" v-model="value" placeholder="搜索商品" />
      <div @scroll="scrollMain" ref="main" class="main">
        <van-card
          v-for="(item, index) in list"
          :key="item.goods_title + index"
          :desc="item.goods_subTitle"
          :title="item.goods_title"
          :thumb="item.goods_url"
        >
          <template #price>
            ￥{{ item.goods_price }}{{ item.goods_com }}
          </template>
          <template #num>
            <van-stepper
              v-model="item.num"
              min="0"
              max="99"
              @change="() => goodsChange(item)"
              :show-minus="item.num > 0"
              :show-input="item.num > 0"
              default-value="0"
              theme="round"
              button-size="16"
              disable-input
              v-if="!item.goods_rules || !item.rules.length"
            />
            <van-button
              style="vertical-align: middle"
              type="danger"
              size="mini"
              v-else
              @click="(showSku = true), (select = item)"
            >
              {{ item.num ? "x" + item.num : "选规格" }}
            </van-button>
            <van-icon
              style="margin-left: 3px; vertical-align: middle"
              v-if="item.goods_rules && item.goods_rules.length && item.num > 0"
              name="close"
              @click="item.num = 0"
            />
          </template>
        </van-card>
      </div>
      <van-sidebar v-model="activeKey" @change="sidebarChange">
        <van-sidebar-item v-for="item in sidlist" :key="item.type_id">
          <template #title>
            <van-image
              width="10"
              height="10"
              :src="i1"
              style="vertical-align: middle"
              v-if="item.type_type_name === '推荐'"
            />
            <span
              style="color: #a27b42; padding-left: 5px"
              v-text="item.type_type_name"
            ></span>
          </template>
        </van-sidebar-item>
      </van-sidebar>
    </div>
    <sku :show="showSku" :select="select" @closeSku="close" />
    <van-submit-bar
      :price="price() * 100"
      @submit="toOrder"
      button-text="创建订单"
    />
  </div>
</template>

<script>
import {
  Image as VanImage,
  Search as VanSearch,
  Sidebar as VanSidebar,
  SidebarItem as VanSidebarItem,
  Card as VanCard,
  Stepper as VanStepper,
  Button as VanButton,
  Icon as VanIcon,
  SubmitBar as VanSubmitBar,
  Toast,
} from "vant";
import "vant/lib/toast/style/index";
import "vant/lib/submit-bar/style/index";
import "vant/lib/button/style/index";
import "vant/lib/icon/style/index";
import "vant/lib/stepper/style/index";
import "vant/lib/card/style/index";
import "vant/lib/sidebar/style/index";
import "vant/lib/sidebar-item/style/index";
import "vant/lib/image/style/index";
import "vant/lib/search/style/index";

import { getCoffeeGoods, getCoffeeTypes } from "@/api/index";

import sku from "./components/sku.vue";

import i1 from "@/assets/icon/i1.png";

const size = 10;
let page = 1,
  time = undefined;

export default {
  name: "drinks",
  data() {
    return {
      list: [],
      sidlist: [],
      selectItem: [],
      User: {},
      select: {},
      i1,
      value: "",
      activeKey: 0,
      showSku: false,
    };
  },
  mounted() {
    this.User = JSON.parse(localStorage.getItem("user") || "{}");
    getCoffeeGoods(
      "type=" + this.activeKey + "&page=" + page + "&size=" + size
    ).then(r => (this.list = r || []));
    getCoffeeTypes().then(r => (this.sidlist = r || []));
  },
  computed: {},
  methods: {
    sidebarChange() {
      page = 1;
      getCoffeeGoods(
        "type=" + this.activeKey + "&page=" + page + "&size=" + size
      ).then(r => {
        let nums = {};
        let list = r || [];
        for (let i = 0; i < this.selectItem.length; i++) {
          const v = this.selectItem[i];
          nums[v.goods_id] = v.num;
        }
        for (let i = 0; i < list.length; i++) {
          const v = list[i];
          if (!nums[v.goods_id]) continue;
          list[i].num = nums[v.goods_id];
        }
        this.list = list;
      });
    },

    price() {
      let p = 0;
      for (let i = 0; i < this.selectItem.length; i++) {
        const v = this.selectItem[i];
        p += (v.goods_price || 0) * v.num;
      }
      return p;
    },

    goodsChange(item) {
      let listIndex = (this.list || []).findIndex(
        r => r.goods_id == item.goods_id
      );
      if (listIndex != -1) this.list[listIndex].num = item.num;
      let selectItemIndex = (this.selectItem || []).findIndex(
        r => r.goods_id == item.goods_id
      );
      if (selectItemIndex != -1)
        return (this.selectItem[selectItemIndex].num = item.num);
      this.selectItem.push(item);
      //   如果内嵌oa出现不兼容就用这个low方法
      //   let n = true;
      //   for (let i = 0; i < this.list.length; i++) {
      //     const v = this.list[i];
      //     if (v.goods_id !== item.goods_id) continue;
      //     this.list[i].num = item.num;
      //     break;
      //   }
      //   for (let i = 0; i < this.selectItem.length; i++) {
      //     const v = this.selectItem[i];
      //     if (v.goods_id !== item.goods_id) continue;
      //     n = false;
      //     this.selectItem[i].goods_id = item.num;
      //     break;
      //   }
      //   if (n) this.selectItem.push(item);
    },

    close(item) {
      this.showSku = false;
      if (!item.num) return;
      this.goodsChange(item);
    },

    toOrder() {
      // /coffee/order
      if (!this.selectItem || !this.selectItem.length)
        return Toast("请选择商品");
      this.$router.push({
        name: "CoffeeOrder",
        params: {},
        query: {
          aselectItem: JSON.stringify(this.selectItem || "{}"),
        },
      });
    },

    scrollMain(event) {
      const ele = event.target;
      if (
        ele.scrollHeight - ele.scrollTop - ele.clientHeight > 30 ||
        time === -1
      )
        return;
      if (time) clearTimeout(time);
      time = setTimeout(() => {
        getCoffeeGoods(
          "type=" + this.activeKey + "&page=" + ++page + "&size=" + size
        ).then(r => {
          this.list = this.list.concat(r || []);
          if (r && r.length >= 10) return;
          time = -1;
        });
      }, 200);
    },
  },
  beforeUnmount: function () {},
  components: {
    VanImage,
    VanSearch,
    VanSidebar,
    VanSidebarItem,
    VanCard,
    VanStepper,
    VanButton,
    VanSubmitBar,
    VanIcon,
    sku,
  },
};
</script>

<style>
.drinks_coffee * {
  box-sizing: border-box;
}
.drinks_coffee {
  position: relative;
  padding-top: 30px;
  height: calc(100% - 80px);
  background-color: rgba(0, 0, 0, 0.3);
}
.drinks_coffee .head {
  padding: 0 30px 15px 30px;
}
.drinks_coffee .body {
  margin: 0 11px;
  padding: 17px 10px 0 10px;
  height: calc(100% - 85px);
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.drinks_coffee .main {
  float: right;
  width: calc(100% - 90px);
  height: calc(100% - 105px);
  overflow: auto;
  z-index: 1;
  padding-bottom: 5px;
}
.drinks_coffee .van-stepper__input {
  width: 16px;
}
.drinks_coffee .van-card {
  background-color: #fff;
  padding: 8px 10px 8px 0;
}
.drinks_coffee .van-sidebar-item {
  background-color: #fff;
}
.drinks_coffee .van-button:not(:last-child) {
  margin-right: 0;
}
.drinks_coffee .van-submit-bar {
  position: absolute;
  width: 100vw;
  bottom: 0;
  left: 0;
}
.drinks_coffee .van-sidebar-item {
  padding-right: 0;
}
</style>
