<template>
  <van-popup id="address-form" class="flex flex-col" v-model:show="model" closeable round>
    <h3 class="text-center pt-5 text-base">{{ `${isEdit ? '修改' : '新增'}收货地址` }}</h3>
    <div class="pt-3 flex-1 overflow-y-scroll">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="formData.name" label="名字" placeholder="请输入收货人名称" :rules="[{ required: true, message: '请输入收货人名称' }]" />
          <van-field v-model="formData.mobile" label="手机号" placeholder="请输入收货人手机号" :rules="[{ required: true, message: '请输入收货人手机号' }]" />
          <van-field v-model="formData.area" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区" @click="areaData.show = true" />
          <van-field v-model="formData.addressDetail" rows="3" autosize label="详细地址" type="textarea" placeholder="请输入详细地址" :rules="[{ required: true, message: '请输入详细地址' }]" />
          <van-field name="checkboxGroup" label="" class="py-1!">
            <template #input>
              <van-checkbox-group v-model="formData.default" direction="horizontal">
                <van-checkbox :name="1" shape="square" class="text-xs">默认地址</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>
        </van-cell-group>
        <div class="bg-white w-full h-12 p-2 box-border">
          <button class="block w-full h-full border-none theme-bg-color color-white rounded-[.04rem]" native-type="submit">确定</button>
        </div>
      </van-form>
    </div>
  </van-popup>
  <van-popup v-model:show="areaData.show" destroy-on-close position="bottom">
    <van-area :area-list="areaList" :model-value="areaData.pickerValue" @confirm="onSelectArea" @cancel="areaData.show = false" />
  </van-popup>
</template>

<script setup lang="ts">
import { areaList } from '@vant/area-data'
const model = defineModel<boolean>()
defineProps<{ isEdit: boolean }>()
const formData = reactive({ name: '', mobile: '', area: '', addressDetail: '', province: '', city: '', region: '', default: [] })

const areaData = reactive({ show: false, pickerValue: '' })

const onSelectArea = ({ selectedValues, selectedOptions }: { selectedOptions: any; selectedValues: any }) => {
  areaData.pickerValue = selectedValues.length ? selectedValues[selectedValues.length - 1] : ''
  areaData.show = false
  formData.area = selectedOptions.map((item: any) => item.text).join(' ')
}

const onSubmit = () => {
  model.value = false
}
</script>

<style scoped lang="scss">
#address-form {
  &.van-popup--bottom.van-popup--round {
    border-radius: 0.12rem 0.12rem 0 0;
    :deep(.van-popup__close-icon) {
      top: 0.1rem;
      font-size: 0.2rem;
      color: #666;
    }
  }
  .van-cell-group--inset {
    margin: 0 0.12rem;
  }
  :deep(.van-cell) {
    padding-left: 0;
    padding-right: 0;
    .van-checkbox__icon {
      height: auto;
    }
    .van-checkbox__icon .van-icon {
      width: 1em;
      height: 1em;
      border-radius: 0.04rem;
    }
    .van-checkbox__label {
      margin-left: 0.04rem !important;
    }
    .van-cell__title {
      // width: 0;
    }
    .van-cell__value {
      // flex: none;
    }
    .van-checkbox__label {
      color: #666;
    }
  }
}
</style>
