<template>
  <div class="main">
    <!-- 物流查询 -->

    <div style='padding:.2rem 0;'>
      <div class="lOgisticsquery">
        <div class="customer">
          <img src="../assets/images/IntegralOrder/toux.png" alt="" />
          <span>{{ orderStatus | getOrderStatus }}</span>
          <button @click="wuliu">物流查询</button>
        </div>
      </div>
      <!-- v-for="(item, index) in ProductData"
          :key="index" -->
      <!-- 商品信息v-for="(con,num) in item.aorderCodeindex" :key="num" -->
  
        <div class="commodity">
          <ul>
            <li v-for="(item, index) in ProductData" :key="index">
              <img v-lazy="item.productImages.length >0?item.productImages[0].imageUrl:''" alt="" />
              <h3><span></span>{{ item.productName }}</h3>
              <h4>￥{{ (item.ourPrice / 100).toFixed(2) }}</h4>
              <h5>X{{ item.amount }}</h5>
              <i></i>
            </li>
          </ul>
        </div>

        <!-- 物流信息 -->
        <div class="logistics">
          <ul>
            <li>
              订单号<span>{{ ordersCode }}</span>
            </li>
            <li>
              支付时间<span>{{
                 ProductData[0].creationDate.split("T")[0] +
                  " " +
               ProductData[0].creationDate.split("T")[1].split(".")[0]
              }}</span>
            </li>
            <li>
              物流公司<span>{{ deliveryType | getDeliveryType }}</span>
            </li>
            <li>
              物流单号<span>{{ shippingNo }}</span>
            </li>
          </ul>
        </div>
        <!-- 地址信息 -->
        <div class="address">
          <p>
            <span>{{ shopdata.consignee }}</span
            >{{ phone }}
          </p>
          <!-- <p>{{Decode(shopdata.aDeliveryAddress).then(res=>{res})}}</p> -->
          <p>{{ address }}</p>
        </div>
        <!-- 费用总和 -->
        <div class="cost">
          <ul>
            <li>
              <h3>商品费用</h3>
              <span
                >￥<span>{{
                zongji
                }}</span></span
              >
            </li>
            <li>
              <h3>优惠金额</h3>
              <span
                >￥-<span>{{
                  (shopdata.discountPrice / 100).toFixed(2)
                }}</span></span
              >
            </li>
            <li>
              <h3>物流费用</h3>
              <span
                >￥+<span>{{ (shopdata.transportCosts/ 100).toFixed(2) }}</span></span
              >
            </li>
            <li>
              <h3>合计</h3>
              <!-- <span >￥<span></span>{{((zongji -(shopdata.discountPrice/100).toFixed(2)) +(shopdata.transportCosts/ 100).toFixed(2))}}</span> -->
              <span >￥<span></span>{{((zongji*100-shopdata.discountPrice +shopdata.transportCosts)/100).toFixed(2)}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

</template>

<script>
export default {
  data() {
    return {
      ProductData: [],
      shippingNo: "",
      deliveryType: "",
      ordersCode: "",
      shopdata: {},
      user: [],
      creationDate:'',
      orderStatus: "",
      address: "", //地址
      phone: "" ,//电话号码
      zongji:""//费用总和
    };
  },
  destroyed() {
    sessionStorage.removeItem('orderProducts');
  },
  created() {
    this.ProductData = JSON.parse(sessionStorage['orderProducts'] || "[]");
   
    console.log( this.ProductData);
    this.shippingNo = this.$route.query.shippingNo || "";
    this.deliveryType = this.$route.query.deliveryType || "";
    this.ordersCode = this.$route.query.ordersCode || "";
    this.shopdata = this.$route.query.oBtainuserorder || "";
    this.orderStatus = this.$route.query.orderStatus || "";
    // console.log(JSON.parse(this.$route.query.data ||'[]'));
    console.log(this.shopdata);
    // this.Decode();
    this.allmoneny();
    console.log(this.zongji ,this.shopdata.discountPrice ,this.shopdata.transportCosts);
  },
  filters: {},
  methods: {
    wuliu() {
      this.$router.push({
        path: "/logistics",
        query: { wuliumsg: this.shippingNo, wuliulx: this.deliveryType }
      });
    },
    // parseTime(time, cFormat) {
    //   if (arguments.length === 0) {
    //     return null;
    //   }
    //   const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
    //   let date;
    //   if (typeof time === "object") {
    //     date = time;
    //   } else {
    //     if (("" + time).length === 10) time = parseInt(time) * 1000;
    //     date = new Date(time);
    //   }
    //   const formatObj = {
    //     y: date.getFullYear(),
    //     m: date.getMonth() + 1,
    //     d: date.getDate(),
    //     h: date.getHours(),
    //     i: date.getMinutes(),
    //     s: date.getSeconds(),
    //     a: date.getDay()
    //   };
    //   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    //     let value = formatObj[key];
    //     if (key === "a")
    //       return ["一", "二", "三", "四", "五", "六", "日"][value - 1];
    //     if (result.length > 0 && value < 10) {
    //       value = "0" + value;
    //     }
    //     return value || 0;
    //   });
    //   return time_str;
    // },
    DecodeAddress(str) {
      this.$http.Decode(str).then(res => {
        this.address = res.data.data;
      });
    },
    DecodePhone() {
      let phone = "";
      for (var index = 1; index <= 3; index++) {
        if (this.shopdata["aConsigneePhone" + index] != "") {
          phone = this.shopdata["aConsigneePhone" + index];
          console.log(phone);
          break;
        }
      }
      this.$http.Decode(phone).then(res => {
        this.phone = res.data.data;
      });
    },
    //总费用
    allmoneny(){
      var num =0
     this.ProductData.map((item,index)=>{
      //  v.actualPrice * v.amount
          num +=item.ourPrice * item.amount
     })
       this.zongji = (num/100).toFixed(2);
     
    }
  },

  mounted() {
    this.DecodeAddress(this.shopdata.aDeliveryAddress);

    setTimeout(() => {
      this.DecodePhone();
    }, 1000);

    // document.querySelector(".main").style.minHeight =
    //   window.screen.height + "px";
  }
};
</script>

<style lang="less">
.main {
  background: #f4f4f6;
  //   物流查询
  .lOgisticsquery {
    width: 6.9rem;
    height: 2.54rem;
    border-radius: 0.1rem;
    margin: 0 auto;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .2rem;
    .customer {
      width: 1.4rem;
      height: 1.8rem;
      // position: absolute;
      // left: 0;
      // top: 0;
      // right: 0;
      // bottom: 0;
      // margin: auto;
      text-align: center;
      img {
        width: 0.9rem;
        height: 0.9rem;
        margin: 0 auto;
        object-fit: contain;
      }
      span {
        color: #3b3b3b;
        font-size: 0.2rem;
      }
      button {
        width: 1.4rem;
        height: 0.4rem;
        border-radius: 0.2rem;
        background: #4799ff;
        font-size: 0.24rem;
        color: #fff;
        margin-top: 0.2rem;
        border: none;
      }
      p {
        width: 5.07rem;
        height: 0.43rem;
        text-align: center;
        position: relative;
        left: -1.8rem;
        font-size: 0.2rem;
        color: #666666;
      }
    }
  }

  //   商品信息
  .commodity {
    width: 6.9rem;
    background: #ffffff;
    border-radius: 0.2rem;
     margin-bottom: .3rem;
    margin: 0 auto;
        margin-bottom: .2rem;
    li {
      width: 6.48rem;
      height: 2rem;
      margin: auto;
      padding-top: 0.1rem;
      img {
        width: 1.6rem;
        height: 1.6rem;
        box-shadow: 0rem 0rem 0.18rem 0rem #eaeaea;
        float: left;
      }
      h3 {
        color: #333333;
        font-size: 0.28rem;
        height: 0.8rem;
        width: 3.58rem;
        float: left;
        width: 4.5rem;
        padding-left: 0.2rem;
        span {
          color: red;
          font-size: 0.28rem;
        }
      }
      h4 {
        float: left;
        display: inline-block;
        font-size: 0.3rem;
        height: 0.8rem;
        line-height: 0.8rem;
        padding-left: 0.2rem;
        color: red;
        width: 4.2rem;
      }
      h5 {
        height: 0.8rem;
        line-height: 0.8rem;
        color: #ff211f;
        font-size: 0.28rem;
        float: right;
      }
      i {
        border-bottom: 1px solid #e0e0e0;
        width: 6.48rem;
        height: 1.8rem;
        display: block;
      }
    }
  }
  //   物流信息
  .logistics {
    width: 6.9rem;
    height: 2.4rem;
    border-radius: 0.1rem;
    margin: 0 auto;
    margin-bottom: .3rem;
    background: #fff;
    li {
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: 0.28rem;
      color: #222222;
      span {
        float: right;
        color: #666666;
        font-size: 0.28rem;
      }
    }
  }
  //   地址信息
  .address {
    width: 6.9rem;
    background: #ffffff;
    border-radius: 0.1rem;
    margin: 0 auto;
    margin-bottom: .2rem;
    p {
      line-height: 0.67rem;
      padding-left: 0.19rem;
      color: #222222;
      font-size: 0.28rem;
    }
    p:nth-child(1) {
      span {
        margin-right: 0.1rem;
      }
    }
  }
  //   费用总和
  .cost {
    width: 6.9rem;
    height: 2.76rem;
    background: #ffffff;
    border-radius: 0.1rem;
    margin: 0 auto;
 
    ul {
      width: 6.52rem;
      li {
        height: 0.7rem;
        padding-left: 0.2rem;
        line-height: 0.7rem;
        h3 {
          display: inline-block;
          width: 3.49rem;
        }
        span {
          float: right;
        }
      }
      li:nth-child(3) {
        border-bottom: 1px solid #e0e0e0;
      }
    }
  }
}
</style>
