<template>
  <div class="jfBaseSize OrderInfo" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'">
    <div>
      <div class="addressProduct">
        <div class="productList">
          <div class="productImg">
            <img
              :src="vm.Gift_ProductImg"
            />
          </div>
          <div class="productContent">
            <p class="productName">{{vm.Gift_Name}}</p>
            <p class="clearfix">
              <span>
                <span class="dangerIntegral">{{vm.UnitPoints}}</span>
                <span>积分</span>
              </span>
              <span>
                数量：
                <span class="text-danger">{{vm.Amount}}</span>
              </span>
            </p>
          </div>
        </div>
        <p class="productResult">
            合计
            <span>
                <span class="dangerIntegral" v-html="vm.UnitPoints&&vm.Amount?vm.Amount*vm.UnitPoints:0"></span>
                <span class="text-gray">积分</span>
            </span>
        </p>
      </div>
      <hr />
      <div class="addressWay">
        订单号
        <span class="text-orange">
          <span>{{vm.OrderNo}}</span>
        </span>
      </div>
      <div class="addressWay">
        兑换时间
        <span class="text-gray">
          <span>{{vm.ROW_CREATE_DATE}}</span>
        </span>
      </div>

      <hr />
      <div class="addressWay">
        发货状态
        <span class="text-orange">
          <span>{{vm.OrderStatusText}}</span>
        </span>
      </div>
      <div class="addressWay">
        快递公司
        <span class="text-gray">
          <span>{{vm.ExpressCompanyName}}</span>
        </span>
      </div>
      <div class="addressWay">
        快递单号
        <span class="text-gray">
          <span>{{vm.ExpressNo}}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import JfapiHelper from "../assets/js/JfapiHelper.js";
import utils from "../assets/js/utils.js";

export default {
  name: "JfCompExChangeDetail",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    JfapiHelper.CheckLogin(this.$parent, this.sup8.context.enterpriseno);
  
    //从缓存中得到登录信息
    var loginUserInfo = null;
    var tempLoginInfo = localStorage.getItem("loginInfo");
    if ($.trim(tempLoginInfo) != "") {
      loginUserInfo = eval("(" + tempLoginInfo + ")");
    }

    return {
      vm: {},
      orderStatusList: [],
      loginUserInfo: loginUserInfo,
      vh:false,
    };
  },
  methods: {
    GetMallOrderInfo() {
      var that = this;
      //that.sup8.context.enterpriseno

      var url = "/integral/GetMallOrderInfo";

      var orderId = sessionStorage.getItem("ExchangeOrderId");
      
      var dataParams = {
        Enterpriseno: that.loginUserInfo.EnterpriseNo,
        UserToken: that.loginUserInfo.UserToken,
        LanguageType: "zh-cn",
        Id: orderId
      };
      var cbBeforeSend = function() {
        //confirmBtn.val("请稍等...");
      };
      var cbComplete = function() {};
      var cbSuccess = function(resultData) {
        if (resultData.flag) {
          that.vm = resultData.data;
        } 

        var orderDate= utils.formatDate("yyyy.MM.dd hh:mm",that.vm.ROW_CREATE_DATE);
        that.vm.ROW_CREATE_DATE=orderDate;
        
        that.vm.OrderStatusText="";
        for (var i = 0; i < that.orderStatusList.length; i++) {
          var orderStatusObj = that.orderStatusList[i];
          if (orderStatusObj.DATA_VALUE == that.vm.OrderStatus) {
            that.vm.OrderStatusText = orderStatusObj.DATA_NAME;
            break;
          }
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        //MintUI.Toast(jqXHR.responseText);
      };

      //请求后端
      JfapiHelper.CommonCallService(
        url,
        dataParams,
        cbSuccess,
        cbError,
        cbBeforeSend,
        cbComplete
      );
    },
    //获取系统参数-订单状态
    GetOrderStatusList() {
      var that = this;
      //that.sup8.context.enterpriseno

      var url = "/integral/GetSysParaTypeList";
      var dataParams = {
        EnterpriseNo: that.loginUserInfo.EnterpriseNo,
        LanguageType: "zh-cn",
        TypeId: "6db6484a7fe04a89acb977123973dfe2"
      };
      var cbBeforeSend = function() {};
      var cbComplete = function() {};
      var cbSuccess = function(resultData) {
        if (resultData.flag) {
          that.orderStatusList = resultData.data;
          
          if(that.vm.OrderStatusText==""){
              for (var i = 0; i < that.orderStatusList.length; i++) {
                var orderStatusObj = that.orderStatusList[i];
                if (orderStatusObj.DATA_VALUE == that.vm.OrderStatus) {
                    that.vm.OrderStatusText = orderStatusObj.DATA_NAME;
                    break;
              }
            }
            that.$forceUpdate();
          }
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {};

      //请求后端
      JfapiHelper.CommonCallService(
        url,
        dataParams,
        cbSuccess,
        cbError,
        cbBeforeSend,
        cbComplete
      );
    }
  },
  created() {
    var that = this;

    that.GetOrderStatusList();
    that.GetMallOrderInfo();
  },
  mounted: function() {
    var that=this;
    var isDesign=  location.pathname.indexOf('design');
    if (!(isDesign>-1)) {
        that.$set(that,'vh',true);
    }else{
        that.$set(that,'vh',false);
    }
  }
};
</script>

<style scoped>
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  overflow: hidden;
  _zoom: 1;
}
.text-gray {
  color: #b3b3b3;
}
.text-orange {
  color: #eb7741;
}
.text-danger {
  color: #c03546;
}
.dangerIntegral {
  color: #c03546;
  font-weight: 700;
  margin-right: 0.2rem;
}
hr {
  margin: 0;
  border: 0.19rem solid #e6e6e9;
}
.OrderInfo {
    width: 100%;
    height: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: #e6e6e9;
}
.addressOrder {
  border-bottom: 0.2rem dashed #d4d4d4;
  padding: 0.8rem 3%;
  padding-right: 7%;
  background-color: #fff;
}
.addressOrder .existAddress {
  font-size: 0.83em;
  padding-left: 1.8rem;
  background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_shop/order_GPS.png)
    no-repeat 0.1rem 49%;
  background-size: 1rem 1.4rem;
}
.addressOrder .existAddress .addressName {
  margin-bottom: 0.6rem;
}
.addressOrder .existAddress .addressName span:nth-of-type(1) {
  margin-right: 0.6rem;
}
.addressProduct {
  padding: 0.8rem 3%;
  background-color: #fff;
}
.addressProduct .productList {
  display: flex;
  min-height: 4.2rem;
  padding-bottom: 0.4rem;border-bottom: 0.01rem solid #f5f5f5;
}
.addressProduct .productImg {
  width:5.2rem;margin-right: 0.2rem;
  position: relative;
}
.addressProduct .productImg img {
  width:100%;height: 5.2rem;margin-top:5%;
}
.addressProduct .productContent {
  flex: 1;
}
.addressProduct .productContent .productName{font-size: 1rem;margin-bottom: 0.8rem;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display:-webkit-box;height: 2.76rem;}
.addressProduct .productContent .clearfix {
  color: #b3b3b3;
  vertical-align: bottom;
  height: 1.2rem;
  line-height: 1.2rem;margin-top: 1.2rem;
}
.addressProduct .productContent .clearfix > span:nth-of-type(1) {
  float: left;
  line-height: 20px;
}
.addressProduct .productContent .clearfix > span:nth-of-type(2) {
  float: right;
}
.addressProduct .productResult{margin-top: 0.8rem;margin-bottom: 0;}
.addressProduct .productResult >span {float: right;}
.addressWay {
  padding: 0.8rem 3%;
  background-color: #fff;
  border-bottom: 0.01rem solid #f5f5f5;
}
.addressWay > span {
  float: right;
}
.OrderInfo .mint-button {
  border-radius: 0;
  position: absolute;
  bottom: 0;
  background-color: #c03546;
}
.mint-popup {
  position: absolute;
  bottom: 41px;
  width: 100%;
  height: 8.4rem;
}
.mint-popup {
  display: flex;
}
</style>
