<template>
  <!-- 页面的最外层容器，用于包裹整个页面内容 -->
  <view class="container">
    <!-- input列表区域，用于展示多个输入项相关的视图 -->
    <view class="input-box">
      <!-- 每个输入项的整体视图容器，这里用于展示“收货人”相关的输入项 -->
      <view class="section">
        <!-- 输入项的文本标签，显示“收 货 人”字样，用于提示用户此处应输入的内容 -->
        <text>收 货 人</text>
        <!-- 文本输入框，用于用户输入收货人姓名，设置了占位符提示（placeholder）为“姓名”，输入类型为文本（type="text"），最大输入长度为15个字符（maxlength="15"），通过 :value 绑定了名为 receiver 的响应式变量来显示和更新输入框中的值，并且绑定了 @input 事件（onReceiverInput），当用户输入内容时会触发该事件进行相应处理 -->
        <input placeholder="姓名"
               type="text"
               maxlength="15"
               :value="receiver"
               @input="onReceiverInput">
      </view>
      <!-- 用于展示“手机号码”相关的输入项的视图容器 -->
      <view class="section">
        <!-- 输入项的文本标签，显示“手机号码”字样，提示用户此处应输入手机号码 -->
        <text>手机号码</text>
        <!-- 文本输入框，用于用户输入手机号码，设置了占位符提示为“11位手机号码”，输入类型为数字（type="number"），最大输入长度为11位（对应手机号码的长度要求），通过 :value 绑定了名为 mobile 的响应式变量来显示和更新输入框中的值，同时绑定了 @input 事件（onMobileInput），用于在输入时进行相关逻辑处理 -->
        <input placeholder="11位手机号码"
               type="number"
               maxlength="11"
               :value="mobile"
               @input="onMobileInput">
      </view>
      <!-- 用于展示“所在地区”相关的输入项及操作的视图容器，绑定了点击事件 translate，点击可触发地区选择相关的操作（如弹出地区选择器等） -->
      <view class="section"
            @tap="translate">
        <!-- 输入项的文本标签，显示“所在地区”字样，提示用户此处应选择所在地区信息 -->
        <text>所在地区</text>
        <!-- 用于展示已选择的地区信息（省份、城市、区县）的视图元素，通过双括号插值表达式绑定对应的响应式变量（province、city、area）来显示具体的地区名称 -->
        <view class="pca">
          {{ province }} {{ city }} {{ area }}
        </view>
        <!-- 这是一个用于实现地区选择器弹出效果的外层包装元素，通过绑定 :animation 属性（值为 animation 响应式变量）来应用相关动画效果，通过 :style 动态控制其可见性（根据 show 响应式变量的值显示或隐藏），并且绑定了 @tap.stop 事件（hiddenFloatView），点击该区域（除了内部特定元素外）可触发隐藏地区选择器浮层的操作，阻止事件冒泡 -->
        <view class="animation-element-wrapper"
              :animation="animation"
              :style="'visibility:' + (show? 'visible':'hidden')"
              @tap.stop="hiddenFloatView">
          <!-- 地区选择器浮层的主体元素，设置了 @tap.stop 事件（nono，可能用于阻止一些默认的点击行为，具体功能要结合代码逻辑看），内部包含确定按钮、分割线以及 picker-view 组件用于实际的地区选择操作 -->
          <view class="animation-element"
                @tap.stop="nono">
            <!-- 右侧的“确定”按钮，设置了类名为 right-bt，绑定了 @tap.stop 事件（hiddenFloatView），点击可触发隐藏地区选择器浮层的操作，显示“确定”字样，用于用户完成地区选择后确认操作 -->
            <text class="right-bt"
                  @tap.stop="hiddenFloatView">
              确定
            </text>
            <!-- 水平分割线元素，用于在视觉上区分不同区域（可能是按钮与选择器部分的区分等） -->
            <view class="line" />
            <!-- picker-view 组件用于实现多级联动的地区选择功能，设置了指示器的样式（indicator-style），通过 :value 绑定 valArr 响应式变量来记录当前选择的值，绑定了 @change 事件（bindChange），当选择的值发生变化时会触发该事件进行相应的数据更新等操作，同时绑定了 @tap.stop 事件（nono）阻止一些默认点击行为 -->
            <picker-view indicator-style="height: 50rpx;"
                         :value="valArr"
                         @change="bindChange"
                         @tap.stop="nono">
              <!-- 省选择列的视图容器，内部通过 v-for 指令循环遍历 provArray 数组（该数组存储省份相关数据），每个元素对应一个省份选项，展示省份名称 -->
              <picker-view-column>
                <view v-for="(item, indexs) in provArray"
                      :key="indexs">
                  {{ item.areaName }}
                </view>
              </picker-view-column>
              <!-- 地级市选择列的视图容器，类似省选择列，通过 v-for 指令循环遍历 cityArray 数组（存储地级市相关数据），展示地级市名称 -->
              <picker-view-column>
                <view v-for="(item, indexss) in cityArray"
                      :key="indexss">
                  {{ item.areaName }}
                </view>
              </picker-view-column>
              <!-- 区县选择列的视图容器，通过 v-for 指令循环遍历 areaArray 数组（存储区县相关数据），展示区县名称 -->
              <picker-view-column>
                <view v-for="(item, indexsss) in areaArray"
                      :key="indexsss">
                  {{ item.areaName }}
                </view>
              </picker-view-column>
            </picker-view>
          </view>
        </view>

        <!-- 箭头图标元素，用于提示用户可点击展开地区选择器等操作，内部通过指定的路径引入图片资源（一般是一个向右的箭头图标） -->
        <view class="arrow">
          <image src="@/static/images/icon/more.png" />
        </view>
      </view>
      <!-- 用于展示“详细地址”相关的输入项的视图容器 -->
      <view class="section">
        <!-- 输入项的文本标签，显示“详细地址”字样，提示用户此处应输入详细的收货地址信息 -->
        <text>详细地址</text>
        <!-- 文本输入框，用于用户输入详细地址，设置了占位符提示为“如楼号/单元/门牌号”，通过 :value 绑定了名为 addr 的响应式变量来显示和更新输入框中的值，并且绑定了 @input 事件（onAddrInput），用于在输入时进行相关逻辑处理 -->
        <input placeholder="如楼号/单元/门牌号"
               type="text"
               :value="addr"
               @input="onAddrInput">
      </view>
    </view>
    <!-- input列表区域结束 -->
    <!-- 功能按钮区域，包含保存地址、删除地址等功能按钮 -->
    <view class="btn-box">
      <!-- “保存收货地址”按钮，设置了类名为 keep btn，绑定了点击事件 onSaveAddr，点击可触发保存当前输入的收货地址信息的操作 -->
      <view class="keep btn"
            @tap="onSaveAddr">
        <text>保存收货地址</text>
      </view>

      <!-- 条件渲染的“删除收货地址”按钮，只有当 addrId 不等于0时才显示（可能表示当前是在编辑已有地址的场景下才显示删除按钮），设置了类名为 clear btn，绑定了点击事件 onDeleteAddr，点击可触发删除当前收货地址的操作 -->
      <view v-if="addrId!=0"
            class="clear btn"
            @tap="onDeleteAddr">
        <text>删除收货地址</text>
      </view>
    </view>
    <!-- 功能按钮区域结束 -->
  </view>
</template>

<script setup>
  // 定义响应式变量
  const addrId = ref(0)
  const city = ref('')
  const area = ref('')
  const provinceId = ref(0)
  const cityId = ref(0)
  const areaId = ref(0)
  const receiver = ref('')
  const mobile = ref('')
  const addr = ref('')
  const province = ref('')

  // 页面加载时触发
  onLoad((options) => {
    if (options.addrId) {  // 如果传入了地址ID，表示是编辑已有地址
      uni.showLoading()  // 显示加载中提示

      http.request({
        url: '/p/address/addrInfo/' + options.addrId,
        method: 'GET'
      })
        .then(({ data }) => {
          // 设置已有的地址信息到响应式变量
          province.value = data.province
          city.value = data.city
          area.value = data.area
          provinceId.value = data.provinceId
          cityId.value = data.cityId
          areaId.value = data.areaId
          receiver.value = data.receiver
          mobile.value = data.mobile
          addr.value = data.addr
          addrId.value = options.addrId
          initCityData(data.provinceId, data.cityId, data.areaId)  // 初始化地区数据
          uni.hideLoading()  // 隐藏加载中提示
        })
    } else {
      initCityData(provinceId.value, cityId.value, areaId.value)  // 新建地址时初始化地区数据
    }
  })

  // 定义地区数据相关变量
  const provArray = ref([])
  const valArr = ref([0, 0, 0])

  // 初始化地区数据
  const initCityData = (provinceId, cityId, areaId) => {
    uni.showLoading()
    http.request({
      url: '/p/area/listByPid',
      method: 'GET',
      data: {
        pid: 0  // 获取所有省份
      }
    })
      .then(({ data }) => {
        provArray.value = data  // 设置省份数据
        if (provinceId) {
          for (const index in data) {
            if (data[index].areaId === provinceId) {
              valArr.value = [parseInt(index), valArr.value[1], valArr.value[2]]  // 设置默认选中省份索引
            }
          }
        }
        getCityArray(provinceId || data[0].areaId, cityId, areaId)  // 根据省份ID获取城市数据
        uni.hideLoading()
      })
  }

  // 地区选择器索引
  let indexArr = [18, 0, 0]
  const areaArray = ref([])
  const cityArray = ref([])

  // 处理地区选择器滚动变化
  const bindChange = (e) => {
    const val = e.detail.value  // 获取当前选中的索引
    if (indexArr[0] != val[0]) {  // 如果省份发生了变化
      val[1] = 0
      val[2] = 0  // 将市和区重置为第一个选项
      getCityArray(provArray.value[val[0]].areaId)  // 更新城市数据
    } else if (indexArr[1] != val[1]) {  // 如果城市发生了变化
      val[2] = 0  // 将区重置为第一个选项
      getAreaArray(cityArray.value[val[1]].areaId)  // 更新区数据
    }
    indexArr = val
    valArr.value = [val[0], val[1], val[2]]
    // 更新显示的省市区名称和ID
    province.value = provArray.value[valArr.value[0]].areaName
    city.value = cityArray.value[valArr.value[1]].areaName
    area.value = areaArray.value[valArr.value[2]].areaName
    provinceId.value = provArray.value[valArr.value[0]].areaId
    cityId.value = cityArray.value[valArr.value[1]].areaId
    areaId.value = areaArray.value[valArr.value[2]].areaId
  }

  // 显示/隐藏地区选择器
  let t = 0
  let moveY = 200
  const show = ref('')

  const translate = () => {
    if (t == 0) {
      moveY = 0
      show.value = true
      t = 1
    } else {
      moveY = 200
      show.value = false
      t = 0
    }
    animationEvents(moveY, show.value)
  }

  // 隐藏地区选择器
  const hiddenFloatView = () => {
    moveY = 200
    show.value = false
    t = 0
    animationEvents(moveY, show.value)
  }

  const animation = ref('')

  // 动画事件
  const animationEvents = (moveY, showParam) => {
    animation.value = uni.createAnimation({
      transformOrigin: '50% 50%',
      duration: 400,
      timingFunction: 'ease',
      delay: 0
    })
    animation.value.translateY(moveY + 'vh').step()
    animation.value = animation.value.export()
    show.value = showParam
  }

  // 根据省份ID获取城市数据
  const getCityArray = (provinceId, cityId, areaId) => {
    http.request({
      url: '/p/area/listByPid',
      method: 'GET',
      data: {
        pid: provinceId  // 父级ID，即省份ID
      }
    })
      .then(({ data }) => {
        cityArray.value = data  // 设置城市数据
        if (cityId) {
          for (const index in data) {
            if (data[index].areaId == cityId) {
              valArr.value = [valArr.value[0], parseInt(index), valArr.value[2]]  // 设置默认选中城市索引
            }
          }
        }
        getAreaArray(cityId || data[0].areaId, areaId)  // 根据城市ID获取区数据
        uni.hideLoading()
      })
  }

  // 根据城市ID获取区数据
  const getAreaArray = (cityId, areaId) => {
    http.request({
      url: '/p/area/listByPid',
      method: 'GET',
      data: {
        pid: cityId  // 父级ID，即城市ID
      }
    }).then(({ data }) => {
      areaArray.value = data  // 设置区数据
      if (areaId) {
        for (const _index in data) {
          if (data[_index].areaId == areaId) {
            valArr.value = [valArr.value[0], valArr.value[1], parseInt(_index)]  // 设置默认选中区索引
          }
        }
        indexArr = valArr.value
      } else {
        // 更新显示的省市区名称和ID
        province.value = provArray.value[valArr.value[0]].areaName
        city.value = cityArray.value[valArr.value[1]].areaName
        area.value = areaArray.value[valArr.value[2]].areaName
        provinceId.value = provArray.value[valArr.value[0]].areaId
        cityId.value = cityArray.value[valArr.value[1]].areaId
        areaId.value = areaArray.value[valArr.value[2]].areaId
      }
      uni.hideLoading()
    })
  }

  // 保存地址
  const onSaveAddr = () => {
    const receiverParam = receiver.value
    const mobileParam = mobile.value
    const addrParam = addr.value

    // 表单验证
    if (!receiverParam.trim()) {
      receiver.value = ''
      uni.showToast({
        title: '请输入收货人姓名',
        icon: 'none'
      })
      return
    }

    if (!mobileParam) {
      uni.showToast({
        title: '请输入手机号码',
        icon: 'none'
      })
      return
    }

    if (mobileParam.length != 11) {
      uni.showToast({
        title: '请输入正确的手机号码',
        icon: 'none'
      })
      return
    }

    if (!addrParam.trim()) {
      receiver.value = ''
      uni.showToast({
        title: '请输入详细地址',
        icon: 'none'
      })
      return
    }

    uni.showLoading()
    let url = '/p/address/addAddr'
    let method = 'POST'

    if (addrId.value != 0) {  // 如果存在地址ID，则更新地址
      url = '/p/address/updateAddr'
      method = 'PUT'
    }

    http.request({
      url,
      method,
      data: {
        receiver: receiver.value,
        mobile: mobile.value,
        addr: addr.value,
        province: province.value,
        provinceId: provinceId.value,
        city: city.value,
        cityId: cityId.value,
        areaId: areaId.value,
        area: area.value,
        userType: 0,
        addrId: addrId.value
      }
    })
      .then(() => {
        uni.hideLoading()
        uni.navigateBack({
          delta: 1  // 返回上一页
        })
      })
  }
  // 输入事件处理函数
  const onReceiverInput = (e) => {
    receiver.value = e.detail.value
  }
  const onMobileInput = (e) => {
    mobile.value = e.detail.value
  }
  const onAddrInput = (e) => {
    addr.value = e.detail.value
  }

  // 删除地址
  const onDeleteAddr = () => {
    uni.showModal({
      title: '',
      content: '确定要删除此收货地址吗？',
      confirmColor: '#eb2444',

      success(res) {
        if (res.confirm) {
          const addrIdParam = addrId.value
          uni.showLoading()
          http.request({
            url: '/p/address/deleteAddr/' + addrIdParam,
            method: 'DELETE'
          })
            .then(() => {
              uni.hideLoading()
              uni.navigateBack({
                delta: 1  // 返回上一页
              })
            })
        }
      }
    })
  }
</script>

<style scoped lang="scss">
@use './editAddress.scss';
</style>
