<template>
  <section class="supermarket">
    <template v-if="Object.keys(list).length">
      <div class="nav-left">
        <scroll-view scroll-y style="height: 100%;">
          <div class="nav-left-item" v-for="(val, key, index) in list" :key="index"
               @click="clickSort(key,index)">
            {{ key }}分区
            <u-badge size="mini" :count="sortCountList[index]||0" absolute :offset="[5,5]"></u-badge>
          </div>
        </scroll-view>
      </div>
      <div class="nav-right">
        <scroll-view scroll-y style="height: 100%;">
          <div class="category-item" v-for="(item,index) in categoryList" :key="index">
            <img
                :src="parseObj(item.photo)"
                class="category-img" alt="">
            <div class="category-info">
              <label class="hidden">{{ item.merchandiseName }}</label>
              <span class="score">{{ item.costIntegral }}
                <span>积分</span>
              </span>
              <div class="wrap">
                <div class="lxc-count">
                  <div class="less" @click="less(item,index)">-</div>
                  <div class="num">{{ item.merchandiseNumber }}</div>
                  <div class="less" @click="add(item,index)">+</div>
                </div>
              </div>
            </div>
          </div>
        </scroll-view>
      </div>
      <div class="footer">
        <div class="sum">
          <span>共{{ totalCount }}件商品</span>
          <span>合计：{{ totalScore }}
          <span>积分</span>
        </span>
        </div>
        <div class="btn" @click="handleSubmit">去结算</div>
      </div>
    </template>
    <AiEmpty v-else/>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "AppSupermarket",
  appName: "信用好超市",
  data() {
    return {
      list: {},
      idx: 0,
      totalScore: 0,
      sortCountList: [],
      mark: 0,
    }
  },

  onLoad() {
    this.getList()
  },

  watch: {
    list: {
      handler(val) {
        let sum = 0
        Object.keys(val).map(e => {
          val[e].map(p => {
            if (p.merchandiseNumber != 0) {
              sum += (p.merchandiseNumber) * (p.costIntegral)
            }
          })
        })
        this.totalScore = sum
      },
      immediate: true,
      deep: true
    }
  },

  computed: {
    ...mapState(['user']),
    totalCount() {
      return this.sortCountList.reduce((pre, cur) => (pre + cur), 0)
    },

    categoryList() {
      return this.idx == 0 ? this.list[Object.keys(this.list)[0]] : this.list[this.idx]
    },
  },

  methods: {
    handleSubmit() {
      if (this.totalCount == 0) {
        return uni.showToast({
          title: "您还没有选择商品",
          icon: 'none'
        })
      }
      let filter = []
      Object.keys(this.list).map(e => {
        this.list[e].map(p => {
          if (p.merchandiseNumber > 0) {
            filter.push(p)
          }
        })
      })
      uni.navigateTo({
        url: "./balance?category=" + JSON.stringify(filter)
      })
    },
    active(key) {
      const flag = key == this.idx
      return {
        borderLeft: flag ? '3px solid #1D58FE' : '',
        background: flag ? 'linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 77%, #E7EAFA 100%)' : ''
      }
    },
    add(item, index) {
      this.list[this.idx][index]["merchandiseNumber"] = this.list[this.idx][index]["merchandiseNumber"] + 1
      this.$set(this.sortCountList, this.mark, this.list[this.idx]?.reduce((pre, curr) => {
        return (pre + curr.merchandiseNumber)
      }, 0))
    },
    less(item, index) {
      if (item.merchandiseNumber > 0) {
        this.list[this.idx][index]["merchandiseNumber"] = this.list[this.idx][index]["merchandiseNumber"] - 1
        this.$set(this.sortCountList, this.mark, this.list[this.idx]?.reduce((pre, curr) => {
          return (pre + curr.merchandiseNumber)
        }, 0))
      }
    },
    clickSort(key, index) {
      this.mark = index
      this.idx = key.toString()
    },
    parseObj(json) {
      return JSON.parse(json || '[]')[0]?.url
    },
    getList() {
      this.$instance.post(`/app/appvillagerintegralmerchandise/listByIntegral`, null, {
        params: {
          areaId: this.user?.areaId
        }
      }).then(res => {
        if (res && res.data) {
          Object.keys(res.data).map(e => {
            res.data[e].map(p => {
              p.merchandiseNumber = 0
            })
          })
          this.list = res.data
          this.idx = Object.keys(res.data)[0]
          this.sortCountList = Array(Object.keys(res.data).length).fill(0)
        }
      })
    }
  },

}
</script>

<style lang="scss" scoped>
uni-page-body {
  background-color: #ffffff;
}

.supermarket {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  padding-bottom: 104px;

  .nav-left {
    width: 168px;
    height: 100%;

    .nav-left-item {
      height: 104px;
      background: #FAF9FB;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #333333;
      border-top: 1px solid #D8E5FF;
      border-left: 2px solid transparent;
      position: relative;

      &:last-child {
        border-bottom: 1px solid #D8E5FF;
      }
    }
  }

  .nav-right {
    width: calc(100% - 168px - 24px);
    height: 100%;

    .category-item {
      height: 264px;
      box-sizing: border-box;
      padding: 28px 32px 44px 30px;
      display: flex;

      .category-img {
        width: 192px;
        height: 192px;
        border: 1px solid #F6F6F6;
        flex-shrink: 0;
        margin-right: 30px;
      }

      .category-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        & > label {
          font-size: 30px;
          font-weight: 800;
          color: #333333;
          line-height: 42px;
        }

        .score {
          font-size: 40px;
          font-weight: 600;
          color: #FA4A51;
          line-height: 40px;

          & > span {
            font-size: 24px;
            color: #FA4A51;
            margin-left: 8px;
          }
        }

        .wrap {
          display: flex;
          justify-content: flex-end;

          .lxc-count {
            display: flex;
            align-items: center;
            justify-content: center;

            .less {
              width: 40px;
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 36px;
              font-weight: 500;
              color: #333333;
            }

            .num {
              width: 89px;
              height: 61px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #F6F6F6;
              border-radius: 10px;
              font-size: 28px;
              font-weight: 400;
              color: #333333;
              margin: 0 16px;
            }
          }

        }
      }
    }
  }

  .footer {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #ffffff;
    z-index: 100;
    height: 104px;
    box-shadow: 0px -2px 8px 0px rgba(214, 214, 214, 0.5);
    position: fixed;
    left: 0;
    bottom: 0;

    .sum {
      width: calc(100% - 212px);
      box-sizing: border-box;
      padding: 30px;
      display: flex;
      justify-content: space-between;

      & > span:nth-child(1), span:nth-child(2) {
        font-size: 32px;
        font-weight: 400;
        color: #F94246;

        & > span {
          font-size: 24px;
          margin-left: 12px;
        }
      }
    }

    .btn {
      width: 212px;
      height: 100%;
      background-color: #1365DD;
      font-size: 36px;
      font-weight: 500;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  AiEmpty {
    justify-self: center;
  }
}
</style>
