import React, { useEffect, useMemo, useState } from 'react'
// import { useEffect, useLayoutEffect, useReducer, useState, useContext, useRef, useCallback, useMemo } from '@tarojs/taro'
import Taro, { useDidShow, useShareAppMessage } from "@tarojs/taro";
import { useSelector, } from 'react-redux'
import { View, Input, Text, Image } from '@tarojs/components'
import Layout from '../../layout/index'
import Tab from '../../compents/tab/index'
import Container from '../../compents/container/index'
import locationicon from '../../assets/locationicon.png'
import Tags from '../../compents/tags/index'
import request from '../../util/request'
import NoData from '@/compents/NoData'
import './index.scss'

// Page({
//     data: {
//         text: 'init data',
//         array: [{ msg: '1' }, { msg: '2' }]
//     }
// })

const index = (props) => {



    let [arrList, setArrList] = useState({})
    const [labelList, setLabelList] = useState([])
    const [list, setList] = useState([])
    useEffect(() => {

        // console.log(page, 'page')

    }, [])

    useDidShow(() => {
        getMateTagGroupList()
    })


    const getMateTagGroupList = () => {
        request({ url: '/taMateTagGroup', params: { pageSize: 1, pageSize: 9999 } }).then((res) => {
            const { records, ...page } = res.data.data
            setList(records)
        })
    }
    const onTabClick = (e) => {
        console.log(e, '111')
        setUserRole(e)
    }

    const onLabelChange = (e, index) => {
          
        let newArrArrList={
            ...arrList,
            [index]: e
        }
        setArrList(newArrArrList)
        console.log(newArrArrList, 'arrList')
        let newArr = Object.values(newArrArrList).reduce((pre, cur) => {

            return pre.concat(cur)

        }, [])
        setLabelList(newArr)
        console.log(newArr, 'newArr')
        // console.log(e, index, 'onLabelChange')

        // arrList[index] = e
        // // const [arrList, setArrList] = useState([[],[],[]])
        // setLabelList(arrList.flat())

        // console.log(arrList.flat(), 'labelList')
    }


    const onClick = () => {
        

        const query = labelList.map(x=>x.tagId).join(',')
        console.log(query, '', 'eeee')
        Taro.navigateTo({
            url: `/pages/imglist/index?query=${query}`
        })
        // Taro.showModal({
        //     title: '修改成功',
        //     content: '点击确认按钮，返回上级菜单',
        //     showCancel: false,
        //     success: function (res) {
        //         if (res.confirm) {
        //             console.log('用户点击确定')

        //             Taro.navigateBack({
        //                 delta: 1
        //             })
        //         } else if (res.cancel) {
        //             console.log('用户点击取消')
        //         }
        //     }
        // })
    }

    return <View className='material'>




        <Layout>
            <NoData nodata={!list.length}>
            {
                list.map((item,index) => {
                    return <View className='material-card' key={index}>
                        <Text>{item.name}</Text>
                        <Tags list={item.taMateTagList} onChange={(e) => onLabelChange(e, index)} > </Tags>
                    </View>
                })
            }
            </NoData>

            {/* <View className='inputstyle-view'>
                <Text className='title'>入住人数</Text>
                <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
                    <Input placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
                </Container>
            </View>
            <View className='inputstyle-view'>
                <Text className='title'>入住日期</Text>
                <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
                    <Input placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
                </Container>
            </View>

            <View className='inputstyle-view'>
                <Text className='title'>离店日期</Text>
                <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
                    <Input placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
                </Container>
            </View> */}
        </Layout>
        {/* className='addhousetab' */}
        <Tab pageState='3' value={['取消', '开始查询']} onClick={[(e) => setPageState('2'), (e) => onClick(e)]}></Tab>
    </View>
}

export default index