import React, { useState, useEffect}  from 'react'
import { View, Text, Image, Button } from '@tarojs/components'

import { AtFloatLayout , AtIcon, AtCurtain } from 'taro-ui'

import Taro from '@tarojs/taro'

import './index.scss'

import type { itemListType, RenderAtFloatLayoutRrops } from './data'

import { getBaby, getManual } from '../../api/user'

const itemList: itemListType[] = [
    // {
    //     label: '家长指导手册',
    //     desc: '家长指导手册',
    //     clickText: '领取礼品'
    // },
    {
        label: '逻辑狗老师',
        desc: '一对一辅导',
        clickText: '去添加'
    },
    // {
    //     label: '免费家长引导课',
    //     desc: '抓紧体验吧',
    //     clickText: '立即体验'
    // },
]

// 绑定信息时的弹层
const RenderAtFloatLayout: React.FC<RenderAtFloatLayoutRrops> = ({
    visible,
    closePop,
    openCurtainModal   
}) => {

    const [babyList, setBabyList] = useState<Record<string, any>>([])

    // 获取boby信息
    const GetBaby = async (): Promise<void> => {
      const data = await getBaby()
      console.log(data, '获取baby信息');
      setBabyList(data)
    }


    // 确定领取指导手册
    const GetManual = async () => {
      const $par = babyList.map( item => {
        //   
          return {
              id: item.id,
              goodsTypePdfId: Taro.getStorageSync('goodsTypePdfId')
          }
      })
      const data = await getManual($par)
      console.log(data);
      openCurtainModal()
    }

    useEffect( () => {
        GetBaby()
    }, [])

    return (
        <AtFloatLayout 
          isOpened={visible}
          onClose={closePop}
          className='AtFloatLayout'
        >
         <View className='header'>
            <View onClick={closePop}>取消</View>
            <View onClick={GetManual}>确定</View>
         </View>
         <View className='title'>
            <View className='line'></View>
            <Text className='text'>请选择宝宝</Text>
            <View className='line'></View>
        </View>
         <View className='desc'>领取礼品需要填写/选择宝贝信息</View>
         {/* 孩子信息 */}
         <View className='children'>
           {
               babyList?.map(item => (
                <View className='children-itme' key={item.id}>
                    <Image src={item.img} mode='aspectFill' />
                    <View className='baby-info'>
                        <View className='baby-name'>{item.name}</View>
                        <View className='baby-age'>{item.age.replace(/\-/, '')}</View>
                    </View>
                </View>
               ))
           }
         </View>
         {/* 添加按钮 */}
         <View className='add-btn'>
            <AtIcon size='23' color='rgb(108, 108, 108)' value='add-circle' />
            <Text className='placehoader'>添加宝宝信息</Text>
         </View>
      </AtFloatLayout>
    )
}


const ScanResult: React.FC = ({}) => {

    const [ visible, setVisible ] = useState<boolean>(false)

    const [curtainState, setCurtainState] = useState<boolean>(false)

    // 打开幕帘
    const openCurtainModal = () => setCurtainState(true)

    // 打开弹窗
    const openPop = (): void => setVisible(true)

    // 关闭弹窗
    const closePop = (): void => setVisible(false)

    // 渲染登录按钮
    const RenderButton =  (item: itemListType, index: number) => {
        
        // 打开客服会话 
        const handleContact = (e) => {
            console.log(e);
        }

        switch (index) {
            case 0:
                return  (
                    <Button className='button' onClick={openPop}  >
                        {item.clickText}
                    </Button>
                )
            case 1:
                
                return (
                    <Button className='button' openType='contact' onContact={handleContact} >
                        {item.clickText}
                    </Button>
                )
        }
    }

    // 渲染领取的指导手册
    const RenderItem = ()  => {

        return (
            <View className='renderItem-box'>
                {
                    itemList.map( (item, index) => (
                        <View className='item' key={item.label}>
                            <Image src={require(`../../assets/ScanResult/result${index}.png`)} />
                            <View className='text'>
                                <View className='label'>{item.label}</View>
                                <View className='desc'>{item.desc}</View>
                            </View>
                            {/* buttong */}
                            {
                                RenderButton(item, 1)
                            }
                        </View>
                    ))
                }
                
            </View>
        )
    }

    return (
        <View className='ScanResult'>
            <View className='result-bg'>
                <Image
                  onClick={openPop}
                  src={require('../../assets/ScanResult/reuslt-bg.png')}
                  mode='aspectFit'
                />
                <View className='result-text'>
                    <View> 逻辑狗正版验证通过!</View>
                  
                    <View> 北京市中德智慧教育文化有限公司 </View>
                </View>
            </View>
            {/* 渲染物品领取页 */}
            { RenderItem() }


            {/* 绑定信息的弹层 */}
            <RenderAtFloatLayout visible={visible} closePop={closePop} openCurtainModal={openCurtainModal} />

            {/* 领取成功弹层 */}
            <AtCurtain
              isOpened={curtainState}
              onClose={() => setCurtainState(false)}
              className='AtCurtain'
            >
                <Image 
                  mode='aspectFill'
                  className='get-success'
                  style='width: 349px;height: 408px'
                  src={require('../../assets/ScanResult/getSuccess.png')}
                />
        </AtCurtain>
        </View>
    )
}

export default ScanResult