<template>
  <div class="balance">
    <div class="operate">
      <div class="target">结算对象</div>
      <div class="select" @click="handleSelect">
        {{
          selected
              ? `${selected.familyName}家 剩余积分:${selected.familyIntegral}分`
              : '请选择'
        }}
        <u-icon name="arrow-right" color="#E2E2E2" size="28"></u-icon>
      </div>
    </div>

    <div class="line" :style="{ backgroundImage: 'url(' + uri + ')' }"></div>

    <scroll-view scroll-y class="category-wrap">
      <div
          class="category-item"
          v-for="(item, index) in categoryList"
          :key="index"
      >
        <img class="category-img" :src="parseObj(item.photo)" alt=""/>
        <div class="category-info">
          <label class="hidden">{{ item.merchandiseName }}</label>
          <span class="score"
          >{{ item.costIntegral }}
            <span>积分</span>
          </span>
          <div class="wrap">×{{ item.merchandiseNumber }}</div>
        </div>
      </div>
    </scroll-view>
    <div class="footer">
      <div class="sum">
        <span>共{{ totalCount }}件商品</span>
        <span
        >合计：{{ totalScore }}
          <span>积分</span>
        </span>
      </div>
      <div class="btn" @click="hanldeSubmit">确认领取</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'balance',
  appName:"订单结算",
  data() {
    return {
      selected: null,
      categoryList: [],
      totalScore: 0,
      totalCount: 0
    }
  },
  onLoad(opt) {
    if (opt.category) {
      let sum = 0
      let count = 0
      this.categoryList = JSON.parse(opt.category)
      this.categoryList.map(e => {
        count += e.merchandiseNumber
        if (e.merchandiseNumber != 0) {
          sum += e.merchandiseNumber * e.costIntegral
        }
      })
      this.totalScore = sum
      this.totalCount = count
    }
    uni.$on('selected', data => {
      if (data) {
        this.selected = data
      }
    })
  },
  computed: {
    uri() {
      return this.$cdn + 'other/' + 'line.png'
    }
  },

  methods: {
    parseObj(json) {
      return JSON.parse(json || '[]')[0]?.url
    },
    hanldeSubmit() {
      if (!this.selected)
        return uni.showToast({
          title: '请选择结算对象',
          icon: 'none'
        })
      let {memberId, familyId} = this.selected
      this.$instance
      .post(`/app/appvillagerintegralshoporder/addOrder`, {
        shopId: this.categoryList[0].shopId,
        memberId,
        familyId,
        orderIntegral: this.totalScore,
        merchandiseList: this.categoryList.map(e => {
          return {
            ...e,
            merchandiseId: e.id
          }
        })
      })
      .then(res => {
        if (res.code == 0) {
          uni.navigateTo({
            url: './resultPage'
          })
        } else {
          uni.navigateTo({
            url:
                './resultPage?flag=' +
                false
          })
        }
      })
      .catch(e => {
        uni.showToast({
          title: e || '网络异常',
          icon: 'none'
        })
      })
    },
    handleSelect() {
      uni.navigateTo({
        url: './search'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.balance {
  min-height: 100%;
  background-color: #ffffff;

  .operate {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30px;

    .target {
      font-size: 32px;
      color: #333333;

      &:before {
        content: '*';
        font-size: 32px;
        color: #ff4466;
      }
    }

    .select {
      font-size: 32px;
      color: #666666;

      & > i {
        font-size: 20px;
      }
    }
  }

  .line {
    // margin: 0 30px;
    padding: 0 15px;
    height: 8px;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .category-wrap {
    padding: 16px 0 110px;

    .category-item {
      box-sizing: border-box;
      padding: 28px 32px 44px 30px;
      height: 264px;
      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;

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

        .wrap {
          display: flex;
          justify-content: flex-end;
          font-weight: 600;
        }
      }
    }
  }

  .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;
  }
}
</style>
