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 { BaseElement, element } from '../../../base-ui/BaseElement';
17import LitSwitch from '../../../base-ui/switch/lit-switch';
18import '../../../base-ui/select/LitAllocationSelect';
19
20import '../../../base-ui/switch/lit-switch';
21import { SpXPowerRecordHtml } from './SpXPowerRecord.html';
22import { LitSearch } from '../trace/search/Search';
23import { LitSelectV } from '../../../base-ui/select/LitSelectV';
24import { SpApplication } from '../../SpApplication';
25
26@element('sp-xpower')
27export class SpXPowerRecord extends BaseElement {
28    private xpowerSwitch: LitSwitch | undefined | null;
29    private configType: HTMLDivElement | undefined | null;
30    private typeSelect: LitSelectV | undefined | null;
31    private sp: SpApplication | undefined;
32    private inputEvent: HTMLInputElement | undefined;
33
34    get recordXPower(): boolean {
35        return this.xpowerSwitch!.checked;
36    }
37
38    initElements(): void {
39        this.initRecordXpowerConfig();
40        this.sp = document.querySelector('sp-application') as SpApplication;
41        this.typeSelect = this.shadowRoot?.querySelector<LitSelectV>("lit-select-v[title='MessageType']");
42        this.inputEvent = this.typeSelect!.shadowRoot?.querySelector('input') as HTMLInputElement;
43        this.xpowerSwitch = this.shadowRoot?.querySelector('.xpower-switch') as LitSwitch;
44        let xpowerConfigList = this.shadowRoot?.querySelectorAll<HTMLDivElement>('.xpower-config-top');
45        this.xpowerSwitch.addEventListener('change', () => {
46            let configVisibility = 'none';
47            if (this.xpowerSwitch?.checked) {
48                configVisibility = 'block';
49            }
50            if (xpowerConfigList) {
51                xpowerConfigList!.forEach((configEl) => {
52                    configEl.style.display = configVisibility;
53                });
54            }
55        });
56
57    }
58
59    private initRecordXpowerConfig(): void {
60        this.configType = this.shadowRoot?.querySelector('.xpower-config-top');
61        xpowerConfigList.forEach((config) => {
62            switch (config.type) {
63                case 'select-multiple':
64                    this.configTypeBySelectMultiple(config, this.configType!);
65                    break;
66                default:
67                    break;
68            }
69        })
70    }
71
72    private configTypeBySelectMultiple(config: unknown, recordXpowerDiv: HTMLDivElement): void {
73        let html = '';
74        //@ts-ignore
75        let placeholder = config.selectArray[0];
76        //@ts-ignore
77        if (config.title === 'MessageType') {
78            placeholder = 'NONE';
79        }
80        html += `<lit-select-v default-value="" rounded="" class="record-type-select config" 
81    mode="multiple" canInsert="" title="${
82            //@ts-ignore
83            config.title
84            }" rounded placement = "bottom" placeholder="${placeholder}">`;
85        //@ts-ignore
86        config.selectArray.forEach((value: string) => {
87            html += `<lit-select-option value="${value}">${value}</lit-select-option>`;
88        });
89        html += '</lit-select-v>';
90        recordXpowerDiv.innerHTML = recordXpowerDiv.innerHTML + html;
91    }
92
93    getXpowerConfig(): string | undefined {
94        let recordXpowerConfigVal = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
95        let xpowerConfig: string = ''
96        recordXpowerConfigVal!.forEach((value) => {
97            xpowerConfig = this.getXpowerConfigData(value, xpowerConfig);
98        });
99        return xpowerConfig;
100    }
101
102    private getXpowerConfigData(value: HTMLElement, xpowerConfig: string): string {
103        switch (value.title) {
104            case 'MessageType':
105                xpowerConfig = this.xpowerConfigByTypeList(xpowerConfig, value as LitSelectV);
106                break;
107        }
108        return xpowerConfig;
109    }
110
111    private xpowerConfigByTypeList(xpowerConfig: string, selectValue: LitSelectV): string {
112        xpowerConfig = selectValue.value
113        return xpowerConfig;
114    }
115
116    typeSelectMousedownHandler = (): void => {
117        this.typeSelect!.dataSource([], '');
118    };
119
120    typeSelectClickHandler = (): void => {
121        this.typeSelect?.dataSource(['REAL_BATTERY', 'THERMAL_REPORT'], '');
122    };
123
124    connectedCallback(): void {
125        this.inputEvent?.addEventListener('mousedown', this.typeSelectMousedownHandler);
126        this.inputEvent?.addEventListener('click', this.typeSelectClickHandler);
127    }
128
129    disconnectedCallback(): void {
130        super.disconnectedCallback();
131        this.inputEvent?.removeEventListener('mousedown', this.typeSelectMousedownHandler);
132        this.inputEvent?.removeEventListener('click', this.typeSelectClickHandler);
133    }
134
135    attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
136        super.attributeChangedCallback(name, oldValue, newValue);
137    }
138
139    initHtml(): string {
140        return SpXPowerRecordHtml;
141    }
142}
143
144const xpowerConfigList = [
145    {
146        title: 'MessageType',
147        des: 'Select MessageType',
148        hidden: true,
149        type: 'select-multiple',
150        selectArray: [''],
151    }
152]
153