<template>
  <!-- 我的地址列表 -->
  <view>
    <u-navbar placeholder title="我的地址" bgColor="#fff" :autoBack="true"></u-navbar>
    <view class="mainBox">
      <view class="addressBox" v-for="item in addressList" :key="item.id" @click="checkAddress(item)">
        <view class="topBox flexJ">
          <view class="nameBox flexA">
            <image src="/static/mineIc/redAddress.png" mode=""></image>
            <view class="name">{{ item.name }}</view>
            <text>{{ item.mobile }}</text>
          </view>
          <view class="rightIc flexA">
            <image @click.stop="del(item.id, item)" src="/static/mineIc/delAddress.png" mode=""></image>
            <image @click.stop="newAdd(0, item.id)" src="/static/mineIc/edit.png" mode=""></image>
          </view>
        </view>
        <view class="area">
          {{ item.diqu }}
          <test>{{ item.address }}</test>
        </view>
      </view>
    </view>
    <!-- 地址列表为空 -->
    <view class="addressNull flexV" v-if="!addressList">
      <image src="/static/mineIc/addressNull.png" mode=""></image>
      <text>暂无收货地址</text>
    </view>
    <view class="btnBox iosAuto">
      <view class="btn flexC" @click="newAdd(1)">新建收货地址</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getAdressList, getDelAdres } from '@/api/'

const addressList = ref([])

onShow(() => {
  addressList.value.splice(0)
  getAdressLists() //地址列表
})
onLoad(e => {
  isCheck.value = e.isCheck //是否选这地址
})
//type==0 修改地址 - 新建地址
const newAdd = (type, id) => {
  console.log(type, id, 'type id是什么')
  uni.navigateTo({
    url: `/pages/mine/newAddress?id=${type == 0 ? id : ''}`
  })
}
let isCheck = ref(0)
// 选这地址
const checkAddress = item => {
  if (isCheck.value == 1) {
    const pop = getCurrentPages().pop()
    setTimeout(() => {
      pop.$vm.getOpenerEventChannel().emit('steBack', item)
    }, 1000)
    uni.navigateBack()
  }
}
const del = (id, item) => {
  uni.showModal({
    title: '提示',
    content: '确认删除此地址吗',
    success: function (res) {
      if (res.confirm) {
        getDelAdress(id, item)
      }
    }
  })
}
// 删除地址
const getDelAdress = async (ids, item) => {
  try {
    const res = await getDelAdres(ids)
    uni.showToast({ title: '删除成功！', icon: 'none' })
    getAdressLists()
    console.log('getDelAdres', res)
    if (item.is_default === 1) uni.removeStorageSync('defaultAdres')
  } catch (err) {
    console.log('getDelAdres', err)
  }
}
// 获取地址列表
const getAdressLists = async () => {
  try {
    const res = await getAdressList()
    addressList.value = res
    let defaultAdres = res.find(item => item.is_default == 1) //默认地址
    uni.setStorageSync('defaultAdres', defaultAdres)
    console.log('getAdressList', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getAdressList', err)
  }
}
</script>

<style lang="scss">
.mainBox {
  background: #f8f9feff;

  .addressBox {
    width: 100%;
    padding: 44rpx 32rpx;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 12rpx;

    .topBox {
      margin-bottom: 18rpx;

      .nameBox {
        image {
          width: 32rpx;
          height: 32rpx;
        }

        .name {
          color: #000000cc;
          font-size: 32rpx;
          font-weight: 700;
          margin: 0 20rpx;
        }

        text {
          color: #000000cc;
          font-size: 28rpx;
          font-weight: 700;
        }
      }

      .rightIc {
        image {
          margin-left: 32rpx;
          width: 36rpx;
          height: 36rpx;
        }
      }
    }

    .area {
      color: #00000066;
      font-size: 26rpx;

      text {
        margin-left: 8rpx;
      }
    }
  }
}

.addressNull {
  margin-top: 266rpx;

  image {
    width: 266rpx;
    height: 266rpx;
  }

  text {
    color: #00000066;
    font-size: 26rpx;
  }
}

.btnBox {
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  width: 100%;
  height: 120rpx;

  .btn {
    width: 686rpx;
    height: 88rpx;
    border-radius: 12rpx;
    color: #ffffffff;
    font-size: 32rpx;
    font-weight: 700;
    margin: 0 auto;
    background: linear-gradient(139deg, #fb753cff 0%, #fb3e3cff 100%);
  }
}
</style>