import { Input, ScrollView, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
// import BottomBtns from '@/components/BottomBtns'
import { formatDateTime, formatPriceDiv } from '@/common/format'
import IconFont from '@/components/iconfont/iconfont'
import UploadImage from '@/components/uploadImage'

interface Params {
  title?: string // 传入的名称
  require?: boolean // 是否显示必须选填的内容图标
  isInput?: boolean // 是否显示输入框
  inputValue?: string // 输入框的值
  inputType?: any // 输入框类型
  getInput?: (any) => void // 输入框回调
  showScan?: boolean // 是否显示扫描图标
  placeholderFont?: string // 输入框默认文本
  showMore?: boolean // 是否显示更多图标
  disabled?: boolean // 是否输入框禁止
  onlyRead?: boolean // 图片是否只读
  showPic?: boolean // 是否显示图片组件
  getImageList?: (any) => void // 上传图片回调
  PicList?: [] // 默认图片列表
  styleNone?: boolean // 根据不同的栏目调整样式
  getScan?: (any) => void // 扫描
  navTo?: () => void // 跳转选择
  showSizeFont?: boolean // 展示金额的大写
  bigMoney?: any // 展示的大写金额,
  isOpen?: boolean // 是否展开状态
}
const Form = (pros: Params) => {
  return (
    <>
      {
        pros.isOpen && <View className={styles.itemBox}
          style={{ justifyContent: `${pros.styleNone ? 'space-between' : ''}`, alignItems: `${pros.styleNone ? 'center' : ''}` }}
        >
          <View className={styles.itemLeft}>
            <View className={styles.finkFlex}>
              <View className={styles.itemTitle}>{pros.title}</View>
              {
                pros.require && <Text className={styles.xing}>*</Text>
              }
            </View>
            {
              pros.showSizeFont && <View className={styles.finkFont}>展示大小写</View>
            }
          </View>
          {
            pros.showPic
                        && <View className={styles.bigPic}>
                          <UploadImage onChange={pros.getImageList} defaultList={pros.PicList} onlyRead={pros.onlyRead} />
                        </View>
          }
          {
            !pros.showPic && <View className={styles.itemRight} onClick={() => pros.navTo?.()}
              style={{
                justifyContent: `${!pros.showSizeFont ? 'space-between' : ''}`,
                alignItems: `${!pros.showSizeFont ? 'center' : ''}`,
                display: `${!pros.showSizeFont ? 'flex' : ''}`,
              }}
            >
              <View className={styles.rightFlex}>
                {
                  pros.isInput && <Input
                    disabled={pros.disabled}
                    placeholder={pros.placeholderFont}
                    value={pros.inputValue}
                    className={styles.inputStyle}
                    type={pros.inputType}
                    placeholderStyle={styles.placeholderStyle}
                    onBlur={e => pros.getInput?.(e.detail.value)}
                  ></Input>
                }
              </View>

              {/* <View className={styles.iconFlex}></View> */}
              {
                pros.showMore && <IconFont name="icon-chakanquanbukehu" size={50} color="#000000"></IconFont>

              }
              {
                pros.showScan && <View className={styles.shu}></View>
              }
              {
                pros.showScan && <View onClick={e => pros.getScan?.(e)}><IconFont name="icon-saomiao" size={50} color="#337FFF"></IconFont></View>
              }
              {
                pros.showSizeFont && <View className={styles.assginFont}>{pros.bigMoney}</View>
              }
            </View>
          }

        </View>
      }
    </>
  )
}
export default memo(Form)
