<template>
  <div class="address-edit">
    <div class="address-top">
      <shop-top v-model="isShow" title="收货地址"></shop-top>
    </div>
    <div class="address-box">
      <div class="form">
        <div class="form-item">
          <div class="title" style="width: 0.6rem;">收 货 人:</div>
          <div class="form-input">
            <input type="text" v-model="name" v-iosfit placeholder="姓名" />
          </div>
        </div>
        <div class="form-item">
          <div class="title" style="width: 0.6rem;">手机号码:</div>
          <div class="form-input">
            <input type="text" v-model="mobile" v-iosfit placeholder="手机号码" />
          </div>
        </div>
        <div class="form-item">
          <div class="title" style="width: 0.6rem;">所在区域:</div>
          <div class="form-input" @click="setCity(true)">
            <input type="text" v-model="address" readonly placeholder="请选择" />
          </div>
        </div>
        <div class="form-item">
          <div class="title" style="width: 0.6rem;">详细地址:</div>
          <div class="form-input">
            <input
              type="text"
              v-model="detail"
              v-iosfit
              placeholder="如道路、门牌号、小区、楼栋号、单元室等"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="title">设为默认地址:</div>
          <div class="form-input" style="text-align: right">
            <input type="checkbox" v-model="is" />
          </div>
        </div>
      </div>
    </div>
    <div class="address-sub" @click="sub">
      <i class="icon"></i>
      <span>保存地址</span>
    </div>
    <transition name="move-bottom">
      <div class="city-box" v-show="setCityShow">
        <city-picker v-model="setCityShow" :address="address" @setCity="setCity"></city-picker>
      </div>
    </transition>
  </div>
</template>

<script>
import { addAddress, editAddress } from '@/plugins/API/apiShop';
import { mapGetters } from 'vuex';
import shopTop from '../common/top';
import cityPicker from '../cityPicker/index';
export default {
  name: 'shop-address-edit',
  components: {
    shopTop,
    cityPicker
  },
  props: {
    value: {},
    addressInfo: {}
  },
  data() {
    return {
      id: 0,
      setCityShow: false,
      name: '',
      mobile: '',
      province: '',
      city: '',
      area: '',
      detail: '',
      is: 0
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo'
    }),
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    },
    address() {
      let str = '';
      if (this.province) {
        str += this.province + '-';
      }
      if (this.city) {
        str += this.city + '-';
      }
      if (this.area) {
        str += this.area;
      }
      return str;
    }
  },
  mounted() {
    this.set_addressInfo();
  },
  methods: {
    set_addressInfo() {
      if (this.addressInfo.id) {
        this.id = this.addressInfo.id;
        this.name = this.addressInfo.name;
        this.mobile = this.addressInfo.mobile;
        this.province = this.addressInfo.province;
        this.city = this.addressInfo.city;
        this.area = this.addressInfo.area;
        this.detail = this.addressInfo.detail;
        this.is = this.addressInfo.isDefault;
      }
    },
    async add_address() {
      const res = await addAddress({
        uin: this.channelInfo.uin,
        name: this.name,
        mobile: this.mobile,
        province: this.province,
        city: this.city,
        area: this.area,
        detail: this.detail,
        isDefault: this.is ? 1 : 0
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.$layer.msg('添加成功');
        this.$emit('get_addressList');
        this.isShow = false;
      }
    },
    async edit_address() {
      const res = await editAddress({
        uin: this.channelInfo.uin,
        id: this.id,
        name: this.name,
        mobile: this.mobile,
        province: this.province,
        city: this.city,
        area: this.area,
        detail: this.detail,
        isDefault: this.is ? 1 : 0
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.$layer.msg('修改成功');
        this.$emit('get_addressList');
        this.isShow = false;
      }
    },
    setCity(bool, addressInfo) {
      if (addressInfo) {
        this.province = addressInfo.province;
        this.city = addressInfo.city;
        this.area = addressInfo.area;
      }
      this.setCityShow = bool;
    },
    sub() {
      if (!this.name) {
        this.$layer.msg('请填写收货人！');
        return false;
      }
      if (!this.mobile || this.mobile.length !== 11) {
        this.$layer.msg('请填写11位手机号码！');
        return false;
      }
      if (!this.address) {
        this.$layer.msg('请选择所在区域！');
        return false;
      }
      if (!this.detail) {
        this.$layer.msg('请填写详细地址！');
        return false;
      }
      if (this.addressInfo.id) {
        this.edit_address();
      } else {
        this.add_address();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.address-edit {
  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 {
  .form {
    font-size: 0.13rem;
    .form-item {
      display: flex;
      height: 0.45rem;
      padding: 0.1rem 0;
      line-height: 0.25rem;
      border-bottom: 0.01rem solid #dbdbdb;
      color: #999;
      font-size: 0.13rem;
      .title {
        flex: 0 0 auto;
        margin-right: 0.05rem;
        text-align: justify;
        text-align-last: justify;
      }
      .form-input {
        flex: 1;
        input[type='text'] {
          display: block;
          width: 100%;
          height: 100%;
          outline: none;
          border: 0;
          background: transparent;
        }
        input[type='checkbox'] {
          position: relative;
          appearance: none;
          display: inline-block;
          width: 0.45rem;
          height: 0.25rem;
          outline: none;
          border: 0;
          border-radius: 0.25rem;
          background: #f0f1f3;
          transition: all 0.3s;
          &:before {
            content: '';
            position: absolute;
            top: 0.01rem;
            left: 0.01rem;
            width: 0.23rem;
            height: 0.23rem;
            border-radius: 50%;
            background: #fff;
            transition: all 0.3s;
          }
          &:checked {
            background: #f14936;
            &:before {
              left: 0.21rem;
            }
          }
        }
      }
    }
  }
}
.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;
  }
}
.city-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
