<template>
  <div class="order_coffee">
    <div class="group" v-if="addr.tel" @click="onEdit">
      <div v-text="addr.address" style="color: #999; font-size: 14px"></div>
      <div
        v-text="addr.name"
        style="font-weight: 600; font-size: 18px; padding: 3px 0"
      ></div>
      <div v-text="addr.tel" style="color: #999; font-size: 14px"></div>
      <div class="borderBottom"></div>
    </div>
    <van-contact-card v-else type="add" @click="onEdit" />
    <van-card
      v-for="(item, index) in list"
      :key="item.title + index"
      :desc="item.goods_subTitle"
      :title="item.goods_title"
      :thumb="item.goods_url"
      :num="item.num"
    >
      <template #price> ￥{{ item.goods_price }}{{ item.goods_com }} </template>
    </van-card>
    <van-submit-bar
      :price="priceTotal"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { pushOrder } from "@/api/index";

import {
  Card as VanCard,
  ContactCard as VanContactCard,
  SubmitBar as VanSubmitBar,
} from "vant";
import "vant/lib/submit-bar/style/index";
import "vant/lib/card/style/index";
import "vant/lib/contact-card/style/index";
export default {
  name: "order",
  data() {
    return {
      list: [],
      addr: {},
    };
  },
  mounted() {
    !this.list.length &&
      (this.list = JSON.parse(this.$route.query.aselectItem || "[]"));
    this.addr = JSON.parse(localStorage.getItem("addr") || "{}");
  },
  computed: {
    priceTotal() {
      let p = 0;
      for (let i = 0; i < this.list.length; i++) {
        const v = this.list[i];
        p += (v.goods_price || 0) * 100 * (v.num || 0);
      }
      return p;
    },
  },
  methods: {
    onEdit() {
      this.$router.push("/coffeeAddList");
    },
    onSubmit() {
      pushOrder({
        order_name: this.addr.name,
        order_phone: this.addr.tel,
        address_id: this.addr.id,
        goods: (this.list || []).map(v=>{
            return {
                'goods_orders_quantity': v.num,
                'goods_orders_price': v.goods_price,
                'goods_orders_goods_id': v.goods_id
            }
        }),
      }).then(() => {
        this.$router.replace("/coffee/orders?active=1");
      });
    },
  },
  beforeUnmount: function () {},
  components: {
    VanCard,
    VanContactCard,
    VanSubmitBar,
  },
};
</script>

<style>
.order_coffee {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}
.order_coffee .group {
  padding-left: 5px;
  position: relative;
  background-color: #fff;
  padding: 10px 5px;
}
.order_coffee .borderBottom {
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: repeating-linear-gradient(
    -45deg,
    #ff6c6c 0,
    #ff6c6c 4%,
    transparent 0,
    transparent 5%,
    #1989fa 0,
    #1989fa 9%,
    transparent 0,
    transparent 10%
  );
}
</style>
