<template>
  <div class="main">
    <van-tabs
      v-model="orderStatusindex"
      title-active-color="#388bff"
      color="#388bff"
      swipeable
      sticky
    >
      <van-tab title="全部" name="0">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了~~" @load="onLoad">
          <div v-for="(item, index) in obtainuserorder" :key="index">
            <div class="aLlorders">
              <div class="aLlorders-t" @click="jumpDetail(item)">
                <div class="aLlorders-img">
                  <img v-lazy="item.memIngProduct.pics[0].picUrl" />
                </div>
                <div class="aLlorders-gm">
                  <h3 class="ellips2">{{item.memIngProduct.ProductName}}</h3>
                  <span class="dsh">{{statusTips[item.orderState]}}</span>
                  <div>
                    <span
                      class="integral-l"
                    >{{item.memIngOrdersPay.integral}}积分+￥{{item.memIngOrdersPay.payPirce|fixed}}</span>
                    <span class="integral-r">x{{item.amount}}</span>
                  </div>
                </div>
              </div>
              <div class="aLlorders-b">
                合计:
                <span
                  class="ellips"
                >{{item.memIngOrdersPay.integral*item.amount}}积分+￥{{item.memIngOrdersPay.payPirce*item.amount}}</span>
                <!-- <button @click="query(item)">物流查询</button> -->
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>

      <van-tab title="待支付" name="1">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了~~" @load="onLoad">
          <div v-for="(item, index) in obtainuserorder" :key="index" v-if="item.orderState==1">
            <div class="aLlorders">
              <div class="aLlorders-t" @click="jumpDetail(item)">
                <div class="aLlorders-img">
                  <img v-lazy="item.memIngProduct.pics[0].picUrl" />
                </div>
                <div class="aLlorders-gm">
                  <h3 class="ellips2">{{item.memIngProduct.ProductName}}</h3>
                  <span class="dsh">{{statusTips[item.orderState]}}</span>
                  <div>
                    <span
                      class="integral-l"
                    >{{item.memIngOrdersPay.integral}}积分+￥{{(item.memIngOrdersPay.payPirce/100).toFixed(2)}}</span>
                    <span class="integral-r">x{{item.amount}}</span>
                  </div>
                </div>
              </div>
              <div class="aLlorders-b">
                合计:
                <span
                  class="ellips"
                >{{item.memIngOrdersPay.integral*item.amount}}积分+￥{{item.memIngOrdersPay.payPirce*item.amount}}</span>
                <!-- <button @click="query(item)">物流查询</button> -->
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="待收货" name="2">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了~~" @load="onLoad">
          <div v-for="(item, index) in obtainuserorder" :key="index" v-if="item.orderState==3">
            <div class="aLlorders">
              <div class="aLlorders-t" @click="jumpDetail(item)">
                <div class="aLlorders-img">
                  <img v-lazy="item.memIngProduct.pics[0].picUrl" />
                </div>
                <div class="aLlorders-gm">
                  <h3 class="ellips2">{{item.memIngProduct.ProductName}}</h3>
                  <span class="dsh">{{statusTips[item.orderState]}}</span>
                  <div>
                    <span
                      class="integral-l"
                    >{{item.memIngOrdersPay.integral}}积分+￥{{(item.memIngOrdersPay.payPirce/100).toFixed(2)}}</span>
                    <span class="integral-r">x{{item.amount}}</span>
                  </div>
                </div>
              </div>
              <div class="aLlorders-b">
                合计:
                <span
                  class="ellips"
                >{{item.memIngOrdersPay.integral*item.amount}}积分+￥{{item.memIngOrdersPay.payPirce*item.amount}}</span>
                <!-- <button @click="query(item)">物流查询</button> -->
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="已完成" name="3">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了~~" @load="onLoad">
          <div v-for="(item, index) in obtainuserorder" :key="index" v-if="item.orderState==5">
            <div class="aLlorders">
              <div class="aLlorders-t" @click="jumpDetail(item)">
                <div class="aLlorders-img">
                  <img v-lazy="item.memIngProduct.pics[0].picUrl" />
                </div>
                <div class="aLlorders-gm">
                  <h3 class="ellips2">{{item.memIngProduct.ProductName}}</h3>
                  <span class="dsh">{{statusTips[item.orderState]}}</span>
                  <div>
                    <span
                      class="integral-l"
                    >{{item.memIngOrdersPay.integral}}积分+￥{{(item.memIngOrdersPay.payPirce/100).toFixed(2)}}</span>
                    <span class="integral-r">x{{item.amount}}</span>
                  </div>
                </div>
              </div>
              <div class="aLlorders-b">
                合计:
                <span
                  class="ellips"
                >{{item.memIngOrdersPay.integral*item.amount}}积分+￥{{item.memIngOrdersPay.payPirce*item.amount}}</span>
                <!-- <button @click="query(item)">物流查询</button> -->
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: "IntegralOrder",
  data() {
    return {
      pageIndex: 1,
      sizeIndex: 10,
      loading: false,
      finished: false,
      orderStatusindex: 0,
      shippingNo: "",
      deliveryType: "",
      statusTips: {
        1: "待支付",
        2: "待审核",
        3: "待发货",
        5: "已完成",
        6: "取消订单"
      },
      obtainuserorder: [
        // {
        //   consignee: "",
        //   sum: ""
        // }
        // {
        //      memIngProduct:[{
        //       ProductName:""
        //     }]
        // }
      ],
      orderProducts: [
        // {
        //   productName: "",
        //   marketPrice: "",
        //   amount: "",
        //   actualPrice: "",
        //   productImages: {
        //     imageUrl: ""
        //   }
        // }
      ],
      pageData: {
        page: 1,
        size: 10
      }
    };
  },
  created() {
    // this.getorderlist();
    // this.Obtainorderdetails();
  },
  filters: {
    fixed: function(value) {
      return (value / 100).toFixed(2);
    }
  },
  methods: {
    onLoad() {
      if (this.finished) return;
      this.getorderlist();
    },
    getorderlist() {
      var obj = this.pageData;
      this.$http.orderList(obj).then(res => {
        this.loading = false;
        this.obtainuserorder = this.obtainuserorder.concat(res.data.content);
        this.obtainuserorder.sort(this.rule("orderState"))

        if (this.obtainuserorder.length == res.data.totalElements) {
          this.finished = true;
        }
        this.pageData.page++;
      });
    },
    jumpDetail(item) {
      this.$router.push({
        path: "/Integralinfo",
        query: { ordersCode: item.ordersCode }
      });
    },
    rule(key) {
      return function(a, b) {
        var value1 = a[key];
        var value2 = b[key];
        return value1 - value2;
      };
    }
    // query(item) {
    //   // console.log(item);
    //   // console.log(item.shippingNo);
    //   // console.log(item.deliveryType);
    // //   this.$router.push({
    // //     path: "/logistics",
    // //     query: { wuliumsg: item.shippingNo, wuliulx: item.deliveryType }
    // //   });
    // // },
    // this.$toast("当前没有物流信息")
    // }
  },
  mounted() {
    document.querySelector(".main").style.minHeight =
      window.screen.height + "px";
  }
};
</script>

<style  lang="less">
.main {
  background: #f4f4f6;
  .aLlorders {
    display: flex;
    width: 6.9rem;
    height: 3.5rem;
    background-color: #ffffff;
    border-radius: 0.2rem;
    margin: 0.25rem auto;
    flex-flow: column wrap;
    .aLlorders-t {
      display: flex;
      height: 2.2rem;
      width: 6.5rem;
      border-bottom: 1px solid #f4f4f6;
      margin: 0 auto;
      padding-top: 0.3rem;
      .aLlorders-img {
        float: left;
        width: 1.6rem;
        height: 1.6rem;
      }
      .aLlorders-gm {
        float: right;
        width: 4.88rem;
        position: relative;
        h3 {
          color: #333333;
          font-size: 0.3rem;
          width: 3.6rem;
          // height: 1rem;
          // line-height: 0.45rem;
          padding-left: 0.2rem;
          span {
            color: #ff211f;
            font-size: 0.3rem;
            float: right;
          }
        }
        .dsh {
          color: red;
          position: absolute;
          right: 0rem;
          top: 0rem;
          font-size: 0.28rem;
        }
        div {
          padding-left: 0.2rem;
          .integral-l {
            color: red;
            font-size: 0.3rem;
          }
          .integral-r {
            font-size: 0.28rem;
            color: #333333;
            float: right;
          }
        }
      }
    }
    .aLlorders-b {
      height: 1.29rem;
      line-height: 1.29rem;
      width: 6.5rem;
      margin: 0 auto;
      color: #333333;
      font-size: 0.34rem;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      span {
        font-weight: bold;
        color: red;
        display: inline-block;
        width: 2.7rem;
      }
      button {
        display: inline-block;
        width: 1.82rem;
        height: 0.7rem;
        border-radius: 0.35rem;
        border: 0.01rem solid #666666;
        line-height: 0.6rem;
        font-size: 0.3rem;
        color: #666666;
        background: #fff;
        margin-left: 1rem;
      }
    }
  }
}
</style>
