<template>
  <view class="container">
    <Header title="地址管理"></Header>

    <view class="content">
      <view class="empty_list" v-if="isAdressEmpty">
        <img src="@/static/address/address.png" />
        <wd-button type="error" block class="addBtn" @tap="addNewAddress">新增地址</wd-button>
      </view>

      <view class="full_list" v-else>
        <view class="additem" v-for="(item, index) in addressList" :key="index">
          <view class="additem_l">
            <view class="address">{{ item.addr }}</view>
            <view class="info">
              <view class="name">{{ item.receiver }}</view>
              <view class="phone">{{ item.mobile }}</view>
            </view>
            <view class="address_status">
              <view v-if="item.commonAddr === 1" class="box active">
                <wd-icon name="check-circle-filled" size="12px"></wd-icon>
                <view class="txt">默认</view>
              </view>

              <view v-else class="box">
                <wd-icon name="circle1" size="12px"></wd-icon>
                <view class="txt">默认</view>
              </view>
            </view>
          </view>
          <view class="additem_r">
            <wd-icon name="edit-outline" size="14px" @tap="editAddress"></wd-icon>
          </view>
        </view>

        <wd-button type="error" block class="addBtn" @tap="addNewAddress">新增地址</wd-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import Header from '@/pages/order/components/Header/index.vue';

import { getAddressList, deleteAddress } from '@/api/address';

const isAdressEmpty = ref(false);
const mainAddFlag = ref(false);
const addressList = ref([]);

const getAddressListData = async () => {
  const { data: res } = await getAddressList();
  console.log(res);
  if (res) {
    addressList.value = res;
    res.length === 0 ? (isAdressEmpty.value = true) : (isAdressEmpty.value = false);
  }
};

getAddressListData();

const addNewAddress = () => {
  xma.navigateTo({ url: '/pages/address/addressEdit?new=true' });
};
const editAddress = () => {
  xma.navigateTo({ url: '/pages/address/addressEdit' });
};

onLoad(() => {
  xma.getLocation({
    success: (res) => {
      console.log(res);
    },
    fail: (err) => {
      console.log(err);
    },
  });
});
</script>

<style lang="scss" scoped>
page {
  background: #f9f9f9;
}

.container {
  width: 375 * 2rpx;
  margin: 0 auto;

  .content {
    padding-top: 88rpx;

    .full_list {
      margin-top: 20rpx;

      .additem {
        width: 710rpx;
        padding: 20rpx;
        box-sizing: border-box;
        border-radius: 8px;
        background: #ffffff;
        margin: 20rpx auto 20rpx;
        display: flex;
        flex-direction: row;
        font-family: Source Han Sans;
        font-variation-settings: 'opsz' auto;
        font-feature-settings: 'kern' on;

        .additem_l {
          width: 600rpx;
          display: flex;
          flex-direction: column;
        }

        .additem_r {
          flex: 1;
          padding-top: 30rpx;
          box-sizing: border-box;
          text-align: right;
        }

        .address {
          font-size: 24rpx;
          font-weight: 500;
          line-height: 32rpx;
          letter-spacing: 0em;
          color: #3d3d3d;
          margin-bottom: 20rpx;
        }

        .info {
          font-size: 22rpx;
          font-weight: normal;
          line-height: 22rpx;
          color: #abaaaa;
          display: flex;
          margin-bottom: 30rpx;

          .phone {
            margin-left: 10rpx;
          }
        }

        .address_status {
          .box {
            display: flex;
            font-size: 18rpx;
            align-items: center;

            .txt {
              margin-left: 5rpx;
              color: #abaaaa;
            }
          }

          .box.active {
            color: #fa5151;
          }
        }
      }

      .addBtn {
        width: 630rpx;
        height: 72rpx;
        border-radius: 18px;
        opacity: 1;
        background: #fa5151;
        position: fixed;
        bottom: 80rpx;
        left: 50%;
        margin-left: -315rpx;
      }
    }

    .empty_list {
      margin-top: 20rpx;

      img {
        width: 566rpx;
        height: 566rpx;
        margin: 40rpx auto 60rpx;
        display: block;
        // border: 1px dashed rgb(182, 182, 182);
      }

      .addBtn {
        width: 630rpx;
        height: 72rpx;
        border-radius: 18px;
        opacity: 1;
        background: #fa5151;
      }
    }
  }
}
</style>
