<template>
    <form
      class="wrap"
      @submit="formSubmit"
      @reset="formReset"
    >
      <view class="content">
        <view class="item,name">
          <text class="itemText">姓名</text>
          <input
            placeholder="收货人姓名(真实姓名)"
            placeholder-style="color:#B8B8B8"
            name="name"
            :value="name"
          />
        </view>
        <view class="item,phone">
          <text class="itemText">电话</text>
          <input
            placeholder="手机号"
            type="digit"
            placeholder-style="color:#B8B8B8"
            name="mobile"
            v-model="mobile"
          />
        </view>
        <view class="item,phone">
          <text class="itemText">性别</text>
          <picker
            @change="bindPickerChange"
            :value="index"
            :range="sexArray"
            name="sex"
          >
            <view class="uni-input">{{sexArray[sexIndex]}}</view>
          </picker>
        </view>
        <view class="item,area">
          <text class="itemText">地区</text>
          <view
            class="btn"
            v-if="pickerText===''"
            @tap="openAddres"
          >选择省/市/区</view>
          <view
            class="btn"
            v-else
            @tap="openAddres"
          >{{pickerText}}</view>
          <simple-address
            ref="SimpleAddress"
            :pickerValueDefault="cityPickerValueDefault"
            @onConfirm="onConfirm"
            themeColor="#007AFF"
            name="address"
          ></simple-address>
        </view>
        <view class="item,address">
          <text class="itemText">详细地址</text>
          <input
            placeholder="街道、小区门牌等详细地址"
            name="addDetail"
            :value="addDetial"
          />
        </view>
        <view class="item,check">
          <text class="itemText">设为默认地址</text>
          <switch
            :checked="isDefalutAddress"
            color="#FF6B4A"
            style="transform:scale(0.6)"
            @change="changeDefalutAddress"
            name="isDefault"
          />
        </view>
        <input />
      </view>
      <button
        form-type="submit"
        class="button"
      >保存并使用</button>
    </form>
  </template>
  
  <script>
  import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue'
  import store from '@/store'
  
  export default {
    data () {
      return {
        cityPickerValueDefault: [0, 0, 1],
        pickerText: '',
        isDefalutAddress: true,
        sexArray: ['男', '女'],
        sexIndex: 0,
        flag: 0,
        addId: undefined,
        name: '',
        mobile: '',
        addDetial: '',
        isDefault: 0
      }
    },
    onLoad (option) {
      const { addId } = option
      if (addId) {
        this.addId = addId
        store.dispatch('address/details', {
          add_id: addId
        }).then(() => {
          uni.setNavigationBarTitle({
            title: '编辑地址'
          })
          const { name, mobile, sex, add_detail: addDetial, default: isDefault } = this.$store.state.address.details
          console.log('---', this.$store.state.address.details)
          const index = this.$refs.SimpleAddress.queryIndex(this.$store.state.address.details.address.split('-'), 'label')
          this.cityPickerValueDefault = index.index
          this.name = name
          this.mobile = Number(mobile)
          this.sexIndex = sex
          this.addDetial = addDetial
          this.isDefalutAddress = !!Number(isDefault)
          console.log('this', this.cityPickerValueDefault)
        })
      }
    },
    components: {
      SimpleAddress
    },
    methods: {
      openAddres () {
        this.cityPickerValueDefault = [0, 0, 1]
        this.$refs.SimpleAddress.open()
      },
      onConfirm (e) {
        this.pickerText = e.label
        console.log('lll', e, this.pickerText)
      },
      changeDefalutAddress (e) {
        this.isDefalutAddress = e.target.value
      },
      bindPickerChange (e) {
        console.log('picker发送选择改变，携带值为', e.target.value)
        this.sexIndex = e.target.value
      },
      formValidation (formdata) {
        const { name, mobile, addDetail } = formdata
        this.flag = false
        if (name === '') {
          uni.showModal({
            content: '请输入姓名',
            showCancel: false
          })
          return 0
        }
        if (!(/^1[3456789]\d{9}$/.test(mobile))) {
          uni.showModal({
            content: '请输入正确的手机号',
            showCancel: false
          })
          return 0
        }
        if (this.pickerText === '') {
          uni.showModal({
            content: '请选择收货地区',
            showCancel: false
          })
          return 0
        }
        if (addDetail === '') {
          uni.showModal({
            content: '请输入收货详细地址',
            showCancel: false
          })
          return 0
        }
        this.flag = true
      },
      formSubmit (e) {
        const formdata = e.detail.value
        this.formValidation(formdata)
  
        const { name, mobile, addDetail, isDefault } = formdata
        if (this.flag === true) {
          const params = {
            sex: this.sexIndex,
            name,
            address: this.pickerText,
            mobile,
            default: isDefault ? 1 : 0,
            add_detail: addDetail,
            longitude: 0,
            latitude: 0
          }
          if (this.addId) {
            params.add_id = this.addId
          }
          store.dispatch('address/edit', params)
        }
      }
    }
  }
  </script>
  
  <style lang="scss">
  .wrap {
    height: 100vh;
    background-color: #f2f2f2;
    font-family: PingFangSC-Regular;
    letter-spacing: -0.23px;
    padding-top: 19rpx;
  }
  .content {
    background-color: #ffffff;
    border-radius: 8px;
    border-radius: 8px;
    padding: 40rpx 56rpx;
    margin-left: 40rpx;
    width: 670rpx;
    box-sizing: border-box;
    .item {
      display: flex;
      justify-content: flex-start;
      font-size: 14px;
      align-items: center;
      height: 112rpx;
      border-bottom: 1rpx solid #e9e9e9;
      .itemText {
        width: 162rpx;
        font-family: PingFangSC-Regular;
        letter-spacing: -0.26px;
      }
      .btn {
        color: #333333 !important;
      }
    }
    .check {
      justify-content: space-between;
    }
  }
  .button {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 112rpx;
    width: 100%;
    background: #ff6b4a;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #ffffff;
    letter-spacing: -0.3px;
  }
  </style>