<template>
  <div class="create-address">
    <!-- 联系人 -->
    <div class="consigneeName">
      <input-label
        label="联系人:"
        :maxlength="16"
        placeholder="请填写收货人的姓名"
        v-model:value="form.consigneeName"
      ></input-label>
    </div>
    <!-- 手机号 -->
    <div class="consigneeMobile">
      <input-label
        label="手机号:"
        type="number"
        placeholder="请填写收货人的手机号码"
        :maxlength="11"
        v-model:value="form.consigneeMobile"
      ></input-label>
    </div>
    <!-- 收货地址 -->
    <!-- <div class="map-address" @click="toPosition">
      <input-label
        label="收货地址:"
        placeholder="点击选择收货地址"
        v-model:value="mapAddress"
        isText
        suffix
      ></input-label>
    </div> -->
    <!-- /:value="modelValue" -->
    <picker mode ="region" :value="addressInfo.value" @change="selectCity">
      <input-label
        label="省市区:"
        placeholder="点击选择省市区"
        v-model:value="modelValue"
        isText
        suffix
      ></input-label>
    </picker>

    <div class="map-address" @click="toPosition">
      <input-label
        label="收货地址:"
        placeholder="点击选择收货地址"
        v-model:value="mapAddress"
        isText
        suffix
      ></input-label>
    </div>
    <!-- 门牌号 -->
    <div class="address">
      <input-label
        label="详细地址:"
        :maxlength="30"
        placeholder="例：1栋1单元801"
        v-model:value="form.detailAddress"
      ></input-label>
    </div>
    <!-- 设为默认地址 -->
    <div class="isDefault">
      <switch-label
        label="设为默认地址:"
        v-model:value="form.isDefault"
      ></switch-label>
    </div>
    <!-- 保存 -->
    <!-- <button @click="saveAddress">保存地址</button> -->
    <div class="btn-save" @click="saveAddress">保存地址</div>
    <!-- 删除按钮 -->
    <!-- #ifndef MP-TOUTIAO -->
    <div class="btn-delete" v-if="address" @click="deleteAddress">
      <div class="icon-delete"></div>
    </div>
    <!-- #endif -->

    <!-- #ifdef MP-TOUTIAO -->
    <div class="btn-delete" v-if="JSON.stringify(address)!=='{}'" @click="deleteAddress">
      <div class="icon-delete"></div>
    </div>
    <!-- #endif -->

    <!-- loading -->
    <ZyLoading></ZyLoading>
  </div>
</template>

<script>
import ZyLoading from '@/components/Loading/loading'
import InputLabel from '../input-label/input-lebel.vue'
import SwitchLabel from '../switch-label/switch-label.vue'
import {isRequire, isMobile} from '@/utils/validate.js'
import {toast,jumpPage} from '@/utils/uniapi.js'
import {mapGetters, mapActions} from 'vuex'
import { errToast } from '@/utils/uniapi.js'
import {store} from "@/store";
export default {
  props: {
    address: Object // 用来标识是否是编辑状态
  },
  components: {
    ZyLoading, InputLabel, SwitchLabel
  },
  data () {
    return {
      id: 0,
      form: {
        consigneeName: '',
        consigneeMobile: '',
        detailAddress: '',
        isDefault: false
      },
      lat: null,
      lng: null,
      mapAddress: '',
      addressInfo:{
        code:['510000','510100','510106'],
        postcode:610036,  // 邮编
        value:['四川省','成都市','金牛区']
      },
      modelValue:'四川省/成都市/金牛区'
    }
  },
  created () {
    if (this.address) {
      let item = this.address
      this.id = item.id
      this.form.consigneeName = item.consigneeName
      this.form.consigneeMobile = item.consigneeMobile
      this.form.detailAddress = item.detailAddress
      this.mapAddress = item.address
      this.form.isDefault = !!item.isDefault
    }
  },
  destroyed () {
    // console.log('销毁')
    // 修改changeCity为当前地位的城市
    store.commit('indexPage/changeCity', this.location.city)
  },
  computed: {
    ...mapGetters({
      location: 'indexPage/myLocation',
      curPickAddress: 'addressVue/curPickAddress'
    })
  },
  watch: {
    curPickAddress (address) {
      if (address) {
        this.mapAddress = address.address + address.title
        this.lat = address.location.lat
        this.lng = address.location.lng
      }
    }
  },
  methods: {
    ...mapActions({
      addAddressList: 'addressVue/addListItem'
    }),
    async saveAddress () {
      let {consigneeName, consigneeMobile, detailAddress} = this.form
      let isDefault = this.form.isDefault ? 1 : 0
      let mapAddress = this.mapAddress
      consigneeName = consigneeName.trim()
      consigneeMobile = consigneeMobile.trim()
      detailAddress = detailAddress.trim()
      mapAddress = mapAddress.trim()
      const { lat, lng } = this
      // console.log(consigneeName, consigneeMobile, detailAddress, mapAddress, lat, lng)
      if (!isRequire(consigneeName)) {
        toast('请填写正确的联系人')
        return false
      }
      if (!isMobile(consigneeMobile)) {
        toast('请填写正确的手机号')
        return false
      }
      if (!isRequire(mapAddress)) {
        toast('请选择收货地址')
        return false
      }
      if (!isRequire(detailAddress)) {
        toast('请填写详细地址')
        return false
      }
      let flag = false
      // #ifndef MP-TOUTIAO
      flag = this.address ? true : false
      // #endif

      // #ifdef MP-TOUTIAO
      flag = JSON.stringify(this.address)!=='{}' ? true : false
      // #endif
      // 校验通过
      if (flag) {
        // 保存编辑
        let json = {
          id: this.id,
          consigneeName,
          consigneeMobile,
          detailAddress,
          address: mapAddress,
          isDefault
        }
        if (this.lat) json.lat = this.lat
        if (this.lng) json.lng = this.lng
        this.$emit('handle-update', json)
      } else {
        try {
          await this.addAddressList({
            consigneeName,
            consigneeMobile,
            address: mapAddress,
            detailAddress,
            cityCode:this.addressInfo.code[1],
            districtCode :this.addressInfo.code[2],
            lng,
            lat,
            isDefault
          })
          uni.navigateBack({delta: 1})
        } catch (e) {
          console.error(e)
          errToast(e)
        }
      }
    },
    // 跳转到收货地址选择
    toPosition () {
      jumpPage('navigateTo',`/pagesAddress/position-address/index?showMine=false&districtName=${this.addressInfo.value[2]}`)
    },
    // 选择省市区
    selectCity(e){
      this.modelValue = e.detail.value.join('/')
      this.addressInfo = e.detail
      // store.commit('indexPage/changeCity', e.detail.value[1])
    },
    // 删除
    deleteAddress () {
      this.$emit('handle-delete', this.id)
    }
  }
}
</script>

<style lang="scss">
@import './create-address.scss';
</style>