import { Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import classnames from 'classnames'
import { useCallback, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import ShipmentMode from './components/shipmentMode'
import AddressList from '@/components/AddressList'
import { alert, goLink } from '@/common/common'
import { getParam } from '@/common/system'
import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from '@/api/order'
import useLogin from '@/use/useLogin'

const EditOrder = () => {
  useLogin()
  // 获取临时传递的数据
  const params = getParam()
  const [paramsData, setParamsData] = useState<any>(params)

  // 提交的数据
  const [submitData, setSubmitData] = useState({
    address_id: 0,
    id: params.id,
    shipment_mode: params.shipment_mode,
  })

  // 格式化地址
  const address = useMemo(() => {
    return `${paramsData.province_name} ${paramsData.city_name} ${paramsData.district_name} ${paramsData.address_detail}`
  }, [paramsData])

  // 获取收货方法
  const getShipmentMode = useCallback((num) => {
    setSubmitData(val => ({ ...val, shipment_mode: num }))
  }, [])

  // 获取地址
  const getSelectAddress = useCallback((e) => {
    setSubmitData(val => ({ ...val, address_id: e.id }))
  }, [])

  // 修改请求
  const { fetchData: addressFetchData } = EditSaleOrderAddressApi()
  const { fetchData: shipmentFetchData } = EditSaleOrderShipmentModeApi()
  const editData = async() => {
    if (submitData.address_id) {
      const res = await addressFetchData(submitData)
      if (!res.success) {
        alert.error(res.msg)
        return false
      }
    }
    const res = await shipmentFetchData(submitData)
    if (!res.success) {
      alert.error(res.msg)
      return false
    }
    Taro.navigateBack()
  }

  return (
    <View className={styles.order_edit_main}>
      <View className={classnames(styles.title_msg)}>
        <Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
        <View className={styles.title_msg_con}>
          <Text>修改收货地址可能会影响发货时效</Text>
          <Text>若商品已发货，则不能修改</Text>
        </View>
      </View>
      <View className={styles.shipmentMode_con}>
        <ShipmentMode onSelect={getShipmentMode} defaultValue={paramsData.shipment_mode} />
      </View>
      <View className={styles.old_address}>
        <Text className={styles.old_address_text}>原地址:</Text>
        <Text className={styles.old_address_text}>{address}</Text>
        <View className={styles.userInfo}>
          <Text className={styles.userInfo_text}>{paramsData.name}</Text>
          <Text className={styles.userInfo_text}>{paramsData.phone}</Text>
        </View>
      </View>
      <View className={styles.select_address_con}>
        <View className={styles.title}>重新选择收货地址</View>
        <View className={styles.address_list}>
          <AddressList focusBorderEnabled addButtonEnabled={false} onSelect={getSelectAddress} />
        </View>
        <View className={styles.submitBtn}>
          <View onClick={() => goLink('/pages/addressAdd/index', { type: 'add' })} className={classnames(styles.addAddress, styles.addressBtn)}>添加新地址</View>
          <View className={classnames(styles.submitUpdate, styles.addressBtn)} onClick={() => editData()}>提交修改</View>
        </View>
      </View>
      <View className="common_safe_area_y"></View>
    </View>
  )
}

export default EditOrder