<template>
  <div class="page">
    <div class="supermarket">
      <div
        class="fixed-top title"
        @click="$linkTo(`./system?areaName=${areaName}`)"
        v-if="propAreaId == '341021104000'"
      >
        {{ areaName }}信用好超市管理制度，点击查看 >>
      </div>
      <div
        class="goods-list"
        v-if="numList.length"
        :style="
          propAreaId == '341021104000'
            ? 'padding-top: 80rpx;'
            : 'padding-top: 0;'
        "
      >
        <div class="left">
          <div
            :class="numIndex == index ? 'item active' : 'item'"
            v-for="(item, index) in numList"
            :key="index"
            @click="numClick(index)"
          >
            <i v-show="item.total > 0">{{ item.total }}</i>
            {{ item.type }}分区
          </div>
        </div>
        <div class="right">
          <div
            class="item"
            v-for="(item, index) in goodsList[numIndex]"
            :key="index"
          >
            <img :src="item.photo[0].url" alt="" />
            <div class="item-info">
              <p class="item-name">{{ item.merchandiseName }}</p>
              <div class="item-point">
                <span class="num">{{ item.costIntegral }}</span
                >积分
              </div>
              <div class="item-bottom">
                <div></div>
                <div class="item-bottom__right">
                  <image
                    v-show="item.num > 0"
                    @click="cut(numIndex, index)"
                    src="/static/img/cut.png"
                  />
                  <input v-show="item.num > 0" v-model="item.num" />
                  <image
                    src="/static/img/add.png"
                    @click="add(numIndex, index)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <AiEmpty v-else />
      <div class="goods-footer" v-if="numList.length">
        <div class="goods-footer__top">
          <h2>
            {{ userInfo.familyName || user.nickName
            }}{{ userInfo.familyName ? "家" : "" }}
          </h2>
          <span>剩余积分:{{ userInfo.familyIntegral || 0 }}分</span>
        </div>
        <div class="goods-footer__bottom">
          <div class="goods-footer__bottom__left">
            <h3>共{{ total }}件商品</h3>
            <div class="goods-footer__bottom--middle">
              <span>合计 ：</span>
              <i>{{ money }}</i>
              <em>积分</em>
            </div>
          </div>
          <div
            class="goods-footer__bottom--btn"
            @click="toOrder"
            hover-class="text-hover"
          >
            去结算
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  name: "AppSuperMarket",
  appName: '信用好超市',
  data() {
    return {
      numList: [],
      numIndex: 0,
      goodsList: [],
      areaId: "",
      userInfo: {},
      areaName: "",
      propAreaId: "",
    };
  },

  computed: {
    ...mapState(["global", "user", "token"]),

    total() {
      let total = 0;
      if (!this.numList.length) {
        return total;
      }

      this.numList.forEach((item) => {
        total = item.total + total;
      });

      return total;
    },

    money() {
      let money = 0;
      if (!this.goodsList.length) {
        return money;
      }

      this.goodsList.forEach((arr) => {
        arr.forEach((item) => {
          money = money + Number(item.num) * item.costIntegral;
        });
      });

      return money;
    },
  },

  onLoad() {
    this.propAreaId = this.$areaId;
    uni.$on("update", () => {
      this.getInfo();
    });

    if (uni.getStorageSync("areaId")) {
      this.areaId = uni.getStorageSync("areaId");
    }
    this.getUserInfo();
    this.getInfo();
  },
  onShow() {
    this.getUserInfo();
  },
  methods: {
    getInfo() {
      this.$http
        .post(`/admin/area/queryAreaByAreaid?id=${this.areaId}`, null, {})
        .then((res) => {
          if (res.code === 0) {
            if (res.data) {
              this.areaName = res.data.name;
              this.getList();
            }
          }
        });
    },

    getUserInfo() {
      this.$http
        .post(
          `/app/appresident/queryFamilyById?id=${this.user.residentId}`,
          null,
          {}
        )
        .then((res) => {
          if (res.code === 0) {
            this.userInfo = res.data;
          }
        });
    },

    toOrder() {
      if (this.user.status == 0) {
        if (!this.user.phone) {
          return this.$linkTo("/pages/phone/bingPhoneNumber?from=auth");
        } else {
          return this.$linkTo("/pages/auth/authenticationInfo");
        }
      }

      if (!this.total) {
        return this.$toast("请选择商品");
      }

      if (this.money > this.userInfo.familyIntegral) {
        return this.$toast("积分不足");
      }

      let goods = [];

      this.goodsList.forEach((arr) => {
        arr.forEach((item) => {
          if (item.num) {
            goods.push(item);
          }
        });
      });

      this.$linkTo(
        `/subPages/creditPoints/submitOrder?familyId=${
          this.userInfo.familyId
        }&userName=${this.userInfo.familyName}&memberId=${
          this.userInfo.memberId
        }&goods=${JSON.stringify(goods)}&total=${this.total}&money=${
          this.money
        }&familyIntegral=${this.userInfo.familyIntegral}`
      );
    },

    getList() {
      this.$http
        .post(
          `/app/appvillagerintegralmerchandise/listByIntegral?areaId=${this.areaId}`,
          null,
          {}
        )
        .then((res) => {
          if (res.code === 0) {
            if (res.data) {
              this.numList = Object.keys(res.data).map((item) => {
                return {
                  type: item,
                  total: 0,
                };
              });
              this.goodsList = Object.values(res.data).map((item) => {
                item.map((items) => {
                  items.num = 0;
                  items.photo = JSON.parse(items.photo);

                  return items;
                });

                return item;
              });
            }
          }
        });
    },

    add(index, i) {
      this.$set(
        this.goodsList[index][i],
        "num",
        Number(this.goodsList[index][i].num) + 1
      );

      let total = 0;
      this.goodsList[index].forEach((item) => {
        total = total + item.num;
      });

      this.$set(this.numList[index], "total", total);
    },

    cut(index, i) {
      this.$set(
        this.goodsList[index][i],
        "num",
        Number(this.goodsList[index][i].num) - 1
      );

      let total = 0;
      this.goodsList[index].forEach((item) => {
        total = total + item.num;
      });

      this.$set(this.numList[index], "total", total);
    },

    numClick(index) {
      this.numIndex = index;
    },
  },
};
</script>
<style scoped lang="scss">
.item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28rpx;

  .item-bottom__right {
    display: flex;
    align-items: center;
    height: 60rpx;
  }

  image {
    width: 27rpx;
    height: 27rpx;
  }

  input {
    width: 90rpx;
    height: 60rpx;
    padding: 0 20rpx;
    margin: 0 10rpx;
    background: #f6f6f6;
    border-radius: 10rpx;
    font-size: 26rpx;
    color: #666;
    text-align: center;
  }
}

.goods-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 111;
  width: 100%;
  background: #fff;

  .goods-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    padding: 0 30rpx;
    background: #eff4ff;
    color: #333333;
    font-size: 32px;
  }

  .goods-footer__bottom--btn {
    width: 212rpx;
    height: 104rpx;
    line-height: 104rpx;
    font-size: 36rpx;
    color: #fff;
    text-align: center;
    background: #197df0;
  }

  .goods-footer__bottom__left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    padding: 0 32rpx;

    h3 {
      color: #f94246;
      font-size: 32rpx;
    }

    .goods-footer__bottom--middle {
      display: flex;
      align-items: baseline;

      span {
        color: #f94246;
        font-size: 32rpx;
      }

      i {
        position: relative;
        top: 2rpx;
        margin-right: 12px;
        color: #fa444b;
        font-size: 40rpx;
      }

      em {
        color: #f94246;
        font-size: 24rpx;
      }
    }
  }

  .goods-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 104rpx;
  }
}

.page {
  width: 100%;
  background-color: #fff;
  .supermarket {
    height: 100%;
    overflow-y: hidden;
    .title {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background: #eff4ff;
      padding-left: 30rpx;
      color: #3a7ee2;
      font-size: 28rpx;
    }
    .goods-list {
      // padding-top: 80rpx;
      padding-bottom: 184px;
      height: 100%;
      box-sizing: border-box;
      overflow-y: hidden;
      .left {
        width: 168rpx;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        float: left;
        background: #faf9fb;
        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 100%;
          height: 104rpx;
          line-height: 1.1;
          border-bottom: 2rpx solid #d8e5ff;
          text-align: center;
          color: #333;
          font-size: 28rpx;
          border-left: 6rpx solid #faf9fb;

          i {
            position: absolute;
            right: 8rpx;
            top: 8rpx;
            height: 28rpx;
            line-height: 28rpx;
            padding: 0 12rpx;
            color: #fff;
            font-size: 20rpx;
            border-radius: 13rpx;
            background: #fb4e44;
          }
        }

        .active {
          border-left: 6rpx solid #1d58fe;
          background: linear-gradient(
            270deg,
            #ffffff 0%,
            #ffffff 77%,
            #e7eafa 100%
          );
        }
      }
      .right {
        float: left;
        width: calc(100% - 168rpx);
        height: 100%;
        overflow-y: scroll;
        .item {
          width: 100%;
          padding: 28rpx 30rpx 44rpx;
          box-sizing: border-box;
          img {
            width: 192rpx;
            height: 192rpx;
            border: 2rpx solid #d7d5d5;
          }
          .item-info {
            display: inline-block;
            width: 276rpx;
            padding-left: 30rpx;
            vertical-align: top;
            .item-name {
              width: 100%;
              word-break: break-all;
              line-height: 42rpx;
              margin-bottom: 30rpx;
              font-size: 30rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
            }
            .item-point {
              color: #fa4a51;
              font-size: 24rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #fa4a51;
              line-height: 34rpx;
              .num {
                font-size: 40rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                margin-right: 8rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>