<template>
  <view class="address-container">
    <list-page-temp
      class="address-list-inner"
      :getDataPromise="getAddressList"
      :reloadFlag="reloadFlag"
      :requestData="requestData"
    >
      <template v-slot:item="{ data }">
        <address-item
          :data="data"
          @toDetails="toDetails(data)"
          @delete="deleteAction"
          @refresh="handleRefresh"
        />
      </template>
      <view slot="bottom" class="place-view"></view>
    </list-page-temp>

    <view class="flex-center address-list-bottom">
      <view class="flex-row-center address-add" @click="jumpToAdd">
        <text class="fs-60 app-fc-white PingFangSC-Semibold add-icon">+</text>
        <text class="fs-30 app-fc-white PingFangSC-Semibold add-icon">
          添加地址
        </text>
      </view>
    </view>

    <pop-up-modal
      v-if="showModal"
      content="确定要删除该地址信息吗？"
      @confirm="deleteAddress(data)"
      @cancel="showModal = false"
    />
  </view>
</template>

<script>
import AddressItem from "./components/AddressItem.vue";
import PopUpModal from "../../../components/PopUpModal.vue";
import { delAddress, getAddressList } from "../../../api/address";

export default {
  components: {
    AddressItem,
    PopUpModal,
  },
  data() {
    return {
      reloadFlag: 0,
      requestData: {},
      deleteData: {},
      showModal: false,
      isSelectAddress: false, // 从订单页跳转过来选择地址的标识
      selectAddressId: "", // 选中的地址id
    };
  },
  computed: {
    userInfo() {
      return this.$store.state?.user?.userInfo || {};
    }
  },
  watch: {
    userInfo: {
      immediate: true,
      handler(newVal) {
        if (newVal && newVal.userID) {
          this.requestData = {
            user_id: newVal.userID
          };
        }
      }
    }
  },
  onShow() {
    this.reloadFlag = Math.random();
  },
  onLoad(options) {
    const { typeSelect, addressId } = options;
    this.isSelectAddress = typeSelect;
    this.selectAddressId = addressId;
  },
  methods: {
    getAddressList,
    toDetails(data) {
      if (this.isSelectAddress) {
        this.selectAddressId = data?.id || "";
        uni.navigateBack();
        uni.$emit('selectAddress', data)
        return;
      }
      uni.navigateTo({
        url: `/pages/client/address/edit?id=${data?.id || ""}`,
      });
    },
    jumpToAdd() {
      uni.navigateTo({
        url: `/pages/client/address/edit?isAdd=1`,
      });
    },
    deleteAction(data) {
      this.deleteData = data;
      this.showModal = true;
    },
    deleteAddress() {
      this.showModal = false;
      console.log("this.deleteData", this.deleteData);
      delAddress(this.deleteData.id).then(() => {
        this.reloadFlag = Math.random();
      });
    },
    handleRefresh() {
      // 刷新地址列表
      this.reloadFlag = Math.random();
    },
  },
};
</script>

<style lang="scss" scoped>
.address-container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: #fbf8fc;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: 20rpx;

  .address-list-inner {
    height: 100%;
  }

  .place-view {
    height: 90rpx;
  }

  .address-list-bottom {
    position: fixed;
    bottom: 0;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    left: 0;
    width: 100%;

    .address-add {
      width: 630rpx;
      height: 90rpx;
      background: $app_color_main;
      border-radius: 45rpx 45rpx 45rpx 45rpx;

      .add-icon {
        margin-right: 20rpx;
        line-height: 60rpx;
      }
    }
  }
}
</style>
