import {useEffect, useState} from "react";
import {useRouter} from '@tarojs/taro'
import {CellGroup, Cell, Loading, Avatar} from '@nutui/nutui-react-taro'
import {View,Text} from '@tarojs/components'
import {ArrowRight} from '@nutui/icons-react-taro'
import {getShopChatMessage, updateShopChatMessage} from "@/api/shop/shopChatMessage";
import {ShopChatMessage} from "@/api/shop/shopChatMessage/model";
import navTo from "@/utils/common";

const AddMessageDetail = () => {
  const {params} = useRouter();
  const [loading, setLoading] = useState<boolean>(true)
  const [item, setItem] = useState<ShopChatMessage>()

  const reload = () => {
    const id = params.id ? Number(params.id) : undefined
    if (id) {
      getShopChatMessage(id).then(data => {
        setItem(data)
        setLoading(false)
         updateShopChatMessage({
          ...data,
          status: 1
        }).then(() => {
           console.log('设为已读')
         })
      })
    }
  }

  useEffect(() => {
    reload()
  }, []);

  if (loading) {
    return <Loading className={'px-2'}>加载中</Loading>
  }

  return (
    <>
      <Cell style={{
        display: 'none'
      }} title={item?.formUserId ? (
        <View className={'flex items-center'}>
          <Avatar src={item.formUserAvatar}/>
          <View className={'ml-2 flex flex-col'}>
            <Text>{item.formUserAlias || item.formUserName}</Text>
            <Text className={'text-gray-300'}>{item.formUserPhone}</Text>
          </View>
        </View>
      ) : '选择发送对象'} extra={(
        <ArrowRight color="#cccccc" className={item ? 'mt-2' : ''} size={item ? 20 : 18}/>
      )}
            onClick={() => navTo(`/dealer/team/index`, true)}/>
      <CellGroup>
        <Cell title={'发布人'} extra={item?.formUserAlias || item?.formUserName}/>
        <Cell title={'创建时间'} extra={item?.createTime}/>
        <Cell title={'状态'} extra={
          item?.status === 0 ? '未读' : '已读'
        }/>
        {/*<Cell title={(*/}
        {/*  <>*/}
        {/*    <Text>{'消息内容：'}</Text>*/}
        {/*    <Text>{item?.content}</Text>*/}
        {/*  </>*/}
        {/*)} />*/}
      </CellGroup>
      <CellGroup>
        <Cell title={(
          <Text>{item?.content}</Text>
        )} />
      </CellGroup>
    </>
  );
};

export default AddMessageDetail;