import { View } from '@tarojs/components'
import Taro, { useDidShow, useRouter } from '@tarojs/taro'
import { useMemo, useState } from 'react'
import styles from './index.module.scss'
import Address from './components/address'
import type { ProductParam } from './components/productCard'
import ProductCard from './components/productCard'
import Remark from './components/remark'
import OrderInfo from './components/orderInfo'
import type { orderStateItem } from './components/orderState'
import OrderState from './components/orderState'
import { alert } from '@/common/common'
import { ColorCardOrderCancelApi, GetColorCardOrderDetailApi } from '@/api/colorCard'
import { CutSampleOrderCancelApi, GetCutSampleOrderDetailApi } from '@/api/cutSample'

interface Param {
  address_detail: string
  city_id: number
  city_name: string
  create_time: string
  cut_sample_order_product_list: ProductParam[]
  district_id: number
  district_name: string
  order_form: orderStateItem[]
  order_id: number
  order_no: string
  order_remark: string
  phone: string
  province_id: number
  province_name: string
  purchaser_id: number
  purchaser_name: string
  sale_user_id: number
  sale_user_name: string
  shipment_mode: number
  shipment_mode_name: string
  target_user_name: string
  target_user_phone: string
}

export default () => {
  const router = useRouter()

  const [orderData, setOrderData] = useState<Param>()
  const { fetchData: fetchDataDtail } = GetCutSampleOrderDetailApi()
  const getColorCardOrderDetail = async() => {
    const res = await fetchDataDtail({ id: router.params.id })
    setOrderData(() => res.data)
  }

  useDidShow(() => {
    getColorCardOrderDetail()
  })

  const addressData = useMemo(() => {
    return {
      address_title: `${orderData?.province_name}${orderData?.city_name}${orderData?.district_name}`,
      address_name: orderData?.purchaser_name || '',
      address_phone: orderData?.target_user_phone || '',
      address_mode: orderData?.shipment_mode_name || '',
    }
  }, [orderData])

  // 取消订单
  const { fetchData: fetchDataCancel } = CutSampleOrderCancelApi()
  const onCancel = async() => {
    Taro.showModal({
      title: '确定取消订单？',
      async success(res) {
        if (res.confirm) {
          const res = await fetchDataCancel({ id: orderData?.order_id })
          if (res.success) {
            alert.success('取消成功')
            getColorCardOrderDetail()
          }
        }
        else if (res.cancel) {
          console.log('用户点击取消')
        }
      },
    })
  }
  return <View className={styles.main}>
    <OrderState list={orderData?.order_form} />
    <Address defaultValue={addressData} />
    <ProductCard value={orderData?.cut_sample_order_product_list || []} />
    <OrderInfo {...orderData} />
    <Remark value={orderData?.order_remark || ''} placeholder="尚未备注信息" />
    {orderData?.order_form?.length === 1 && <View className={styles.order_btn}>
      <View className={styles.btn_con}>
        <View className={styles.btn} onClick={onCancel}>取消订单</View>
      </View>
    </View>}
  </View>
}
