<template>
  <view class="Mall4j refund-logistics">
    <view class="refund-box">
      <view class="item">
        <view class="label">
          物流公司
        </view>
        <view
          class="text-arrow"
          @tap="showReasonPopup"
        >
          {{ deliveryName || '请选择' }}
        </view>
      </view>
      <view class="item">
        <view class="label">
          物流单号
        </view>
        <view class="refund-price">
          <input
            v-model="deliveryNo"
            type="text"
            maxlength="30"
            placeholder="请输入物流单号"
          >
        </view>
      </view>
      <view class="item">
        <view class="label">
          手机号码
        </view>
        <view class="refund-price">
          <input
            v-model="mobile"
            type="text"
            maxlength="11"
            placeholder="请输入手机号码"
          >
        </view>
      </view>
      <view class="item">
        <view class="label">
          物流备注信息
        </view>
        <view class="refund-price">
          <textarea
            v-model="senderRemarks"
            maxlength="200"
            type="text"
            placeholder="备注信息（选填）"
          />
        </view>
      </view>
      <view class="item">
        <view class="label">
          退货物流凭证
        </view>
        <view class="upload-box">
          <imgs-box
            :img-num="3"
            :img-urls="photoFiles"
            @get-image-path="getImgPath"
          />
        </view>
        <view class="upload-des">
          提示：最多上传三张凭证
        </view>
      </view>
      <!-- 退款理由弹窗 -->
      <view
        class="popup"
        :class="{ show: showCompaniesList }"
      >
        <view
          class="popup-mask"
          @tap="closePopup"
        />
        <view class="popup-con-bottom">
          <view class="popup-tit">
            <view class="tit-text">
              选择物流公司
            </view>
            <view
              class="close"
              @tap="closePopup"
            >
              <image src="/static/images/close.png" />
            </view>
          </view>
          <radio-group
            v-if="showCompaniesList"
            class="con-box-min"
          >
            <label
              v-for="(companyItem, companyIndex) in deliveryCompanies"
              :key="companyIndex"
              class="company-item"
              @tap="changeCompany(companyItem)"
            >
              <view class="text">{{ companyItem.name }}</view>
              <radio
                color="#fc1b35"
                :value="String(companyItem.deliveryCompanyId)"
                :checked="deliveryCompanyId===companyItem.deliveryCompanyId"
                @tap="changeCompany(companyItem)"
              />
            </label>
          </radio-group>
          <view class="btn-box">
            <view
              class="btn"
              @tap="confirmChangeComany"
            >
              确定
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <view
        class="btn"
        @tap="submit"
      >
        提交
      </view>
    </view>
    <!-- 上传图片组件 -->
    <imgs-box
      v-if="showImgBoxPopup"
      ref="imgboxRef"
      class="imgbox-pop"
      @close-img-pop="imgBoxPopVisible"
    />
  </view>
</template>

<script setup>
const showImgBoxPopup = ref(false)

let refundId = ''
const logisticsInfo = ref({})
onLoad((options) => {
  refundId = options.refundId
  if (options.isEdit) {
    logisticsInfo.value = uni.getStorageSync('cloudRefundLogistics')
    initLogisticsInfo()
  }
  getdeliveryCompanies()
})

/**
 * 获取上传图片组件返回的图片路径
 * @param {String} urls 图片组件返回路径数组
 */
const photoFiles = ref([])
const getImgPath = (urls) => {
  if (urls) {
    photoFiles.value = urls
  }
}

/**
 * 修改物流信息回填
 */
const senderRemarks = ref('')
const mobile = ref('')
const deliveryNo = ref('')
const deliveryCompanyId = ref(0)
const deliveryName = ref('')
const initLogisticsInfo = () => {
  deliveryCompanyId.value = logisticsInfo.value.deliveryCompanyId
  deliveryName.value = logisticsInfo.value.deliveryName
  deliveryNo.value = logisticsInfo.value.deliveryNo
  mobile.value = logisticsInfo.value.senderMobile
  senderRemarks.value = logisticsInfo.value.senderRemarks
  const list = []
  if (logisticsInfo.value.imgs) {
    const imgs = logisticsInfo.value.imgs.split(',')
    imgs.forEach((img) => {
      list.push({ path: img, url: import.meta.env.VITE_APP_RESOURCES_URL + img })
    })
  }
  photoFiles.value = list
}

/**
 * 提交物流信息
 */
const submit = () => {
  // 数据校验
  if (!deliveryCompanyId.value && !deliveryName.value) {
    uni.showToast({
      title: '请选择物流公司',
      icon: 'none'
    })
    return
  }
  if (!deliveryNo.value.trim()) {
    uni.showToast({
      title: '请输入物流单号',
      icon: 'none'
    })
    deliveryNo.value = deliveryNo.value.trim()
    return
  }
  const regexp = /^[a-zA-Z0-9]{4,30}$/
  if (!regexp.test(deliveryNo.value.trim())) {
    uni.showToast({
      title: '请输入正确的物流单号',
      icon: 'none'
    })
    deliveryNo.value = deliveryNo.value.trim()
    return
  }
  if (!util.checkPhoneNumber(mobile.value)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }
  // 退款凭证图片
  const imgUrls = []
  if (photoFiles.value.length) {
    photoFiles.value.forEach((imgItem) => {
      imgUrls.push(imgItem.path)
    })
  }

  http.request({
    url: '/mall4cloud_order/order_refund/submit_express',
    method: 'POST',
    data: {
      deliveryCompanyId: deliveryCompanyId.value,
      deliveryName: deliveryName.value,
      deliveryNo: deliveryNo.value.trim(),
      imgs: imgUrls.join(','),
      mobile: mobile.value,
      refundId,
      senderRemarks: senderRemarks.value
    }
  })
    .then(() => {
      uni.redirectTo({
        url: '/package-refund/pages/refund-detail/refund-detail?refundId=' + refundId
      })
    })
}

/**
 * 获取物流公司列表
 */
const deliveryCompanies = ref([])
const getdeliveryCompanies = () => {
  http.request({
    url: '/mall4cloud_order/delivery_company/list',
    method: 'GET',
    data: {},
    callBack: res => {
      deliveryCompanies.value = res
    }
  }).then(res => {
    deliveryCompanies.value = res
  })
}

/**
 * 更改物流公司
 */
const currentSelectedCompany = ref({})
const changeCompany = (item) => {
  currentSelectedCompany.value = item
}

/**
 * 确定选择的物流公司
 */
const confirmChangeComany = () => {
  deliveryName.value = currentSelectedCompany.value.name
  deliveryCompanyId.value = currentSelectedCompany.value.deliveryCompanyId
  closePopup()
}

/**
 * 显示物流公司列表弹窗
 */
const showCompaniesList = ref(false)
const showReasonPopup = () => {
  showCompaniesList.value = true
}
const closePopup = () => {
  showCompaniesList.value = false
}

</script>

<style scoped lang="scss">
@use "./refund-logistics.scss";
@use "@/popup.scss";
</style>
