<template>
  <view class="address-create" v-if="isloaded">
    <view class="list-item">
      <view class="item">收货人 <input placeholder-class="placeholder-style" maxlength="10" v-model="name"
          placeholder="请输入收货人姓名" />
      </view>
    </view>
    <view class="list-item">
      <view class="item">联系电话 <input placeholder-class="placeholder-style" v-model="mobile" type="number" maxlength="11"
          placeholder="请输入收货人手机号码" /></view>
    </view>
    <view class="list-item">
      <view class="item">所在区域
        <span @click="btnClick()">{{addressTxt || '请选择省市区县,乡镇等'}}</span>
      </view>
    </view>
    <view class="list-item">
      <view class="item">详细地址 <textarea placeholder-class="placeholder-style" v-model="address" auto-height
          placeholder="请完善详细街道,楼牌号等" />
      </view>
    </view>
    <view class="list-item moren">
      <view class="item">
        <view class="uni-list-cell-db">设置默认地址</view>
        <switch @change="switchChange" :checked="is_default" color='#8b64fd' style="transform:scale(0.9)" />
      </view>
    </view>
    <view class="besure" @click="besure">保存</view>
    <selectAddress ref='selectAddress' :addressIdList='addressIdList' @selectAddress="successSelectAddress" />
    <!-- <u-toast ref="uToast" /> -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue'
  import cityData from '@/static/yixuan-selectAddress/city.json'
  import {
    addAddresses,
    getAddresses,
    editAddresses
  } from '@/apis/interfaces/address'
  export default {
    components: {
      selectAddress
    },
    data() {
      return {
        name: '', //姓名
        mobile: '', //电话
        address: '', //详细地址
        is_default: false, //默认 1=默认
        addressTxt: '', // 已选择的地址显示 (页面显示)
        addressIdList: [], // 向子组件传递参数数组[3,36,37] 即显示默认值【province_id，province_id，district_id】
        addressId: '',
        isloaded: false
      };
    },
    onLoad(e) {
      if (!!e.id) {
        uni.setNavigationBarTitle({
          title: '编辑地址'
        })
        this.addressId = e.id
        this.getInfo(e.id)
      } else {
        this.isloaded = true
      }
    },
    methods: {
      // 根据地址id获取地址的详细信息
      getInfo(id) {
        getAddresses(id).then(res => {
          const array = [res.province.region_id, res.city.region_id, res.district.region_id]
          this.addressIdList = array
          this.name = res.name
          this.mobile = res.mobile
          this.address = res.address
          this.addressTxt = res.province.name + ' ' + res.city.name + ' ' + res.district.name
          this.is_default = res.default
          this.isloaded = true
        }).catch(err => {
          this.$refs.uToast.show({
            title: err.message,
            type: 'primary',
            duration: 3000
          })
        })
      },
      // 是否勾选默认
      switchChange(e) {
        this.is_default = e.target.value
      },
      // 点击省市区选择
      btnClick() {
        this.$refs.selectAddress.show()
      },
      besure() {
        let params = {
          name: this.name,
          mobile: this.mobile,
          address: this.address,
          is_default: this.is_default ? 1 : 0,
          province_id: this.addressIdList[0],
          city_id: this.addressIdList[1],
          district_id: this.addressIdList[2]
        }
        if (params.name.trim() === '') {
          uni.showToast({
            title: '请重新核对姓名',
            icon: 'none'
          })
        } else if (params.mobile.trim() === '' || params.mobile.trim().length !== 11) {
          uni.showToast({
            title: '请重新核对手机号码',
            icon: 'none'
          })
        } else if (this.addressIdList[0] === undefined || this.addressIdList[1] === undefined || this.addressIdList[
            2] === undefined) {
          uni.showToast({
            title: '请完善省市区信息',
            icon: 'none'
          })
        } else if (params.address.trim() === '') {
          uni.showToast({
            title: '请完善详细的收货地址',
            icon: 'none'
          })
        } else {
          if (this.addressId) {
            editAddresses(this.addressId, params).then(res => {
              this.$refs.uToast.show({
                title: res,
                type: 'primary',
                duration: 3000
              })
			  uni.setStorageSync('refresh',true)
              uni.navigateBack({})
            }).catch(err => {
              this.$refs.uToast.show({
                title: err.message,
                type: 'primary',
                duration: 3000
              })
            })
          } else {
            addAddresses(params).then(res => {
              this.$refs.uToast.show({
                title: res,
                type: 'primary',
                duration: 3000
              })
              uni.navigateBack({})
            }).catch(err => {
              this.$refs.uToast.show({
                title: err.message,
                type: 'primary',
                duration: 3000
              })
            })
          }

        }
      },
      //  选择成功回调
      successSelectAddress(address) {
        if (address[0].id) {
          this.addressIdList = [address[0].id, address[1].id, address[2].id]
          this.addressTxt = address[0].name + ' ' + address[1].name + ' ' + address[2].name
        }
      },
    }
  }
</script>

<style lang="scss">
  .Create-addr {
    line-height: 100vh;
    background-color: #fff;

  }

  .list-item {
    padding: 0 $padding*1.5;
    background-color: #fff;

    .item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: $padding 0;
      border-bottom: solid #f8f8f8 1rpx;
      font-size: $title-size - 2;
      color: #333;

      input,
      textarea,
      span,
      .picker {
        color: #353535;
        font-size: $title-size - 1;
        width: 74%;
      }

      .picker {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;

        .picker-item {
          width: 33.33%;
          border: solid 1rpx #ccc;
          text-align: center;
        }
      }

      .placeholder-style {
        color: #ccc;
      }
    }
  }

  .moren {
    border-top: $padding solid #f7f7f7;
  }

  .besure {
    background-color: $text-price;
    color: #fff;
    text-align: center;
    margin: $margin*1.5;
    border-radius: $radius;
    padding: $padding*1.3;
  }

  .popup {
    min-height: 500rpx;

    .popup-top {
      position: relative;
      font-size: $title-size - 4;

      .title {
        text-align: center;
        padding: $padding*1.5 $padding*2;
        border-bottom: solid 1rpx #f7f7f7;
      }

      .select {
        position: absolute;
        top: $padding;
        right: $padding;
        color: $text-price;
      }


    }

    .addr-show {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      padding: 0 $padding *3;
      font-size: $title-size;

      .addr-show-item {
        padding: $padding*1.5 0;
        margin-right: $margin*2;
        max-width: 33.33%;
        overflow: hidden;
      }

      .picker-item-selected {
        border-bottom: solid $text-price 4rpx;
      }
    }

    .scroll-Y {
      height: 60vh;
      padding: $padding*2;
      box-sizing: border-box;

      .scroll-item {
        padding: $padding*1.5 0;
        border-bottom: solid .25rpx rgba($color: #000000, $alpha: 0.02);
        color: #353535;
        font-size: $title-size;

        .pr20 {
          padding-right: 20rpx;
        }
      }
    }
  }
</style>
