import React, { useEffect, useRef } from "react"
import { useSelector } from "react-redux"
import { useImmer } from "use-immer"
import Taro, { getCurrentInstance } from "@tarojs/taro"
import api from "@/api"
import doc from "@/doc"
import { AtButton, AtInput, AtCurtain, AtCountdown } from 'taro-ui'
import { SpPage, SpTabs, SpCell, SpCheckbox, SpImage, SpInputNumber, SpFloatLayout, SpUpload, SpPrice, SpHtml, SpOrderItem } from '@/components'
import { View, Text, Picker, Input, ScrollView } from "@tarojs/components"
import { AFTER_SALE_TYPE, REFUND_FEE_TYPE, LOGISTICS_CODE } from '@/consts'
import { pickBy, showToast, classNames, VERSION_STANDARD, VERSION_PLATFORM, JumpGoodDetail, copyText } from '@/utils'
import "./after-sale.scss"

const initialState = {
  info: null,
  curTabIdx: 1,
  tabList: AFTER_SALE_TYPE,
  reasonIndex: '',
  reasons: [],
  refundFee: 0,
  refundPoint: 0,
  refundType: 'offline',
  description: '',
  pic: '',
  // 用于云店后台交易设置-到店退货关闭时判断
  offlineAftersalesIsOpen: false,
  offlineAftersales: false,
  refundTypeList: REFUND_FEE_TYPE,
  refundStore: '', // 退货门店
  contact: '', // 联系人
  mobile: '', // 联系电话
  openRefundType: false,
  selectRefundValue: 'offline',
  afterSaleDesc: {
    intro: '',
    is_open: false
  },
  afterSaleChecked: {},
  afterSaleTotalNum: 0,
  allClicked: false,
  afterSaleTotalprice: 0,
  loading: true,
  isOpened: false,
  isAddrOpened: false,
  aftersales: null,
  expressList: [],
  corpIndex: null,
  logi_no: ''
}

function TradeAfterSale (props) {
  const $instance = getCurrentInstance()
  const { aftersales_bn: afterSaleTid } = $instance.router.params
  const [state, setState] = useImmer(initialState)
  const pageRef = useRef()
  const { info, curTabIdx, tabList, reasonIndex, reasons, refundFee, refundPoint, refundType, refundTypeList, description, pic, openRefundType, selectRefundValue,
    refundStore, contact, mobile, afterSaleDesc, offlineAftersalesIsOpen, offlineAftersales, afterSaleTotalNum, allClicked, afterSaleTotalprice, loading, isOpened, isAddrOpened, aftersales, expressList, corpIndex, logi_no } = state

  useEffect(() => {
    fetch()
    Taro.eventCenter.on('onEventPickerStore', (item) => {
      console.log('onEventPickerStore:', item)
      setState(draft => {
        draft.refundStore = item
      })
    })
    const _expressList = Object.keys(LOGISTICS_CODE).map(key => {
      return {
        name: LOGISTICS_CODE[key],
        code: key
      }
    })
    setState(draft => {
      draft.expressList = _expressList
    })

    return () => {
      Taro.eventCenter.off('onEventPickerStore')
    }
  }, [])

  useEffect(() => {
    if (openRefundType) {
      pageRef.current.pageLock()
    } else {
      pageRef.current.pageUnLock()
    }
  }, [openRefundType])

  const onCancel = () => {
    Taro.navigateBack()
  }

  const onSubmitExp = async () => {
    const { item_id, orderId: order_id, afterSalesBn: aftersales_bn } = aftersales
    const corp_code = expressList[corpIndex]?.code
    if (!corp_code) {
      showToast('请填写物流公司')
      return
    }
    if (!logi_no) {
      showToast('请填写物流单号')
      return
    }
    await api.aftersales.sendback({
      item_id,
      order_id,
      aftersales_bn,
      logi_no,
      corp_code
    })
    showToast('操作成功')
    setTimeout(() => {
      // Taro.navigateBack()
      fetch()
    }, 300)
  }

  const onChangeExpress = (e) => {
    const { value } = e.detail
    setState(draft => {
      draft.corpIndex = value
    })
  }

  const getLogisticName = () => {
    const { name } = expressList[corpIndex] || {}
    return name
  }

  const fetch = async () => {
    const { id, aftersales_bn } = $instance.router.params
    if (aftersales_bn) {
      const resInfo = await api.aftersales.info({
        aftersales_bn,
        // item_id,
        // order_id
      })
      const _aftersales = pickBy(resInfo, doc.trade.TRADE_AFTER_SALES_ITEM)
      console.log("🚀 ~ _aftersales:", _aftersales)
      if (_aftersales.sendbackData) {
        const { corp_code } = _aftersales.sendbackData
        _aftersales.sendbackData.name = LOGISTICS_CODE[corp_code]
      }
      setState(draft => {
        draft.aftersales = _aftersales
        draft.afterSaleTotalNum = _aftersales.items.reduce((sum, { num }) => sum + num, 0)
        draft.afterSaleTotalprice = _aftersales.items.reduce((sum, { price }) => sum + price, 0)
      })
    }
    const { orderInfo, offline_aftersales_is_open, distributor } = await api.trade.detail(id)
    const reasons = await api.aftersales.reasonList()
    const { intro, is_open } = await api.aftersales.remindDetail()
    const { offline_aftersales } = distributor
    const _info = pickBy(orderInfo, doc.trade.TRADE_ITEM)
    setState(draft => {
      draft.info = _info
      draft.reasons = reasons
      draft.offlineAftersalesIsOpen = offline_aftersales_is_open
      draft.offlineAftersales = offline_aftersales == 1
      draft.afterSaleDesc = {
        intro,
        is_open
      }
      if ((VERSION_STANDARD && !offline_aftersales_is_open) || (VERSION_PLATFORM && offline_aftersales == 0)) {
        draft.refundTypeList = REFUND_FEE_TYPE.filter(item => item.value != 'offline')
        draft.refundType = 'logistics'
      }
      draft.loading = false
    })
  }

  const onChangeItemCheck = (item, index, type) => {
    // const _info = info
    // _info.items[index].checked = e
    setState(draft => {
      if (type === 'all') {
        draft.allClicked = !allClicked
        draft.info.items.map((_item) => {
          _item.checked = !allClicked
        })
      } else {
        draft.info.items[index].checked = !item.checked
      }
      draft.allClicked = draft.info.items.every((item) => item.checked)
      draft.afterSaleTotalNum = draft.info.items.filter((_item) => _item.checked).reduce((sum, { num }) => sum + num, 0)
      draft.afterSaleTotalprice = draft.info.items.filter((_item) => _item.checked).reduce((sum, { price }) => sum + price, 0)
    })
  }

  const onChangeItemNum = (e, index) => {
    setState(draft => {
      draft.info.items[index].refundNum = e
    })
  }

  const getRealRefundFee = () => {
    let rFee = 0
    if (info) {
      const { items } = info
      rFee = items
        .filter((item) => item.checked)
        .reduce((sum, { price, num, refundNum }) => sum + price / num * refundNum, 0)
    }
    return rFee.toFixed(2)
  }

  const getRealRefundPoint = () => {
    let rPoint = 0
    if (info) {
      const { items } = info
      rPoint = items
        .filter((item) => item.checked)
        .reduce((sum, { point, num, refundNum }) => sum + point / num * refundNum, 0)
    }
    return rPoint.toFixed(2)
  }

  const onChangeRefundType = ({ value }) => {
    setState(draft => {
      draft.selectRefundValue = value
    })
  }

  const getRefundTypeName = () => {
    const { title } = refundTypeList.find(item => item.value == refundType) || {}
    return title
  }

  const onSubmit = async () => {
    const { id } = $instance.router.params
    const checkedItems = info?.items.filter(item => !!item.checked)
    if (checkedItems.length == 0) {
      return showToast('请选择需要售后的商品')
    }

    if (!reasons?.[reasonIndex]) {
      return showToast('请选择退货原因')
    }
    const aftersales_type = tabList[curTabIdx].type
    const reason = reasons?.[reasonIndex]
    let params = {
      detail: checkedItems.map(({ id: _id, refundNum, num }) => {
        return {
          id: _id,
          num: num || refundNum
        }
      }),
      order_id: id,
      aftersales_type,
      reason,
      description,
      evidence_pic: pic
    }
    // 退货退款
    if (aftersales_type == 'REFUND_GOODS') {
      params = {
        ...params,
        return_type: refundType
      }
      // 到店退货
      if (refundType == 'offline') {
        if (!refundStore) {
          return showToast('请选择退货门店')
        }
        if (!contact) {
          return showToast('请输入联系人姓名')
        }
        if (!mobile) {
          return showToast('请输入联系人电话')
        }
        params = {
          ...params,
          return_type: refundType,
          aftersales_address_id: refundStore.address_id,
          contact,
          mobile
        }
      }
    }
    await api.aftersales.apply(params)
    showToast('提交成功')
    setTimeout(() => {
      // Taro.redirectTo({
      //   url: `/subpage/pages/trade/detail?id=${id}`
      // })
      // fetch()
      Taro.navigateBack()
    }, 500)
  }

  const handleClickCopy = (val) => {
    copyText(val)
    Taro.showToast({
      title: '复制成功',
      icon: 'none'
    })
  }

  return <SpPage ref={pageRef} loading={loading} className='page-trade-after-sale has-navbar' isBlack showNavSearchIcon renderFooter={
    !loading && !afterSaleTid ? <View className='btn-wrap'>
      <AtButton type='primary' onClick={onSubmit}>提交售后申请</AtButton>
    </View> : null
  }
  >
    {!afterSaleTid ? <View className="after-item">
      <View className="after-item-label">请选择售后类型:</View>
      <Picker
        mode='selector'
        range={tabList.map(item => item.title)}
        onChange={(e) => {
          setState(draft => {
            draft.curTabIdx = +e.detail.value
          })
        }}
      >
        <View className="after-item-input">
          <View className="input-txt">{tabList[curTabIdx] ? tabList[curTabIdx].title : '请选择售后类型'}</View>
          <View className="iconfont icon-arrowRight" style={{ color: tabList[curTabIdx] > -1 ? '#000' : '#a5a5a5' }}></View>
        </View>
      </Picker>
    </View> : aftersales?.progress && aftersales.progress != 12 ? <View className="after-item">
      <View className="after-item-label">售后单号：{afterSaleTid}</View>
      <View className="after-item-label" style={{ fontSize: '30rpx', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', opacity: '80', margin: '36rpx 0 50rpx 0', lineHeight: '0.8' }}>
        <Text style={{ marginRight: '20rpx', fontWeight: 'bold' }}>{['', '售后审核通过，请您发货并填写物流单号', '等待商家确认收货', '已驳回', '已完成', '退款驳回', '退款完成', '已关闭', '商家确认收货,等待审核退款', '退款处理中'][aftersales?.progress || 0]}</Text>
        <View style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
          {/* <View style={{ fontSize: '20rpx', textAlign: 'end' }}>还剩<AtCountdown
            format={{ day: '天', hours: '时', minutes: '分', seconds: '' }}
            isShowDay
            day={1}
            hours={23}
            minutes={59}
            seconds={0}
          /></View> */}
          <Text onClick={() => setState(draft => { draft.isOpened = true })} style={{ fontSize: '20rpx', borderBottom: '1px solid #000', padding: '0 0 4rpx' }}>全部流程</Text>
        </View>
      </View>
    </View> : null}

    {aftersales?.progress >= 1 && aftersales?.progress != 3 && <>
      <View className="after-item" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: '30rpx' }}>
        <Text style={{ fontSize: '24rpx', marginTop: '-10rpx' }}>退货单号填写</Text>
        {aftersales?.hasAftersalesAddress && <Text onClick={() => setState(draft => { draft.isAddrOpened = true })} style={{ fontSize: '20rpx', borderBottom: '1px solid #000', padding: '0 0 4rpx', marginTop: '-10rpx', lineHeight: 0.8 }}>查看退货地址</Text>}
      </View>
      <View className="after-item mt-40" style={{ marginBottom: '50rpx' }}>
        {!aftersales?.hasSendbackData ? <Picker
          mode='selector'
          rangeKey='name'
          range={expressList}
          onChange={onChangeExpress}
        >
          <View className="after-item-input">
            <View className={`input-txt`}>{`${getLogisticName() || '请选择快递公司'}`}</View>
            <View className="iconfont icon-arrowRight" style={{ color: getLogisticName() ? '#000' : '#a5a5a5' }}></View>
          </View>
        </Picker> : <View className="after-item-input">
          <View className={`input-txt color-hui`}>{`${aftersales?.sendbackData?.name || ''}`}</View>
        </View>}
      </View>
      <View className="after-item mt-40" style={{ marginBottom: '50rpx' }}>
        <View className="after-item-input">
          {!aftersales?.hasSendbackData ? <Input className="desc-ipt" value={logi_no} placeholder='物流单号' onInput={(e) => {
            setState(draft => {
              draft.logi_no = e.detail.value
            })
          }}></Input>
            :
            <View className={`input-txt color-hui`}>{`${aftersales?.sendbackData?.logi_no || ''}`}</View>}
        </View>
      </View>
      <View style={{ margin: '0 auto', marginBottom: '70rpx', textAlign: 'center' }}>
        {/* <AtButton type='primary' onClick={onSubmitExp}>确认上传</AtButton> */}
        <Text onClick={() => handleClickCopy(aftersales?.sendbackData?.logi_no || '')} style={{ fontSize: '20rpx', borderBottom: '1px solid #000', lineHeight: 0.8 }}>复制物流单号</Text>
      </View>
    </>}

    {/* <SpTabs current={curTabIdx} tablist={tabList} onChange={(e) => {
      setState(draft => {
        draft.curTabIdx = e
      })
    }} /> */}
    {!afterSaleTid ? <>
      <View className="choose-item">请选择您要退货的商品</View>
      <View className="choose-all">
        <SpCheckbox label='全选' checked={allClicked} onChange={onChangeItemCheck.bind(this, null, null, 'all')} />
      </View>
    </> : <Text className="choose-item" style={{ fontSize: '30rpx', fontWeight: 'bold' }}>已选择的退货商品</Text>}
    <View className='refund-items'>
      <View className='items-container'>
        {
          (aftersales?.items || info?.items || []).map((item, index) => (
            <View className="item-box" onClick={onChangeItemCheck.bind(this, item, index)}>
              <View className='item-wrap' key={`item-wrap__${index}`}>
                {!afterSaleTid && <View className='item-hd'>
                  <SpCheckbox checked={item.checked} onChange={onChangeItemCheck.bind(this, item, index)} />
                </View>}
                <View className='item-bd'>
                  {/* <SpOrderItem
                    key={`item__${index}`}
                    info={item}
                    isShowNational
                    isPointitemGood={false}
                    onClick={() => {
                      if (info.order_class == 'pointsmall') {
                        Taro.navigateTo({
                          url: `/subpages/pointshop/espier-detail?id=${item.good_id}`
                        })
                      } else {
                        JumpGoodDetail(item.good_id, item.distributor_id)
                      }
                    }}
                  /> */}
                  <SpImage src={item.pic} width={150} height={150} mode='aspectFill' radius={4} circle={4} />
                  <View className='goods-info'>
                    <View className='goods-info-hd'>
                      <Text className='goods-title'>{item.itemName}</Text>
                    </View>
                    <View className='goods-info-bd'>
                      <View>{item.itemSpecDesc && <Text className='sku-info'>{`${item.descInfo}`}</Text>}</View>
                      {/* <View><SpPrice size={28} value={item.price / item.num} /> x <Text className='num'>{item.num}</Text></View> */}
                    </View>
                    <View className='goods-info-ft'>
                      <Text>数量：{item.num}</Text>
                      <SpPrice size={20} value={item.price / item.num} showSeparator noDecimal={false} />
                      {/* <SpInputNumber
                        disabled={!item.leftAftersalesNum}
                        value={item.refundNum}
                        max={item.leftAftersalesNum}
                        min={1}
                        onChange={(e) => onChangeItemNum(e, index)}
                      /> */}
                    </View>
                  </View>
                </View>
              </View>
              <SpPrice value={item.price} showSeparator noDecimal={false} />
            </View>
          ))
        }
      </View>
    </View>

    <View className="after-item mt-40" style={{ marginTop: '60rpx' }}>
      <View className="after-item-label color-hui">退货原因</View>
      {!afterSaleTid ? <Picker
        mode='selector'
        range={reasons}
        onChange={(e) => {
          setState(draft => {
            draft.reasonIndex = e.detail.value
          })
        }}
      >
        <View className="after-item-input">
          <View className={`input-txt`}>{`${reasons?.[reasonIndex] || '请选择退货原因'}`}</View>
          <View className="iconfont icon-arrowRight" style={{ color: reasons?.[reasonIndex] ? '#000' : '#a5a5a5' }}></View>
        </View>
      </Picker> : <View className="after-item-input">
        <View className={`input-txt color-hui`}>{`${aftersales?.reason || reasons?.[reasonIndex] || '请选择退货原因'}`}</View>
      </View>}
    </View>

    <View className="after-item mt-40">
      <View className="after-item-label color-hui">退货数量*</View>
      <View className="after-item-input">
        <View className="input-txt color-hui">{`${afterSaleTotalNum || '请选择退货数量'}`}</View>
      </View>
    </View>

    {/* <View className='picker-reason'>
      <Picker
        mode='selector'
        range={reasons}
        onChange={(e) => {
          setState(draft => {
            draft.reasonIndex = e.detail.value
          })
        }}
      >
        <SpCell title='退款原因' isLink value={<Text>{`${reasons?.[reasonIndex] || '请选择取消原因'}`}</Text>}></SpCell>
      </Picker>
    </View> */}
    <View className='refund-desc-container'>

    </View>
    {false && <View className='refund-detail'>
      <View className='refund-amount'>
        <SpCell title='退款金额' value={getRealRefundFee()} />
      </View>

      <View className='refund-point'>
        {/* <SpCell title='退积分' value={info?.point} /> */}
        <SpCell title='退积分' value={getRealRefundPoint()} />
      </View>
    </View>}

    {/* {curTabIdx == 1 && <View className='return-goods-type'>
      <SpCell border title='退货方式' value={getRefundTypeName()} isLink onClick={() => {
        setState(draft => {
          draft.openRefundType = true
          draft.selectRefundValue = refundType
        })
      }}></SpCell>
      {
        refundType == 'offline' && ((offlineAftersalesIsOpen && VERSION_STANDARD) || (VERSION_PLATFORM && offlineAftersales)) && <>
          <SpCell border title='退货门店' isLink value={<Text className={classNames({
            'placeholder': !refundStore
          })}>{refundStore ? refundStore.name : '请选择退货门店'}</Text>} onClick={() => {
            Taro.navigateTo({
              url: `/subpages/trade/store-picker?distributor_id=${info.distributorId}&refund_store=${refundStore?.address_id}`
            })
          }} />
          <SpCell border title='联系人' value={<AtInput
            name='contact'
            value={contact}
            placeholder='请填写联系人姓名'
            onChange={(e) => {
              setState(draft => {
                draft.contact = e
              })
            }}
          />}>
          </SpCell>
          <SpCell title='联系电话' value={<AtInput
            name='mobile'
            value={mobile}
            placeholder='请填写联系人电话'
            onChange={(e) => {
              setState(draft => {
                draft.mobile = e
              })
            }}
          />}></SpCell>
        </>
      }
    </View>} */}

    <View className='desc-container'>
      <View className='title'>
        <Text>退货商品{afterSaleTotalNum}件</Text>
        <Text>退款金额：<SpPrice size={30} value={afterSaleTotalprice} showSeparator noDecimal={false} /></Text>
      </View>
      {!afterSaleTid ? <View className='desc-content'>
        {/* <Text className='iconfont icon-bianji1'></Text> */}
        {/* <AtTextarea type='textarea' name='description' value={description} placeholder='在此填写备注要求' maxLength={200} onChange={(e) => {
          setState(draft => {
            draft.description = e
          })
        }} /> */}
        <Input className="desc-ipt" value={description} placeholder='在此填写备注要求' onInput={(e) => {
          setState(draft => {
            draft.description = e.detail.value
          })
        }}></Input>
      </View>
        : <View style={{ opacity: '0.8', fontSize: '24rpx' }}>备注：{aftersales?.description || description}</View>}
      {/* <SpUpload
        value={pic}
        max={3}
        onChange={(val) => {
          setState((draft) => {
            draft.pic = val
          })
        }}
      /> */}
    </View>

    {
      afterSaleDesc.is_open && <View className='after-sale-desc'>
        <View className='desc-title'><Text className='iconfont icon-xinxi'></Text>售后提醒</View>
        <SpHtml content={afterSaleDesc.intro} />
      </View>
    }

    <SpFloatLayout
      title='选择退货方式'
      className='refund-type'
      open={openRefundType}
      onClose={() => {
        setState((draft) => {
          draft.openRefundType = false
        })
      }}
      renderFooter={
        <AtButton circle type='primary' onClick={() => {
          setState(draft => {
            draft.refundType = selectRefundValue
            draft.openRefundType = false
          })
        }}>
          确定
        </AtButton>
      }
    >
      {refundTypeList.map((item, index) => (
        <View className='refund-type-item' key={`refund-type-item__${index}`}>
          <SpCheckbox
            checked={item.value == selectRefundValue}
            onChange={onChangeRefundType.bind(this, item)}
          >
            <View className='refund-item-wrap'>
              <View className='title'>{item.title}</View>
              <View className='desc'>{item.desc}</View>
            </View>
          </SpCheckbox>
        </View>
      ))}
    </SpFloatLayout>

    <AtCurtain
      className='curtain'
      isOpened={isOpened}
      onClose={() => {
        setState((draft) => {
          draft.isOpened = false
        })
      }}
    >
      <View className="curtain_content">
        <View className="curtain_content_title">
          <SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
          <Text style={{ marginLeft: '6px' }}>退货流程</Text>
        </View>
        <View className={`receiver_name ${false && 'active'}`}>提交申请</View>
        <View className={`receiver_name ${aftersales?.progress == 0 && 'active'}`} style={{ display: 'flex', alignItems: 'flex-end' }}>
          <Text style={{ marginRight: '36px' }}>商家处理</Text>
          {/* <View style={{ color: '#000', fontSize: '20rpx' }}>还剩<AtCountdown
            format={{ day: '天', hours: '时', minutes: '分', seconds: '' }}
            isShowDay
            day={1}
            hours={23}
            minutes={59}
            seconds={0}
          /></View> */}
        </View>
        <View className="receiver_name op">商家同意后，请按照给出的退货地址退货，并请记录退货运单</View>
        <View className="receiver_name op">如商家拒绝，您可以修改申请后再次发起，商家会重新处理</View>
        <View className="receiver_name op" style={{ marginBottom: '50rpx' }}>如商家超时未处理，退货申请将达成，请按系统给出的退货地址退货</View>
        <View className={`receiver_name ${[2].includes(aftersales?.progress) && 'active'}`}>寄回商品</View>
        <View className={`receiver_name ${aftersales?.progress == 4 && aftersales?.aftersalesStatus != 2 && 'active'}`}>商家退款</View>
        <View className={`receiver_name ${aftersales?.progress == 4 && aftersales?.aftersalesStatus == 2 && 'active'}`}>退款成功</View>
        <View className="line"></View>
        <View className="curtain_content_text">
          <View className="curtain_content_text_title">温馨提示</View>
          <View class="receiver_item">
            BIRKENSTOCK支持七天(从收到商品之日起开始计算)无理由退换货如需退换货，退回货品需不影响二次销售原装鞋盒务必完好(如鞋盒有遗失需补偿20元)。试穿时需将鞋盒内的包装纸垫于脚下，过程中不刻意踩踏后跟如鞋面或鞋底出现脏污、磨损、破损，鞋跟出现折痕等，都将影响商品的二次销售。我们将无法为您提供七天无理由退换货服务，敬请谅解。如果您还有其他问题或需要更多帮助，可及时联系客服，我们将竭诚为您服务(特别提示:仓库不接受到付、平邮、邮政小包。)
          </View>
        </View>
        <AtButton type='primary' onClick={() => setState((draft) => { draft.isOpened = false })}>我知道了</AtButton>
      </View>
    </AtCurtain>
    <AtCurtain
      className='curtain'
      isOpened={isAddrOpened}
      onClose={() => {
        setState((draft) => {
          draft.isAddrOpened = false
        })
      }}
    >
      <View className="curtain_content">
        <View className="curtain_content_title">
          <SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
          <Text style={{ marginLeft: '6px' }}>退货地址</Text>
        </View>
        <View className={`addr_item`}>
          <View className="addr_item_left">收件人</View>
          <View className="addr_item_right">{aftersales?.afterSalesContact}</View>
        </View>
        <View className={`addr_item`}>
          <View className="addr_item_left">联系电话</View>
          <View className="addr_item_right">{aftersales?.afterSalesMobile}</View>
        </View>
        <View className={`addr_item`}>
          <View className="addr_item_left">收件地址</View>
          <View className="addr_item_right">{aftersales?.afterSalesAddress}</View>
        </View>
        <View className={`addr_item`}>
          <View className="addr_item_left">邮编</View>
          <View className="addr_item_right">{aftersales?.afterSalesZip}</View>
        </View>
        <View className="fuzhi">复制地址</View>
        <View className="line" style={{ margin: '130rpx 0 110rpx 0' }}></View>
        <View className="curtain_content_text">
          <View className="curtain_content_text_title">温馨提示</View>
          <View class="receiver_item">
            BIRKENSTOCK支持七天(从收到商品之日起开始计算)无理由退换货如需退换货，退回货品需不影响二次销售原装鞋盒务必完好(如鞋盒有遗失需补偿20元)。试穿时需将鞋盒内的包装纸垫于脚下，过程中不刻意踩踏后跟如鞋面或鞋底出现脏污、磨损、破损，鞋跟出现折痕等，都将影响商品的二次销售。我们将无法为您提供七天无理由退换货服务，敬请谅解。如果您还有其他问题或需要更多帮助，可及时联系客服，我们将竭诚为您服务(特别提示:仓库不接受到付、平邮、邮政小包。)
          </View>
        </View>
      </View>
    </AtCurtain>
  </SpPage>
}

TradeAfterSale.options = {
  addGlobalClass: true
}

export default TradeAfterSale