<template>
  <view class='content'>
    <view class='c-flex-row'>
      <text>收货人</text>
      <input placeholder='请输入收货人姓名' />
    </view>

    <view class='divider' />
    <view class='c-flex-row'>
      <text>手机号</text>
      <input placeholder='请输入收货人手机号' maxlength='11' />
    </view>

    <view class='divider' />
    <view class='c-flex-row detail-row'>
      <text>详细地址</text>
      <view class='c-flex-column'>
        <textarea placeholder='详细地址：如街道、门牌\n号、楼栋号、单元室等' />
        <view class='tips-view c-flex-row'>
          <image :src='assetsUrl("ic_tips.png")' />
          <text>记得完善门牌号</text>
        </view>
      </view>
    </view>

    <view class='divider' />
    <view class='c-flex-column'>
      <text style='width: auto'>设为默认地址</text>
      <text style='width: auto'>提醒：每次下单会默认推荐使用该地址</text>
      <switch color='#F32B2B' />
    </view>

    <view class='bottom-button-view'>
      <button class='primary-button'>保存地址</button>
    </view>
  </view>
</template>

<script lang='ts' setup>

import { assetsUrl } from '@/utils/assets';
</script>

<style lang='scss' scoped>
.content {
  background: #FFFFFF;
  padding: 28rpx 28rpx 0 28rpx;

  view:not(.divider):nth-of-type(n+1) {
    height: 100rpx;

    text:nth-of-type(n+1) {
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      width: 170rpx;
      white-space: nowrap;
    }

    input {
      font-size: 30rpx;
    }
  }

  .detail-row {
    height: 236rpx !important;
    align-items: flex-start;
    padding-top: 28rpx;

    text:nth-of-type(1) {
      width: 170rpx;
    }

    view:nth-of-type(1) {
      flex: 1;
      margin: 5rpx 20rpx 0 0;
    }

    textarea {
      height: 200rpx;
      width: 100%;
      font-size: 30rpx;
    }

    .tips-view {
      image {
        width: 32rpx;
        height: 32rpx;
      }

      text {
        font-size: 26rpx !important;
        font-weight: 400;
        color: #999999 !important;
        margin-left: 20rpx;
      }
    }
  }

  .c-flex-column {
    display: flex;
    position: relative;
    justify-content: center;
    height: 170rpx !important;

    text:nth-of-type(2) {
      font-size: 24rpx !important;
      color: #CCCCCC !important;
      margin-top: 10rpx;
    }

    switch {
      position: absolute;
      align-self: center;
      right: 0;
    }
  }
}


</style>
