<template>
  <view :class="['manage', { right: manageCartState }]">
    <text v-if="!manageCartState">共{{ cartTotal }}件商品</text>
    <text style="display: flex;align-items: center" @click="openManageCartState">
      <text
        v-if="!manageCartState"
        size="26"
        class="iconfont icon-edit"
        style="margin-right: 4px;"
      />
      <text v-if="!manageCartState">管理购物车</text>
    </text>
    <text v-if="manageCartState" @click="closeManageCartState">完成</text>
  </view>
</template>
<script>
import { mapState, mapActions, mapGetters } from "../shopCartModules.js";
export default {
  computed: {
    ...mapState(["manageCartState"]),
    ...mapGetters(["cartTotal"])
  },
  // watch: {
  //   manageCartState: {
  //     deep: true,
  //     immediate: true,
  //     handler() {
  //       // console.log(val, "watch");
  //     }
  //   }
  // },
  // created() {
  //   console.log("this.manageCartState :>> ", this.manageCartState);
  // },
  methods: {
    ...mapActions({
      openManageCartState: "open_manage_cart_state",
      closeManageCartState: "close_manage_cart_state"
    })
  }
};
</script>
<style lang="scss">
.manage {
  width: 100vw;
  height: 82rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  font-size: 28rpx;
  color: $font-color-dark;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;
  background-color: $uni-bg-color-grey;
}
.right {
  justify-content: flex-end;
}
</style>
