<template>
  <div class="order_list_com">
    <van-nav-bar title="我的订单" left-text="返回" @click-left="$router.back(-1)" left-arrow></van-nav-bar>
    <div class="order_list_com_body_com has_header">
      <scroller ref="my_scroller" :on-refresh="refresh" :on-infinite="infinite">
        <div class="order_list_com_box">
          <div
            :class="{ status_cancel: item.status == 0, status_pay: item.status == 2 }"
            v-for="(item, index) in list"
            :key="index"
            @click="$router.push({ name: 'order_detail', query: { id: item.id } })"
          >
            <van-panel style="margin-top:0.16rem;" :title="item.create_time | datetime" :desc="'订单号：' + item.order_sn" :status="item.status | get_status">
              <div><van-card v-for="(sale, si) in item.sale" :key="si" :num="sale.num" :price="sale.price" :desc="sale.attr" :title="sale.title" :thumb="sale.image" /></div>
              <div slot="footer">
                <div style="float:left; color:#f44;">¥{{ item.total }}</div>
                <div style="float:right;">
                  <van-button size="small" :loading="cancel_loading" v-if="item.status == 1" @click.stop="cancel(item.id)">取消</van-button>
                  <van-button size="small" type="danger" :loading="pay_loading" v-if="item.status == 1" @click.stop="pay(item.id)">付款</van-button>
                  <van-button size="small" type="danger" v-if="item.status == 2 && false" @click="confirm(item.id)">确认收货</van-button>
                </div>

                <div style="clear: both;"></div>
              </div>
            </van-panel>
          </div>
        </div>
      </scroller>
    </div>
    <!-- sku -->
  </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
import { getToken } from '@/utils/auth';
import moment from 'moment';
Vue.use(Lazyload);
import request from '@/utils/request';

export default {
  data: function() {
    let sku = {
      // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
      // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
      tree: [],
      // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
      list: [],
      price: '0', // 默认价格（单位元）
      stock_num: 0, // 商品总库存
      collection_id: 0, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
      none_sku: true, // 是否无规格商品
      messages: [],
      hide_stock: false // 是否隐藏剩余库存
    };
    return {
      showCustomAction: false,
      initialSku: sku,
      sku: sku,
      cancel_loading: false,
      pay_loading: false,
      goods: { title: '', picture: '' },
      list: [],
      filter: {
        page: 1,
        fliter: {}
      }
    };
  },
  created() {
    this.$nextTick(() => {
      this.$refs.my_scroller.finishInfinite(false);
    });
    if (this.$route.query.category_id > 0) {
      this.filter['category_id'] = this.$route.query.category_id;
    }
  },

  filters: {
    parsePriceInt(val) {
      return Math.floor(val);
    },

    datetime(val) {
      return moment(val * 1000).format('YYYY-MM-DD');
    },
    get_status(val) {
      if (val == '0') {
        return '已取消';
      } else if (val == '1') {
        return '待支付';
      } else if (val == '2') {
        return '已支付';
      }
    },

    parsePriceFloat(val) {
      let arr = val.toString().split('.');
      if (arr.length > 1) {
        return '.' + arr[1];
      }
      return '';
    }
  },

  methods: {
    get_list(done) {
      let self = this;
      request('get','/user/api/getOrderListByUserId.html',this.filter).then(res => {
        done();
        self.$refs.my_scroller.finishInfinite(res.data.data.list.length == 0);
        for (let i in res.data.data.list) {
          self.list.push(res.data.data.list[i]);
        }
        self.filter.page++;
      });
    },
    refresh(done) {
      setTimeout(() => {
        this.list = [];
        this.filter.page = 1;
        this.get_list(done);
        // this.$refs.my_scroller.finishPullToRefresh()
      }, 500);
    },
    cancel(id) {
      let self = this;
      self.cancel_loading = true;
      request('get','/shop/ajax/OrderCancel.html',{ order_id: id }).then(res => {
        if (res.data.code == 1) {
          self.$toast(res.data.msg);
        } else {
        }
        self.cancel_loading = false;
      });
    },
    pay(id) {
      let self = this;
      self.pay_loading = true;
      request('get', '/shop/ajax/OrderPay.html',{ order_id: id, json: 1 }).then(res => {
        if (res.data.code == 1) {
          window.location.href = res.data.data.url;
        } else {
          self.$toast(res.data.msg);
        }
        self.pay_loading = false;
      });
    },
    confirm(id) {
      request('get','/public/index.php/index/address/del',{ id: id }).then(res => {});
    },

    infinite(done) {
      setTimeout(() => {
        this.get_list(done);
      }, 500);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.order_list_com {
  background-color: #f5f5f5;
}

.order_list_com_box {
  padding: 0 0.16rem;
}
.order_list_com_box .van-card {
  background-color: #fff;
}

.order_list_com_item_box {
  background-color: #fff;
  border-radius: 0.1rem;
  margin: 0.08rem;
  overflow: hidden;
  margin-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.order_list_com_item .order_list_com_link {
  display: block;
}

.order_list_com_item .order_list_com_image {
  max-width: 100%;
}

.order_list_com_text {
  padding: 0 0.16rem;
}

.order_list_com_goods_name {
  line-height: 1.75;
  font-size: 0.32rem;
  font-weight: normal;
  margin: 0;
}

.order_list_com_price {
  color: #ff4a39;
}

.order_list_com_price .order_list_com_char {
  font-size: 0.2rem;
  margin-right: 0.1rem;
}

.order_list_com_price .order_list_com_price_number {
  font-size: 0.32rem;
  letter-spacing: 0.03rem;
}

.order_list_com_price .price_small {
  font-size: 0.2rem;
}

.order_list_com_shopping_cart {
  float: right;
  font-size: 0.36rem;
  margin-top: 0.1rem;
  margin-right: 0.1rem;
}
.order_list_com_body_com {
  height: calc(100vh - 1rem);
  position: relative;
}
.order_list_com_body_com.has_header {
  height: calc(100vh - 0.92rem);
}

.status_cancel .van-panel__header .van-cell__value {
  color: #999;
}
.status_pay .van-panel__header .van-cell__value {
  color: #333;
}
</style>
