<template>
  <div class="shop-payment-box">
    <div class="shop-top">
      <shop-top v-model="isShow" title="确认订单"></shop-top>
    </div>
    <div class="shop-box">
      <div class="address-box" @click="showAddress = true">
        <div class="icon-address"><i></i></div>
        <div class="address">
          <div class="address-info" v-if="changeAddressInfo.id">
            <address-item :info="changeAddressInfo"></address-item>
          </div>
          <div class="tip" v-else>暂无收货地址，立即添加</div>
        </div>
        <div class="icon-right"></div>
      </div>
      <div class="commodity-box">
        <payment-commodity
          :shopInfo="shopInfo"
          :goodsInfo="goodsInfo"
          :choiceList="choiceList"
          :num="shopNum"
        ></payment-commodity>
      </div>
      <div class="courier-box">
        <div class="title">配送方式</div>
        <div class="text">普通配送</div>
        <div class="text2">快递 包邮</div>
      </div>
      <div class="remarks-box">
        <div class="title">订单备注</div>
        <div class="text">
          <input type="text" v-model="orderMsg" v-iosfit placeholder="选填" />
        </div>
      </div>
    </div>
    <div class="shop-sub">
      <div class="price-box">
        <span class="num">共 {{ shopNum }} 件</span>
        <span class="all">
          <span>合计</span>
          <span class="price">￥{{ Number(goodsInfo.price * shopNum).toFixed(2) }}</span>
        </span>
      </div>
      <div class="btn" @click="sub">结算</div>
    </div>
    <transition name="move-bottom">
      <div class="shop-address" v-if="showAddress">
        <address-list
          v-model="showAddress"
          :addressList="addressList"
          :addressId="addressId"
          @set_addressId="set_addressId"
          @get_addressList="get_addressList"
        ></address-list>
      </div>
    </transition>
  </div>
</template>
<script>
import { getAddressList, createOrder } from '@/plugins/API/apiShop';
import { mapGetters } from 'vuex';
import shopTop from '../common/top';
import paymentCommodity from '../common/paymentCommodity';
import addressItem from '../address/item';
import addressList from '../address/list';

export default {
  name: 'shop-payment',
  components: {
    shopTop,
    paymentCommodity,
    addressItem,
    addressList
  },
  props: {
    value: {},
    shopInfo: {},
    goodsInfo: {},
    choiceList: {},
    shopNum: {}
  },
  data() {
    return {
      showAddress: false,
      addressList: [],
      addressId: 0,
      orderMsg: ''
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo'
    }),
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    },
    changeAddressInfo() {
      const arr = this.addressList.filter(item => {
        return item.id === this.addressId;
      });
      return arr[0] || this.addressList[0] || {};
    }
  },
  mounted() {
    this.get_addressList();
  },
  methods: {
    async get_addressList() {
      const res = await getAddressList({
        uin: this.channelInfo.uin
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.addressList = res.data;
      }
    },
    set_addressId(id) {
      this.addressId = id;
    },
    async sub() {
      if (!this.changeAddressInfo.id) {
        this.$layer.msg('请选择收货地址！');
        return;
      }
      const res = await createOrder({
        uin: this.channelInfo.uin,
        goodsId: this.shopInfo.id,
        specsId: this.goodsInfo.id,
        addressId: this.changeAddressInfo.id,
        orderMsg: this.orderMsg,
        num: this.shopNum,
        backUrl: window.location.href,
        payType: 1
      });
      if (res.code === 200 && res.errorCode === 0) {
        const { tradeType, prepayInfo } = res.data;
        const { uin } = this.channelInfo;
        if (res.data.url) {
          window.location.href = res.data.url;
        } else if (tradeType === 'MWEB') {
          const wxh5pay = `https://web.guangdianyun.tv/pay/wxh5pay?uin=${uin}`;
          const backUrl = encodeURIComponent(window.location.href);
          const transferUrl = encodeURIComponent(`${wxh5pay}&url=${backUrl}`);
          const payUrl = encodeURIComponent(`${prepayInfo.mweb_url}&redirect_url=${transferUrl}`);
          const url = `${wxh5pay}&url=${payUrl}`;
          window.location.href = url;
        } else if (tradeType === 'JSAPI') {
          const data = encodeURIComponent(JSON.stringify(res.data));
          const url = `//web.guangdianyun.tv/pay/wxpay?uin=${uin}&payconfig=${data}`;
          window.location.href = url;
        } else {
          this.$layer.msg('网络错误，请稍后重试！');
        }
      }
    }
  },
  watch: {
    changeAddressInfo() {
      if (this.changeAddressInfo.id) {
        this.addressId = this.changeAddressInfo.id;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.shop-payment-box {
  position: relative;
  height: 100%;
  padding-top: 0.4rem;
  padding-bottom: 0.5rem;
  background-color: #fff;
  .shop-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.4rem;
  }
  .shop-box {
    padding: 0 0.1rem;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .shop-sub {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 0.1rem;
    width: 100%;
    height: 0.5rem;
  }
}
.shop-box {
  .address-box {
    position: relative;
    padding-bottom: 0.1rem;
    height: 0.6rem;
    border-bottom: 0.01rem solid #f6f6f6;
    display: flex;
    align-items: center;
    .icon-address {
      flex: 0 0 auto;
      width: 0.3rem;
      height: 0.3rem;
      background: linear-gradient(180deg, rgba(252, 158, 111, 1) 0%, rgba(252, 81, 6, 1) 100%);
      border-radius: 100%;
      i {
        display: block;
        width: 100%;
        height: 100%;
        background: url(./img/icon-address.png) no-repeat center center;
        background-size: 0.18rem auto;
      }
    }
    .address {
      flex: 1;
      padding: 0 0.12rem;
      .tip {
        line-height: 0.6rem;
        font-size: 0.13rem;
        color: #666666;
      }
    }
    .icon-right {
      flex: 0 0 auto;
      width: 0.16rem;
      height: 0.16rem;
      background: url('./img/icon-right.png') no-repeat center center;
      background-size: 0.08rem auto;
    }
  }
  .courier-box {
    margin: 0.1rem 0;
    display: flex;
    line-height: 0.25rem;
    .title {
      flex: 0 0 auto;
      margin-right: 0.12rem;
      color: #333333;
      font-size: 0.12rem;
    }
    .text {
      flex: 0 0 auto;
      color: #999999;
      font-size: 0.1rem;
    }
    .text2 {
      flex: 1;
      text-align: right;
      color: #999999;
      font-size: 0.1rem;
    }
  }
  .remarks-box {
    margin: 0.1rem 0;
    display: flex;
    line-height: 0.25rem;
    .title {
      flex: 0 0 auto;
      margin-right: 0.12rem;
      color: #333333;
      font-size: 0.12rem;
    }
    .text {
      flex: 1;
      input {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        outline: 0;
        font-size: 0.1rem;
      }
    }
  }
}
.shop-sub {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .price-box {
    margin-right: 0.16rem;
    flex: 0 0 auto;
    .num {
      margin-right: 0.1rem;
      font-size: 0.12rem;
      color: #999999;
    }
    .all {
      font-size: 0.12rem;
      color: #333333;
    }
    .price {
      line-height: 0.2rem;
      color: #ff4802;
      font-size: 0.16rem;
    }
  }
  .btn {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 0.36rem;
    line-height: 0.36rem;
    border-radius: 0.36rem;
    background: #fc5106;
    color: #fff;
    font-size: 0.16rem;
    text-align: center;
    cursor: pointer;
  }
}
.shop-address {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>
