<template>
  <div class="order" v-if="pageShow">
    <h2>订单{{ $dict.getLabel('integralOrderStatus', info.orderStatus) }}</h2>
    <p>{{ info.createTime }}</p>
    <div class="order-info">
      <div class="order-top">
        <div class="goods-item" v-for="(item, index) in info.merchandiseList" :key="index">
          <image :src="JSON.parse(item.merchandisePhoto)[0].url"/>
          <div class="goods-item__middle">
            <h2>{{ item.merchandiseName }}</h2>
            <p>{{ item.merchandiseNumber }}件</p>
          </div>
          <div class="goods-item__right">
            <span>{{ item.costIntegral * item.merchandiseNumber }}</span>
            <i>积分</i>
          </div>
        </div>
      </div>
      <div class="order-bottom">
        <div class="order-bottom__top">
          <div class="left">
            <span>总数量 </span>
            <i>{{ total }}</i>
            <span>件</span>
          </div>
          <div class="right">
            <span>共消耗</span>
            <i>{{ info.orderIntegral }}</i>
            <em>积分</em>
          </div>
        </div>
        <div class="order-bottom__bottom" v-if="info.orderStatus === '0'">
          <div></div>
          <span class="cancelBtn" @click="cancel">取消订单</span>
        </div>
        <div class="order-bottom__bottom" v-if="info.orderStatus == '3'">
          <div></div>
          <span class="cancelBtn" @click="confirm">确认兑换</span>
        </div>
        <p v-if="info.orderStatus == '3'" style="margin-top:8px;color:#f46;font-size:14px;padding-bottom:32px;">请确认兑换，如没有进行确认，系统将于72小时后自动确认，如有疑问，请联系工作人员</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderInfo",
  appName: "订单详情",
  data() {
    return {
      info: {},
      id: '',
      total: 0,
      pageShow: false
    }
  },

  onLoad(query) {
    this.id = query.id
    this.getInfo()
  },

  methods: {
    getInfo() {
      this.$loading()
      this.$instance.post(`/app/appvillagerintegralshoporder/queryDetailByIdForWx?id=${this.id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
          this.total = this.getTotal(res.data.merchandiseList)

          this.$nextTick(() => {
            this.pageShow = true
          })
        }
      })
    },

    getTotal(arr) {
      let total = 0
      arr.forEach(item => {
        total = total + item.merchandiseNumber
      })

      return total
    },

    cancel() {
      this.$loading()
      this.$instance.post(`/app/appvillagerintegralshoporder/overOrderForWx?orderId=${this.id}`).then(res => {
        if (res.code === 0) {
          this.$toast('取消成功')
          uni.$emit('update')
          this.getInfo()
        }
      })
    },
    confirm() {
      this.$loading()
      this.$instance.post(`/app/appvillagerintegralshoporder/finishOrder?orderId=${this.id}`).then(res => {
        if (res.code === 0) {
          this.$toast('确认成功')
          uni.$emit('update')
          this.getInfo()
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.order {
  padding: 48px 32px;

  & > h2 {
    margin-bottom: 8px;
    color: #333333;
    font-size: 40px;
  }

  .order-bottom {
    .order-bottom__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 120px span {
        width: 160px;
        height: 56px;
        line-height: 56px;
        text-align: center;
        color: #666666;
        font-size: 26px;
        background: #FFFFFF;
        border-radius: 32px;
        border: 1px solid #CCCCCC;
      }
    }

    .order-bottom__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 120px;

      & > div {
        display: flex;
        align-items: center;
      }

      .right {
        align-items: baseline;

        span {
          color: #333333;
          font-size: 28px;
        }

        i {
          position: relative;
          top: 2px;
          padding: 08px;
          color: #FA4A51;
          font-size: 40px;
        }

        em {
          color: #FA4A51;
          font-size: 24px;
        }
      }

      .left {
        span {
          color: #999999;
          font-size: 28px;
        }

        i {
          padding: 04px;
          color: #333333;
          font-size: 28px;
        }
      }
    }
  }

  & > p {
    color: #999999;
    font-size: 28px;
  }

  .order-info {
    margin-top: 48px;
    padding: 24px 24px 0;
    background: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
    border-radius: 8px;

    .order-top {
      border-bottom: 1px solid #DDDDDD;
    }

    .goods-item {
      display: flex;
      align-items: center;
      margin-bottom: 24px;

      .goods-item__right {
        display: flex;
        align-items: baseline;

        span {
          margin-right: 4px;
          color: #4185F5;
          font-size: 40px;
        }

        i {
          color: #4185F5;
          font-size: 24px;
        }
      }

      .goods-item__middle {
        flex: 1;

        h2 {
          line-height: 1.3;
          color: #333333;
          font-size: 32px;
        }

        p {
          margin-top: 20px;
          color: #ADADAD;
          font-size: 26px;
        }
      }

      image {
        width: 160px;
        height: 160px;
        margin-right: 24px;
        border-radius: 4px;
        border: 1px solid #DDDDDD;
      }
    }
  }
  .cancelBtn{
    color: $uni-color-primary;
    padding: 8px 16px;
  }
}
</style>
