import { ScrollView, Text, View } from '@tarojs/components'
import classNames from 'classnames'
import styles from './index.module.scss'
import Popup from '@/components/popup'
import LabAndImg from '@/components/LabAndImg'
import IconFont from '@/components/iconfont/iconfont'

export interface Param {
  show: boolean
  onClose?: () => void
}
export default (props: Param) => {
  const { show = false, onClose } = props
  return <View className={styles.main}>
    <Popup show={show} showTitle={false} onClose={onClose}>
      <View className={styles.header}>
        <Text>请选择色号剪样( 20 )</Text>
        <Text>剪样大小为A4，大约22cm*30cm</Text>
      </View>
      <View className={styles.color_list}>
        <ScrollView scrollY className={styles.scroll_view}>
          <View className={styles.color_list_con}>
            {new Array(20).fill('').map((item, index) => {
              return <View key={index} className={styles.item} >
                <View className={classNames(styles.item_color, styles.select_color)}>
                  <LabAndImg
                    value={{}}
                    round
                    name="001"
                  />
                  <View className={styles.icon}>
                    <IconFont name="icon-xuanzhongyanse" size={35} />
                  </View>
                </View>
                <View className={styles.item_name}>罗兰紫</View>
              </View>
            })}
          </View>
        </ScrollView>
      </View>
      <View className={styles.btns}>
        <View className={styles.cancel}>取消</View>
        <View className={styles.submit}>领取剪样(8)</View>
      </View>
    </Popup>
  </View>
}
