import { Image, Text, View } from '@tarojs/components'
import Taro, { usePullDownRefresh, useRouter } from '@tarojs/taro'
import { useCallback, useEffect, useState } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
import LayoutBlock from '@/components/layoutBlock'
import Divider from '@/components/divider'
import LabAndImg from '@/components/LabAndImg'
import Tag from '@/components/tag'
import Cell from '@/components/cell'
import { formatDateTime, formatHashTag, formatRemoveHashTag, formatUrl } from '@/common/format'
import NormalButton from '@/components/normalButton'
import Steps from '@/components/steps'
import Step from '@/components/steps/components/step'
import { alert } from '@/common/common'
import IconFont from '@/components/iconfont/iconfont'
import { CancelCutSampleOrder, GetCutSampleOrderDetail } from '@/api/sampleCutting'

const SampleCuttingDetail = () => {
  const { fetchData } = GetCutSampleOrderDetail()

  const router = useRouter()

  const getData = async() => {
    console.log('id', router.params.id)
    const res = await fetchData({ id: Number(router.params.id) })
    if (!res.success) {
      return alert.error(res.msg)
    }
    setOrder(res.data)
    // 小程序提供的api，通知页面停止下拉刷新效果
    Taro.stopPullDownRefresh()
  }

  // 页面下拉刷新
  usePullDownRefresh(() => {
    getData()
  })

  const [order, setOrder] = useState<any>({})

  const labAndImgObj = useCallback((item) => {
    return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
  }, [])
  // 复制
  const handleCopy = (data: string) => {
    Taro.setClipboardData({
      data,
      success() {
        Taro.showToast({
          title: '复制成功',
        })
      },
    })
  }

  const { fetchData: cancelOrderApi } = CancelCutSampleOrder()

  const cancelOrder = async(id: number) => {
    const res = await cancelOrderApi({ id })
    if (res.success) {
      getData()
      alert.success('取消成功')
    }
    else {
      alert.error(res.msg)
    }
  }

  // 取消订单
  const handleCancel = () => {
    Taro.showModal({
      content: '确定取消该订单？',
      confirmColor: '#337fff',
      confirmText: '确认',
      success: (res) => {
        if (res.confirm) {
          cancelOrder(Number(router.params.id))
          console.log('用户点击确定')
        }
      },
    })
  }

  useEffect(() => {
    getData()
  }, [])

  const handleClickImagePreview = (imageList: any[], index: number) => {
    Taro.previewImage({
      current: formatUrl(imageList[index]),
      urls: imageList.map(item => formatUrl(item)),
    })
  }

  return <View className={styles.main} >
    <View className={styles.context}>
      <LayoutBlock circle customStyle={{ padding: '24rpx', marginTop: '24rpx' }}>
        <View className={styles.orderProcess}>订单进程</View>
        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
        <View className={styles.orderProcessBottom}>
          <Steps current={order.order_form?.[0].order_status === 5 ? 1 : 0} direction="vertical" customStyle={{ padding: '0' }}>
            {/*
                 申请中5 -> 已完成 6
                 申请中5 -> 已取消 3
                 申请中5 -> 已拒绝 4
            */}
            {
              order.order_form?.map((item, index) => {
                return <Step key={index} status={item.order_status === 4 ? 'error' : undefined} title={
                  <View className={classNames(styles['step-title'], item.order_status === order.order_form?.[0].order_status ? styles['current-status'] : null)}>
                    <Text className={styles['step-status']}>{item.order_status_name}</Text>
                    <Text>{formatDateTime(item.order_time)}</Text>
                  </View>
                } description={
                  <>
                    {
                      item.audit_remark && <View>{item.audit_remark}</View>
                    }
                    {
                      item.delivery_appendix_url
                          && <View className={styles.attachment}>
                            {
                              item.delivery_appendix_url?.map((url, index) => {
                                return <View className={styles['step-url-container']} key={index} onClick={() => handleClickImagePreview(item.delivery_appendix_url, index)}>
                                  <Image className={styles['step-url']} src={formatUrl(url)} lazyLoad mode="aspectFill" />
                                </View>
                              })
                            }
                          </View>
                    }
                  </>
                }
                />
              })
            }

          </Steps>
        </View>
      </LayoutBlock>
      <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
        <View className={styles.customerTop}>客户信息</View>
        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
        <View className={styles.customerBottom}>
          <Text>{order?.purchaser_name}</Text>
          <Text>{order?.phone}</Text>
          {/* 占位作用勿删除 */}
          <Text></Text>
        </View>
      </LayoutBlock>
      <LayoutBlock circle>
        <View className={styles.address_box}>

          <View className={styles.address_box_left}>
            <View className={styles.cirle}>
              <IconFont name="icon-dizhi1" size={60}></IconFont>
            </View>
          </View>
          <View className={styles.address_box_right}>
            <View className={styles.address}>{order?.province_name}{order?.city_name}{order?.district_name}{order?.address_detail}</View>
            <Divider direction="horizontal" customStyles={{ margin: '12px 0', marginTop: '6px' }}></Divider>
            <View className={styles.bottom}>
              <View className={styles.leftbottom}>
                <View className={styles.name}>{order.target_user_name}</View>
                <View className={styles.phone}>{order.target_user_phone}</View>
              </View>
              <View className={styles.reatName}>{order.shipment_mode_name}</View>
            </View>
          </View>
        </View>
      </LayoutBlock>
      {
        order.cut_sample_order_product_list?.map((item, index) => {
          return <LayoutBlock key={index} customStyle={{ padding: '24rpx', marginTop: '24rpx' }} circle customClassName={styles.layoutBlock}>
            <View className={styles.colorCardTop}>{formatHashTag(item.code, item.name)}</View>
            <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
            {
              item.product_colors?.map((mul) => {
                return (
                  <View className={styles.colorCardBottom} key={mul.product_color_id}>
                    <View className={styles.colorCardImage}>
                      <View className={styles.leftCont}>
                        <LabAndImg value={labAndImgObj(mul)} />
                      </View>
                    </View>
                    <View className={styles.rightCont}>
                      <View className={styles.rightCont__container}>
                        <View className={styles.rightCont__left}>
                          <View className={styles.rightCont__top}>
                            {`#${formatRemoveHashTag(mul.code)} ${mul.name}`}
                          </View>
                          <View className={styles.rightCont__bottom}>
                            {/* {
                              item.affiliation_product?.map((product_color, index) => {
                                return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color)}</Tag>
                              })
                            } */}
                          </View>
                        </View>
                        <View className={styles.rightCont__right}>
                    x{mul.color_num}份
                        </View>
                      </View>
                      <Divider direction="horizontal" customStyles={{ margin: '0' }}></Divider>
                    </View>
                  </View>
                )
              })
            }
            <View className={styles.paymentMethod}>快递到付</View>
          </LayoutBlock>
        })
      }

      <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
        <View className={styles.orderInfoTop}>订单信息</View>
        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
        <View className={styles.orderInfoDetail}>
          <Cell title="订单编号：" desc={
            <>
              <Text className={styles.orderInfoDetail__desc}>{order?.order_no}</Text>
              <Tag type="primary" size="small" plain circle onClick={() => handleCopy(order?.order_no)}>复制</Tag>
            </>
          }
          ></Cell>
          <Cell title="创建时间：" desc={formatDateTime(order?.create_time) || '暂无创建时间'}></Cell>
          <Cell title="业务员：" desc={order?.sale_user_name}></Cell>
        </View>
      </LayoutBlock>
      <LayoutBlock circle customStyle={{ padding: '24rpx' }}>
        <View className={styles.orderInfoTop}>备注信息</View>
        <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
        <View className={styles.remark}>{order?.order_remark || '暂无备注信息'}</View>
      </LayoutBlock>
    </View>
    <View className={styles.bottomBar}>
      {
        order.order_form?.[0].order_status === 5
          ? <NormalButton customClassName={styles.bottomBar__button} type="info" plain round onClick={handleCancel} >
          取消订单
          </NormalButton>
          : null
      }

    </View>
  </View>
}
export default SampleCuttingDetail