import { Text, View } from "@tarojs/components";
import { timeFormat } from "../../utils/index";

const CommentListItem = ({ commentData }) => {
  return (
    <>
      {commentData ? (
        <View className="flex items-start mb-[10px]" key={commentData.id}>
          <View className="flex items-center mr-[20rpx]">
            <View className="w-[70rpx] h-[70rpx] rounded-[50%] bg-[#000] overflow-hidden bg-[url('https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png')] bg-cover bg-center"></View>
          </View>
          <View>
            <View className="text-[12px] text-[#909090]">
              {commentData.nickname || commentData.username}
            </View>
            <View className="text-[12px] text-[#333] mt-[5px]">
              {commentData.content}
              <Text className="text-[12px] text-[#949494] ml-[5px]">
                {timeFormat(commentData.created_at)} 回复
              </Text>
            </View>
            <CommentListItem commentData={commentData.children} />
            {/* 子节点 */}
            {/* {commentData.children.length > 0 &&
              commentData.children.map((item) => {
                return (
                  <View>
                    <View className="flex items-start mt-[10px]">
                      <View className="flex items-center mr-[20rpx]">
                        <View className="w-[60rpx] h-[60rpx] rounded-[50%] bg-[#000] overflow-hidden bg-[url('https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png')] bg-cover bg-center"></View>
                      </View>
                      <View>
                        <View className="text-[12px] text-[#909090]">
                          {item.nickname || item.username}
                        </View>
                        <View className="text-[12px] text-[#333] mt-[5px]">
                          回复：
                          <Text className="text-[#909090]">
                            {item.parent_comment_nickname ||
                              item.parent_comment_username}
                          </Text>{" "}
                          {item.content}
                          <Text className="text-[12px] text-[#949494] ml-[5px]">
                            {timeFormat(item.created_at)} 回复
                          </Text>
                        </View>
                      </View>
                    </View>
                  </View>
                );
              })} */}
          </View>
        </View>
      ) : (
        <></>
      )}
    </>
  );
};

export default CommentListItem;
