<template>
  <div class="main">
    <van-tabs
      v-model="orderStatusindex"
      title-active-color="#388bff"
      color="#388bff"
      @change="changeStatus"
      swipeable
      sticky
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="Obtainuserorders"
      >
        <van-tab title="全部" name="0">
          <div>
            <!-- v-for="(cont, num) in item.orderProducts" -->
            <!-- :key="num" -->
            <div
              class="aLlorders"
              v-for="(item, index) in obtainuserorder"
              :key="index"
            >
              <div class="aLlorders-t" @click="indent(item, index)">
                <div
                  class="aLlorders-img"
                  v-for="(cont, num) in item.orderProducts"
                  :key="num"
                  v-if="num <= 3"
                >
                  <img v-lazy="cont.imgUrl" alt="" />
                </div>
                <div class="aLlorders-gm" v-if="item.orderProducts.length == 1">
                  <h3>{{ item.orderProducts[0].productName }}</h3>
                  <span class="dsh" v-if="orderStatusindex == '0'"></span>
                  <div>
                    <span class="integral-l"
                      >￥{{
                        (item.orderProducts[0].ourPrice / 100).toFixed(2)
                      }}</span
                    ><span class="integral-r"
                      >x{{ item.orderProducts[0].amount }}</span
                    >
                  </div>
                </div>
              </div>
              <div class="aLlorders-b">
                合计:<span>￥{{ (item.sum / 100).toFixed(2) }}</span
                ><button @click="query(item)">物流查询</button>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="待发货" name="1">
          <div>
            <!-- v-for="(cont, num) in item.orderProducts" -->
            <!-- :key="num" -->
            <div
              class="aLlorders"
              v-for="(item, index) in obtainuserorder"
              :key="index"
            >
              <div class="aLlorders-t" @click="indent(item, index)">
                <div
                  class="aLlorders-img"
                  v-for="(cont, num) in item.orderProducts"
                  :key="num"
                  v-if="num <= 3"
                >
                  <img v-lazy="cont.imgUrl" alt="" />
                </div>
                <div class="aLlorders-gm" v-if="item.orderProducts.length == 1">
                  <h3>{{ item.orderProducts[0].productName }}</h3>
                  <span class="dsh" v-if="orderStatusindex == 1">待收货</span>
                  <span class="dsh" v-if="orderStatusindex == '0'"></span>
                  <div>
                    <span class="integral-l"
                      >￥{{
                        (item.orderProducts[0].ourPrice / 100).toFixed(2)
                      }}</span
                    ><span class="integral-r"
                      >x{{ item.orderProducts[0].amount }}</span
                    >
                  </div>
                </div>
              </div>
              <div class="aLlorders-b">
                合计:<span>￥{{ (item.sum / 100).toFixed(2) }}</span
                ><button @click="query(item)">物流查询</button>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="待收货" name="2">
          <div>
            <!-- v-for="(cont, num) in item.orderProducts" -->
            <!-- :key="num" -->
            <div
              class="aLlorders"
              v-for="(item, index) in obtainuserorder"
              :key="index"
            >
              <div class="aLlorders-t" @click="indent(item, index)">
                <div
                  class="aLlorders-img"
                  v-for="(cont, num) in item.orderProducts"
                  :key="num"
                  v-if="num <= 3"
                >
                  <img v-lazy="cont.imgUrl" alt="" />
                </div>
                <div class="aLlorders-gm" v-if="item.orderProducts.length == 1">
                  <h3>{{ item.orderProducts[0].productName }}</h3>
                  <span class="dsh" v-if="orderStatusindex == 2">待发货</span>
                  <span class="dsh" v-if="orderStatusindex == '0'"></span>
                  <div>
                    <span class="integral-l"
                      >￥{{
                        (item.orderProducts[0].ourPrice / 100).toFixed(2)
                      }}</span
                    ><span class="integral-r"
                      >x{{ item.orderProducts[0].amount }}</span
                    >
                  </div>
                </div>
              </div>
              <div class="aLlorders-b">
                合计:<span>￥{{ (item.sum / 100).toFixed(2) }}</span
                ><button @click="query(item)">物流查询</button>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="已完成" name="3">
          <div>
            <div
              class="aLlorders"
              v-for="(item, index) in obtainuserorder"
              :key="index"
            >
              <div class="aLlorders-t" @click="indent(item, index)">
                <div
                  class="aLlorders-img"
                  v-for="(cont, num) in item.orderProducts"
                  :key="num"
                  v-if="num <= 3"
                >
                  <img v-lazy="cont.imgUrl" alt="" />
                </div>
                <div class="aLlorders-gm" v-if="item.orderProducts.length == 1">
                  <h3>{{ item.orderProducts[0].productName }}</h3>
                  <span class="dsh" v-if="orderStatusindex == 3">已完成</span>
                  <span class="dsh" v-if="orderStatusindex == '0'"></span>
                  <div>
                    <span class="integral-l"
                      >￥{{
                        (item.orderProducts[0].ourPrice / 100).toFixed(2)
                      }}</span
                    ><span class="integral-r"
                      >x{{ item.orderProducts[0].amount }}</span
                    >
                  </div>
                </div>
              </div>
              <div class="aLlorders-b">
                合计:<span>￥{{ (item.sum / 100).toFixed(2) }}</span
                ><button @click="query(item)">物流查询</button>
              </div>
            </div>
          </div>
        </van-tab>
      </van-list>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      loading: false, //数据加载提示
      finished: false,
      pageIndex: 1, //页数
      sizeIndex: 10, //数量
      orderStatusindex: "0",
      shippingNo: "",
      deliveryType: "",
      obtainuserorder: [
        // {
        //   consignee: "",
        //   sum: "",
        //   ordersCode: ""
        // }
      ], //接口数据
      orderProducts: [
        {
          productName: "",
          marketPrice: "",
          amount: "",
          actualPrice: "",
          productImages: {
            imageUrl: "",
            ordersCode: ""
          }
        }
      ]
    };
  },
  created() {
    // this.Obtainuserorders();
    // this.Obtainorderdetails();
  },
  filters: {
    //    numFilter (value) {
    //   let realVal = ''
    //   if (value) {
    //     // 截取当前数据到小数点后两位
    //     realVal = parseFloat(value).toFixed(2)
    //   } else {
    //     realVal = '--'
    //   }
    //   return realVal
    // }
  },
  methods: {
    Obtainuserorders() {
      var obj = {
        page: this.pageIndex, //页码
        size: this.sizeIndex, //每页数量
        orderStatus: +this.orderStatusindex ? this.orderStatusindex : "" //是否收货
      };
      // if(this.loading){
      //   return;
      // }

      this.$http.Obtainuserorders(obj).then(res => {
        if (res.data.success) {
          this.loading = false;
          // console.log(res.data.data.content);

          res.data.data.content = res.data.data.content.map(v => {
            v.orderProducts.map(value => {
              value.imgUrl = value.productImages[0]
                ? value.productImages[0]["imageUrl"]
                : "";
              return value;
            });
            return v;
          });

          this.obtainuserorder = [
            ...this.obtainuserorder,
            ...res.data.data.content
          ];

          if (res.data.data.content.length < this.sizeIndex) {
            this.finished = true;
          }
          this.pageIndex++;
        } else {
          // this.loading = false;
          this.$toast(res.data.msg);
        }
      });
    },

    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 }
      });
    },
    indent(item, index) {
      sessionStorage['orderProducts'] = JSON.stringify(item.orderProducts);
      this.$router.push({
        path: "/vIpIntegralOrderdetails",
        query: {
          // data: JSON.stringify(item.orderProducts),
          oBtainuserorder: this.obtainuserorder[index],
          shippingNo: item.shippingNo,
          deliveryType: item.deliveryType,
          ordersCode: item.ordersCode,
          orderStatus: item.orderStatus
        }
      });
    },

    changeStatus() {
      this.loading = true;
      this.finished = false;
      this.pageIndex = 1;
      this.obtainuserorder = [];
      this.Obtainuserorders();
    }
  }
};
</script>

<style lang="less">
.main {
  background: #f4f4f6;
  min-height: 100vh;
  .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;
      margin-left: 0.2rem;
      .aLlorders-img {
        float: left;
        width: 1.6rem;
        height: 1.6rem;
      }
      .aLlorders-gm {
        // float: right;
        // width: 4.88rem;
        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: relative;
          right: -4rem;
          top: -0.7rem;
        }
        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;
      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>
