<template>
  <van-popup
    v-model="visible"
    position="bottom"
    round
    transfer
  >
  <div class="main">
    <div class="top">
      <div style="width: 28px;height: 14px;"></div>
      <div class="top-title">{{ editItem.id ? '编辑地址' : '新增地址' }}</div>
      <div class="top-btn" @click="confirm">确定</div>
    </div>
    <div class="form" :class="{error: isError}">
      <van-field v-model="form.name" label-width="60" label="姓名" placeholder="请输入姓名" @focus="isError = false"/>
      <van-field v-model="form.mobile" label-width="60" label="手机号" placeholder="请输入联系电话" @focus="isError = false"/>
      <van-field :value="address" label-width="60" label="收货地址" readonly placeholder="请选择省市区" @focus="isError = false" @click="select" >
        <template #button>
          <van-icon name="location" />
        </template>
      </van-field>
      <van-field
        v-model="form.detail"
        label="门牌号"
        label-width="60"
        placeholder="详细地址（精确到门牌号）"
        maxlength="50"
        show-word-limit
        @focus="isError = false"
      />
    </div>
    <van-popup
      v-model="isShowAdd"
      position="bottom"
      round
    >
      <van-area title="区域选择" :area-list="areaList" @confirm="chooseAdd" @cancel="isShowAdd = false"/>
    </van-popup>
  </div>
  </van-popup>
</template>

<script>
import { areaList } from '@vant/area-data';
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'AddAddressPopup',
  props: {
    value: {
      type: Boolean,
      default: true,
    },
    editItem: {
      type: Object,
      default: () => {
        return { id: '' }
      },
    },
    createApi: {
      type: Function,
      default: null
    },
    updateApi: {
      type: Function,
      default: null
    },
  },
  data() {
    return {
      form: {
        id: '',
        name: '',
        mobile: '',
        detail: '',
        province: '',
        city: '',
        area: '',
        isDefault: 0,
        provinceCode: 0,
        cityCode: 0,
      },
      areaList,
      isShowAdd: false,
      isError: false,
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      lotteryInfo: 'lottery/lotteryInfo'
    }),
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
    address() {
      if (this.form.province && this.form.city && this.form.area) {
        return `${this.form.province} ${this.form.city} ${this.form.area}`
      } else {
        return ''
      }
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.resetForm()
      }
    }
  },
  methods: {
    ...mapActions({
      getLotteryDetail: 'lottery/getLotteryDetail',
      updateInfo: 'lottery/updateInfo',
    }),
    resetForm() {
      this.form = {...this.form, ...this.editItem}
    },
    select() {
      this.isShowAdd = true
    },
    chooseAdd(val) {
      this.form.province = val[0].name
      this.form.city = val[1].name
      this.form.area = val[2].name
      this.form.provinceCode = val[0].code
      this.form.cityCode = val[1].code
      this.isShowAdd = false
    },
    confirm() {
      const { name, mobile, province, detail } = this.form
      if (!name || !mobile || !province || !detail) {
        this.isError = true
        return 0
      }
      if (!this.form.mobile.match(/^s*$|(?:(?:\+|00)86)?1\d{10}$/)) {
        this.$toast('手机号格式不正确')
        return 0
      }
      this.$emit('onConfirm', this.form)
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  min-height: 42vh;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 12px;
  font-size: 14px;
  &-title {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  &-btn {
    font-size: 15px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #357BF0;
  }
}
.form {
  .address {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 9.5px 13px;
    &-icon {
      width: 24px;
      height: 24px;
      margin-right: 48px;
    }
    &-text {
      flex: 1;
      // width: 225px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      line-height: 24px;
      text-align: left;
      padding-right: 35px;
    }
    &-right {
      width: 5px;
      height: 9px;
    }
  }
  .code {
    font-size: 13px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #357BF0;
  }
  /deep/ .van-field__control {
    padding-right: 40px;
  }
  /deep/ .van-field__word-limit {
    position: absolute;
    top: 0;
    right: 0;
  }
  /deep/ .van-cell {
    padding: 18px 13px;
    font-size: 15px;
  }
  /deep/ .van-icon:before {
    font-size: 16px;
  }
  /deep/ .van-field__label{
    height: 20px;
    font-size: 15px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
    span {
      white-space: nowrap;
    }
  }
  /deep/ .van-field__word-limit{
    color: #999;
  }
  /deep/ .van-cell::after {
    border-bottom: none;
  }
}
.error {
  /deep/ .van-field__control::placeholder {
    color: red;
  }
}
/deep/ .van-picker__cancel {
  font-size: 15px;
}
/deep/ .van-picker__confirm {
  font-size: 15px;
  color: #357BF0;
}
</style>
