<template>
  <div class="con-box address">
    <!-- 删除地址弹窗 -->
    <div class="popup-mask" v-if="showDelete"></div>
    <div class="popup-box" v-if="showDelete" :style="this.$store.state.locale =='en'?'min-width: 510px':''">
      <div class="tit">
        <div class="text">{{$t('tips')}}</div>
        <div class="close" @click="showDelete = false"></div>
      </div>
      <div class="con">
        <div class="tip">
          <div class="tip-icon warning"></div>
          <div class="tip-info">
            <div class="result">{{$t('address.deleteShippingAddress')}}</div>
            <div class="date">{{$t('address.deleteShippingTips')}}</div>
            <div class="btns">
              <a href="javascript:void(0)" class="btn-r" @click="deleteAddr()">{{$t('delete')}}</a>
              <a href="javascript:void(0)" class="btn-g" @click="showDelete = false">{{$t('cancel')}}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除地址弹窗 -->
    <div class="add-address">
      <a href="javascript:void(0)" v-if="showAddBtn" class="add-btn" @click="showAddOrUpdateDialog(0)">{{$t('address.createdTips5')}}</a>
      <div class="add-limit">
        {{$t('address.createdTips1')}}
        <span class="number">{{ this.userAddressList.length }}</span>{{$t('address.createdTips2')}}
        <span class="number">10</span>{{$t('address.createdTips3')}}
      </div>
    </div>
    <div class="address-list" v-if="userAddressList.length">
      <div
        class="item"
        v-for="item in userAddressList"
        :key="item.addrId"
        :class="{ 'default-address': item.commonAddr }"
      >
        <div class="item-row">
          <div class="name">{{ item.receiver }}</div>
          <div class="phone-number">{{ item.mobile }}</div>
          <a
            href="javascript:void(0)"
            class="default-btn"
            @click="setDefault(item.addrId)"
          >{{ item.commonAddr ? $t('address.default') : $t('address.setDefault') }}</a>
          <div class="action-box">
            <span class="edit" @click="showAddOrUpdateDialog(1,item.addrId)"></span>
            <span class="delete" @click="showDeleteDialog(item.addrId)"></span>
          </div>
        </div>
        <div
          class="address-detail"
        >{{ item.province + ' ' + item.city + ' ' + item.area + item.addr }}</div>
      </div>
    </div>
    <div class="empty" v-if="!userAddressList.length">
      <div class="img">
        <img src="~/assets/images/emptyPic/address-empty.png" alt />
      </div>
      <div class="action">
        <div class="text">{{$t('address.notAddAdress')}}</div>
        <!-- <nuxt-link to="/" class="btn">回到首页</nuxt-link> -->
      </div>
    </div>
    <addOrEditAddress
      v-if="showAdd"
      ref="addOrUpdate"
      :editAddrId="editAddrId"
      @toggleAddrPop="refreshChange"
    ></addOrEditAddress>
  </div>
</template>

<script>
import { _debounce } from "~/plugins/util";   //防抖
import addOrEditAddress from '~/components/add-or-edit-address'
import Cookie from 'js-cookie'
export default {
  data () {
    return {
      userAddressList: [],  //地址信息
      showDelete: false,
      deleteId: 0,
      editAddrId: 0,
      showAdd: false,
      loading: false,
      showAddBtn: false
    }
  },
  components: {
    addOrEditAddress
  },
  mounted () {
    // 设置网页标题
    document.title = this.$i18n.t('address.receivingAddress')
    this.getUserAddr() // 获取用户地址信息
    if (Cookie.get('token')) {
      this.showAddBtn = true
    }
  },
  methods: {

    /**
     * 获取用户地址信息
     */
    getUserAddr () {
      // this.loading = this.$loading();
      this.$axios.get('/p/address/list').then(({ data }) => {
        this.userAddressList = data
        // this.loading.close();
      })
    },

    //新增获取修改地址
    showAddOrUpdateDialog (st, addId) {
      if (st == 0) {
        if (this.userAddressList.length == 10) {
          this.$message({
            message: this.$i18n.t('address.createdTips4'),
            type: 'warning',
            duration: 1000,
          });
          return
        }
      }
      this.editAddrId = addId
      this.showAdd = true
    },
    addNewAddr () {
      this.showAdd = false
    },


    /**
     * 设为默认地址
     */
    setDefault (addrId) {
      this.$axios.put('/p/address/defaultAddr/' + addrId).then(({ data }) => {
        this.$axios.get('/p/address/list').then(({ data }) => {
          this.userAddressList = data
        })
      })
    },
    /**
     * 刷新回调
     */
    refreshChange (visible) {
      this.showAdd = visible
      // this.pages = this.$refs.crud.$refs.tablePage.defaultPage
      // 获取用户地址信息
      this.$axios.get('/p/address/list').then(({ data }) => {
        this.userAddressList = data
      })
    },

    /**
     * 删除地址
     */
    showDeleteDialog (addrId) {
      this.showDelete = true
      this.deleteId = addrId
    },

    deleteAddr: _debounce(function () {
      this.$axios.delete('/p/address/deleteAddr/' + this.deleteId).then(({ data }) => {
        this.$axios.get('/p/address/list').then(({ data }) => {
          this.userAddressList = data
          this.showDelete = false
        })
      })
    }, 800)

  },
}
</script>

<style scoped src='~/assets/css/uc-address.css'></style>
<style>
.area .el-input__inner,
.el-input,
.el-input__prefix,
.el-input__suffix,
.el-select-dropdown__item,
.el-select-dropdown__empty {
  color: #000;
  font-size: 12px;
}

.el-select-dropdown {
  margin-left: -6px;
}

.address .popup-box .con .edit .item .btn-r {
  height: 16px;
}
</style>
