import React, { useEffect, useMemo, useState } from 'react'
import Taro, { useDidShow, useRouter } from '@tarojs/taro'
import { useSelector } from 'react-redux'
import { View, ScrollView, Image } from '@tarojs/components'
import Layout from '../../layout/index'
import Tab from '../../compents/tab/index'

import radio from '../../assets/radio.png'
import './index.scss'
import request from '../../util/request'

const addimg = (props) => {
    const router = useRouter()
    const { houseId, tagIds } = router.params
    const user = useSelector(state => state.user)

    const [pageState, setPageState] = useState('2')
    const [list, setList] = useState([])

    const [choiceList, setChoicelist] = useState([])


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

    const getImageList = () => {


        request({ url: '/taMetaImageTag', params: { tagIds: tagIds } }).then((res) => {
            const { records, ...page } = res.data.data

            const r = records.reduce((all, next) => all.some((atom) => atom.imageId == next.imageId) ? all : [...all, next], []);
            setList(r)
        })

    }

    const choiceImg = (value) => {
        console.log(value, '111')
        const t = choiceList.find(x => x.imageId == value.imageId)
        if (t) {
            setChoicelist(choiceList.filter(x => x.imageId != value.imageId))
        } else {
            setChoicelist([
                ...choiceList,
                value
            ])
        }
    }

    const onAddimg = (e) => {
        console.log(e, '111')
        if (choiceList.length > 0) {

            const data = choiceList.map(x => {
                return {
                    houseId,
                    image: x.image,
                    imageId:x.imageId,
                }
            })
            request({ url: '/taHouseSurround', method: 'post', data }).then((res)=>{
                Taro.showModal({
                    title: '添加成功',
                    content: '点击确认按钮，返回上级菜单',
                    showCancel: false,
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击确定')
        
                            Taro.navigateBack({
                                delta: 2
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消')
                        }
                    }
                })
               
            })
        }

    }


    return <View className='addimg'>


        <View >

            <View className='at-row at-row--wrap'>
                {list.map((x) => {
                    return <View className='at-col at-col-3 addimg-view-card' key={x.imageId}>
                        <View className='addimg-view-card-radio' onClick={() => choiceImg(x)}>
                            {choiceList.find(y => y.imageId == x.imageId) && <Image src={radio} style={{ width: '30rpx', height: '20rpx' }}></Image>}
                        </View>
                        <Image src={x.image} mode='aspectFit' style={{ width: '100%', height: '200rpx' }} ></Image>
                    </View>
                })}
                {/* {list.map((x) => {
                    return <View className='at-col at-col-4'>A</View>
                })} */}
            </View>
            <Tab value={['取消', `选择${choiceList.length}`]} pageState="3" onClick={[(e) => Taro.navigateBack({
                delta: 1
            }), (e) => onAddimg()]}></Tab>

        </View>


    </View>
}

export default addimg