<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" v-if="addId">编辑</button>
    <button
      form-type="submit"
      class="button"
      v-else
    >保存并使用</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)
      })
    }
  },
  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: 1,
          latitude: 1
        }
        if (this.addId) {
          params.add_id = this.addId
        }
        store.dispatch('address/edit', params).then(() => {
          uni.navigateBack({
            delta: 1
          })
        })
      }
    }
  }
}
</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>