<template>
  <view class="box">
    <view class="card" v-for="(item, index) in data" :key="index">
      <view class="card-up">
        <view class="card-up-icon">
          <uni-icons style="padding: 0.2rem; background-color: #00ba26; border-radius: 50%" type="location-filled" size="20" color="#fff"></uni-icons>
          <view style="margin-left: 0.3rem">
            <text style="font-size: 1.1rem; font-weight: 700">{{ item.addressName }}</text>
            <text style="font-size: 0.9rem">{{ item.addressPhone }}</text>
            <view>{{ item.address }}</view>
          </view>
        </view>
        <view class="card-up-iconone">
          <uni-icons @click="modification(item.id, item.addressName, item.addressPhone, item.address)" fontFamily="DownLoad" type="plusempty" size="20">{{ '\ue6b9' }}</uni-icons>
        </view>
      </view>
      <view class="card-below">
        <view class="card-below-icon">
          <uni-icons v-if="iconIndex == 0" type="checkbox-filled" color="#00ba26" size="26"></uni-icons>
          <uni-icons v-else type="circle" size="26"></uni-icons>
          <view>默认地址</view>
        </view>
        <view @click="del(item.id)" class="card-below-text">删除</view>
      </view>
    </view>
    <view style="height: 5rem"></view>
    <view class="buttom" @click="addsies">新增地址</view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { APIGetinquireAddress, APIGetDeleteAddress } from '@/api/site/index.js';
// 用户地址
const data = ref([]);
const iconIndex = ref(0);
// 获取地址列表
const GetinquireAddress = async () => {
  const res = await APIGetinquireAddress();
  data.value = res.data;
};
// 新增地址
const addsies = () => {
  uni.navigateTo({
    url: '/pages/my/components/addShippingAddress'
  });
};
// 修改地址
const modification = (id, name, phone, address) => {
  uni.navigateTo({
    url: `/pages/my/components/addShippingAddress?id=${id}&name=${name}&phone=${phone}&address=${address}`
  });
};
//删除地址
const del = (id) => {
  APIGetDeleteAddress(id);
  uni.showToast({
    title: '删除成功'
  });
  GetinquireAddress();
};
onShow(() => {
  GetinquireAddress();
});
</script>

<style lang="scss" scoped>
@font-face {
  font-family: DownLoad;
  src: url('@/static/icon/iconfont.ttf');
}
.box {
  height: 90vh;
}
.card {
  width: 92%;
  margin: 0.5rem auto;
  background-color: #fff;
  border-radius: 1.5rem;
  display: flow-root;
  .card-up {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    border-bottom: 1px solid #b7b7b7;
    padding-bottom: 1rem;
    .card-up-icon {
      display: flex;
      align-items: center;
      margin-left: 0.8rem;
    }
    .card-up-iconone {
      margin-right: 0.8rem;
    }
  }
  .card-below {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 0.8rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    .card-below-icon {
      display: flex;
      align-items: center;
    }
    .card-below-text {
      margin-right: 0.8rem;
    }
  }
}
.buttom {
  position: fixed;
  bottom: 0;
  z-index: 20;
  height: 3rem;
  width: 92%;
  margin-left: 4%;
  margin-bottom: 2%;
  border-radius: 1.5rem;
  background: #00ba26;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
</style>
