<template>
  <view>
    <u-navbar back-text="返回"
              is-back
              title="收货地址管理"
              back-icon-color="#fff"
              :back-text-style="{
                color: '#fff'
              }"
              title-color="#fff"
              :background="{
                backgroundImage: 'linear-gradient(0deg, #c10d12 0%, #c10d12 4%, #e26165 99%, #e26165 100%)'
              }">
    </u-navbar>

    <view class="item" v-for="(res, index) in siteList" :key="res.id">
      <view class="top">
        <view class="name">{{ res.name }}</view>
        <view class="phone">{{ res.mobile }}</view>
        <view class="tag" v-if="res.is_default">
          <text class="red">默认</text>
        </view>
      </view>
      <view class="bottom">
        <text>{{ res.city }} {{ res.address }}</text>
        <view class="icon">
          <u-icon name="edit-pen" :size="40" color="#999999" @tap="toEdit(res)"></u-icon>
          <u-icon name="trash" style="margin-left: 40rpx;" :size="40" color="red" @tap="selectSite = res,show = true"></u-icon>
        </view>
      </view>
    </view>
    <view class="addSite" @tap="toAddSite">
      <view class="add">
        <u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新建收货地址
      </view>
    </view>

    <u-modal v-model="show" content="确认操作？"show-cancel-button @confirm="destroy"></u-modal>
  </view>
</template>

<script>

export default {
  data() {
    return {
      show: false,
      siteList: [],
      selectSite: {}
    };
  },
  onShow() {
    this.getData();
  },
  methods: {
    toEdit(item) {
      this.$u.route({
        url: '/package_sub/pages/UserAddress/AddUserAddress',
        params: {
          id: item.id
        }
      })
    },
    async getData() {
      try {
        const res = await this.$u.api.userAddress({
          page: 1,
          page_size: 999
        })
        this.siteList = res.data
      } catch (err) {
        console.error(err)
      }
    },
    toAddSite(){
      this.$u.route({
        url: '/package_sub/pages/UserAddress/AddUserAddress'
      })
    },
    async destroy() {
      try {
        if(!this.selectSite?.id) return
        const res = await this.$u.api.userAddressDestroy({
          id: this.selectSite?.id
        })
        this.getData()
      } catch (err) {
        console.error(err)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  padding: 40rpx 20rpx;
  .top {
    display: flex;
    font-weight: bold;
    font-size: 34rpx;
    .phone {
      margin-left: 60rpx;
    }
    .tag {
      display: flex;
      font-weight: normal;
      align-items: center;
      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 20rpx;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 30rpx;
        background-color:rgb(49, 145, 253);
      }
      .red{
        background-color: $uni-color-primary;
      }
    }
  }
  .bottom {
    display: flex;
    margin-top: 20rpx;
    font-size: 28rpx;
    justify-content: space-between;
	align-items: flex-start;
    color: #999999;

    .icon {
      text-align: right;
      margin-left: 10rpx;
      flex: 0;
	  flex-basis: 200rpx;
    }
  }
}
.addSite {
  display: flex;
  justify-content: space-around;
  width: 600rpx;
  line-height: 100rpx;
  position: absolute;
  bottom: 30rpx;
  left: 80rpx;
  background: linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%);
  border-radius: 60rpx;
  font-size: 30rpx;
  .add{
    display: flex;
    align-items: center;
    color: #ffffff;
    .icon{
      margin-right: 10rpx;
    }
  }
}
</style>
