1/**
2 * Copyright (c) 2022 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
16import Method from '../utils/Method';
17import LogUtils from '../utils/LogUtils';
18
19const TAG = 'FuncBtn';
20
21@Component
22export default struct FuncBtn {
23  @State btnType: string = '';
24  @State iconDisableUrl: string = '';
25  @State iconDefaultUrl: string = '';
26  @State iconActiveUrl: string = '';
27  @State @Watch('iconClassName') isActive: boolean = false;
28  @State @Watch('iconClassName') isDisable: boolean = false;
29  @State iconText: string = '';
30  @State textColor: string = 'rgb(255, 255, 255)';
31  btnClick: Function = null;
32
33  /**
34   * Button group picture change control
35   *
36   * @return {string} - return iconUrl
37   */
38  iconUrl() {
39    if (this.isDisable && this.iconDisableUrl) {
40      LogUtils.i(TAG, 'iconUrl this.isDisable : ' + this.isDisable);
41      return this.iconDisableUrl;
42    }
43    return this.isActive && this.iconDefaultUrl ? this.iconActiveUrl : this.iconDefaultUrl;
44  }
45
46  /**
47   * Button group  change picture
48   */
49  changeBtn(type) {
50    LogUtils.i(TAG, 'changeBtn type : ' + type);
51    const btnName = ['record', 'video', 'mute'];
52    if (Method.includes(btnName, type)) {
53      this.isActive = !this.isActive;
54    }
55  }
56
57  /**
58   * Button group style display
59   *
60   * @return {string} - Button group style display
61   */
62  iconClassName() {
63    if (this.isDisable) {
64      this.textColor = '#8c8c8c';
65      return 'disable';
66    }
67    if (this.isActive) {
68      this.textColor = '#007DFF';
69      return 'enable';
70    }
71    if (this.btnType == 'msg') {
72      this.textColor = '#8c8c8c';
73      return '';
74    }
75    this.textColor = 'rgb(255, 255, 255)';
76    LogUtils.i(TAG, 'iconClassName this.isDisable :');
77    return 'default';
78  }
79
80  aboutToAppear() {
81    LogUtils.i(TAG, 'aboutToAppear');
82    this.iconClassName();
83  }
84
85  build() {
86    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
87      Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
88        Column() {
89          Column() {
90            Image(this.iconUrl())
91          }
92          .width(30)
93          .height(30)
94
95          Column() {
96            Text(this.iconText)
97              .fontColor(this.textColor)
98              .fontSize(14)
99              .height(19.5)
100              .lineHeight(19.5)
101          }
102          .margin({ top: 2 })
103        }
104        .enabled(!this.isDisable)
105        .onClick(() => {
106          this.changeBtn(this.btnType)
107          this.btnClick(this.btnType);
108        })
109      }
110    }
111  }
112}