import { Button, RichText, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import classnames from 'classnames'
import { useCallback, useEffect, useMemo, useState } from 'react'
import DesSwiper from './components/swiper'
import OrderCount from './components/orderCount'
import styles from './index.module.scss'
import FeaturePopup from './components/feature'
import ShopCart from '@/components/shopCart'
import { formatHashTag, formatImgUrl, formatPriceDiv, formatRemoveHashTag } from '@/common/fotmat'
import { GetProductDetailApi } from '@/api/material'
import useLogin from '@/use/useLogin'
import { AnalysisShortCodeApi, GetShortCodeApi } from '@/api/share'
import { SHARE_SCENE } from '@/common/enum'
import useUserInfo from '@/use/useUserInfo'
import LabAndImg from '@/components/LabAndImg'
import { alert } from '@/common/common'
import AddCollection from '@/components/addCollection'
import { AddFavoriteApi, DelFavoriteProductApi } from '@/api/favorite'
import useCommonData from '@/use/useCommonData'
import { IMG_CND_Prefix } from '@/common/constant'
import MoveBtn from '@/components/moveBtn'

interface item { title: string; img: string; url: string; id: number }

interface Params {
  list?: item[]
  swiperOnClick?: (val: item) => void
  style?: Object
}
const Details = (props: Params) => {
  const { getPhoneNumber, userInfo } = useLogin()

  // 获取参数(有两种参数：1.商品id, 2.页面分享)
  const router = useRouter()
  const [params, setParams] = useState({ id: '', share: null })

  // 解析短码参数
  const { fetchData: fetchDataAnalysisShortCode } = AnalysisShortCodeApi()
  const analysisShortCode = async() => {
    const res = await fetchDataAnalysisShortCode({ md5_key: router.params.share })
    setParams({ id: res.data.product_id, share: res.data })
  }
  // 判断是否是分享过来的参数
  const judgeParam = async() => {
    if (router.params.id) {
      setParams({ ...params, id: router.params.id })
    }
    else if (router.params.share) {
      analysisShortCode()
    }
  }
  // 获取购物车数据数量
  const { getShopCount, commonData } = useCommonData()

  // 获取数据
  const [productInfo, setProductInfo] = useState<any>({})
  const { fetchData } = GetProductDetailApi()
  const getProductDetail = async() => {
    const { data } = await fetchData({ id: params.id })
    setProductInfo(data)
    Taro.stopPullDownRefresh()
  }

  // 面料名称
  const productName = useMemo(() => {
    return formatHashTag(productInfo.code, productInfo.name)
  }, [productInfo])

  const [showCart, setShowCart] = useState(false)
  const [showOrderCount, setShowOrderCount] = useState(false)
  // const html = `
  //   <img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
  // `
  const html = ''

  const shareImg = useMemo(() => {
    const data = productInfo.texture_url ? productInfo.texture_url.toString().split(',') : []
    const str = data.length > 0 ? data[0] : '/mall/share_img_01.png'
    return formatImgUrl(str, '!w400')
  }, [productInfo])

  const { setSortCode, userInfo: userObj } = useUserInfo()
  // 详情页获取分享短码
  const { ShareDetail } = SHARE_SCENE
  const { fetchData: fetchDataShortCode } = GetShortCodeApi()
  const getShortCode = async() => {
    const { data: resDetail } = await fetchDataShortCode({
      share_user_id: userObj.adminUserInfo.user_id,
      type: ShareDetail.value,
      product_id: parseInt(params.id),
    })
    const img = formatImgUrl(shareImg, '!w400')
    setSortCode({ ...userObj.sort_code, shareShortDetail: { title: productName as string, code: resDetail.md5_key, img } })
  }
  useDidShow(() => {
    judgeParam()
    setShowCart(false)
    getShopCount()
  })

  useEffect(() => {
    if (params.id) {
      getProductDetail()
    }
  }, [params])
  // 授权手机号和下单
  const placeOrder = async(status = 'to_phone', e: any = {}) => {
    if (!productInfo.id) { return false }
    if (status == 'to_phone') {
      if (!e.detail.code) { return alert.error('请授权手机号') }
      try {
        await getPhoneNumber(e.detail.code)
      }
      catch (msg) {
        Taro.showToast({
          icon: 'none',
          title: msg,
        })
        return false
      }
    }
    setShowOrderCount(true)
  }

  // 收藏功能
  const [collectStatus, setCollectStatus] = useState(false)
  const [collectionShow, setCollectionShow] = useState(false)
  const { fetchData: addFavoritefetchData } = AddFavoriteApi()

  const onAdd = useCallback(
    async(val) => {
      const res = await addFavoritefetchData({ favorite_id: val.id, product_id: Number(params.id) })
      if (res.success) {
        alert.none('收藏成功')
        setCollectStatus(true)
        getProductDetail()
      }
      else {
        alert.none(res.msg)
      }

      setCollectionShow(false)
    },
    [params],
  )

  useEffect(() => {
    if (productInfo.code) {
      getShortCode()
      setCollectStatus(() => productInfo.is_favorite)
    }
  }, [productInfo])
  const closeCollection = useCallback(() => {
    setCollectionShow(false)
  }, [])
  // 取消收藏
  const { fetchData: delFavoriteProductFetchData } = DelFavoriteProductApi()
  const delFavoriteProduct = async() => {
    const res = await delFavoriteProductFetchData({ favorite_id: productInfo.favorite_id, product_id: [productInfo.id] })
    if (res.success) {
      setCollectStatus(false)
      getProductDetail()
      alert.none('已取消收藏')
    }
  }
  const openCollection = () => {
    if (productInfo.is_favorite) {
      delFavoriteProduct()
    }
    else {
      setCollectionShow(true)
    }
  }
  // 页面下拉刷新
  usePullDownRefresh(() => {
    getProductDetail()
  })

  const [showPopup, setshowPopup] = useState(false)

  return (
    <View className={styles.main}>
      <DesSwiper list={productInfo.texture_url ? productInfo.texture_url.toString().split(',') : []} />
      <View className={styles.product_header}>
        <View className={styles.title}>
          {productInfo.code && <View className={styles.name}>{productName}</View>}
          <View className={styles.des}>{productInfo.describe}</View>
        </View>
        <View className={styles.collect} onClick={openCollection}>
          <View
            className={classnames(
              `iconfont ${collectStatus ? 'icon-shoucangchenggong' : 'icon-dianjishoucang'}`,
              styles.miconfont,
              collectStatus && styles.collected,
            )}
          ></View>
          <View className={styles.text}>收藏</View>
        </View>
        <View className={styles.share}>
          <View className={classnames('iconfont icon-fenxiangshangpin', styles.miconfont)}></View>
          <View className={styles.text}>分享</View>
          <Button open-type="share" className={styles.shareBtn}></Button>
        </View>
      </View>
      <View className={styles.des_data}>
        <View className={styles.flexBox}>
          <View className={styles.title}>商品参数</View>
          {
            productInfo.is_instruct && <View className={styles.flexRight} onClick={() => setshowPopup(true)}>{'特色百科 >'}</View>
          }
        </View>
        <View className={styles.con}>
          {/* <View className={styles.des_text}>
            编号：<Text>{productInfo.code}</Text>
          </View> */}
          <View className={styles.des_text}>
            幅宽：<Text>{productInfo.width}</Text>
          </View>
          <View className={styles.des_text}>
            工艺：<Text>{productInfo.craft}</Text>
          </View>
          <View className={styles.des_text}>
            空差：<Text>{productInfo.weight_error_discount / 1000}KG</Text>
          </View>
          <View className={styles.des_text}>
            克重：<Text>{productInfo.weight_density}</Text>
          </View>
          <View className={styles.des_text}>
            成分：<Text>{productInfo.component}</Text>
          </View>
          <View className={styles.des_text}>
            纸筒：<Text>{productInfo.tube / 1000}KG</Text>
          </View>
          <View className={styles.des_text}>
            出米数：<Text>{productInfo.length_to_weight_rate / 100}</Text>
          </View>
          <View className={styles.des_text}>
            开单减空差：<Text>{productInfo.weight_error / 1000}KG</Text>
          </View>
        </View>
      </View>
      <View className={styles.product_color}>
        <View className={styles.title}>色号信息 ({productInfo?.product_color_list?.length})</View>
        <View className={styles.list}>
          {productInfo?.product_color_list?.map((item) => {
            return (
              <View key={item.id} className={styles.item}>
                <View className={styles.item_color}>
                  <LabAndImg
                    value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }}
                    showStatus
                    round
                    name={formatRemoveHashTag(item.code)}
                  />
                </View>
                <View className={styles.item_name}>{item.name}</View>
                <View className={styles.bulk_price}>{formatPriceDiv(item.bulk_price)}/Kg</View>
              </View>
            )
          })}
        </View>
      </View>
      <View className={styles.product_detail}>
        <RichText nodes={html}></RichText>
      </View>
      <View className={styles.product_buy}>
        <View className={styles.icon_btn}>
          <View className={styles.customer_service}>
            <View className={classnames('iconfont icon-kefu', styles.miconfont)}></View>
            <View className={styles.text}>
              询货/咨询
              <Button
                className={styles.wxBtn}
                openType="contact"
                sendMessageImg={shareImg}
                sendMessageTitle={productName}
                showMessageCard
                sendMessagePath={`/pages/details/index?id=${productInfo.id}`}
              ></Button>
            </View>
          </View>
          <View className={styles.buy_cart} onClick={() => setShowCart(true)}>
            <View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
            <View className={styles.text}>购物车</View>
            {commonData.shopCount > 0 && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
          </View>
        </View>

        {(!userInfo.adminUserInfo?.is_authorize_phone && (
          <View className={styles.buy_btn}>
            <Button className={styles.wxBtn} open-type="getPhoneNumber" onGetPhoneNumber={e => placeOrder('to_phone', e)}></Button>
            选购商品
          </View>
        )) || (
          <View className={styles.buy_btn} onClick={() => placeOrder('to_order')}>
            选购商品
          </View>
        )}
      </View>
      <OrderCount show={showOrderCount} is_first_login={productInfo.is_first_login} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id} />
      <ShopCart show={showCart} onClose={() => setShowCart(false)} />
      <AddCollection show={collectionShow} onAdd={onAdd} onClose={closeCollection} />
      <FeaturePopup showPopup={showPopup} closePopup={() => setshowPopup(false)} productName={productName} productIds={Number(params?.id)}></FeaturePopup>
      <View className="common_safe_area_y"></View>
    </View>
  )
}

export default Details