<template>
    <view class="content">
      <view
        v-if="addressList.length !== 0"
        class="list"
      >
        <view
          v-for="(item, index) in addressList"
          :key="index"

          class="order-user"

          @tap="toOrder(item.add_id)"

          @longpress="delAddress(item.add_id)"

        >
          <view class="order-user-head">
            <view class="name">
              <view
                v-if="item.default === '1'"
                class="default"
              ><text>默认</text></view>{{item.name}}
            </view>
            <text class="mobile">{{item.mobile}}</text>
          </view>
          <view class="order-user-body">
            <image src="../../static/myorder-paying-location.png"></image>
            <text class="address">{{item.address.replace(/[-]/g,' ')}}
  {{item.add_detail}}</text>
          </view>
          <image

            @click.stop="toEditAddress(item.add_id)"

            v-if="item.default === '1'"
            class="arrow"
            src="../../static/right.png"
          ></image>
          <image

            @click.stop="toEditAddress(item.add_id)"

            v-else
            class="arrow pen"
            src="../../static/icon-pen.png"
          ></image>
        </view>
      </view>
      <view
        v-else
        class="empty"
      >
        暂无收货地址
      </view>

      <button
        @tap="toAddAddress"
        class="add"
      >新建收货地址</button>

    </view>
  </template>
  
  <script>
  import store from '@/store'
  export default {
    data () {
      return {}
    },
    computed: {
      addressList () {
        return this.$store.state.address.list

      },

    },

    onLoad ({ edit }) {
      if (edit) {
        this.edit = true
      }

      // store.dispatch('address/list')

    },

    onShow() {
      store.dispatch('address/list')
    },

    methods: {

      toAddAddress() {
        console.log('aaaaa-a')
        uni.navigateTo({
          url: 'addAddress',
          fail: (error) => {
            console.error('跳转出现错误', error)

          },

        })
      },

      toEditAddress(addId) {

        console.log('addId', addId)
        uni.navigateTo({
          url: `addAddress?addId=${addId}`,
          fail: (error) => {
            console.error('跳转出现错误', error)

          },

        })

      },

      toOrder(addId) {

        if (this.edit) {

          const pages = getCurrentPages()
          const prevPage = pages[pages.length - 2] // 上一个页面
          const addressId = addId
          // console.log(addressId)
          prevPage.onShow(addressId)
          uni.navigateBack()

          // uni.navigateTo({
          //   url: `../confirmOrder/confirmOrder?addressId=${addId}`,
          //   fail: (error) => {
          //     console.error('跳转出现错误', error)
          //   }
          // })

        }

      },
      delAddress(addId) {

        const that = this

        uni.showModal({
          title: '提示',
          content: '是否删除该条地址',
          success: function (res) {
            if (res.confirm) {

              if (that.addressList.length > 1) {

                store.dispatch('address/delete', {
                  add_id: addId,
                }).then(() => {
                  store.dispatch('address/list')
                  uni.showToast({
                    title: '删除成功',
                    duration: 1000,
                  })
                })
              } else {
                uni.showToast({
                  title: '请保留至少一条地址信息',

                  icon: 'none',

                  duration: 1000,
                })
              }
            }
          },
        })
      },
    },

  }
  </script>
  
  <style lang="scss">
  .content {
    min-height: 100vh;
    background-color: #f2f2f2;
    padding-top: 20rpx;
    padding-bottom: 112rpx;
    .order-user {
      width: 670rpx;
      height: 228rpx;
      background: #ffffff;
      border-radius: 14rpx;
      margin: 0 auto;
      margin-bottom: 20rpx;
      position: relative;
      .order-user-head {
        display: flex;
        height: 108rpx;
        width: 100%;
        align-items: center;

        padding-left: 126rpx;

        box-sizing: border-box;

        .name {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          color: #333333;
          letter-spacing: -0.26px;
          margin-right: 20rpx;
          .default {
            height: 40rpx;
            width: 80rpx;
            background-color: #4a90e2;
            border-radius: 13px;
            border-radius: 13px;
            text-align: center;
            margin-right: 20rpx;
            text {

              display: flex;
              justify-content: center;
              align-items: center;

              font-size: 12px;
              color: #ffffff;
              letter-spacing: -0.23px;

              line-height: 40rpx;

            }
          }
        }
        .mobile {
          font-size: 14px;
          color: #999999;
          letter-spacing: -0.26px;
        }
      }
      .order-user-body {
        display: flex;
        width: 100%;
        image {
          width: 24px;
          height: 26px;
          margin: 12rpx 32rpx 0 40rpx;
        }
        .address {
          font-weight: bold;
          font-size: 14px;
          color: #333333;
          letter-spacing: -0.26px;
        }
      }
      .arrow {

        width: 12px;

        height: 12px;
        position: absolute;
        right: 40rpx;
        bottom: 104rpx;
      }
    }
    .empty {
      color: #666;
      font-size: 16px;
      text-align: center;
      padding-top: 30vh;
    }
    .add {
      position: fixed;
      bottom: 0;
      left: 0;

      height: 120rpx;

      width: 100%;
      background-color: #ff6b4a;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #ffffff;
      letter-spacing: -0.3px;

      /* iphonex 等安全区设置，底部安全区适配 */
      /* #ifndef APP-NVUE */
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      /* #endif */

    }
  }
  </style>