<template>
  <view class="container">
    <Header :title="newAddressFlag ? '新增收货地址' : '编辑收货地址'"></Header>

    <view class="content">
      <wd-form ref="form" :model="model" id="form">
        <wd-cell-group>
          <wd-input
            label="联系人"
            label-width="80px"
            prop="receiver"
            v-model="model.receiver"
            placeholder="请输入联系人姓名"
            :rules="[{ required: false, validator: fieldNotEmpty, message: '姓名不能为空' }]"
          />
          <wd-input
            label="手机号"
            label-width="80px"
            prop="mobile"
            v-model="model.mobile"
            placeholder="请输入联系人手机号"
            :rules="[{ required: false, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
          />
          <wd-input
            label="详细地址"
            label-width="80px"
            prop="addr"
            v-model="model.addr"
            placeholder="请输入详细地址"
            :rules="[{ required: false, validator: fieldNotEmpty, message: '详细地址不能为空' }]"
          />
          <wd-checkbox-group>
            <wd-cell title="所在地区" title-width="80px">
              <view class="area">
                <view class="area_l" @tap="changeLocation">
                  <view class="area_lt">这是当前定位</view>
                  <view class="area_lb">这是定位的详细地址点击可跳转地图选择</view>
                </view>
                <view class="area_r">
                  <wd-icon name="location" size="22px" @tap="changeLocation"></wd-icon>
                </view>
              </view>
            </wd-cell>
          </wd-checkbox-group>
          <wd-checkbox-group v-model="model.commonAddr" size="large">
            <wd-cell title="设置为默认地址" center clickable @tap="setDefaultAddress">
              <view>
                <wd-checkbox
                  modelValuee="1"
                  ref="checkBoxAdress"
                  checked-color="#fa5151"
                  custom-style="margin-right:-18rpx"
                ></wd-checkbox>
              </view>
            </wd-cell>
          </wd-checkbox-group>
        </wd-cell-group>

        <view class="footer">
          <wd-button type="error" block class="addBtn" @tap="handleSubmit">保存</wd-button>
        </view>
      </wd-form>
    </view>
  </view>
</template>

<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import { addAddress, updateAddress, deleteAddress } from '@/api/address';
const fileDomain = import.meta.env.VITE_APP_IMG_URL;

const newAddressFlag = ref(false);
const form = ref();
const checkBoxAdress = ref();
const model = ref({
  name: '',
  phone: '',
  detailAddress: '',
  isDefaultAddress: [],
});

onLoad((options) => {
  newAddressFlag.value = options.new;
  if (newAddressFlag.value) {
    model.value = ref({
      name: '',
      phone: '',
      detailAddress: '',
      isDefaultAddress: [],
    });
  } else {
    model.value.name = '';
    model.value.phone = '';
    model.value.detailAddress = '';
    model.value.isDefaultAddress = ['1'];
  }
});

function setDefaultAddress() {
  // checkBoxAdress.value && checkBoxAdress.value.toggle();
  console.log(model.value.isDefaultAddress);
}

function fieldNotEmpty(val) {
  if (String(val).length >= 1) {
    return true;
  } else {
    return false;
  }
}
const submit = async () => {
  const res = await addAddress(model.value);
  console.log(res);
};
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        xma.showToast({
          title: '更新成功',
          duration: 2000,
          success: function () {
            console.log('数据更新后跳转地址列表页');
          },
        });
      }
    })
    .catch((error) => {
      console.log(error, 'error');
    });
}
// 重新定位收货地址
function changeLocation() {
  console.log('aaa');
}
</script>

<style lang="scss" scoped>
page {
  background: #f9f9f9;
}

.container {
  width: 375 * 2rpx;
  margin: 0 auto;
  font-family: Source Han Sans;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;

  .content {
    padding-top: 88rpx;

    #form {
      width: 710rpx;
      margin: 20rpx auto;
    }

    .wd-input__label.is-required::after {
      display: none !important;
    }

    .addBtn {
      width: 630rpx;
      height: 72rpx;
      border-radius: 18px;
      opacity: 1;
      background: #fa5151;
      position: fixed;
      bottom: 80rpx;
      left: 50%;
      margin-left: -315rpx;
    }

    .area {
      display: flex;
      width: 100%;
      align-items: center;

      .area_l {
        flex: 1;
        display: flex;
        flex-direction: column;

        .area_lt {
          font-size: 24rpx;
          font-weight: 500;
          line-height: 24rpx;
          color: #3d3d3d;
          text-align: left;
          margin-bottom: 10rpx;
        }

        .area_lb {
          font-size: 24rpx;
          font-weight: normal;
          line-height: 24rpx;
          color: #abaaaa;
          text-align: left;
        }
      }

      .area_r {
        width: 40rpx;
      }
    }
  }
}
</style>
