<template>
  <div class="address-list">
    <div class="address-top">
      <shop-top v-model="isShow" title="收货地址"></shop-top>
    </div>
    <div class="address-box">
      <div class="list">
        <div class="item" v-for="(item, index) in addressList" :key="index">
          <label class="radio">
            <div
              class="icon-radio"
              :class="{ checked: addressId == item.id }"
              @click="set_addressId(item.id)"
            ></div>
          </label>
          <div class="address-info">
            <address-item :info="item"></address-item>
          </div>
          <div class="operation-box">
            <div class="operation">
              <div class="edit" @click="edit(item)"></div>
              <div class="del" @click="del(item.id)"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="address-sub" @click="add">
      <i class="icon"></i>
      <span>新增收货地址</span>
    </div>
    <transition name="move-bottom">
      <div class="address-edit" v-if="showEdit">
        <address-edit
          v-model="showEdit"
          :addressInfo="addressInfo"
          @get_addressList="get_addressList"
        ></address-edit>
      </div>
    </transition>
  </div>
</template>

<script>
import { delAddress } from '@/plugins/API/apiShop';
import { mapGetters } from 'vuex';
import shopTop from '../common/top';
import addressItem from './item';
import addressEdit from './edit';

export default {
  name: 'shop-address-list',
  components: {
    shopTop,
    addressItem,
    addressEdit
  },
  props: {
    value: {},
    addressList: {},
    addressId: {}
  },
  data() {
    return {
      showEdit: false,
      addressInfo: {}
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo'
    }),
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    }
  },
  methods: {
    add() {
      if (this.addressList.length >= 10) {
        this.$layer.msg('收货地址最多添加10个！');
        return;
      }
      this.addressInfo = {};
      this.showEdit = true;
    },
    edit(info) {
      this.addressInfo = info;
      this.showEdit = true;
    },
    del(id) {
      const self = this;
      this.$layer.sConfirm({
        title: '提示',
        msg: '是否删除该地址？',
        ok() {
          self.del_sub(id);
        }
      });
    },
    async del_sub(id) {
      const res = await delAddress({
        uin: this.channelInfo.uin,
        id: id
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.$layer.close();
        this.$layer.msg('删除成功');
        this.get_addressList();
      }
    },
    get_addressList() {
      this.$emit('get_addressList');
    },
    set_addressId(id) {
      this.$emit('set_addressId', id);
    }
  }
};
</script>

<style lang="less" scoped>
.address-list {
  position: relative;
  height: 100%;
  padding-top: 0.4rem;
  padding-bottom: 0.5rem;
  background-color: #fff;
  .address-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.4rem;
  }
  .address-box {
    padding: 0.05rem 0.15rem;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .address-sub {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 0.1rem;
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    border-top: 0.01rem solid #f6f6f6;
  }
}

.address-box {
  .list {
    .item {
      display: flex;
      align-items: center;
      height: 0.6rem;
      line-height: 0.6rem;
      border-bottom: 0.01rem solid #dbdbdb;
      .radio {
        float: 0 0 auto;
        width: 0.4rem;
        text-align: center;
        .icon-radio {
          vertical-align: middle;
          display: inline-block;
          margin: auto;
          width: 0.18rem;
          height: 0.18rem;
          border-radius: 50%;
          outline: none;
          border: 0.01rem solid #989898;
          background: #fff;
          &.checked {
            border: 0.05rem solid #f14936;
          }
        }
      }
      .address-info {
        flex: 1;
        width: 0;
      }
      .operation-box {
        flex: 0 0 auto;
        .operation {
          display: inline-block;
          height: 0.25rem;
          line-height: 0.25rem;
          border-left: 0.01rem solid #dbdbdb;
          font-size: 0;
          .edit,
          .del {
            vertical-align: middle;
            display: inline-block;
            margin-left: 0.1rem;
            width: 0.22rem;
            height: 0.22rem;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            &.edit {
              background-image: url(./img/edit.png);
            }
            &.del {
              background-image: url(./img/del.png);
            }
          }
        }
      }
    }
  }
}
.address-sub {
  font-size: 0.16rem;
  color: #f14936;
  text-align: center;
  cursor: pointer;
  .icon {
    vertical-align: middle;
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    background: url('./img/add-address.png') no-repeat center center;
    background-size: 0.12rem auto;
  }
  span {
    vertical-align: middle;
  }
}
.address-edit {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>
