import { Button, RichText, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import classnames from 'classnames'
import DesSwiper from './components/swiper'
import OrderCount from './components/orderCount'
import ShopCart from '@/components/shopCart'
import styles from './index.module.scss'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { formatHashTag, formatImgUrl } 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'

type item = { title: string; img: string; url: string; id: number }

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

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

  //判断是否是分享过来的参数
  const judgeParam = async () => {
    if (router.params.id) {
      setParams({ ...params, id: router.params.id })
    } else if (router.params.share) {
      analysisShortCode()
    }
  }

  //解析短码参数
  const { fetchData: fetchDataAnalysisShortCode } = AnalysisShortCodeApi()
  const analysisShortCode = async () => {
    let res = await fetchDataAnalysisShortCode({ md5_key: router.params.share })
    setParams({ id: res.data.product_id, share: res.data })
  }

  //获取购物车数据数量
  const { getShopCount, commonData } = useCommonData()

  useDidShow(() => {
    judgeParam()
    setShowCart(false)
    getShopCount()
  })

  useEffect(() => {
    if (params.id) {
      getProductDetail()
    }
  }, [params])

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

  useEffect(() => {
    if (productInfo.code) {
      getShortCode()
      setCollectStatus(() => productInfo.is_favorite)
    }
  }, [productInfo])

  //面料名称
  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 { 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(productInfo.texture_url || '/mall/share_img_01.png', '!w400')
    setSortCode({ ...userObj.sort_code, shareShortDetail: { title: productName as string, code: resDetail.md5_key, img: img } })
  }

  //授权手机号和下单
  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 openCollection = () => {
    if (productInfo.is_favorite) {
      delFavoriteProduct()
    } else {
      setCollectionShow(true)
    }
  }
  const onAdd = useCallback(
    async (val) => {
      let res = await addFavoritefetchData({ favorite_id: val.id, product_id: Number(params.id) })
      if (res.success) {
        alert.success('添加成功')
        setCollectStatus(true)
        getProductDetail()
      } else {
        alert.none(res.msg)
      }

      setCollectionShow(false)
    },
    [params],
  )
  const closeCollection = useCallback(() => {
    setCollectionShow(false)
  }, [])
  //取消收藏
  const { fetchData: delFavoriteProductFetchData } = DelFavoriteProductApi()
  const delFavoriteProduct = async () => {
    let res = await delFavoriteProductFetchData({ favorite_id: productInfo.favorite_id, product_id: [productInfo.id] })
    if (res.success) {
      setCollectStatus(false)
      getProductDetail()
      alert.none('已取消收藏')
    }
  }

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

  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.share}>
          <View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
          <View className={styles.text}>分享</View>
          <Button open-type='share' className={styles.shareBtn}></Button>
        </View>
        <View className={styles.collect} onClick={openCollection}>
          <View
            className={classnames(
              `iconfont ${collectStatus ? 'icon-shoucang-pressed' : 'icon-shoucang'}`,
              styles.miconfont,
              collectStatus && styles.collected,
            )}></View>
          <View className={styles.text}>收藏</View>
        </View>
      </View>
      <View className={styles.des_data}>
        <View className={styles.title}>详情参数</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.weight_density}</Text>
          </View>
          <View className={styles.des_text}>
            成分：<Text>{productInfo.component}</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={true} />
                </View>
                <View className={styles.item_name}>{item.code}</View>
              </View>
            )
          })}
        </View>
      </View>
      <View className={styles.product_detail}>
        <RichText nodes={html}></RichText>
      </View>
      <View className={styles.product_buy}>
        <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>
        {(!userInfo.adminUserInfo?.is_authorize_phone && (
          <View className={styles.buy_btn}>
            <Button className={styles.phoneBtn} 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} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id} />
      <ShopCart show={showCart} onClose={() => setShowCart(false)} />
      <AddCollection show={collectionShow} onAdd={onAdd} onClose={closeCollection} />
      <View className='common_safe_area_y'></View>
    </View>
  )
}