interface DList {
  id:number
  textContent:string
  time:string
  icon?:Resource
  isPassed?:Boolean  //如果需要图片，以及滑动到当前需要放大启用
  isCurrent?:Boolean
}
@Component
export struct Time {
  @State list:DList[] = [
    {
      id: 1,
      textContent: '当列表项高度（宽度沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。',
      time:'15:01',
    },
    {
      id: 2,
      textContent: '当列表。',
      time:'15:02',
    },
    {
      id: 3,
      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)时，列表可以沿垂直。',
      time:'15:03',
    },
    {
      id: 4,
      textContent: '当列表项高度',
      time:'15:04',

    },
    {
      id: 5,
      textContent: '当列表项高度（宽',
      time:'15:04',
    },
    {
      id: 6,
      textContent: '当列表项高度（宽度）超出。',
      time:'15:04',


    },
    {
      id: 7,
      textContent: '当列表项高度（宽度）超出屏幕',
      time:'15:04',
    },
  ]
  aboutToAppear(): void {
    //TODO：
    //计算笔记的开始时间再开始排序
  }
  @State listLength:Number = this.list.length;
  build() {
    Column(){
      List(){
        ForEach(this.list,(item:DList)=>{
          ListItem(){
            Column({space:20}){
              Row({space:5}){
                Column(){

                 }.backgroundColor(Color.White)
                .borderRadius('50%')
                  .width(15)
                  .height(15)
                  .margin({right:item.isCurrent?8:5})
                Text(item.time)
              }.margin(-8)
              Column(){
                Row(){
                  Text(){
                    Span(item.textContent)
                    ImageSpan(item.icon)
                      .width(20)
                      .height(20)
                      .verticalAlign(ImageSpanAlignment.BOTTOM)
                  }
                }
                .padding({left:10})
              }
              .height(100)
              .border({width:{left:item.id == this.listLength ? 0 : 1 },color:'#dddddd'})
            }
            .alignItems(HorizontalAlign.Start)
            .width('80%')
            .margin({bottom:10})
          }
        })
      }.alignListItem(ListItemAlign.Center).scrollBar(BarState.Off)
    }
  }
}