import prompt from '@ohos.prompt'

@Entry
@Component
struct StudyPage {
  @State message1: string = '123'
 @State message2: string = '456'
  // 注意点：build方法中只能有一个根节点，这个根节点必须是容器组件
  build() {
    // space间隙：给容器子元素添加间隙
    Column({ space: 10 }) {      // 列布局
      Text('这是一个文本组件这是一个文本组件这是一个文本组件')
        .fontSize(30)   // 字体大小
        .fontColor(Color.Yellow)    // 字体颜色
        .fontWeight(400)     // 字体的粗细
        .backgroundColor(Color.Red)
        .lineHeight(30)   // 行高
        .maxLines(1)  // 设置文本显示的最大行数
        .textOverflow({    // 设置文本内容超长时显示方式
          overflow: TextOverflow.MARQUEE
        })
        .decoration({    // 文本装饰线
          type: TextDecorationType.LineThrough,
          color: '#ff1a78d4',
          thicknessScale: 3
        })

      Row({ space: 10 }) {
        // 访问资源图片：$r、$rawfile
        // $r图片存放路径：resource/base/media
        // $rawfile图片存放路径  resource/rawfile
        Image($r('app.media.startIcon'))
          .width(100)
          .aspectRatio(1)   // 宽高比 宽/高

        Image($rawfile('img.png'))
          .width(100)

        // 访问网络图片：图片链接
        Image('https://gips3.baidu.com/it/u=1022347589,1106887837&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280')
          .width(100)
      }

      // 按钮组件
      Button('这是一个按钮1')
        .onClick(() => {
          // 日志打印
          console.log("message1：", this.message1)
          console.log("message2：", this.message2)
        })
      Button($r('app.string.button_name'))
        .fontSize(25)
        .fontColor('#ffe7e717')
        .fontWeight(FontWeight.Bold)
        .type(ButtonType.Normal)    // 按钮类型
        .borderRadius(10)   // 圆角
        .backgroundColor(Color.Orange)
        .onClick(() => {
          // 点击按钮添加弹窗
          // prompt.showToast({
          //   message: '这是一个提示窗'
          // })
          // 打印日志信息
          console.log('这是一个日志打印')
        })
        .stateEffect(false) // 设置是否开启按压态显示效果

      // 输入框
      TextInput({ placeholder: '这是一个输入框'})
        .type(InputType.Normal)
        .placeholderColor(Color.Red)    // 默认文本内容的颜色
        .fontColor('#ff293efd')
        .onChange((val) => {      // 监听事件
          this.message1 = val
        })

      TextInput({ placeholder: '请输入密码'})
        .type(InputType.Password)
        .onChange((val) => {
          this.message2 = val
        })


      // Row 容器
      Row({ space: 20 }) {
        Text(this.message1)
        Text(this.message2)
          .fontSize(25)
      }

      // 容器互相嵌套
      Row({ space: 10 }) {
        Column() {
          Text('文本测试1')
          Text('文本测试2')
          Text('文本测试3')
        }
        Column() {
          Text('文本测试4')
          Text('文本测试5')
        }
      }
    }
    // .backgroundColor($r('app.color.start_window_background'))    // 背景颜色
    .width('100%')
    .height('100%')
  }
}