<!-- 新增地址 -->
<template>
  <view class="body" :style="'padding-top:' + bottomHeight">
    <view class="bg-box">
      <!-- 导航 -->
      <view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
        <view class="ss-flex-2 ss-col-center">
          <text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
          <view style="margin-left: 15rpx; color: #fff; font-size: 28rpx">新增地址</view>
        </view>
        <view class="ss-flex-1"></view>
        <text class="textIcon icon-kefu icon-navigation"></text>
        <text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text>
      </view>
    </view>
    <!-- 填写表单 -->
    <view class="form-box-info">
      <uni-forms ref="baseForm" :modelValue="baseFormData" label-position="left" label-width="80px">
        <!-- 左右布局 -->
        <view class="ss-flex-2">
          <view style="width: 60%">
            <uni-forms-item label="联系人" required name="userName">
              <uni-easyinput v-model="baseFormData.userName" placeholder="请填写姓名" />
            </uni-forms-item>
          </view>
          <view style="width: 35%; margin-left: 5%; margin-bottom: 35rpx" name="sex">
            <uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
          </view>
        </view>
        <view class="ss-flex-2">
          <view style="width: 60%">
            <uni-forms-item label="联系方式" required name="phone">
              <uni-easyinput v-model="baseFormData.phone" placeholder="请填写联系方式" />
            </uni-forms-item>
          </view>
          <view style="width: 35%; margin-left: 5%" class="ss-flex-2 ss-col-center">
            <text
              class="textIcon icon-tongxunlu"
              style="font-size: 32rpx; color: #36b0ca; margin-bottom: 30rpx"
            ></text>
            <view style="font-size: 24rpx; color: #36b0ca; margin-left: 10rpx; margin-bottom: 30rpx"
              >通讯录</view
            >
          </view>
        </view>
        <view style="font-size: 18rpx; color: #9e9e9e; padding-left: 40rpx"
          >温馨提示：请确保当前手机号可以联系到您</view
        >
        <uni-forms-item label="服务地址" required name="address">
          <uni-easyinput v-model="baseFormData.address" placeholder="请填写服务地址" />
        </uni-forms-item>
        <uni-forms-item label="详细地址" required name="detailedAddress">
          <uni-easyinput v-model="baseFormData.detailedAddress" placeholder="请填写详细门牌号" />
        </uni-forms-item>
      </uni-forms>
    </view>
    <!-- 中部 -->
    <view class="list-wrap">
      <scroll-view scroll-y="true" class="list">
        <view class="list-scroll-view">
          <view class="course-card"> </view>
        </view>
      </scroll-view>
    </view>
    <view class="baoc-box" @click="submitForm">保存</view>
  </view>
</template>
<script setup>
  import { reactive, ref } from 'vue';
  import { computed } from 'vue';
  import {
    onLoad,
    onPageScroll,
    onPullDownRefresh,
    onReady,
    onReachBottom,
    onShow,
  } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  // 隐藏原生tabBar
  // uni.hideTabBar();

  //表单
  const sexs = ref([
    {
      text: '先生',
      value: 0,
    },
    {
      text: '女士',
      value: 1,
    },
  ]);
  const baseFormData = ref({
    userName: '', //姓名
    sex: 0, //性别
    phone: '', //联系方式
    address: '', //服务地址
    detailedAddress: '', //详细地址
  });
  // 校验规则
  const rules = ref({
    userName: {
      rules: [
        {
          required: true,
          errorMessage: '请填写姓名',
        },
      ],
    },
    sex: {
      rules: [
        {
          required: true,
          errorMessage: '请填选择性别',
        },
      ],
    },
    phone: {
      rules: [
        {
          required: true,
          errorMessage: '请填写正确的手机号',
        },
      ],
    },
    address: {
      rules: [
        {
          required: true,
          errorMessage: '请填写地址',
        },
      ],
    },
  });
  const baseForm = ref();

  // 返回上一页
  const backPage = async () => {
    uni.navigateBack({
      delta: 1,
    });
  };

  const submitForm = async () => {
    const isFlag = await baseForm.value.validate();
    console.log(isFlag, 'uuuuuu');
  };

  //获取顶部安全距离
  const app = uni.getSystemInfoSync();
  const bottomHeightOne = app.statusBarHeight + 'rpx';
  const bottomHeight = ref(bottomHeightOne);

  onReady(() => {
    baseForm.value.setRules(rules.value);
  });
</script>
<style scoped>
  /deep/.uni-data-checklist .checklist-group .checklist-box {
    margin-right: 10rpx;
  }
  /deep/.is-input-border {
    border: none;
  }
  /deep/.uni-easyinput__content-input {
    padding-left: 0rpx !important;
  }
  /deep/.uni-forms-item {
    margin-bottom: 25rpx !important;
  }
  /deep/.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
    font-size: 22rpx !important;
  }
  /deep/.uni-forms-item__label {
    font-size: 26rpx !important;
  }
  /deep/.uni-forms-item__error {
    font-size: 18rpx !important;
  }
  /deep/.uni-easyinput__content-input {
    height: 40rpx !important;
  }
  /deep/.uni-forms-item__label {
    height: 40rpx !important;
  }
</style>
<style scoped lang="scss">
  .baoc-box {
    width: 80%;
    margin-left: 10%;
    box-sizing: border-box;
    padding: 10rpx;
    background-color: #36afca;
    color: #fff;
    text-align: center;
    margin-bottom: 100rpx;
    border-radius: 10rpx;
  }
  .form-box-info {
    width: 90%;
    margin-left: 5%;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 10rpx;
    margin-top: -150rpx;
    z-index: 999;
    padding: 20rpx 10rpx;
    font-size: 24rpx;
    color: #646a72;
    min-height: 450rpx;
  }

  .bg-box {
    position: relative;
    width: 100%;
    height: 300rpx;
    background: url('@/static/top-bg.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
  }

  // 上中下布局样式
  .body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    // background: linear-gradient(to bottom, #08A3E9, #F8FCFF);
    background-color: #eeeef0;
  }

  .head {
    text-align: center;
  }

  // 中部滚动
  .list-wrap {
    flex-grow: 1;
    position: relative;
  }

  .list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .list-scroll-view {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 2vw;
    margin-right: 2vw;
  }

  .course-card {
    width: 47vw;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  // 底部
  .tools {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .tools-item {
    width: 45px;
    text-align: center;
    font-size: 14px;
    padding: 20px;
  }
</style>
