<template>
  <div class="address">
    <mt-header title="添加地址">
        <mt-button icon="back" slot="left" @click="closeAdd">返回</mt-button>
    </mt-header>
    <mt-field label="收货人" v-model="receiveName"></mt-field>
    <mt-field label="手机号" v-model="receiveMobile"></mt-field>
    <mt-cell title="所在地区" :value="addressArea" @click.native="showPicker" is-link></mt-cell>
    <mt-field label="详细地址" v-model="address"></mt-field>
    <div @click="onSave" class="btn">保存</div>
    <my-address :showAddressPicker="showAddressPicker" @save-address="saveAddress" @hide-picker="hidePicker" :init="addressArea">
    </my-address>
  </div>
</template>

<script>
import MyAddress from '@/components/address-picker/Address.vue'
import {saveAddressApi,getUserAdressApi} from "../../service/api";
import { Toast } from 'mint-ui'
export default {
  name: 'address',
  components: {
    MyAddress
  },
  data () {
    return {
      receiveName: '',
      receiveMobile: '',
      addressDetail: '',
      showAddressPicker: false,
      addressArea: '',
      addressAreaCode: '6-77-705',
      address: ''
    }
  },
  mounted () {
    this.getUserAddress()
  },
  computed: {
    courseUrl: function () {
      return this[`courseType${this.type}Url`]
    }
  },
  methods: {
      closeAdd(){
          this.$emit('closeAdd', false)
      },
    onSave: function () {
      let values = this.addressAreaCode.split('-')
      let labels = this.addressArea.split('-')
      if (!this.receiveName) {
        Toast('收货人不能为空');
          return false
      } else if (!this.receiveMobile) {
        Toast('手机号不能为空');
          return false
      } else if (!(/^1\d{10}$/.test(this.receiveMobile))) {
        Toast('手机号格式不正确');
          return false
      } else if (!this.address) {
        Toast('详细地址不能为空');
          return false
      }
      let param = {};
      param.receive_name = this.receiveName;
      param.receive_mobile = this.receiveMobile;
      param.address = this.address;
      param.province_id = values[0];
      param.province_name = labels[0];
      param.city_id = values[1];
      param.city = labels[1];
      param.area_id = values[2];
      param.area = labels[2];
      saveAddressApi(param).then((res) => {
          this.closeAdd()
      })
    },
    onValuesChange: function (picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0])
      }
    },
    hidePicker () {
      // 接受子组件关闭popup事件
      this.showAddressPicker = false
    },
    showPicker () {
      this.showAddressPicker = !this.showAddressPicker
    },
    saveAddress (labels, values) {
      // 从子组件接受返回所选值 val
      this.addressArea = labels
      this.addressAreaCode = values
      this.showAddressPicker = !this.showAddressPicker
    },
    getUserAddress: function () {
      getUserAdressApi().then((res) => {
            let addressInfo = res;
            this.receiveName = addressInfo.receive_name ? addressInfo.receive_name : '';
            this.receiveMobile = addressInfo.receive_mobile ? addressInfo.receive_mobile : '';
            this.address = addressInfo.address;
            this.addressArea = `${addressInfo.province_name}-${addressInfo.city}-${addressInfo.area}`;
            this.addressAreaCode = `${addressInfo.province_id}-${addressInfo.city_id}-${addressInfo.area_id}`
      })
    }
  }
}
</script>
<style scoped lang="less">
  image[lazy=loading] {
    width: 140px;
    height: 300px;
    margin: auto;
  }
  .no-select {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }
  .address {
    .btn{
      margin-top: 20vw;
      height: 11.73333vw;
      line-height: 11.73333vw;
      color: #fff;
      font-size: 1.4rem;
      text-align: center;
      background: #60ADF0;
      -webkit-box-shadow: 0 2px 6.66667vw 0 rgba(200, 205, 220, 0.7);
      box-shadow: 0 2px 6.66667vw 0 rgba(200, 205, 220, 0.7);
      border-radius: 20px;
      margin-left: 1rem;
      margin-right: 1rem;
    }
  }

</style>
