<!--
  @description:收货地址
  @Modifier：haoFx
  @routerPath:/personalCenter/mailingaddressList
  @date：  2019/10/10-16:04
-->
<template>
  <div>
    <div class="shopmall-page-title">
      收货地址
    </div>
    <div class="shopmall-view">
      <el-row :gutter="15" class="invoiceManageList clearfix">
        <el-col v-for="(item,index) in addressList" :key="index" :span="6">
          <div :class="{children:true,acitve:item.isDefault===true,gray:item.isDefault===false,selected:item.isDefault===true}" @click="switchDefault(item)">
            <div class="invoiceManageInfo mailingaddress">
              <div class="receiver_name">
                <div class="name cursor" :title="item.receiverName">
                  {{ item.receiverName }}
                </div>
                <span @click="updateClickBtn(item.id)">编辑</span>
                <span @click="addressDelete(item.id)">删除</span>
              </div>
              <p class="mailingaddress_info">
                {{ item.phoneNumber }}
              </p>
              <p class="mailingaddress_info">
                {{ item.provinceName }}&nbsp;{{ item.cityName }}&nbsp;{{ item.areaName }}
              </p>
              <p class="mailingaddress_info name cursor" :title="item.addressDetail">
                {{ item.addressDetail }}
              </p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="add_invoiceManage_info flex cursor" @click="addAdressClickBtn">
            <i class="iconfont icon-tianjia2" />新增地址
          </div>
        </el-col>
      </el-row>
    </div>
    <!--弹框-->
    <addressAdd v-if="childenData.dialog" :childen-data="childenData" @saveSuccess="saveSuccess" />
  </div>
</template>

<script>
import { getList, deleteAdress } from '@/api/shoppingmall/mailingaddress'
import addressAdd from './mailingaddressAdd-dialog'
export default {
  name: 'MailingaddressList',
  components: {
    addressAdd
  },
  data() {
    return {
      childenData: {
        dialog: false, // 弹框
        type: '', // 00 编辑 01 增加
        id: ''
      },
      addressList: [] // 收货地址列表
    }
  },
  created() {
    this.initAddressList()
  },
  methods: {
    // 获取地址列表
    initAddressList() {
      getList().then(response => {
        this.$nextTick(() => {
          this.addressList = response.data
        })
      }).catch(err => {
        throw new Error('error!' + err)
      })
    },
    // 删除地址
    addressDelete(id) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteAdress(id).then(res => {
          this.$message({
            message: '删除地址成功',
            type: 'success'
          })
          this.initAddressList()
        }).catch(err => {
          throw new Error('删除地址失败' + err)
        })
      }).catch(() => {
      })
    },
    switchDefault(item) {
      // 切换收货地址
    },
    // 修改地址
    updateClickBtn(id) {
      this.childenData = {
        dialog: true,
        type: '00',
        id: id // 00 修改
      }
    },
    // 添加地址
    addAdressClickBtn() {
      this.childenData = {
        dialog: true,
        type: '01' // 01 新增
      }
    },
    // 保存成功或者编辑成功 重新获取数据
    saveSuccess(val) {
      this.initAddressList()
    }
  }
}
</script>

<style scoped lang="less">
.mailingaddress_info{
  color: #333333!important;
}
.receiver_name {
  display: flex;
  border-bottom: 1px solid #F2F2F2;
  line-height: 24px;
  padding-right: 6px;
  margin-bottom: 5px;
  >div{
    flex: 1;
  }
  >span{
    position: relative;
    &:hover{
      color: #007CCC;
      cursor: pointer;
    }
  }
}
.name{
  white-space: nowrap;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

