<template>
  <div class="main">
    <div class="user_message" v-if="isVip">
      <div class="name">
        <span>{{xiadanuser.consignee}}</span>
        <span>{{user[0]}}</span>
      </div>
      <div class="address">{{xiadanuser.address}}</div>
      <div>
        <img src="../assets/images/deteOrder/right.png" alt />
      </div>
    </div>
    <div class="shop_message">
      <img v-lazy="shopData.pics[0].picUrl" class="img" />
      <div class="shop_text">
        <div class="ellips2">{{shopData.ProductName}}</div>
        <div v-if="shopData.productLevel.length == 0">
          <p :style="{'color':'red'}">{{shopData.MarketIng}}积分+{{shopData.MarketPrice|fixed}}元</p>
        </div>
        <div v-if="shopData.productLevel.length > 0">
          <p
            :style="{'color':'red'}"
          >{{shopData.productLevel[0].marketIng}}积分+{{shopData.productLevel[0].marketPrice | fixed}}元</p>
        </div>
        <div></div>
      </div>
    </div>
    <div class="jifen">
      <table>
        <tr>
          <td>商品费用</td>
          <td>{{shopData.productLevel.length == 0?shopData.MarketIng:shopData.productLevel[0].marketIng}}积分</td>
          <td>￥{{shopData.productLevel.length == 0?shopData.MarketPrice:shopData.productLevel[0].marketPrice|fixed}}</td>
        </tr>
        <tr>
          <td>物流费用</td>
          <td>0积分</td>
          <td>￥0</td>
        </tr>
        <tr>
          <td>总计</td>
          <td
            style="color:red"
          >{{shopData.productLevel.length == 0?shopData.MarketIng:shopData.productLevel[0].marketIng}}积分</td>
          <td
            style="color:red"
          >￥{{shopData.productLevel.length == 0?(shopData.MarketPrice/100).toFixed(2):(shopData.productLevel[0].marketPrice/100).toFixed(2)}}</td>
        </tr>
      </table>
    </div>
    <div class="order_bz">
      <h2>订单备注</h2>
      <textarea rows="10" cols="30" placeholder="请在此输入" v-model="buymsg"></textarea>
    </div>
    <div class="total">
      <div class="money">
        合计:
        <span>{{shopData.productLevel.length == 0?shopData.MarketIng:shopData.productLevel[0].marketIng}}积分+{{shopData.productLevel.length == 0?shopData.MarketPrice:shopData.productLevel[0].marketPrice|fixed}}元</span>
      </div>
      <div class="duihuan" @click="submessage">马上兑换</div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Card } from "vant";

Vue.use(Card);
export default {
  name: "shopDetails",
  data() {
    return {
      jd: {},
      isVip: false,
      shopData: {
        pics: [
          {
            picUrl: ""
          }
        ],
        productLevel: []
      },
      productCode: this.$route.query.productCode,
      isxn: false, //是实物还是虚拟
      pagedata: {
        page: 1,
        size: 10
      },
      xiadanuser: {
        address: "",
        phone: "",
        name: ""
      },
      user: [],
      buymsg: "",
      userphone: sessionStorage.getItem("userphone"),
      isbd: sessionStorage.getItem("userDate") == null //正确是没绑定
    };
  },
  created() {
    // this.getproductInfo();
    this.haveShopDate();
    this.Decode();
  },
  filters: {
    fixed: function(value) {
      return (value / 100).toFixed(2);
    }
  },
  methods: {
    //获取收获信息
    getorder() {
      var obj = this.pagedata;
      this.$http.Obtainuserorders(obj).then(res => {
        this.user.name = res.data.data.content[0].consignee;
        // console.log(res.data.data.content[0].consignee);

        var arr = [
          res.data.data.content[0].aDeliveryAddress,
          res.data.data.content[0].aConsigneePhone2
        ];
        // this.Decode(arr)
      });
    },
    //商品详情
    // getproductInfo() {
    //   var obj = { productCode: this.productCode };
    //   this.$http.productInfo(obj).then(res => {
    //      this.shopdata = res.data.data
    //      if(this.shopdata.ProductObject==1){
    //         this.isxn  = true
    //      }
    //   });
    // },
    haveShopDate() {
      var obj = {};
      if (this.isbd) {
        obj.productCode = this.productCode;
        obj.secretPhone = "";
      } else {
        obj.productCode = this.productCode;
        obj.secretPhone = this.userphone;
      }
      this.$http.productInfo(obj).then(res => {
        this.shopData = res.data.data;
        this.shopImg = this.shopData.pics;
      });
    },
    //解码
    Decode(arr) {
      var arr = sessionStorage.getItem("userphone");

      this.$http.Decode(arr).then(res => {
      
        arr = res.data.data;
        this.user = res.data.data;
      });
    },
    submessage() {
      var obj = {
        productCode: this.productCode,
        buyRemark: this.buymsg
      };
      this.$http.savedingdan(obj).then(res => {
        if (res.data.msg == "200") {
          this.$toast("兑换成功");
        } else {
          this.$toast(res.data.msg);
        }
      });
    }
  },
  mounted() {}
};
</script>
<style lang="less">
.main {
  overflow: hidden;
}
.jifen {
  width: 100%;
  background-color: #fff;
  color: #000;
  padding: 0.2rem;
  font-size: 0.28rem;
  table > tr > td:first-child {
    width: 60%;
  }
  table > tr > td:nth-child(2),
  table > tr > td:nth-child(3) {
    width: 30%;
  }
}
.shop_message {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: 2.18rem;
  padding: 0.2rem;
  background-color: #fff;
  margin-bottom: 0.2rem;
  .img {
    display: block;
    height: 100%;
    width: 40%;
    object-fit: contain;
  }
  .shop_text {
    position: relative;
    width: 60%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    padding: 0.1rem;
  }
  .shop_text > div:first-child {
    font-size: 0.35rem;
    font-weight: bold;
    width: 100%;
    max-height: 1.1rem;
  }
  .shop_text > div:nth-child(2) {
    font-size: 0.3rem;
    color: #666666;
  }
  .shop_text > div:last-child {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 0.55rem;
    font-size: 0.4rem;
  }
}
.user_message {
  position: relative;
  padding: 0.38rem;
  // border-bottom: 0.2rem solid;
  border-bottom: 0.1rem solid transparent;
  border-image: url(../assets/images/deteOrder/item_1.png) 10 10 round;
  background-color: #fff;
  font-size: 0.35rem;
  > .name {
    color: #000;
    width: 100%;
    > span {
      display: inline-block;
      width: 50%;
    }
  }
  > .address {
    color: #666666;
    font-size: 0.3rem;
  }
  > :last-child {
    position: absolute;
    right: 0.2rem;
    top: 0.5rem;
    color: #848484;
    > img {
      width: 0.18rem;
      height: 0.3rem;
    }
  }
}
.shop_title {
  position: relative;
  top: -0.5rem;
  width: 90%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 0.2rem;
  box-shadow: 0 0 0.2rem #8199ff3d;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  flex-flow: column wrap;
  h1 {
    width: 100%;
    font-size: 0.3rem;
    text-align: left;
  }
  p {
    width: 100%;
    font-size: 0.2rem;
    color: red;
  }
}
.order_bz {
  background-color: #fff;
  margin: 0.2rem 0;
  padding: 0.2rem;
  h2 {
    font-size: 0.35rem;
    color: #000;
  }
  textarea {
    width: 100%;
    height: 1.5rem;
    background-color: #f3f3f3;
    border-radius: 0.2rem;
    /* margin: 0 auto; */
    font-size: 0.3rem;
    border: 0;
    padding: 0.2rem;
    box-sizing: border-box;
  }
}
.total {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  background-color: #fff;
  font-size: 0.26rem;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -0.01rem 0.1rem #0000002e;
  padding: 0.1rem;
  z-index: 10;
  .duihuan {
    width: 2.16rem;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.4rem;
    color: #fff;
    border-radius: 0.3rem;
    box-shadow: none;
    text-align: center;
    margin-left: 0.2rem;
    background-color: #ff211f;
  }
  .money span {
    color: #ff211f;
    font-size: 0.35rem;
  }
}
</style>