<template>
  <view class="shopping">
    <GoodsManage v-if="cartCount && cartList.length" class="shopping-manage" />
    <scroll-view
      :key="cartList.length"
      class="shopping-list"
      :class="{ haveSettle: validCount }"
      scroll-y
    >
      <template v-if="cartCount">
        <template v-if="cartList.length">
          <view class="shopping-good-wrap">
            <GoodActivity class="shopping-good-activity" :is-activity="isActivity" />
            <view v-if="hasActivity && !manageCartState" class="divider" />
            <view
              class="shopping-goods"
              :class="hasActivity && !manageCartState ? 'hasActivity' : 'noHasActivity'"
            >
              <view
                v-for="(goodInfo, goodIndex) in cartList"
                :key="goodIndex"
                class="shopping-good-swipe"
              >
                <uni-swipe-action-item
                  :right-options="options"
                  :swipeaction="swipeaction"
                  auto-close
                  @closeOther="closeOther"
                  @click="delGood([goodInfo])"
                >
                  <Goods
                    :key="goodIndex"
                    :value="goodInfo"
                    :index="goodIndex"
                    @openEditNumDialog="openEditNumDialog"
                    @change="changeGoodSelectStatus"
                  />
                </uni-swipe-action-item>
              </view>
            </view>
          </view>
        </template>
        <DisabledGoods />
      </template>
      <Empty v-else />
      <LikeGoodList :goods-list.sync="goodsList" title="猜你喜欢" />
    </scroll-view>
    <GoodsSettle v-if="cartList.length" class="shopping-settle" />
    <edit-goodNum-dialog
      :show="editNumDialog"
      :value="editGoodInfo"
      :index="editGoodIndex"
      @close="closeEditNumDialog"
    />
    <login-popup ref="login-popup" type="center" title="用户授权登录" @change="loginChange" />
  </view>
</template>
<script>
import GoodsSettle from "./components/goodsSettle.vue";
import Goods from "./components/goodItem.vue";
import GoodsManage from "./components/goodsMange.vue";
import Empty from "./components/empty.vue";
import { mapState, mapActions } from "./shopCartModules.js";
import { saTrackEvent } from "@/utils/sa.js";
import GoodActivity from "./components/goodActivity";
import DisabledGoods from "@/components/disabledGoods";
import { shopCartLike } from "@/api/home.api.js";
import LikeGoodList from "../product/components/goodsCard.vue";
import uniSwipeActionItem from "@/components/uni-swipe-action-item/index";
import editGoodNumDialog from "./components/goodNumEdit";
import { getCartCountVal } from "../../mixins/common.js";
import loginPopup from "@/components/loginPopup";

export default {
  components: {
    Empty,
    Goods,
    GoodsSettle,
    GoodsManage,
    GoodActivity,
    DisabledGoods,
    LikeGoodList,
    editGoodNumDialog,
    uniSwipeActionItem,
    loginPopup
  },
  data() {
    return {
      show: false,
      hasActivity: false,
      editNumDialog: false,
      goodsList: [],
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#F43530"
          }
        }
      ],
      editGoodInfo: {},
      swipeaction: {
        children: []
      },
      isActivity: true,
      editGoodIndex: 0
    };
  },
  async onShow() {
    this.isActivity = true;
    const token = uni.getStorageSync("token") || "";
    if (this.$refs["login-popup"]) {
      if (!token) {
        this.$refs["login-popup"].open();
      } else {
        this.$refs["login-popup"].close();
      }
    }

    this.initMethods();
  },
  onLoad() {
    uni.$on("cartUpdate", () => {
      getCartCountVal();
    });
    uni.$on("login", isLogin => {
      isLogin && this.initMethods();
    });
    this.loadData();
  },
  onHide() {
    this.isActivity = false;
  },
  onUnload() {
    uni.$off("cartUpdate");
  },
  onTabItemTap() {
    saTrackEvent("MINI_BottomTabsClick", { tab_name: "购物车" });
  },
  computed: {
    ...mapState({
      cartList: state => state.cartList,
      cartCount: state => state.cartCount
    }),
    ...mapState(["activityInfo", "manageCartState"]),
    validCount() {
      return this.cartList.length;
    }
  },
  watch: {
    activityInfo: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val.length) {
          this.hasActivity = true;
        } else {
          this.hasActivity = false;
        }
      }
    }
  },
  methods: {
    ...mapActions({
      delGood: "del_cart_good",
      queryList: "query_cart_list",
      closeManageCartState: "close_manage_cart_state"
    }),
    closeOther(vm) {
      if (this.openItem && this.openItem !== vm) {
        // #ifdef APP-VUE || H5 || MP-WEIXIN
        this.openItem.button.show = "none";
        // #endif

        // #ifndef APP-VUE || H5 || MP-WEIXIN
        this.openItem.close();
        // #endif
      }
      this.openItem = vm;
    },
    initMethods() {
      const token = uni.getStorageSync("token") || "";
      getCartCountVal();
      this.closeManageCartState();
      token && this.queryList({ pageNo: 1, pageSize: 1000 });
      uni.$emit("updateInvalid");
    },
    changeGoodSelectStatus() {
      // console.log("obj--index", obj, index);
      // this.$set(this.goodInfo, index, obj);
    },
    async loadData() {
      // 商品详情没有无限流 只有20条数据
      const [res] = await shopCartLike({ pageNo: 1, pageSize: 20, pageType: 3 });
      this.goodsList = this.goodsList.concat((res && res.goodsList) || []);
    },
    closeEditNumDialog() {
      this.editNumDialog = false;
    },
    openEditNumDialog(index, goodInfo) {
      this.editGoodIndex = index;
      this.editGoodInfo = goodInfo;
      this.editNumDialog = true;
    },
    loginChange({ show }) {
      const token = uni.getStorageSync("token") || "";
      if (!show && !token) {
        this.loginModal();
      }
    },
    loginModal() {
      const vm = this;
      uni.showModal({
        title: "温馨提示",
        content: "购物车需要您授权才能使用",
        cancelText: "不授权",
        confirmText: "重新授权",
        confirmColor: "#ec1500",
        success: function(res) {
          if (res.confirm) {
            vm.$refs["login-popup"].open();
          } else {
            uni.switchTab({
              url: "/pages/index/index"
            });
          }
        }
      });
    }
  }
};
</script>
<style lang="scss">
.shopping {
  height: 100vh;
  padding: 0 12rpx 0 20rpx;
  // padding-top: 82rpx;
  overflow: auto;
  box-sizing: border-box;
  &-good-wrap {
    padding-top: 82rpx;
  }
  &-good-activity {
    position: fixed;
    z-index: 2;
  }
  // &-manage {
  //   width: 710rpx;
  //   height: 82rpx;
  //   position: fixed;
  //   top: 0;
  //   z-index: 2;
  // }
  &-list {
    // margin-top: -20px;
    /* height: calc(100vh - 82rpx); */
    height: 100vh;
    &.haveSettle {
      height: calc(100vh - 82rpx - 25rpx);
    }
  }
  &-goods {
    // max-height: 1200rpx;
    overflow: auto;
    padding: 0 0rpx 22rpx 0rpx;
    background-color: $uni-bg-color-grey;
  }
  &-good-swipe {
    margin-bottom: $margin-base;
  }
  // .shopping-settle {
  //   position: fixed;
  //   bottom: 0;
  //   left: 0;
  //   width: 100%;
  //   z-index: 3;
  //   height: 114rpx;
  // }
  .hasActivity {
    margin-top: 50px;
  }
  .noHasActivity {
    margin-top: 0px;
  }
  .divider {
    height: 8px;
    width: 100%;
    background-color: #f7f8fa;
    z-index: 2;
    position: fixed;
    margin-right: 10rpx;
    top: 150rpx;
  }
}
</style>
