<template>
  <div class="list_coffee">
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="onSelect"
    />
  </div>
</template>

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

import { AddressList as VanAddressList } from "vant";
import "vant/lib/address-list/style/index";
export default {
  name: "list_coffee",
  data() {
    return {
      list: [],
      chosenAddressId: "1",
    };
  },
  mounted() {
    const t = JSON.parse(localStorage.getItem("user") || "{}");
    const addr = JSON.parse(localStorage.getItem("addr") || "{}");
    getAddrees({
      phone: t.telNumber,
    }).then(r => {
      this.list = (r || []).map(v => {
        let p = {
          id: v.address_id + "",
          name: v.address_name,
          tel: v.address_phone,
          address: v.address_detail,
        };
        if (v.address_isDefault == 1) p.idDefault = v.address_isDefault == 1;
        return p;
      });
      this.chosenAddressId = (
        addr.address_id ||
        this.list[0].id ||
        "1"
      ).toString();
    });
  },
  computed: {},
  methods: {
    onSelect(e) {
      localStorage.setItem("addr", JSON.stringify(e || "{}"));
      this.$router.go(-1);
    },
    onAdd() {
      this.toEdit();
    },
    onEdit(e) {
      this.toEdit(e);
    },
    toEdit(item) {
      let q = undefined;
      item && (q = { add: JSON.stringify(item) });
      this.$router.push({
        name: "CoffeeEdit",
        query: q,
      });
    },
  },
  beforeUnmount: function () {},
  components: {
    VanAddressList,
  },
};
</script>

<style>
.list_coffee {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  overflow-y: auto;
}
.van-address-list {
  height: auto;
}
</style>
