import { Image, RichText, Swiper, SwiperItem, View } from '@tarojs/components'
import Taro from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
import OrderCount from './components/shopCart';
import ShopCart from '@/components/shopCart';
import styles  from './index.module.scss'
import { useState } from 'react';
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 list = [
    {
        title:'数据', 
        img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d', 
        url:'', 
        id:1
    },
    {
        title:'数据', 
        img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d', 
        url:'', 
        id:2
    }
  ]

  const [showCart, setShowCart] = useState(false)
  const [showOrderCount, setShowOrderCount] = useState(true)

  const html = `<h1>这里是详情</h1>
    <div style="font-size:13px">你好啊啊</div>
    <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">
  `
  return (
    <View className={styles.main}>
      <DesSwiper list={list}/>
      <View className={styles.product_header}>
        <View className={styles.title}>
          <View className={styles.name}>0770# 21S单面平纹(食毛)</View>
          <View className={styles.des}>面料描述，疯狂描述。。。</View>
        </View>
        <View className={styles.share}>
          <View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
          <View className={styles.text}>分享</View>
        </View>
        <View className={styles.collect}>
          <View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
          <View className={styles.text}>收藏</View>
        </View>
      </View>
      <View className={styles.des_data}>
        <View className={styles.title}>详情参数</View>
        <View className={styles.con}>
          <View>编号:0770</View>
          <View>幅宽:160cm</View>
          <View>克重:160g</View>
          <View>成分:67.6%棉24%涤纶6.4%氨纶%氨纶</View>
        </View>
      </View>
      <View className={styles.product_color}>
        <View className={styles.title}>色号 (10)</View>
        <View className={styles.list}>
          {new Array(10).fill('').map(item => {
            return <View className={styles.item}>
              <View className={styles.item_color}>
                
              </View>
              <View className={styles.item_name}>1#</View>
            </View>
          })}
        </View>
      </View>
      <View className={styles.product_detail}>
          <RichText nodes={html}></RichText>
      </View>
      <View className={styles.product_buy}>
        <View className={styles.buy_cart}>
          <View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
          <View className={styles.text} onClick={() => setShowCart(true)}>购物车</View>
        </View>
        <View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
      </View>
      <OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)}/>
      <ShopCart show={showCart}  onClose={() => setShowCart(false)}/>
      <View className='common_safe_area_y'></View>
    </View>
  )
}