1/*
2 * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16@Component
17export struct splitlayout {
18  @BuilderParam container: () => void
19  @State sizeValue: string = ''
20  @State areaWidth: number = 0
21  @State imageBackgroundColor: string = "#19000000"
22  @Prop mainImage: Resource = $r("app.media.music")
23  @Prop primaryText: string = "新歌推荐"
24  secondaryText?: string = "私人订制新歌精选站，为你推荐专属优质新歌;为你推荐专属优质新歌"
25  tertiaryText?: string = "每日更新"
26
27  build() {
28    Column() {
29      if (this.areaWidth < 600) {
30        GridRow({
31          columns: 4,
32          breakpoints: {
33            reference: BreakpointsReference.WindowSize },
34          direction: GridRowDirection.Row
35        }) {
36          GridCol({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }) {
37            Column() {
38              Stack({ alignContent: Alignment.Bottom }) {
39                Image(this.mainImage)
40
41                Column() {
42                  Text(this.primaryText)
43                    .textAlign(TextAlign.Center)
44                    .fontSize($r('sys.float.ohos_id_text_size_headline7'))
45                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
46                  Text(this.secondaryText)
47                    .textAlign(TextAlign.Center)
48                    .fontSize($r('sys.float.ohos_id_text_size_body2'))
49                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
50                    .margin({ top: 4, bottom: 8 })
51                  Text(this.tertiaryText)
52                    .textAlign(TextAlign.Center)
53                    .fontSize($r('sys.float.ohos_id_text_size_caption'))
54                    .fontColor($r('sys.color.ohos_id_color_text_secondary'))
55                    .margin({ bottom: 24 })
56                }
57                .alignItems(HorizontalAlign.Center)
58                .margin({
59                  left: $r('sys.float.ohos_id_max_padding_start'),
60                  right: $r('sys.float.ohos_id_max_padding_end'), })
61              }
62              .height('34%')
63              .width('100%')
64
65              Column() {
66                this.container()
67              }
68              .height('66%')
69              .width('100%')
70            }
71          }
72        }
73      } else if (600 < this.areaWidth && this.areaWidth < 840) {
74        // 形态二
75        GridRow({
76          columns: 8,
77          breakpoints: {
78            reference: BreakpointsReference.WindowSize },
79          direction: GridRowDirection.Row
80        }) {
81          GridCol({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }) {
82            Column() {
83              Row() {
84                Image(this.mainImage)
85                  .margin({ left: 96, right: 36 })
86                  .height('60%')
87                  .width('20%')
88                Column() {
89                  Text(this.primaryText)
90                    .fontSize($r('sys.float.ohos_id_text_size_headline7'))
91                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
92                  Text(this.secondaryText)
93                    .fontSize($r('sys.float.ohos_id_text_size_body2'))
94                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
95                    .margin({ top: 4, bottom: 8 })
96                  Text(this.tertiaryText)
97                    .fontSize($r('sys.float.ohos_id_text_size_caption'))
98                    .fontColor($r('sys.color.ohos_id_color_text_secondary'))
99                }
100                .alignItems(HorizontalAlign.Start)
101                .margin({ right: 96 })
102              }
103              .backgroundColor(this.imageBackgroundColor)
104              .height('34%')
105
106              Column() {
107                this.container()
108              }
109              .height('66%')
110            }
111
112          }
113        }
114
115      } else if (this.areaWidth > 840) {
116        GridRow({
117          columns: 12,
118          breakpoints: {
119            reference: BreakpointsReference.WindowSize },
120          direction: GridRowDirection.Row
121        }) {
122          GridCol({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }) {
123            Column() {
124              Image(this.mainImage)
125                .height('17%')
126                .width('34%')
127                .margin({ bottom: 36 })
128              Text(this.primaryText)
129                .textAlign(TextAlign.Center)
130                .fontSize($r('sys.float.ohos_id_text_size_headline7'))
131                .fontColor($r('sys.color.ohos_id_color_text_primary'))
132                .margin({ left: 48, right: 48 })
133              Text(this.secondaryText)
134                .textAlign(TextAlign.Center)
135                .fontSize($r('sys.float.ohos_id_text_size_body1'))
136                .fontColor($r('sys.color.ohos_id_color_text_primary'))
137                .margin({ top: 4, bottom: 8, left: 48, right: 48 })
138              Text(this.tertiaryText)
139                .textAlign(TextAlign.Center)
140                .fontSize($r('sys.float.ohos_id_text_size_body2'))
141                .fontColor($r('sys.color.ohos_id_color_text_secondary'))
142                .margin({ bottom: 24, left: 48, right: 48 })
143            }
144            .height('100%')
145            .backgroundColor(this.imageBackgroundColor)
146            .justifyContent(FlexAlign.Center)
147            .alignItems(HorizontalAlign.Center)
148          }
149          .height('100%')
150
151          GridCol({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }) {
152            this.container()
153          }
154
155        }
156      }
157    }
158
159    .onAreaChange((oldValue: Area, newValue: Area) => {
160      console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
161      this.sizeValue = JSON.stringify(newValue)
162      this.areaWidth = parseInt(newValue.width.toString(), 0);
163      console.info(`pingAce: on area change, oldValue is` + this.areaWidth)
164      console.info(`pingAce: on area change, oldValue is` + parseInt(newValue.height.toString(), 0))
165    })
166  }
167}
168