<template>
  <div class="address" style="padding-top: 46px">
    <van-nav-bar
      title="我的地址"
      class="van-nav-bar-my-fixed"
      left-arrow
      @click-left="onClickLeft"
      :right-text="isRes === '1' ? '' : '删除'"
      @click-right="onClickRight"
      fixed
    />
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="[]"
      @add="onAdd"
      @select="onSelect"
      @edit="onEdit"
    />
    <div
      class="addmore"
      v-if="total > 0 && list.length < total && list.length > 0"
      @click="pageData"
    >
      点击加载更多！
    </div>
    <!-- v-if="list && list.length > 0" -->
    <!-- <van-empty v-else description="暂无地址！" /> -->
  </div>
</template>

<script>
import { Dialog } from "vant";
import asyncRequest from "@/apis/address/index";
import resToken from "@/mixins/resToken";
export default {
  mixins: [resToken],
  data() {
    return {
      delId: "",
      chosenAddressId: "",
      isRes: this.$route.query.id ? this.$route.query.id : "0",
      list: [],
      total: 0,
      parmValue: {
        page: 1, // 页码
        size: 10, // 每页显示条数
      },
      loading: false,
    };
  },
  async created() {
    if (this.$route && this.$route.query && this.$route.query.id) {
      this.isRes = "1";
    } else {
      this.isRes = "0";
    }
  },
  mounted() {
    this.searchList();
  },
  methods: {
    onClickLeft() {
      window.history.back(-1);
    },
    onClickRight() {
      if (!this.loading) {
        if (this.delId === "") {
          this.show_title("请选择地址！");
          return;
        }

        Dialog.confirm({
          title: "确认删除？",
          message: "确认删除该地址？",
        })
          .then(async () => {
            await this.delAddr(this.delId);
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    customerService() {
      this.serviceShow = true;
    },
    gotoInfor() {
      this.$router.push({
        path: "/personalInfor",
      });
    },
    onAdd() {
      this.$router.push({
        path: "/addressView",
      });
    },

    onEdit(item) {
      if (!this.loading) {
        window.vm.$router.push({
          path: "/addressView",
          query: {
            id: item.id,
          },
        });
      }
    },

    onSelect(item) {
      if (this.isRes === "1") {
        this.$store.dispatch("user/set_ad", item).then((res) => {
          console.log(res);
          window.history.back(-1);
        });
      } else {
        this.delId = item.id;
      }
    },
    async pageData() {
      this.parmValue.page++;
      await this.searchList();
    },
    async delAddr(id) {
      this.loading = true;
      let res = await asyncRequest.del({ id: id });
      this.loading = false;
      if (res && res.code == 0) {
        this.show_title("地址删除成功！");
        await this.searchList();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.show_title(res.msg);
      }
    },
    async searchList() {
      if (!this.loading) {
        console.log(this.chosenAddressId);
        if (this.parmValue.page === 1) {
          this.list = [];
        }
        let res = await asyncRequest.list(this.parmValue);
        if (res && res.code == 0 && res.data) {
          let arr = res.data.list;
          arr.map((v1) => {
            let codeName =
              v1.city_name === v1.provice_name
                ? v1.provice_name
                : v1.provice_name + v1.city_name;
            v1.name = v1.contector;
            v1.tel = v1.mobile;
            v1.address = codeName + v1.area_name + v1.addr;
            return v1;
          });
          this.list.push(...arr);
          if (this.chosenAddressId === "" && this.list.length > 0) {
            this.chosenAddressId = this.list[0].id;
          }
          this.total = res.data.count;
          console.log(this.total);
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.show_title(res.msg);
          if (this.parmValue.page !== 1) {
            this.parmValue.page--;
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.address {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 48px 0 0 0;
  box-sizing: border-box;
  .van-tag--danger {
    background: rgb(255, 131, 39);
  }

  .van-address-item .van-radio__icon--checked .van-icon {
    background-color: rgb(255, 131, 39);
    border-color: rgb(255, 131, 39);
  }
  .van-address-list__bottom {
    button.van-button--danger {
      background: linear-gradient(-180deg, #fcce56, rgb(255, 131, 39), #f9680f);
      border: 0;
    }
  }
  .addmore {
    text-align: center;
    color: #999;
    height: 30px;
    line-height: 30px;
    width: 100%;
  }
}
</style>
