import React, { useEffect, useMemo, useState, useRef } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'
import { View, Text, Input, Image } from '@tarojs/components'
import ContainerLayout from '../../compents/container/index'
import Tab from '../../compents/tab/index'
import Layout from '../../layout/index'

const house = (props) => {

  const [list, setList] = useState([])
  const [radioHouse, setRadioHouse] = useState()

  const ref = useRef();
  useEffect(() => {
    ref.current = 3;
  });



  const radioHouseState = useMemo(() => props.radioHouseState, [props.radioHouseState])
  wx.setNavigationBarTitle({
    title: '民宿房源管理'
  })
  console.log(props, radioHouseState)
  useEffect(() => {
    setList([
      {
        id: 1,
        name: 'zhou',
        phone: '177',
        user: {
          name: '张三',
          phone: '17777777777',
          wxid: 'hhh',
          number: '3'
        }
      },
      {
        id: 2,
        name: 'zhou',
        phone: '177',
        user: {
          name: '张三',
          phone: '17777777777',
          wxid: 'hhh',
          number: '3',
          user: {
            name: '张三',
            phone: '17777777777',
            wxid: 'hhh',
            number: '3'
          }
        }
      },
      {
        id: 3,
        name: 'zhou',
        phone: '177',
        user: {
          name: '张三',
          phone: '17777777777',
          wxid: 'hhh',
          number: '3',
          user: {
            name: '张三',
            phone: '17777777777',
            wxid: 'hhh',
            number: '3'
          }
        }
      }
    ])
  }, [])

  const onDelete = (row) => {
    Taro.showModal({
      title: '确定删除该标签组吗？',
      content: row.user.name,
      cancelColor:'#d2d2d2',
                confirmColor:"#274191",
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          Taro.showModal({
            title: `改标签组有${row.user.number}个标签仍在使用。请先清空标签，再删除标签组`,
   showCancel:false,
            // cancelColor:'#d2d2d2',
                      confirmColor:"#274191",
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
      
               
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
         
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }




  return <View className='account'>
    <Layout>
      {list.map((x, index) => {
        return <View className='account-view'>
          <Text className='account-view-title'>标签组编号：{index + 1}</Text>
          <ContainerLayout className='account-view-card'>
            <View className='top' onClick={() => { if (!radioHouseState) Taro.navigateTo({ url: `/pages/house/index?=${x.id}` }) }}>
              <View>标签组名称：{x.user.name}</View>
              <View>房源数：{x.user.name}</View>

            </View>
            <View className='bottom'>
              <Text onClick={() => { Taro.navigateTo({ url: `/pages/label/edit/index?=${x.id}` }) }}>编辑</Text>
              <Text onClick={()=>onDelete(x)}>删除</Text>
            </View>
          </ContainerLayout>

        </View>

      })}
    </Layout>
    {/* onClick={(e)=>(e) */}
    <Tab value={['+新增标签组']} color='#ffffff' onClick={() => { Taro.navigateTo({ url: `/pages/label/edit/index` }) }} ></Tab>
  </View>
}

export default house