import { DateOption, YTDateUtil, YTAddressSelectorDialog } from "basic"
import { UnitType } from "basic/src/main/ets/datepicker/DatePickerEnums"
import { promptAction } from "@kit.ArkUI"

@Component
export struct MainView {

  build() {
    Text('打开日历')
      .onClick(() => {
        //以下内容都可以不传 有默认值
        const date: Date = new Date()
        const yTDateDialog = new YTAddressSelectorDialog(this.getUIContext())
        let dateOption = new DateOption()//选项配置类
        dateOption.date = date//当前日期  默认今天
        dateOption.minDate = new Date(2000,0,1)//最小选择的日期 默认10年前的今天
        dateOption.maxDate = new Date(2048,12,30)//最大选择的日期 默认10年后的今天
        dateOption.unitType = UnitType.YEAR_MONTH_DAY//日期单位 默认年月日 可选年月、月日等组合
        dateOption.confirm = (date: Date) => {//确认选择回调函数
          console.log('确认', YTDateUtil.formatDate( date))
          promptAction.openToast({message:YTDateUtil.formatDate( date)})
        }
        dateOption.headerLeftBuilder = wrapBuilder(headerLeftBuilder)//头部左侧按钮 默认返回按钮
        dateOption.headerRightBuilder = wrapBuilder(headerLeftBuilder)//头部右侧按钮 默认确认按钮
        dateOption.highlightBackgroundColor = Color.Pink//选中高亮背景色
        dateOption.highlightBorderColor = Color.Red//选中高亮边框色
        dateOption.textStyle = {//日期文字样式
          font:{size:20,weight:400},
          color:Color.Gray
        }
        dateOption.selectedTextStyle = {//选中日期文字样式
          font:{size:25,weight:400},
          color:Color.Yellow
        }
        yTDateDialog.show(dateOption)//设置好配置之后打开日历的函数
      })
  }

}
@Builder
function headerLeftBuilder(){
  Image($r('app.media.app_icon'))
    .width(24)
}

@Builder
function headerRightBuilder(){
  Image($r("app.media.app_icon"))
    .width(24)
}