<template>
  <div class="checkout-list">
    <div class="van-cell van-cell--center van-cell--borderless van-cell--clickable van-contact-card van-contact-card--edit" style="height: 1.4rem;">
      <i class="van-icon van-icon-location van-cell__left-icon"></i>
      <div @click="$router.push({ name: 'address_list' })" class="van-cell__value van-cell__value--alone">
        <div>{{ addressinfo.name }} {{ addressinfo.tel }}</div>
        <div class="address">{{ addressinfo.address }}</div>
      </div>
      <div v-if="addressinfo.id == 0">请选择地址</div>
      <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
    </div>

    <div class="cart-list-item" v-for="(item, index) in list" :key="index">
      <van-card :num="item.object.formdata.num" :price="item.object.price" :desc="item.object.summary" :title="item.object.title" :thumb="item.object.thumb">
        <template slot="tags">
          {{ item.object.attr }}
        </template>
      </van-card>
    </div>

    <div style="color:#333; font-size:0.28rem; text-align: right; padding:0.32rem;">运费：¥{{ shipping_cost }}</div>

    <van-submit-bar :price="total" button-text="立即支付" @submit="onSubmit" />
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  name: 'checkout',
  created() {
    if (this.$store.getters.cart_checkout_ids.length < 2) {
      this.$router.push({ name: 'cart' });
    }
    this.getList();
  },
  data() {
    return {
      currentContact: { name: '', tel: '' },
      list: [],
      total: 0,
      addressinfo: this.$store.getters.addressinfo,
      shipping_cost: 0
    };
  },
  methods: {
    onSubmit() {
      let self = this;
      self.$toast.loading({
        mask: true,
        message: '处理中...'
      });
      request('post','/shop/ajax/createOrderByCart.html',{
          tel: self.addressinfo.tel,
          consignee: self.addressinfo.name,
          address: self.addressinfo.address
      }).then(res => {
        if (res.data.code == 1) {
          self.$toast(res.data.msg);
          self.$toast.clear();
          window.location.href = window.serverUrl + res.data.data.url;
        } else {
          this.$toast(res.data.msg);
        }
      });
    },
    getList() {
      let self = this;
      self.$toast.loading({
        mask: true,
        message: '处理中...'
      });
      let ids = this.$store.getters.cart_checkout_ids;

      request('get','/shop/ajax/cartList.html',{ ids: ids}).then(res => {
          self.list = res.data.data.list;
          self.total = res.data.data.total * 100 + res.data.data.shipping_cost * 100;
          self.shipping_cost = res.data.data.shipping_cost;
          self.$toast.clear();
        });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.checkout-list {
  background-color: #f5f5f5;
}
.checkout-list .van-cell__left-icon {
  font-size: 0.6rem;
}
.checkout-list .address {
  color: #999;
}
.checkout-list .van-card {
  background: #fff;
}
</style>
