import React, { useEffect } from "react";
import { Box } from "./styled";
import { Rate } from "antd";
import Image from "next/image";
import { JobDetail } from "../../api";
import pic1 from './assets/1.webp'
import pic2 from './assets/2.webp'
import pic3 from './assets/3.webp'
import pic4 from './assets/4.webp'
import pic5 from './assets/5.webp'
import pic6 from './assets/6.webp'
import pic7 from './assets/7.webp'
import pic8 from './assets/8.webp'
import pic9 from './assets/9.webp'
import Moment from 'moment';

const imgList = [
  pic1,
  pic2,
  pic3,
  pic4,
  pic5,
  pic6,
  pic7,
  pic8,
  pic9
]

const name = [
"浮生若梦",
"惜君嫣云",
"抹茶味儿的菇凉",
"清歌缈缦",
"清新雅致",
"呆到深处自然萌",
"各不打扰",
"无声飞雪",
"浅笑小倔强",
"乱了夏末蓝了海",
"初夏知鸣"]

interface EvaluateType {
  evaluateInfo: Array<JobDetail>;
}

export default function Evaluate(props: EvaluateType) {
  const { evaluateInfo } = props;
  
  let listVal:Array<JobDetail> = JSON.parse(JSON.stringify(evaluateInfo))
  listVal.map((item,index)=>{
    item.img = imgList[Math.floor(Math.random() * 9)]?.src
    item.name = name[Math.floor(Math.random() * 12)]
    console.log(Date.now() - (index * 100000));
    item.time = Date.now() - (index * 8e7)
  })
  
  return (
    <Box>
      {listVal?.map((item, i) => (
        <div key={item.id} className="item">
          <div className="item-user">
            <div className="item-user-image">
              <Image
                className="image"
                height={42}
                width={42}
                src={item.img ? item.img : ''}
                alt="#"
              />
            </div>
            <div className="item-user-info">
              <div className="item-user-info-name">{item.name}</div>
              <Rate style={{ height: 30 }} disabled defaultValue={item.star} />
            </div>
          </div>
          <div className="item-content">
            <div className="item-content-label">{item.content}</div>
            <div className="item-content-image">
              {item.contentImgs?.length ? item.contentImgs?.map((item) => (
                <div key={item} className="image-item">
                  <Image width={80} height={80} src={item} alt="error" />
                </div>
              )) : null }
            </div>
            <div className="item-content-time">{Moment(item.time).format('YYYY-MM-DD')}</div>
          </div>
        </div>
      ))}
    </Box>
  );
}
