148f512ceSopenharmony_ci<!DOCTYPE html>
248f512ceSopenharmony_ci<html lang="en">
348f512ceSopenharmony_ci
448f512ceSopenharmony_ci<head>
548f512ceSopenharmony_ci    <meta charset="UTF-8">
648f512ceSopenharmony_ci    <title>Report-Diff</title>
748f512ceSopenharmony_ci    <style>
848f512ceSopenharmony_ci        * {
948f512ceSopenharmony_ci            box-sizing: border-box;
1048f512ceSopenharmony_ci        }
1148f512ceSopenharmony_ci
1248f512ceSopenharmony_ci        html,
1348f512ceSopenharmony_ci        body {
1448f512ceSopenharmony_ci            height: 100%;
1548f512ceSopenharmony_ci            margin: 0;
1648f512ceSopenharmony_ci            padding: 0;
1748f512ceSopenharmony_ci        }
1848f512ceSopenharmony_ci
1948f512ceSopenharmony_ci        lit-tabs {
2048f512ceSopenharmony_ci            padding-top: 10px;
2148f512ceSopenharmony_ci        }
2248f512ceSopenharmony_ci
2348f512ceSopenharmony_ci        lit-tabpane {
2448f512ceSopenharmony_ci            padding: 20px;
2548f512ceSopenharmony_ci        }
2648f512ceSopenharmony_ci    </style>
2748f512ceSopenharmony_ci</head>
2848f512ceSopenharmony_ci
2948f512ceSopenharmony_ci<body>
3048f512ceSopenharmony_ci    <script type="module">
3148f512ceSopenharmony_ci        window.getShadowRoot = (el) => {
3248f512ceSopenharmony_ci            if (el.parentNode) {
3348f512ceSopenharmony_ci                return window.getShadowRoot(el.parentNode)
3448f512ceSopenharmony_ci            } else {
3548f512ceSopenharmony_ci                return el;
3648f512ceSopenharmony_ci            }
3748f512ceSopenharmony_ci        };
3848f512ceSopenharmony_ci        window.getShadowElement = (el) => {
3948f512ceSopenharmony_ci            if (el.parentElement) {
4048f512ceSopenharmony_ci                return window.getShadowElement(el.parentElement)
4148f512ceSopenharmony_ci            } else {
4248f512ceSopenharmony_ci                return el;
4348f512ceSopenharmony_ci            }
4448f512ceSopenharmony_ci        };
4548f512ceSopenharmony_ci        class LitIcon extends HTMLElement {
4648f512ceSopenharmony_ci            static get observedAttributes() {
4748f512ceSopenharmony_ci                return ["name", "size", "color", "path"]
4848f512ceSopenharmony_ci            }
4948f512ceSopenharmony_ci
5048f512ceSopenharmony_ci            constructor() {
5148f512ceSopenharmony_ci                super();
5248f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
5348f512ceSopenharmony_ci                shadowRoot.innerHTML = `
5448f512ceSopenharmony_ci        <style>
5548f512ceSopenharmony_ci        :host{
5648f512ceSopenharmony_ci            font-size: inherit;
5748f512ceSopenharmony_ci            display: inline-block;
5848f512ceSopenharmony_ci            transition: .3s;
5948f512ceSopenharmony_ci         }
6048f512ceSopenharmony_ci         :host([spin]){
6148f512ceSopenharmony_ci            animation: rotate 1.75s linear infinite;
6248f512ceSopenharmony_ci         }
6348f512ceSopenharmony_ci         @keyframes rotate {
6448f512ceSopenharmony_ci            to{
6548f512ceSopenharmony_ci                transform: rotate(360deg);
6648f512ceSopenharmony_ci            }
6748f512ceSopenharmony_ci         }
6848f512ceSopenharmony_ci         .icon{
6948f512ceSopenharmony_ci            display: block;
7048f512ceSopenharmony_ci            width: 1em;
7148f512ceSopenharmony_ci            height: 1em;
7248f512ceSopenharmony_ci            margin: auto;
7348f512ceSopenharmony_ci            fill: currentColor;
7448f512ceSopenharmony_ci            overflow: hidden;
7548f512ceSopenharmony_ci         }
7648f512ceSopenharmony_ci        </style>
7748f512ceSopenharmony_ci        <svg style="display: none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
7848f512ceSopenharmony_ci            <symbol id="icon-ellipsis" viewBox="0 0 1024 1024"><path d="M232 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M512 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M792 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path></symbol>
7948f512ceSopenharmony_ci            <symbol id="icon-doubleleft" viewBox="0 0 1024 1024"><path d="M272.9 512l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512z"></path><path d="M576.9 512l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"></path></symbol>
8048f512ceSopenharmony_ci            <symbol id="icon-doubleright" viewBox="0 0 1024 1024"><path d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-0.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path><path d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-0.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path></symbol>
8148f512ceSopenharmony_ci            <symbol id="icon-close-circle-fill" viewBox="0 0 1024 1024"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m165.4 618.2l-66-0.3L512 563.4l-99.3 118.4-66.1 0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></symbol>
8248f512ceSopenharmony_ci<!--            <symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></symbol>-->
8348f512ceSopenharmony_ci<!--            <symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M765.7 486.8L314.9 134.7c-5.3-4.1-12.9-0.4-12.9 6.3v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1c16.4-12.8 16.4-37.6 0-50.4z"></path></symbol>-->
8448f512ceSopenharmony_ci        </svg>
8548f512ceSopenharmony_ci        <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 ${this.view} ${this.view}">
8648f512ceSopenharmony_ci             ${this.path ? '<path id="path"></path>' : '<use id="use"></use>'}
8748f512ceSopenharmony_ci        </svg>
8848f512ceSopenharmony_ci        `
8948f512ceSopenharmony_ci            }
9048f512ceSopenharmony_ci
9148f512ceSopenharmony_ci            get view() {
9248f512ceSopenharmony_ci                return this.getAttribute("view") || 1024;
9348f512ceSopenharmony_ci            }
9448f512ceSopenharmony_ci
9548f512ceSopenharmony_ci            get name() {
9648f512ceSopenharmony_ci                return this.getAttribute("name");
9748f512ceSopenharmony_ci            }
9848f512ceSopenharmony_ci
9948f512ceSopenharmony_ci            get path() {
10048f512ceSopenharmony_ci                return this.getAttribute("path");
10148f512ceSopenharmony_ci            }
10248f512ceSopenharmony_ci
10348f512ceSopenharmony_ci            set name(value) {
10448f512ceSopenharmony_ci                this.setAttribute("name", value);
10548f512ceSopenharmony_ci            }
10648f512ceSopenharmony_ci
10748f512ceSopenharmony_ci            set path(value) {
10848f512ceSopenharmony_ci                this.setAttribute("path", value);
10948f512ceSopenharmony_ci            }
11048f512ceSopenharmony_ci
11148f512ceSopenharmony_ci            get size() {
11248f512ceSopenharmony_ci                return this.getAttribute("size") || "";
11348f512ceSopenharmony_ci            }
11448f512ceSopenharmony_ci
11548f512ceSopenharmony_ci            get color() {
11648f512ceSopenharmony_ci                return this.getAttribute("color") || "";
11748f512ceSopenharmony_ci            }
11848f512ceSopenharmony_ci
11948f512ceSopenharmony_ci            set size(value) {
12048f512ceSopenharmony_ci                this.setAttribute("size", value);
12148f512ceSopenharmony_ci            }
12248f512ceSopenharmony_ci
12348f512ceSopenharmony_ci            set color(value) {
12448f512ceSopenharmony_ci                this.setAttribute("color", value);
12548f512ceSopenharmony_ci            }
12648f512ceSopenharmony_ci
12748f512ceSopenharmony_ci            get spin() {
12848f512ceSopenharmony_ci                return this.hasAttribute('spin');
12948f512ceSopenharmony_ci            }
13048f512ceSopenharmony_ci
13148f512ceSopenharmony_ci            set spin(value) {
13248f512ceSopenharmony_ci                if (value) {
13348f512ceSopenharmony_ci                    this.setAttribute('spin', '')
13448f512ceSopenharmony_ci                } else {
13548f512ceSopenharmony_ci                    this.removeAttribute('spin');
13648f512ceSopenharmony_ci                }
13748f512ceSopenharmony_ci            }
13848f512ceSopenharmony_ci
13948f512ceSopenharmony_ci            //当 custom element首次被插入文档DOM时，被调用。
14048f512ceSopenharmony_ci            connectedCallback() {
14148f512ceSopenharmony_ci                this.icon = this.shadowRoot.getElementById("icon");
14248f512ceSopenharmony_ci                this.use = this.shadowRoot.querySelector("use")
14348f512ceSopenharmony_ci                this.d = this.shadowRoot.querySelector("path");
14448f512ceSopenharmony_ci                this.size && (this.size = this.size);
14548f512ceSopenharmony_ci                this.color && (this.color = this.color);
14648f512ceSopenharmony_ci                this.name && (this.name = this.name);
14748f512ceSopenharmony_ci                this.path && (this.path = this.path);
14848f512ceSopenharmony_ci            }
14948f512ceSopenharmony_ci
15048f512ceSopenharmony_ci            //当 custom element从文档DOM中删除时，被调用。
15148f512ceSopenharmony_ci            disconnectedCallback() {
15248f512ceSopenharmony_ci
15348f512ceSopenharmony_ci            }
15448f512ceSopenharmony_ci
15548f512ceSopenharmony_ci            //当 custom element被移动到新的文档时，被调用。
15648f512ceSopenharmony_ci            adoptedCallback() {
15748f512ceSopenharmony_ci                console.log('Custom square element moved to new page.');
15848f512ceSopenharmony_ci            }
15948f512ceSopenharmony_ci
16048f512ceSopenharmony_ci            //当 custom element增加、删除、修改自身属性时，被调用。
16148f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
16248f512ceSopenharmony_ci                if (name === "name" && this.use) {
16348f512ceSopenharmony_ci                    this.use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `#icon-${newValue}`);
16448f512ceSopenharmony_ci                }
16548f512ceSopenharmony_ci                if (name === "path" && this.d) {
16648f512ceSopenharmony_ci                    this.d.setAttribute("d", newValue);
16748f512ceSopenharmony_ci                }
16848f512ceSopenharmony_ci                if (name === "color" && this.icon) {
16948f512ceSopenharmony_ci                    this.icon.style.color = newValue;
17048f512ceSopenharmony_ci                }
17148f512ceSopenharmony_ci                if (name === "size" && this.icon) {
17248f512ceSopenharmony_ci                    this.icon.style.fontSize = newValue + "px";
17348f512ceSopenharmony_ci                }
17448f512ceSopenharmony_ci            }
17548f512ceSopenharmony_ci        }
17648f512ceSopenharmony_ci        if (!customElements.get('lit-icon')) {
17748f512ceSopenharmony_ci            customElements.define('lit-icon', LitIcon);
17848f512ceSopenharmony_ci        }
17948f512ceSopenharmony_ci
18048f512ceSopenharmony_ci        class LitInput extends HTMLElement {
18148f512ceSopenharmony_ci            static get observedAttributes() {
18248f512ceSopenharmony_ci                return [
18348f512ceSopenharmony_ci                    'placeholder',//显示提示文字
18448f512ceSopenharmony_ci                    'block',//属性将使按钮适合其父宽度。
18548f512ceSopenharmony_ci                    'icon',//图标，如果配置了 slot='prefix' icon将失效
18648f512ceSopenharmony_ci                    'bordered',//是否有边框
18748f512ceSopenharmony_ci                    'allow-clear',//是否有清除
18848f512ceSopenharmony_ci                    'rows',//表示行数，默认input 设置rows 后 显示为textarea
18948f512ceSopenharmony_ci                    'maxlength',//允许输入多少个字符 默认没有限制
19048f512ceSopenharmony_ci                    'type',//password  number  text
19148f512ceSopenharmony_ci                    'pattern',//正则表达式
19248f512ceSopenharmony_ci                    'error-text',//错误提示文字
19348f512ceSopenharmony_ci                    'error-placement',//错误提示文字方向
19448f512ceSopenharmony_ci                    'required',//是否开始验证
19548f512ceSopenharmony_ci                    'value',//值
19648f512ceSopenharmony_ci                ];
19748f512ceSopenharmony_ci            }
19848f512ceSopenharmony_ci            get value() {
19948f512ceSopenharmony_ci                return this.getAttribute('value') || '';
20048f512ceSopenharmony_ci            }
20148f512ceSopenharmony_ci
20248f512ceSopenharmony_ci            set value(value) {
20348f512ceSopenharmony_ci                this.setAttribute('value', value);
20448f512ceSopenharmony_ci            }
20548f512ceSopenharmony_ci            get required() {
20648f512ceSopenharmony_ci                return this.hasAttribute('required');
20748f512ceSopenharmony_ci            }
20848f512ceSopenharmony_ci
20948f512ceSopenharmony_ci            set required(value) {
21048f512ceSopenharmony_ci                if (value) {
21148f512ceSopenharmony_ci                    this.setAttribute('required', "");
21248f512ceSopenharmony_ci                } else {
21348f512ceSopenharmony_ci                    this.removeAttribute('required');
21448f512ceSopenharmony_ci                }
21548f512ceSopenharmony_ci            }
21648f512ceSopenharmony_ci            get pattern() {
21748f512ceSopenharmony_ci                return this.getAttribute('pattern') || '';
21848f512ceSopenharmony_ci            }
21948f512ceSopenharmony_ci
22048f512ceSopenharmony_ci            set pattern(value) {
22148f512ceSopenharmony_ci                this.setAttribute('pattern', value);
22248f512ceSopenharmony_ci            }
22348f512ceSopenharmony_ci            get errorText() {
22448f512ceSopenharmony_ci                return this.getAttribute('error-text') || '该项为必填项';
22548f512ceSopenharmony_ci            }
22648f512ceSopenharmony_ci            set errorText(value) {
22748f512ceSopenharmony_ci                this.setAttribute('error-text', value)
22848f512ceSopenharmony_ci            }
22948f512ceSopenharmony_ci            get errorPlacement() {
23048f512ceSopenharmony_ci                return this.getAttribute('error-placement') || 'top';
23148f512ceSopenharmony_ci            }
23248f512ceSopenharmony_ci            set errorPlacement(value) {
23348f512ceSopenharmony_ci                this.setAttribute('error-placement', value)
23448f512ceSopenharmony_ci            }
23548f512ceSopenharmony_ci            get type() {
23648f512ceSopenharmony_ci                return this.getAttribute('type');
23748f512ceSopenharmony_ci            }
23848f512ceSopenharmony_ci            set type(value) {
23948f512ceSopenharmony_ci                this.setAttribute('type', value);
24048f512ceSopenharmony_ci            }
24148f512ceSopenharmony_ci            get maxlength() {
24248f512ceSopenharmony_ci                return this.getAttribute('maxlength') || '';
24348f512ceSopenharmony_ci            }
24448f512ceSopenharmony_ci
24548f512ceSopenharmony_ci            set maxlength(value) {
24648f512ceSopenharmony_ci                this.setAttribute('maxlength', value)
24748f512ceSopenharmony_ci            }
24848f512ceSopenharmony_ci            get rows() {
24948f512ceSopenharmony_ci                return this.getAttribute('rows');
25048f512ceSopenharmony_ci            }
25148f512ceSopenharmony_ci            set rows(value) {
25248f512ceSopenharmony_ci                this.setAttribute('rows', value);
25348f512ceSopenharmony_ci            }
25448f512ceSopenharmony_ci            get allowClear() {
25548f512ceSopenharmony_ci                return this.hasAttribute('allow-clear');
25648f512ceSopenharmony_ci            }
25748f512ceSopenharmony_ci
25848f512ceSopenharmony_ci            set allowClear(value) {
25948f512ceSopenharmony_ci                if (value) {
26048f512ceSopenharmony_ci                    this.setAttribute('allow-clear', '');
26148f512ceSopenharmony_ci                } else {
26248f512ceSopenharmony_ci                    this.removeAttribute('allow-clear');
26348f512ceSopenharmony_ci                }
26448f512ceSopenharmony_ci            }
26548f512ceSopenharmony_ci
26648f512ceSopenharmony_ci            get bordered() {
26748f512ceSopenharmony_ci                return this.getAttribute('bordered') || "true";
26848f512ceSopenharmony_ci            }
26948f512ceSopenharmony_ci
27048f512ceSopenharmony_ci            set bordered(value) {
27148f512ceSopenharmony_ci                if (value) {
27248f512ceSopenharmony_ci                    this.setAttribute('bordered', 'true');
27348f512ceSopenharmony_ci                } else {
27448f512ceSopenharmony_ci                    this.setAttribute('bordered', 'false')
27548f512ceSopenharmony_ci                }
27648f512ceSopenharmony_ci            }
27748f512ceSopenharmony_ci
27848f512ceSopenharmony_ci            get icon() {
27948f512ceSopenharmony_ci                return this.getAttribute('icon') || null;
28048f512ceSopenharmony_ci            }
28148f512ceSopenharmony_ci
28248f512ceSopenharmony_ci            set icon(value) {
28348f512ceSopenharmony_ci                this.setAttribute('icon', value)
28448f512ceSopenharmony_ci            }
28548f512ceSopenharmony_ci
28648f512ceSopenharmony_ci            get block() {
28748f512ceSopenharmony_ci                return this.hasAttribute('block')
28848f512ceSopenharmony_ci            }
28948f512ceSopenharmony_ci
29048f512ceSopenharmony_ci            set block(value) {
29148f512ceSopenharmony_ci                if (value) {
29248f512ceSopenharmony_ci                    this.setAttribute('block', '');
29348f512ceSopenharmony_ci                } else {
29448f512ceSopenharmony_ci                    this.removeAttribute('block')
29548f512ceSopenharmony_ci                }
29648f512ceSopenharmony_ci            }
29748f512ceSopenharmony_ci
29848f512ceSopenharmony_ci            get placeholder() {
29948f512ceSopenharmony_ci                return this.getAttribute('placeholder') || '';
30048f512ceSopenharmony_ci            }
30148f512ceSopenharmony_ci
30248f512ceSopenharmony_ci            set placeholder(value) {
30348f512ceSopenharmony_ci                this.setAttribute('placeholder', value);
30448f512ceSopenharmony_ci            }
30548f512ceSopenharmony_ci
30648f512ceSopenharmony_ci            constructor() {
30748f512ceSopenharmony_ci                super();
30848f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
30948f512ceSopenharmony_ci                shadowRoot.innerHTML = `
31048f512ceSopenharmony_ci        <style>
31148f512ceSopenharmony_ci:host{
31248f512ceSopenharmony_ci    ${this.bordered === 'true' ? 'border: 1px solid #e9e9e9;' : ''}
31348f512ceSopenharmony_ci    display: inline-flex;
31448f512ceSopenharmony_ci    box-sizing: border-box;
31548f512ceSopenharmony_ci    position:relative;
31648f512ceSopenharmony_ci    align-items: ${this.rows ? 'flex-start' : 'center'};
31748f512ceSopenharmony_ci    transition: all .3s;
31848f512ceSopenharmony_ci    border-radius: 2px;
31948f512ceSopenharmony_ci    font-size: 14px;
32048f512ceSopenharmony_ci    color: #333;
32148f512ceSopenharmony_ci    ${this.block ? 'display: flex;' : ''}
32248f512ceSopenharmony_ci    box-sizing: border-box;
32348f512ceSopenharmony_ci }
32448f512ceSopenharmony_ci :host(:hover){
32548f512ceSopenharmony_ci    ${this.bordered === 'true' ? 'border: 1px solid #65b687;' : ''}
32648f512ceSopenharmony_ci    ${this.bordered === 'true' ? 'box-shadow: 0 0 10px #65b68766;' : ''}
32748f512ceSopenharmony_ci }
32848f512ceSopenharmony_ci *{
32948f512ceSopenharmony_ci    box-sizing: border-box;
33048f512ceSopenharmony_ci }
33148f512ceSopenharmony_ci .input{
33248f512ceSopenharmony_ci    outline: none;
33348f512ceSopenharmony_ci    border: 0px;
33448f512ceSopenharmony_ci    font-size: inherit;
33548f512ceSopenharmony_ci    color: inherit;
33648f512ceSopenharmony_ci    width: 100%;
33748f512ceSopenharmony_ci    height: 100%;
33848f512ceSopenharmony_ci    vertical-align:middle;
33948f512ceSopenharmony_ci    line-height:inherit;
34048f512ceSopenharmony_ci    height:inherit;
34148f512ceSopenharmony_ci    padding: 6px 6px 6px ${this.icon ? '6px' : '11px'};
34248f512ceSopenharmony_ci    max-height: inherit;
34348f512ceSopenharmony_ci    box-sizing: border-box;
34448f512ceSopenharmony_ci }
34548f512ceSopenharmony_ci /*去掉type=number 后面的增减箭头*/
34648f512ceSopenharmony_ciinput::-webkit-outer-spin-button,
34748f512ceSopenharmony_ciinput::-webkit-inner-spin-button {
34848f512ceSopenharmony_ci    -webkit-appearance: none;
34948f512ceSopenharmony_ci
35048f512ceSopenharmony_ci}
35148f512ceSopenharmony_ci
35248f512ceSopenharmony_ciinput[type='number'] {
35348f512ceSopenharmony_ci    -moz-appearance: textfield;
35448f512ceSopenharmony_ci}
35548f512ceSopenharmony_ci
35648f512ceSopenharmony_ci lit-tips{
35748f512ceSopenharmony_ci    flex: 1;
35848f512ceSopenharmony_ci    height: 100%;
35948f512ceSopenharmony_ci    width: 100%;
36048f512ceSopenharmony_ci }
36148f512ceSopenharmony_ci lit-tips{
36248f512ceSopenharmony_ci    flex: 1;
36348f512ceSopenharmony_ci    align-items: center;
36448f512ceSopenharmony_ci }
36548f512ceSopenharmony_ci:host(:not([allow-clear])) .clear-btn{
36648f512ceSopenharmony_ci    display: flex;
36748f512ceSopenharmony_ci    visibility: hidden;
36848f512ceSopenharmony_ci    transition: all .3s;
36948f512ceSopenharmony_ci    opacity: 0;
37048f512ceSopenharmony_ci}
37148f512ceSopenharmony_ci:host([allow-clear]) .clear-btn{
37248f512ceSopenharmony_ci    opacity: 0;
37348f512ceSopenharmony_ci    position:absolute;
37448f512ceSopenharmony_ci    right: 0;
37548f512ceSopenharmony_ci    top: .5rem;
37648f512ceSopenharmony_ci    visibility: hidden;
37748f512ceSopenharmony_ci    transition: all .3s;
37848f512ceSopenharmony_ci    display: flex;
37948f512ceSopenharmony_ci    margin-right: 6px;
38048f512ceSopenharmony_ci    transform: translateY(0%);
38148f512ceSopenharmony_ci    color: #bfbfbf;
38248f512ceSopenharmony_ci}
38348f512ceSopenharmony_ci:host([allow-clear]) .clear-btn:hover{
38448f512ceSopenharmony_ci    color: #8c8c8c;
38548f512ceSopenharmony_ci}
38648f512ceSopenharmony_ci
38748f512ceSopenharmony_ci.area{
38848f512ceSopenharmony_ci    outline: none;
38948f512ceSopenharmony_ci    border: 0px;
39048f512ceSopenharmony_ci    width: 100%;
39148f512ceSopenharmony_ci    font-size: inherit;
39248f512ceSopenharmony_ci    vertical-align:middle;
39348f512ceSopenharmony_ci    min-height: calc(2rem);
39448f512ceSopenharmony_ci    max-height: calc(${this.rows} * 1rem);
39548f512ceSopenharmony_ci    padding: 6px 6px 6px ${this.icon ? '6px' : '11px'};
39648f512ceSopenharmony_ci    box-sizing: border-box;
39748f512ceSopenharmony_ci    resize:vertical;
39848f512ceSopenharmony_ci}
39948f512ceSopenharmony_ci
40048f512ceSopenharmony_ci:host(:not([type=password])) .pwd-btn,
40148f512ceSopenharmony_ci:host(:not([type=tel])) .pwd-btn{
40248f512ceSopenharmony_ci    display: none;
40348f512ceSopenharmony_ci    visibility: hidden;
40448f512ceSopenharmony_ci    transition: all .3s;
40548f512ceSopenharmony_ci    opacity: 0;
40648f512ceSopenharmony_ci}
40748f512ceSopenharmony_ci:host([type=password]) .pwd-btn,
40848f512ceSopenharmony_ci:host([type=tel]) .pwd-btn{
40948f512ceSopenharmony_ci    opacity: 1;
41048f512ceSopenharmony_ci    position:absolute;
41148f512ceSopenharmony_ci    right: 0;
41248f512ceSopenharmony_ci    top: .5rem;
41348f512ceSopenharmony_ci    visibility: visible;
41448f512ceSopenharmony_ci    transition: all .3s;
41548f512ceSopenharmony_ci    display: flex;
41648f512ceSopenharmony_ci    margin-right: 6px;
41748f512ceSopenharmony_ci    transform: translateY(0%);
41848f512ceSopenharmony_ci    color: #bfbfbf;
41948f512ceSopenharmony_ci}
42048f512ceSopenharmony_ci/*:host([type=password]) input{*/
42148f512ceSopenharmony_ci/*    -webkit-text-security:none;*/
42248f512ceSopenharmony_ci/*    text-security:none;*/
42348f512ceSopenharmony_ci/*}*/
42448f512ceSopenharmony_ci:host([type=password]) .pwd-btn:hover,
42548f512ceSopenharmony_ci:host([type=tel]) .pwd-btn:hover{
42648f512ceSopenharmony_ci    color: #8c8c8c;
42748f512ceSopenharmony_ci}
42848f512ceSopenharmony_ci
42948f512ceSopenharmony_ci</style>
43048f512ceSopenharmony_ci<slot name="prefix">${this.icon ? `<lit-icon name="${this.icon}" style="margin-left: 11px;color: inherit;font-size: inherit;${this.rows ? 'transform: translateY(50%);' : ''}"></lit-icon>` : ``}</slot>
43148f512ceSopenharmony_ci<lit-tips tips="${this.errorText}" placement="${this.errorPlacement}" color="#f4615c" offset="12px" show="false">
43248f512ceSopenharmony_ci    ${this.hasAttribute('rows') ?
43348f512ceSopenharmony_ci                        `<textarea class="area" rows="${this.rows}" value="${this.value}" placeholder="${this.placeholder}" cols="27" maxlength="${this.maxlength}" onscroll="this.rows++;"></textarea>`
43448f512ceSopenharmony_ci                        :
43548f512ceSopenharmony_ci                        `<input type="${this.type}" value="${this.value}" class="input" placeholder="${this.placeholder}"  >`}
43648f512ceSopenharmony_ci
43748f512ceSopenharmony_ci    <lit-icon class="clear-btn" name="close-circle-fill"></lit-icon>
43848f512ceSopenharmony_ci    <lit-icon class="pwd-btn" name="eye-fill"></lit-icon>
43948f512ceSopenharmony_ci</lit-tips>
44048f512ceSopenharmony_ci<slot name="suffix" ></slot>
44148f512ceSopenharmony_ci        `
44248f512ceSopenharmony_ci            }
44348f512ceSopenharmony_ci
44448f512ceSopenharmony_ci            //当 custom element首次被插入文档DOM时，被调用。
44548f512ceSopenharmony_ci            connectedCallback() {
44648f512ceSopenharmony_ci                this.reg = new RegExp(this.pattern);
44748f512ceSopenharmony_ci                this.inputElement = this.shadowRoot.querySelector('.input');
44848f512ceSopenharmony_ci                this.areaElement = this.shadowRoot.querySelector('.area');
44948f512ceSopenharmony_ci                this.clearElement = this.shadowRoot.querySelector('.clear-btn');
45048f512ceSopenharmony_ci                this.pwdElement = this.shadowRoot.querySelector('.pwd-btn');
45148f512ceSopenharmony_ci
45248f512ceSopenharmony_ci                this.pwdElement.onclick = (e) => {
45348f512ceSopenharmony_ci                    if (this.inputElement.getAttribute('type') === 'password') {
45448f512ceSopenharmony_ci                        this.pwdElement.name = 'eyeclose-fill';
45548f512ceSopenharmony_ci                        this.inputElement.setAttribute('type', 'tel');
45648f512ceSopenharmony_ci                    } else if (this.inputElement.getAttribute('type') === 'tel') {
45748f512ceSopenharmony_ci                        this.inputElement.setAttribute('type', 'password');
45848f512ceSopenharmony_ci                        this.pwdElement.name = 'eye-fill';
45948f512ceSopenharmony_ci                    }
46048f512ceSopenharmony_ci                }
46148f512ceSopenharmony_ci
46248f512ceSopenharmony_ci                if (this.areaElement) {
46348f512ceSopenharmony_ci                    this.clearElement.onclick = e => {
46448f512ceSopenharmony_ci                        this.areaElement.value = '';
46548f512ceSopenharmony_ci                        this.clearElement.style.visibility = 'hidden';
46648f512ceSopenharmony_ci                        this.clearElement.style.opacity = '0';
46748f512ceSopenharmony_ci                        this.value = this.areaElement.value;
46848f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('onClear', e));
46948f512ceSopenharmony_ci                        this.clearError();
47048f512ceSopenharmony_ci                    }
47148f512ceSopenharmony_ci                    this.areaElement.oninput = e => {
47248f512ceSopenharmony_ci                        if (this.allowClear) {
47348f512ceSopenharmony_ci                            if (this.areaElement.value.length > 0) {
47448f512ceSopenharmony_ci                                this.clearElement.style.visibility = 'visible';
47548f512ceSopenharmony_ci                                this.clearElement.style.opacity = '1';
47648f512ceSopenharmony_ci                            } else {
47748f512ceSopenharmony_ci                                this.clearElement.style.visibility = 'hidden';
47848f512ceSopenharmony_ci                                this.clearElement.style.opacity = '0';
47948f512ceSopenharmony_ci                            }
48048f512ceSopenharmony_ci                        }
48148f512ceSopenharmony_ci                        this.value = this.areaElement.value;
48248f512ceSopenharmony_ci                        this.verify();
48348f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('input', e));
48448f512ceSopenharmony_ci                    }
48548f512ceSopenharmony_ci                    this.areaElement.onchange = e => {
48648f512ceSopenharmony_ci                        this.value = this.areaElement.value;
48748f512ceSopenharmony_ci                        this.verify();
48848f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('change', e));
48948f512ceSopenharmony_ci                    }
49048f512ceSopenharmony_ci                    this.areaElement.onfocus = e => {
49148f512ceSopenharmony_ci                        this.value = this.areaElement.value;
49248f512ceSopenharmony_ci                        this.verify();
49348f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('focus', e));
49448f512ceSopenharmony_ci                    }
49548f512ceSopenharmony_ci                    this.areaElement.onblur = e => {
49648f512ceSopenharmony_ci                        this.value = this.areaElement.value;
49748f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('blur', e));
49848f512ceSopenharmony_ci                    }
49948f512ceSopenharmony_ci                    this.areaElement.onkeydown = e => {
50048f512ceSopenharmony_ci                        if (e.key === 'Enter') {
50148f512ceSopenharmony_ci                            this.value = this.areaElement.value;
50248f512ceSopenharmony_ci                            this.verify();
50348f512ceSopenharmony_ci                            this.dispatchEvent(new CustomEvent('onPressEnter', e));
50448f512ceSopenharmony_ci                        }
50548f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('keydown', e));
50648f512ceSopenharmony_ci                    }
50748f512ceSopenharmony_ci                    this.areaElement.onkeyup = e => {
50848f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('keyup', e));
50948f512ceSopenharmony_ci                    }
51048f512ceSopenharmony_ci                    this.areaElement.onselect = e => {
51148f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('select', e));
51248f512ceSopenharmony_ci                    }
51348f512ceSopenharmony_ci                    this.areaElement.onclick = e => {
51448f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('click', e));
51548f512ceSopenharmony_ci                    }
51648f512ceSopenharmony_ci                }
51748f512ceSopenharmony_ci                if (this.inputElement) {
51848f512ceSopenharmony_ci                    this.clearElement.onclick = e => {
51948f512ceSopenharmony_ci                        this.inputElement.value = '';
52048f512ceSopenharmony_ci                        this.clearElement.style.visibility = 'hidden';
52148f512ceSopenharmony_ci                        this.clearElement.style.opacity = '0';
52248f512ceSopenharmony_ci                        this.value = this.inputElement.value;
52348f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('onClear', e));
52448f512ceSopenharmony_ci                        this.clearError();
52548f512ceSopenharmony_ci                    }
52648f512ceSopenharmony_ci                    this.inputElement.oninput = e => {
52748f512ceSopenharmony_ci                        if (this.allowClear) {
52848f512ceSopenharmony_ci                            if (this.inputElement.value.length > 0) {
52948f512ceSopenharmony_ci                                this.clearElement.style.visibility = 'visible';
53048f512ceSopenharmony_ci                                this.clearElement.style.opacity = '1';
53148f512ceSopenharmony_ci                            } else {
53248f512ceSopenharmony_ci                                this.clearElement.style.visibility = 'hidden';
53348f512ceSopenharmony_ci                                this.clearElement.style.opacity = '0';
53448f512ceSopenharmony_ci                            }
53548f512ceSopenharmony_ci                        }
53648f512ceSopenharmony_ci                        this.value = this.inputElement.value;
53748f512ceSopenharmony_ci                        this.verify();
53848f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('input', e));
53948f512ceSopenharmony_ci                    }
54048f512ceSopenharmony_ci                    this.inputElement.onchange = e => {
54148f512ceSopenharmony_ci                        this.value = this.inputElement.value;
54248f512ceSopenharmony_ci                        this.verify();
54348f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('change', e));
54448f512ceSopenharmony_ci                    }
54548f512ceSopenharmony_ci                    this.inputElement.onfocus = e => {
54648f512ceSopenharmony_ci                        this.value = this.inputElement.value;
54748f512ceSopenharmony_ci                        this.verify();
54848f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('focus', e));
54948f512ceSopenharmony_ci                    }
55048f512ceSopenharmony_ci                    this.inputElement.onblur = e => {
55148f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('blur', e));
55248f512ceSopenharmony_ci                    }
55348f512ceSopenharmony_ci                    this.inputElement.onkeydown = e => {
55448f512ceSopenharmony_ci                        if (e.key === 'Enter') {
55548f512ceSopenharmony_ci                            this.value = this.inputElement.value;
55648f512ceSopenharmony_ci                            this.verify();
55748f512ceSopenharmony_ci                            this.dispatchEvent(new CustomEvent('onPressEnter', e));
55848f512ceSopenharmony_ci                        }
55948f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('keydown', e));
56048f512ceSopenharmony_ci                    }
56148f512ceSopenharmony_ci                    this.inputElement.onkeyup = e => {
56248f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('keyup', e));
56348f512ceSopenharmony_ci                    }
56448f512ceSopenharmony_ci                    this.inputElement.onselect = e => {
56548f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('select', e));
56648f512ceSopenharmony_ci                    }
56748f512ceSopenharmony_ci                    this.inputElement.onclick = e => {
56848f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('click', e));
56948f512ceSopenharmony_ci                    }
57048f512ceSopenharmony_ci                }
57148f512ceSopenharmony_ci
57248f512ceSopenharmony_ci            }
57348f512ceSopenharmony_ci
57448f512ceSopenharmony_ci            //当 custom element从文档DOM中删除时，被调用。
57548f512ceSopenharmony_ci            disconnectedCallback() {
57648f512ceSopenharmony_ci
57748f512ceSopenharmony_ci            }
57848f512ceSopenharmony_ci
57948f512ceSopenharmony_ci            //当 custom element被移动到新的文档时，被调用。
58048f512ceSopenharmony_ci            adoptedCallback() {
58148f512ceSopenharmony_ci                console.log('Custom square element moved to new page.');
58248f512ceSopenharmony_ci            }
58348f512ceSopenharmony_ci
58448f512ceSopenharmony_ci            //当 custom element增加、删除、修改自身属性时，被调用。
58548f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
58648f512ceSopenharmony_ci                if (name === 'value') {
58748f512ceSopenharmony_ci                    // console.log(name,oldValue,newValue);
58848f512ceSopenharmony_ci                    // console.log(this.inputElement);
58948f512ceSopenharmony_ci                    if (this.inputElement) {
59048f512ceSopenharmony_ci                        this.inputElement.value = newValue
59148f512ceSopenharmony_ci                    } else if (this.areaElement) {
59248f512ceSopenharmony_ci                        this.areaElement.value = newValue;
59348f512ceSopenharmony_ci                    }
59448f512ceSopenharmony_ci                }
59548f512ceSopenharmony_ci            }
59648f512ceSopenharmony_ci            verify() {
59748f512ceSopenharmony_ci                if (this.required) {
59848f512ceSopenharmony_ci                    let result;
59948f512ceSopenharmony_ci                    if (this.hasAttribute('rows')) {
60048f512ceSopenharmony_ci                        result = this.reg.test(this.areaElement.value);
60148f512ceSopenharmony_ci                    } else {
60248f512ceSopenharmony_ci                        result = this.reg.test(this.inputElement.value);
60348f512ceSopenharmony_ci                    }
60448f512ceSopenharmony_ci                    if (result) {
60548f512ceSopenharmony_ci                        this.shadowRoot.querySelector('lit-tips').show = 'false'
60648f512ceSopenharmony_ci                    } else {
60748f512ceSopenharmony_ci                        this.shadowRoot.querySelector('lit-tips').show = 'true'
60848f512ceSopenharmony_ci                    }
60948f512ceSopenharmony_ci                    return result;
61048f512ceSopenharmony_ci                } else {
61148f512ceSopenharmony_ci                    return true;
61248f512ceSopenharmony_ci                }
61348f512ceSopenharmony_ci            }
61448f512ceSopenharmony_ci            clearError() {
61548f512ceSopenharmony_ci                this.shadowRoot.querySelector('lit-tips').show = 'false'
61648f512ceSopenharmony_ci            }
61748f512ceSopenharmony_ci        }
61848f512ceSopenharmony_ci        if (!customElements.get('lit-input')) {
61948f512ceSopenharmony_ci            customElements.define('lit-input', LitInput);
62048f512ceSopenharmony_ci        }
62148f512ceSopenharmony_ci
62248f512ceSopenharmony_ci        class LitLoading extends HTMLElement {
62348f512ceSopenharmony_ci            static get observedAttributes() { return ['color', 'size'] }
62448f512ceSopenharmony_ci
62548f512ceSopenharmony_ci            constructor() {
62648f512ceSopenharmony_ci                super();
62748f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
62848f512ceSopenharmony_ci                shadowRoot.innerHTML = `
62948f512ceSopenharmony_ci        <style>
63048f512ceSopenharmony_ci        :host{
63148f512ceSopenharmony_ci            font-size:inherit;
63248f512ceSopenharmony_ci            display:inline-flex;
63348f512ceSopenharmony_ci            align-items: center;
63448f512ceSopenharmony_ci            justify-content:center;
63548f512ceSopenharmony_ci            color:var(--themeColor,#42b983);
63648f512ceSopenharmony_ci        }
63748f512ceSopenharmony_ci        .loading{
63848f512ceSopenharmony_ci            display: block;
63948f512ceSopenharmony_ci            width: 1em;
64048f512ceSopenharmony_ci            height: 1em;
64148f512ceSopenharmony_ci            margin: auto;
64248f512ceSopenharmony_ci            animation: rotate 1.4s linear infinite;
64348f512ceSopenharmony_ci        }
64448f512ceSopenharmony_ci        .circle {
64548f512ceSopenharmony_ci            stroke: currentColor;
64648f512ceSopenharmony_ci            animation:  progress 1.4s ease-in-out infinite;
64748f512ceSopenharmony_ci            stroke-dasharray: 80px, 200px;
64848f512ceSopenharmony_ci            stroke-dashoffset: 0px;
64948f512ceSopenharmony_ci            transition:.3s;
65048f512ceSopenharmony_ci        }
65148f512ceSopenharmony_ci        :host(:not(:empty)) .loading{
65248f512ceSopenharmony_ci            margin:.5em;
65348f512ceSopenharmony_ci        }
65448f512ceSopenharmony_ci        @keyframes rotate{
65548f512ceSopenharmony_ci            to{
65648f512ceSopenharmony_ci                transform: rotate(360deg);
65748f512ceSopenharmony_ci            }
65848f512ceSopenharmony_ci        }
65948f512ceSopenharmony_ci        @keyframes progress {
66048f512ceSopenharmony_ci            0% {
66148f512ceSopenharmony_ci              stroke-dasharray: 1px, 200px;
66248f512ceSopenharmony_ci              stroke-dashoffset: 0px;
66348f512ceSopenharmony_ci            }
66448f512ceSopenharmony_ci            50% {
66548f512ceSopenharmony_ci              stroke-dasharray: 100px, 200px;
66648f512ceSopenharmony_ci              stroke-dashoffset: -15px;
66748f512ceSopenharmony_ci            }
66848f512ceSopenharmony_ci            100% {
66948f512ceSopenharmony_ci              stroke-dasharray: 100px, 200px;
67048f512ceSopenharmony_ci              stroke-dashoffset: -125px;
67148f512ceSopenharmony_ci            }
67248f512ceSopenharmony_ci        }
67348f512ceSopenharmony_ci        </style>
67448f512ceSopenharmony_ci        <svg class="loading" id="loading" viewBox="22 22 44 44"><circle class="circle" cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle></svg>
67548f512ceSopenharmony_ci        <slot></slot>
67648f512ceSopenharmony_ci        `
67748f512ceSopenharmony_ci            }
67848f512ceSopenharmony_ci
67948f512ceSopenharmony_ci            get size() {
68048f512ceSopenharmony_ci                return this.getAttribute('size') || '';
68148f512ceSopenharmony_ci            }
68248f512ceSopenharmony_ci
68348f512ceSopenharmony_ci            get color() {
68448f512ceSopenharmony_ci                return this.getAttribute('color') || '';
68548f512ceSopenharmony_ci            }
68648f512ceSopenharmony_ci
68748f512ceSopenharmony_ci            set size(value) {
68848f512ceSopenharmony_ci                this.setAttribute('size', value);
68948f512ceSopenharmony_ci            }
69048f512ceSopenharmony_ci
69148f512ceSopenharmony_ci            set color(value) {
69248f512ceSopenharmony_ci                this.setAttribute('color', value);
69348f512ceSopenharmony_ci            }
69448f512ceSopenharmony_ci
69548f512ceSopenharmony_ci            connectedCallback() {
69648f512ceSopenharmony_ci                this.loading = this.shadowRoot.getElementById('loading');
69748f512ceSopenharmony_ci                this.size && (this.size = this.size);
69848f512ceSopenharmony_ci                this.color && (this.color = this.color);
69948f512ceSopenharmony_ci            }
70048f512ceSopenharmony_ci
70148f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
70248f512ceSopenharmony_ci                if (name == 'color' && this.loading) {
70348f512ceSopenharmony_ci                    this.loading.style.color = newValue;
70448f512ceSopenharmony_ci                }
70548f512ceSopenharmony_ci                if (name == 'size' && this.loading) {
70648f512ceSopenharmony_ci                    this.loading.style.fontSize = newValue + 'px';
70748f512ceSopenharmony_ci                }
70848f512ceSopenharmony_ci            }
70948f512ceSopenharmony_ci        }
71048f512ceSopenharmony_ci        if (!customElements.get('lit-loading')) {
71148f512ceSopenharmony_ci            customElements.define('lit-loading', LitLoading);
71248f512ceSopenharmony_ci        }
71348f512ceSopenharmony_ci
71448f512ceSopenharmony_ci        class LitPagination extends HTMLElement {
71548f512ceSopenharmony_ci            static get observedAttributes() {
71648f512ceSopenharmony_ci                return [
71748f512ceSopenharmony_ci                    "current",//当前页码
71848f512ceSopenharmony_ci                    "total",//总条数
71948f512ceSopenharmony_ci                    "page-size",//每页条数
72048f512ceSopenharmony_ci                    "disabled",//禁用分页
72148f512ceSopenharmony_ci                    'show-size-changer',//显示每页条目数select
72248f512ceSopenharmony_ci                    'show-quick-jumper',//显示跳至多少页
72348f512ceSopenharmony_ci                    'page-size-options',//指定每页可以显示多少条 默认 [10,20,50,100]
72448f512ceSopenharmony_ci                    'simple',//简洁模式
72548f512ceSopenharmony_ci                ]
72648f512ceSopenharmony_ci            }
72748f512ceSopenharmony_ci            get pageSizeOptions() {
72848f512ceSopenharmony_ci                return this.getAttribute('page-size-options');
72948f512ceSopenharmony_ci            }
73048f512ceSopenharmony_ci            set pageSizeOptions(value) {
73148f512ceSopenharmony_ci                this.setAttribute('page-size-options', '');
73248f512ceSopenharmony_ci            }
73348f512ceSopenharmony_ci
73448f512ceSopenharmony_ci            get current() {
73548f512ceSopenharmony_ci                return this.getAttribute('current') || '1';
73648f512ceSopenharmony_ci            }
73748f512ceSopenharmony_ci
73848f512ceSopenharmony_ci            set current(value) {
73948f512ceSopenharmony_ci                this.setAttribute('current', value);
74048f512ceSopenharmony_ci            }
74148f512ceSopenharmony_ci
74248f512ceSopenharmony_ci            get total() {
74348f512ceSopenharmony_ci                return this.getAttribute('total') || '50';
74448f512ceSopenharmony_ci            }
74548f512ceSopenharmony_ci
74648f512ceSopenharmony_ci            set total(value) {
74748f512ceSopenharmony_ci                this.setAttribute('total', value);
74848f512ceSopenharmony_ci            }
74948f512ceSopenharmony_ci
75048f512ceSopenharmony_ci            get pageSize() {
75148f512ceSopenharmony_ci                return this.getAttribute('page-size') || '10';
75248f512ceSopenharmony_ci            }
75348f512ceSopenharmony_ci
75448f512ceSopenharmony_ci            set pageSize(value) {
75548f512ceSopenharmony_ci                this.setAttribute('page-size', value);
75648f512ceSopenharmony_ci            }
75748f512ceSopenharmony_ci
75848f512ceSopenharmony_ci            get disabled() {
75948f512ceSopenharmony_ci                return this.hasAttribute('disabled');
76048f512ceSopenharmony_ci            }
76148f512ceSopenharmony_ci
76248f512ceSopenharmony_ci            set disabled(value) {
76348f512ceSopenharmony_ci                if (value) {
76448f512ceSopenharmony_ci                    this.setAttribute('disabled', '');
76548f512ceSopenharmony_ci                } else {
76648f512ceSopenharmony_ci                    this.removeAttribute('disabled');
76748f512ceSopenharmony_ci                }
76848f512ceSopenharmony_ci            }
76948f512ceSopenharmony_ci
77048f512ceSopenharmony_ci            get showSizeChanger() {
77148f512ceSopenharmony_ci                return this.hasAttribute('show-size-changer')
77248f512ceSopenharmony_ci            }
77348f512ceSopenharmony_ci
77448f512ceSopenharmony_ci            set showSizeChanger(value) {
77548f512ceSopenharmony_ci                if (value) {
77648f512ceSopenharmony_ci                    this.setAttribute('show-size-changer', '');
77748f512ceSopenharmony_ci                } else {
77848f512ceSopenharmony_ci                    this.removeAttribute('show-size-changer');
77948f512ceSopenharmony_ci                }
78048f512ceSopenharmony_ci            }
78148f512ceSopenharmony_ci
78248f512ceSopenharmony_ci            get showQuickJumper() {
78348f512ceSopenharmony_ci                return this.hasAttribute('show-quick-jumper')
78448f512ceSopenharmony_ci            }
78548f512ceSopenharmony_ci
78648f512ceSopenharmony_ci            set showQuickJumper(value) {
78748f512ceSopenharmony_ci                if (value) {
78848f512ceSopenharmony_ci                    this.setAttribute('show-quick-jumper', '');
78948f512ceSopenharmony_ci                } else {
79048f512ceSopenharmony_ci                    this.removeAttribute('show-quick-jumper');
79148f512ceSopenharmony_ci                }
79248f512ceSopenharmony_ci            }
79348f512ceSopenharmony_ci
79448f512ceSopenharmony_ci            get simple() {
79548f512ceSopenharmony_ci                return this.hasAttribute('simple');
79648f512ceSopenharmony_ci            }
79748f512ceSopenharmony_ci
79848f512ceSopenharmony_ci            set simple(value) {
79948f512ceSopenharmony_ci                if (value) {
80048f512ceSopenharmony_ci                    this.setAttribute('simple', '');
80148f512ceSopenharmony_ci                } else {
80248f512ceSopenharmony_ci                    this.removeAttribute('simple');
80348f512ceSopenharmony_ci                }
80448f512ceSopenharmony_ci            }
80548f512ceSopenharmony_ci
80648f512ceSopenharmony_ci            constructor() {
80748f512ceSopenharmony_ci                super();
80848f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
80948f512ceSopenharmony_ci                shadowRoot.innerHTML = `
81048f512ceSopenharmony_ci<style>
81148f512ceSopenharmony_ci:host{
81248f512ceSopenharmony_ci     display: flex;
81348f512ceSopenharmony_ci     width: max-content;
81448f512ceSopenharmony_ci}
81548f512ceSopenharmony_ci.root{
81648f512ceSopenharmony_ci    display: inline-flex;
81748f512ceSopenharmony_ci    /*grid-template-columns: repeat(auto-fill,35px);*/
81848f512ceSopenharmony_ci    /*column-gap: 8px;*/
81948f512ceSopenharmony_ci    /*row-gap: 8px;*/
82048f512ceSopenharmony_ci    user-select: none;
82148f512ceSopenharmony_ci}
82248f512ceSopenharmony_ci.item{
82348f512ceSopenharmony_ci    box-sizing: border-box;
82448f512ceSopenharmony_ci    color: #333;
82548f512ceSopenharmony_ci    transition: all .3s;
82648f512ceSopenharmony_ci    width: 35px;
82748f512ceSopenharmony_ci    height: 35px;
82848f512ceSopenharmony_ci    margin-left: 6px;
82948f512ceSopenharmony_ci    padding: 6px 10px;
83048f512ceSopenharmony_ci    border: 1px solid #ececec;
83148f512ceSopenharmony_ci    border-radius: 3px;
83248f512ceSopenharmony_ci    cursor: pointer;
83348f512ceSopenharmony_ci    display: inline-flex;
83448f512ceSopenharmony_ci    align-items: center;
83548f512ceSopenharmony_ci    justify-content: center;
83648f512ceSopenharmony_ci}
83748f512ceSopenharmony_ci.item-dir{
83848f512ceSopenharmony_ci    color: #333;
83948f512ceSopenharmony_ci    transition: all .3s;
84048f512ceSopenharmony_ci    padding: 5px 10px;
84148f512ceSopenharmony_ci    /*border: 1px solid #ececec;*/
84248f512ceSopenharmony_ci    /*border-radius: 3px;*/
84348f512ceSopenharmony_ci    cursor: pointer;
84448f512ceSopenharmony_ci    display: inline-flex;
84548f512ceSopenharmony_ci    align-items: center;
84648f512ceSopenharmony_ci    justify-content: center;
84748f512ceSopenharmony_ci}
84848f512ceSopenharmony_ci.item:not([disable]):hover{
84948f512ceSopenharmony_ci    color:#42b983;
85048f512ceSopenharmony_ci    border: 1px solid #42b983;
85148f512ceSopenharmony_ci}
85248f512ceSopenharmony_ci.item[selected]{
85348f512ceSopenharmony_ci    color:#42b983;
85448f512ceSopenharmony_ci    border: 1px solid #42b983;
85548f512ceSopenharmony_ci}
85648f512ceSopenharmony_ci.item[disable]{
85748f512ceSopenharmony_ci    /*background-color: #f5f5f5;*/
85848f512ceSopenharmony_ci    fill: #c7c7c7;
85948f512ceSopenharmony_ci    color: #c7c7c7;
86048f512ceSopenharmony_ci    cursor: not-allowed;
86148f512ceSopenharmony_ci}
86248f512ceSopenharmony_ci
86348f512ceSopenharmony_ci:host([show-quick-jumper]) .jump-root{
86448f512ceSopenharmony_ci    grid-column: span 4;
86548f512ceSopenharmony_ci    margin-left: 6px;
86648f512ceSopenharmony_ci    display: inline-flex;
86748f512ceSopenharmony_ci    align-items: center;
86848f512ceSopenharmony_ci}
86948f512ceSopenharmony_ci:host(:not([show-quick-jumper])) .jump-root{
87048f512ceSopenharmony_ci    display: none;
87148f512ceSopenharmony_ci}
87248f512ceSopenharmony_ci
87348f512ceSopenharmony_ci:host([show-size-changer]) .pages-change{
87448f512ceSopenharmony_ci    display: inline-flex;
87548f512ceSopenharmony_ci    grid-column: span 3;
87648f512ceSopenharmony_ci    width: 120px;
87748f512ceSopenharmony_ci    margin-left: 6px;
87848f512ceSopenharmony_ci    font-size: .9rem;
87948f512ceSopenharmony_ci}
88048f512ceSopenharmony_ci:host(:not([show-size-changer])) .pages-change{
88148f512ceSopenharmony_ci    display: none;
88248f512ceSopenharmony_ci}
88348f512ceSopenharmony_ci</style>
88448f512ceSopenharmony_ci<div style="display: grid;grid-template-columns: max-content 1fr;">
88548f512ceSopenharmony_ci    <div style="display: inline-flex;align-items: center" id="showTotal">
88648f512ceSopenharmony_ci        <slot id="st" name="showTotal"></slot>
88748f512ceSopenharmony_ci    </div>
88848f512ceSopenharmony_ci    <div class="root">
88948f512ceSopenharmony_ci<!--        <lit-icon class="item left-arrow" name="left" ></lit-icon>-->
89048f512ceSopenharmony_ci        <svg class="item left-arrow" viewBox="0 0 1024 1024" aria-hidden="true" >
89148f512ceSopenharmony_ci            <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
89248f512ceSopenharmony_ci        </svg>
89348f512ceSopenharmony_ci        <div class="item first">1</div>
89448f512ceSopenharmony_ci        <lit-icon class="item-dir double-left" name="ellipsis" ></lit-icon>
89548f512ceSopenharmony_ci<!--        <svg class="item-dir double-left" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;">-->
89648f512ceSopenharmony_ci<!--            <path d="M232 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M512 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M792 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path>-->
89748f512ceSopenharmony_ci<!--        </svg>-->
89848f512ceSopenharmony_ci        <div class="item one">2</div>
89948f512ceSopenharmony_ci        <div class="item two">3</div>
90048f512ceSopenharmony_ci        <div class="item three">4</div>
90148f512ceSopenharmony_ci        <div class="item four">5</div>
90248f512ceSopenharmony_ci        <div class="item five">6</div>
90348f512ceSopenharmony_ci        <lit-icon class="item-dir double-right" name="ellipsis" ></lit-icon>
90448f512ceSopenharmony_ci<!--        <svg class="item-dir double-right" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;">-->
90548f512ceSopenharmony_ci<!--            <path d="M232 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M512 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M792 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path>-->
90648f512ceSopenharmony_ci<!--        </svg>-->
90748f512ceSopenharmony_ci        <div class="item last">1</div>
90848f512ceSopenharmony_ci<!--        <lit-icon class="item right-arrow" name="right"></lit-icon>-->
90948f512ceSopenharmony_ci        <svg class="item right-arrow" viewBox="0 0 1024 1024" aria-hidden="true" >
91048f512ceSopenharmony_ci            <path d="M765.7 486.8L314.9 134.7c-5.3-4.1-12.9-0.4-12.9 6.3v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1c16.4-12.8 16.4-37.6 0-50.4z"></path>
91148f512ceSopenharmony_ci        </svg>
91248f512ceSopenharmony_ci        <lit-select class="pages-change" default-value="10"></lit-select>
91348f512ceSopenharmony_ci        <div class="jump-root">
91448f512ceSopenharmony_ci            <label style="font-size: .9rem;color: #333;margin-right: 5px">跳至</label>
91548f512ceSopenharmony_ci            <lit-input type="number" class="jump" style="width: 80px;height: 100%"></lit-input>
91648f512ceSopenharmony_ci            <label style="font-size: .9rem;color: #333;margin-left: 5px">页</label>
91748f512ceSopenharmony_ci        </div>
91848f512ceSopenharmony_ci    </div>
91948f512ceSopenharmony_ci
92048f512ceSopenharmony_ci</div>
92148f512ceSopenharmony_ci
92248f512ceSopenharmony_ci        `
92348f512ceSopenharmony_ci            }
92448f512ceSopenharmony_ci
92548f512ceSopenharmony_ci            //当 custom element首次被插入文档DOM时，被调用。
92648f512ceSopenharmony_ci            connectedCallback() {
92748f512ceSopenharmony_ci                this.slotShowTotal = null;
92848f512ceSopenharmony_ci                this.rootElement = this.shadowRoot.querySelector('.root');
92948f512ceSopenharmony_ci                let st = this.shadowRoot.querySelector('#st');
93048f512ceSopenharmony_ci                st.addEventListener('slotchange', () => {
93148f512ceSopenharmony_ci                    let elements = st.assignedElements();
93248f512ceSopenharmony_ci                    if (elements.length > 0) {
93348f512ceSopenharmony_ci                        this.slotShowTotal = elements[0];
93448f512ceSopenharmony_ci                    }
93548f512ceSopenharmony_ci                    if (this.slotShowTotal) {
93648f512ceSopenharmony_ci                        let cloneNode = this.slotShowTotal.render({
93748f512ceSopenharmony_ci                            total: this._total,
93848f512ceSopenharmony_ci                            range: [1, this._pages],
93948f512ceSopenharmony_ci                        }).content.cloneNode(true);
94048f512ceSopenharmony_ci                        this.shadowRoot.querySelector('#showTotal').append(cloneNode);
94148f512ceSopenharmony_ci                    }
94248f512ceSopenharmony_ci                })
94348f512ceSopenharmony_ci                this.leftArrow = this.shadowRoot.querySelector('.left-arrow');
94448f512ceSopenharmony_ci                this.first = this.shadowRoot.querySelector('.first');
94548f512ceSopenharmony_ci                this.doubleLeft = this.shadowRoot.querySelector('.double-left');
94648f512ceSopenharmony_ci                this.one = this.shadowRoot.querySelector('.one');
94748f512ceSopenharmony_ci                this.two = this.shadowRoot.querySelector('.two');
94848f512ceSopenharmony_ci                this.three = this.shadowRoot.querySelector('.three');
94948f512ceSopenharmony_ci                this.four = this.shadowRoot.querySelector('.four');
95048f512ceSopenharmony_ci                this.five = this.shadowRoot.querySelector('.five');
95148f512ceSopenharmony_ci                this.doubleRight = this.shadowRoot.querySelector('.double-right');
95248f512ceSopenharmony_ci                this.last = this.shadowRoot.querySelector('.last');
95348f512ceSopenharmony_ci                this.rightArrow = this.shadowRoot.querySelector('.right-arrow');
95448f512ceSopenharmony_ci                this.pagesChange = this.shadowRoot.querySelector('.pages-change');
95548f512ceSopenharmony_ci                this.jump = this.shadowRoot.querySelector('.jump');
95648f512ceSopenharmony_ci                this.nodes = [this.one, this.two, this.three, this.four, this.five]
95748f512ceSopenharmony_ci
95848f512ceSopenharmony_ci                let jsonArray = JSON.parse(this.pageSizeOptions);
95948f512ceSopenharmony_ci                if (jsonArray) {
96048f512ceSopenharmony_ci                    this.pagesChange.dataSource = jsonArray.map(a => {
96148f512ceSopenharmony_ci                        return { key: a, val: `${a} 条/页`, }
96248f512ceSopenharmony_ci                    });
96348f512ceSopenharmony_ci                    this.pagesChange.value = jsonArray[0] + '';
96448f512ceSopenharmony_ci                    this.pageSize = jsonArray[0] + '';
96548f512ceSopenharmony_ci                } else {
96648f512ceSopenharmony_ci                    this.pagesChange.dataSource = [10, 20, 50, 100].map(a => {
96748f512ceSopenharmony_ci                        return { key: a, val: `${a} 条/页`, }
96848f512ceSopenharmony_ci                    });
96948f512ceSopenharmony_ci                    this.pagesChange.value = '10';
97048f512ceSopenharmony_ci                    this.pageSize = '10';
97148f512ceSopenharmony_ci                }
97248f512ceSopenharmony_ci
97348f512ceSopenharmony_ci                this.jump.addEventListener('onPressEnter', e => {
97448f512ceSopenharmony_ci                    if (e.target.value) {
97548f512ceSopenharmony_ci                        this.current = e.target.value;
97648f512ceSopenharmony_ci                        e.target.value = '';
97748f512ceSopenharmony_ci                        this.match();
97848f512ceSopenharmony_ci                    }
97948f512ceSopenharmony_ci                });
98048f512ceSopenharmony_ci                this.pagesChange.onchange = e => {
98148f512ceSopenharmony_ci                    // console.log(e.detail);
98248f512ceSopenharmony_ci                    this.pageSize = e.detail.value;
98348f512ceSopenharmony_ci                    this.match();
98448f512ceSopenharmony_ci                    if (this.slotShowTotal) {
98548f512ceSopenharmony_ci                        let cloneNode = this.slotShowTotal.render({
98648f512ceSopenharmony_ci                            total: this._total,
98748f512ceSopenharmony_ci                            range: [1, this._pages],
98848f512ceSopenharmony_ci                        }).content.cloneNode(true);
98948f512ceSopenharmony_ci                        this.shadowRoot.querySelector('#showTotal').lastElementChild.remove();
99048f512ceSopenharmony_ci                        this.shadowRoot.querySelector('#showTotal').append(cloneNode);
99148f512ceSopenharmony_ci                    }
99248f512ceSopenharmony_ci                    this.dispatchEvent(new CustomEvent('onShowSizeChange', {
99348f512ceSopenharmony_ci                        detail: {
99448f512ceSopenharmony_ci                            current: parseInt(this.current),
99548f512ceSopenharmony_ci                            size: parseInt(this.pageSize)
99648f512ceSopenharmony_ci                        }
99748f512ceSopenharmony_ci                    }))
99848f512ceSopenharmony_ci                }
99948f512ceSopenharmony_ci
100048f512ceSopenharmony_ci                this.leftArrow.onclick = (e) => {
100148f512ceSopenharmony_ci                    if (this._current > 1) {
100248f512ceSopenharmony_ci                        this.current = `${this._current - 1}`
100348f512ceSopenharmony_ci                        this.match();
100448f512ceSopenharmony_ci                    }
100548f512ceSopenharmony_ci                }
100648f512ceSopenharmony_ci                this.rightArrow.onclick = (e) => {
100748f512ceSopenharmony_ci                    if (this._current < this._pages) {
100848f512ceSopenharmony_ci                        this.current = `${this._current + 1}`
100948f512ceSopenharmony_ci                        this.match();
101048f512ceSopenharmony_ci                    }
101148f512ceSopenharmony_ci                }
101248f512ceSopenharmony_ci                let nodeClickHandler = e => {
101348f512ceSopenharmony_ci                    this.current = `${e.currentTarget.val}`;
101448f512ceSopenharmony_ci                    this.match();
101548f512ceSopenharmony_ci                };
101648f512ceSopenharmony_ci                this.first.onclick = nodeClickHandler;
101748f512ceSopenharmony_ci                this.nodes.forEach(a => a.onclick = nodeClickHandler);
101848f512ceSopenharmony_ci                this.last.onclick = nodeClickHandler;
101948f512ceSopenharmony_ci                this.doubleLeft.onmouseover = e => {
102048f512ceSopenharmony_ci                    e.target.name = 'doubleleft';
102148f512ceSopenharmony_ci                }
102248f512ceSopenharmony_ci                this.doubleLeft.onmouseout = e => {
102348f512ceSopenharmony_ci                    e.target.name = 'ellipsis'
102448f512ceSopenharmony_ci                }
102548f512ceSopenharmony_ci                this.doubleLeft.onclick = e => {
102648f512ceSopenharmony_ci                    let k = this._current - 5;
102748f512ceSopenharmony_ci                    if (k < 1) k = 1;
102848f512ceSopenharmony_ci                    this.current = `${k}`;
102948f512ceSopenharmony_ci                    this.match();
103048f512ceSopenharmony_ci                }
103148f512ceSopenharmony_ci                this.doubleRight.onmouseover = e => {
103248f512ceSopenharmony_ci                    e.target.name = 'doubleright';
103348f512ceSopenharmony_ci                }
103448f512ceSopenharmony_ci                this.doubleRight.onmouseout = e => {
103548f512ceSopenharmony_ci                    e.target.name = 'ellipsis'
103648f512ceSopenharmony_ci                }
103748f512ceSopenharmony_ci                this.doubleRight.onclick = e => {
103848f512ceSopenharmony_ci                    let k = this._current + 5;
103948f512ceSopenharmony_ci                    if (k > this._pages) k = this._pages;
104048f512ceSopenharmony_ci                    this.current = `${k}`;
104148f512ceSopenharmony_ci                    this.match();
104248f512ceSopenharmony_ci                }
104348f512ceSopenharmony_ci                this.match();
104448f512ceSopenharmony_ci            }
104548f512ceSopenharmony_ci
104648f512ceSopenharmony_ci            match() {
104748f512ceSopenharmony_ci                this._current = parseInt(this.current);
104848f512ceSopenharmony_ci                this._total = parseInt(this.total);
104948f512ceSopenharmony_ci                this._pageSize = parseInt(this.pageSize);
105048f512ceSopenharmony_ci                this._pages = Math.ceil(this._total / this._pageSize)
105148f512ceSopenharmony_ci                if (this._current > this._pages) {
105248f512ceSopenharmony_ci                    this._current = this._pages;
105348f512ceSopenharmony_ci                    this.current = `${this._pages}`;
105448f512ceSopenharmony_ci                } else if (this._current < 1) {
105548f512ceSopenharmony_ci                    this._current = 1;
105648f512ceSopenharmony_ci                    this.current = `1`;
105748f512ceSopenharmony_ci                }
105848f512ceSopenharmony_ci                //是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
105948f512ceSopenharmony_ci                // if(this._total>50) this.setAttribute('show-size-changer', '');
106048f512ceSopenharmony_ci
106148f512ceSopenharmony_ci                // console.log(`${this._total} ${this._current}/${this._pages} ${this._pageSize}`);
106248f512ceSopenharmony_ci                if (this._current === 1) {
106348f512ceSopenharmony_ci                    this.leftArrow.setAttribute('disable', '');
106448f512ceSopenharmony_ci                } else {
106548f512ceSopenharmony_ci                    this.leftArrow.removeAttribute('disable');
106648f512ceSopenharmony_ci                }
106748f512ceSopenharmony_ci                if (this._current === this._pages) {
106848f512ceSopenharmony_ci                    this.rightArrow.setAttribute('disable', '');
106948f512ceSopenharmony_ci                } else {
107048f512ceSopenharmony_ci                    this.rightArrow.removeAttribute('disable');
107148f512ceSopenharmony_ci                }
107248f512ceSopenharmony_ci                this.hiddenNode(this.first, this.last, this.one, this.two, this.three, this.four, this.five, this.doubleLeft, this.doubleRight)
107348f512ceSopenharmony_ci                if (this._pages <= 5) {
107448f512ceSopenharmony_ci                    for (let i = 0; i < this._pages; i++) {
107548f512ceSopenharmony_ci                        this.displayNode(this.nodes[i]);
107648f512ceSopenharmony_ci                        this.item(this.nodes[i], i + 1);
107748f512ceSopenharmony_ci                    }
107848f512ceSopenharmony_ci                } else if (this._pages === 6) {
107948f512ceSopenharmony_ci                    this.displayNode(this.first);
108048f512ceSopenharmony_ci                    this.item(this.first, 1);
108148f512ceSopenharmony_ci                    for (let i = 0; i < this._pages; i++) {
108248f512ceSopenharmony_ci                        this.displayNode(this.nodes[i]);
108348f512ceSopenharmony_ci                        this.item(this.nodes[i], i + 2);
108448f512ceSopenharmony_ci                    }
108548f512ceSopenharmony_ci                } else {
108648f512ceSopenharmony_ci                    this.displayNode(this.one, this.two, this.three, this.four, this.five)
108748f512ceSopenharmony_ci                    if (this._current - 3 > 1 && this._current + 3 < this._pages) { // 左边溢出 右边溢出
108848f512ceSopenharmony_ci                        this.displayNode(this.first, this.last, this.doubleLeft, this.doubleRight);
108948f512ceSopenharmony_ci                        this.item(this.first, 1);
109048f512ceSopenharmony_ci                        this.item(this.last, this._pages);
109148f512ceSopenharmony_ci                        this.item(this.one, this._current - 2);
109248f512ceSopenharmony_ci                        this.item(this.two, this._current - 1);
109348f512ceSopenharmony_ci                        this.item(this.three, this._current);
109448f512ceSopenharmony_ci                        this.item(this.four, this._current + 1);
109548f512ceSopenharmony_ci                        this.item(this.five, this._current + 2);
109648f512ceSopenharmony_ci                    } else if (this._current - 3 === 1 && this._current + 3 < this._pages) {//左边刚好 右边溢出
109748f512ceSopenharmony_ci                        this.displayNode(this.first, this.last, this.doubleRight);
109848f512ceSopenharmony_ci                        this.item(this.first, 1)
109948f512ceSopenharmony_ci                        this.item(this.last, this._pages)
110048f512ceSopenharmony_ci                        for (let i = 0; i < this.nodes.length; i++) {
110148f512ceSopenharmony_ci                            this.item(this.nodes[i], i + 2);
110248f512ceSopenharmony_ci                        }
110348f512ceSopenharmony_ci                    } else if (this._current - 3 < 1 && this._current + 3 < this._pages) {  //左边不够 右边溢出
110448f512ceSopenharmony_ci                        this.displayNode(this.last, this.doubleRight);
110548f512ceSopenharmony_ci                        this.item(this.last, this._pages)
110648f512ceSopenharmony_ci                        for (let i = 0; i < this.nodes.length; i++) {
110748f512ceSopenharmony_ci                            this.item(this.nodes[i], i + 1);
110848f512ceSopenharmony_ci                        }
110948f512ceSopenharmony_ci                    } else if (this._current - 3 > 1 && this._current + 3 === this._pages) {// 左边溢出 右边刚好
111048f512ceSopenharmony_ci                        this.displayNode(this.first, this.last, this.doubleLeft);
111148f512ceSopenharmony_ci                        this.item(this.first, 1);
111248f512ceSopenharmony_ci                        this.item(this.last, this._pages);
111348f512ceSopenharmony_ci                        this.item(this.nodes[0], this._pages - 5);
111448f512ceSopenharmony_ci                        this.item(this.nodes[1], this._pages - 4);
111548f512ceSopenharmony_ci                        this.item(this.nodes[2], this._pages - 3);
111648f512ceSopenharmony_ci                        this.item(this.nodes[3], this._pages - 2);
111748f512ceSopenharmony_ci                        this.item(this.nodes[4], this._pages - 1);
111848f512ceSopenharmony_ci                    } else if (this._current - 3 === 1 && this._current + 3 === this._pages) {// 左边刚好 右边刚好
111948f512ceSopenharmony_ci                        this.displayNode(this.first, this.last);
112048f512ceSopenharmony_ci                        this.item(this.first, 1);
112148f512ceSopenharmony_ci                        for (let i = 0; i < this._pages; i++) {
112248f512ceSopenharmony_ci                            this.displayNode(this.nodes[i]);
112348f512ceSopenharmony_ci                            this.item(this.nodes[i], i + 2);
112448f512ceSopenharmony_ci                        }
112548f512ceSopenharmony_ci                        this.item(this.last, 7);
112648f512ceSopenharmony_ci                    } else if (this._current - 3 < 1 && this._current + 3 === this._pages) {// 左边不够 右边刚好
112748f512ceSopenharmony_ci                        this.displayNode(this.last);
112848f512ceSopenharmony_ci                        this.item(this.last, this._pages)
112948f512ceSopenharmony_ci                        for (let i = 0; i < this.nodes.length; i++) {
113048f512ceSopenharmony_ci                            this.item(this.nodes[i], i + 1);
113148f512ceSopenharmony_ci                        }
113248f512ceSopenharmony_ci                    } else if (this._current - 3 > 1 && this._current + 3 > this._pages) { //左边溢出 右边不够
113348f512ceSopenharmony_ci                        this.displayNode(this.first, this.doubleLeft)
113448f512ceSopenharmony_ci                        this.item(this.first, 1);
113548f512ceSopenharmony_ci                        this.item(this.nodes[0], this._pages - 4);
113648f512ceSopenharmony_ci                        this.item(this.nodes[1], this._pages - 3);
113748f512ceSopenharmony_ci                        this.item(this.nodes[2], this._pages - 2);
113848f512ceSopenharmony_ci                        this.item(this.nodes[3], this._pages - 1);
113948f512ceSopenharmony_ci                        this.item(this.nodes[4], this._pages - 0);
114048f512ceSopenharmony_ci                    } else if (this._current - 3 === 1 && this._current + 3 > this._pages) { //左边刚好 右边不够
114148f512ceSopenharmony_ci                        this.displayNode(this.first);
114248f512ceSopenharmony_ci                        this.item(this.first, 1);
114348f512ceSopenharmony_ci                        this.item(this.nodes[0], this._pages - 4);
114448f512ceSopenharmony_ci                        this.item(this.nodes[1], this._pages - 3);
114548f512ceSopenharmony_ci                        this.item(this.nodes[2], this._pages - 2);
114648f512ceSopenharmony_ci                        this.item(this.nodes[3], this._pages - 1);
114748f512ceSopenharmony_ci                        this.item(this.nodes[4], this._pages - 0);
114848f512ceSopenharmony_ci                    } else if (this._current - 3 < 1 && this._current + 3 > this._pages) { //左边不够 右边不够
114948f512ceSopenharmony_ci                        //限定了 pages>6 这种情况不存在
115048f512ceSopenharmony_ci                    }
115148f512ceSopenharmony_ci                }
115248f512ceSopenharmony_ci            }
115348f512ceSopenharmony_ci
115448f512ceSopenharmony_ci            item(el, val) {
115548f512ceSopenharmony_ci                el.val = val;
115648f512ceSopenharmony_ci                el.textContent = val;
115748f512ceSopenharmony_ci                if (val === this._current) {
115848f512ceSopenharmony_ci                    el.setAttribute('selected', '');
115948f512ceSopenharmony_ci                } else {
116048f512ceSopenharmony_ci                    el.removeAttribute('selected');
116148f512ceSopenharmony_ci                }
116248f512ceSopenharmony_ci            }
116348f512ceSopenharmony_ci
116448f512ceSopenharmony_ci            displayNode() {
116548f512ceSopenharmony_ci                [...arguments].forEach(a => a.style.display = 'flex');
116648f512ceSopenharmony_ci            }
116748f512ceSopenharmony_ci
116848f512ceSopenharmony_ci            hiddenNode(n) {
116948f512ceSopenharmony_ci                [...arguments].forEach(a => a.style.display = 'none');
117048f512ceSopenharmony_ci            }
117148f512ceSopenharmony_ci
117248f512ceSopenharmony_ci            //当 custom element从文档DOM中删除时，被调用。
117348f512ceSopenharmony_ci            disconnectedCallback() {
117448f512ceSopenharmony_ci            }
117548f512ceSopenharmony_ci
117648f512ceSopenharmony_ci            //当 custom element被移动到新的文档时，被调用。
117748f512ceSopenharmony_ci            adoptedCallback() {
117848f512ceSopenharmony_ci            }
117948f512ceSopenharmony_ci
118048f512ceSopenharmony_ci            //当 custom element增加、删除、修改自身属性时，被调用。
118148f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
118248f512ceSopenharmony_ci                if (name === 'current') {
118348f512ceSopenharmony_ci                    this.dispatchEvent(new CustomEvent('onChange', {
118448f512ceSopenharmony_ci                        detail: {
118548f512ceSopenharmony_ci                            page: parseInt(newValue),
118648f512ceSopenharmony_ci                            pageSize: this._pageSize
118748f512ceSopenharmony_ci                        }
118848f512ceSopenharmony_ci                    }));
118948f512ceSopenharmony_ci                } else if (name === 'total') {
119048f512ceSopenharmony_ci                    this.dispatchEvent(new CustomEvent('onChange', {
119148f512ceSopenharmony_ci                        detail: {
119248f512ceSopenharmony_ci                            total: parseInt(newValue),
119348f512ceSopenharmony_ci                            current: this._current,
119448f512ceSopenharmony_ci                            pageSize: this._pageSize
119548f512ceSopenharmony_ci                        }
119648f512ceSopenharmony_ci                    }));
119748f512ceSopenharmony_ci                    this.match()
119848f512ceSopenharmony_ci                }
119948f512ceSopenharmony_ci
120048f512ceSopenharmony_ci            }
120148f512ceSopenharmony_ci        }
120248f512ceSopenharmony_ci        if (!customElements.get('lit-pagination')) {
120348f512ceSopenharmony_ci            customElements.define('lit-pagination', LitPagination);
120448f512ceSopenharmony_ci        }
120548f512ceSopenharmony_ci
120648f512ceSopenharmony_ci        class LitSelect extends HTMLElement {
120748f512ceSopenharmony_ci            static get observedAttributes() {
120848f512ceSopenharmony_ci                return [
120948f512ceSopenharmony_ci                    'value',//默认值
121048f512ceSopenharmony_ci                    'default-value',//默认值
121148f512ceSopenharmony_ci                    'placeholder',//placeholder
121248f512ceSopenharmony_ci                    'disabled',
121348f512ceSopenharmony_ci                    'loading',//是否处于加载状态
121448f512ceSopenharmony_ci                    'allow-clear',//是否允许清除
121548f512ceSopenharmony_ci                    'show-search',//是否允许搜索
121648f512ceSopenharmony_ci                    'list-height',//设置弹窗滚动高度 默认256px
121748f512ceSopenharmony_ci                    'border',//是否显示边框
121848f512ceSopenharmony_ci                    'mode',// mode='multiple'多选
121948f512ceSopenharmony_ci                ];
122048f512ceSopenharmony_ci            }
122148f512ceSopenharmony_ci
122248f512ceSopenharmony_ci            get value() {
122348f512ceSopenharmony_ci                return this.getAttribute('value') || this.defaultValue;
122448f512ceSopenharmony_ci            }
122548f512ceSopenharmony_ci
122648f512ceSopenharmony_ci            set value(value) {
122748f512ceSopenharmony_ci                this.setAttribute('value', value);
122848f512ceSopenharmony_ci            }
122948f512ceSopenharmony_ci
123048f512ceSopenharmony_ci            get border() {
123148f512ceSopenharmony_ci                return this.getAttribute('border') || 'true';
123248f512ceSopenharmony_ci            }
123348f512ceSopenharmony_ci
123448f512ceSopenharmony_ci            set border(value) {
123548f512ceSopenharmony_ci                if (value) {
123648f512ceSopenharmony_ci                    this.setAttribute('border', 'true');
123748f512ceSopenharmony_ci                } else {
123848f512ceSopenharmony_ci                    this.setAttribute('border', 'false');
123948f512ceSopenharmony_ci                }
124048f512ceSopenharmony_ci            }
124148f512ceSopenharmony_ci
124248f512ceSopenharmony_ci            get listHeight() {
124348f512ceSopenharmony_ci                return this.getAttribute('list-height') || '256px';
124448f512ceSopenharmony_ci            }
124548f512ceSopenharmony_ci
124648f512ceSopenharmony_ci            set listHeight(value) {
124748f512ceSopenharmony_ci                this.setAttribute('list-height', value);
124848f512ceSopenharmony_ci            }
124948f512ceSopenharmony_ci
125048f512ceSopenharmony_ci            get defaultPlaceholder() {
125148f512ceSopenharmony_ci                return this.getAttribute('placeholder') || '请选择';
125248f512ceSopenharmony_ci            }
125348f512ceSopenharmony_ci
125448f512ceSopenharmony_ci            get showSearch() {
125548f512ceSopenharmony_ci                return this.hasAttribute('show-search');
125648f512ceSopenharmony_ci            }
125748f512ceSopenharmony_ci
125848f512ceSopenharmony_ci            set defaultValue(value) {
125948f512ceSopenharmony_ci                this.setAttribute('default-value', value);
126048f512ceSopenharmony_ci            }
126148f512ceSopenharmony_ci
126248f512ceSopenharmony_ci            get defaultValue() {
126348f512ceSopenharmony_ci                return this.getAttribute('default-value') || '';
126448f512ceSopenharmony_ci            }
126548f512ceSopenharmony_ci
126648f512ceSopenharmony_ci            set placeholder(value) {
126748f512ceSopenharmony_ci                this.setAttribute('placeholder', value);
126848f512ceSopenharmony_ci            }
126948f512ceSopenharmony_ci
127048f512ceSopenharmony_ci            get placeholder() {
127148f512ceSopenharmony_ci                return this.getAttribute('placeholder') || this.defaultPlaceholder;
127248f512ceSopenharmony_ci            }
127348f512ceSopenharmony_ci
127448f512ceSopenharmony_ci            get loading() {
127548f512ceSopenharmony_ci                return this.hasAttribute('loading');
127648f512ceSopenharmony_ci            }
127748f512ceSopenharmony_ci
127848f512ceSopenharmony_ci            set loading(value) {
127948f512ceSopenharmony_ci                if (value) {
128048f512ceSopenharmony_ci                    this.setAttribute('loading', '');
128148f512ceSopenharmony_ci                } else {
128248f512ceSopenharmony_ci                    this.removeAttribute('loading')
128348f512ceSopenharmony_ci                }
128448f512ceSopenharmony_ci            }
128548f512ceSopenharmony_ci
128648f512ceSopenharmony_ci            constructor() {
128748f512ceSopenharmony_ci                super();
128848f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
128948f512ceSopenharmony_ci                shadowRoot.innerHTML = `
129048f512ceSopenharmony_ci        <style>
129148f512ceSopenharmony_ci:host{
129248f512ceSopenharmony_ci    display: inline-flex;
129348f512ceSopenharmony_ci    position: relative;
129448f512ceSopenharmony_ci    overflow: visible;
129548f512ceSopenharmony_ci    cursor: pointer;
129648f512ceSopenharmony_ci    transition: all .3s;
129748f512ceSopenharmony_ci    border-radius: 2px;
129848f512ceSopenharmony_ci    outline: none;
129948f512ceSopenharmony_ci    -webkit-user-select:none ;
130048f512ceSopenharmony_ci    -moz-user-select:none;
130148f512ceSopenharmony_ci    user-select:none;
130248f512ceSopenharmony_ci    /*width: 100%;*/
130348f512ceSopenharmony_ci}
130448f512ceSopenharmony_ci:host(:not([border])),
130548f512ceSopenharmony_ci:host([border='true']){
130648f512ceSopenharmony_ci    border: 1px solid #dcdcdc;
130748f512ceSopenharmony_ci}
130848f512ceSopenharmony_ciinput{
130948f512ceSopenharmony_ci    border: 0;
131048f512ceSopenharmony_ci    outline: none;
131148f512ceSopenharmony_ci    background-color: transparent;
131248f512ceSopenharmony_ci    cursor: pointer;
131348f512ceSopenharmony_ci    transition: all .3s;
131448f512ceSopenharmony_ci    -webkit-user-select:none ;
131548f512ceSopenharmony_ci    -moz-user-select:none;
131648f512ceSopenharmony_ci    user-select:none;
131748f512ceSopenharmony_ci    display: inline-flex;
131848f512ceSopenharmony_ci}
131948f512ceSopenharmony_ci:host(:not([mode]))  input{
132048f512ceSopenharmony_ci    width: 100%;
132148f512ceSopenharmony_ci}
132248f512ceSopenharmony_ci:host([mode])  input{
132348f512ceSopenharmony_ci    padding: 6px 0px;
132448f512ceSopenharmony_ci}
132548f512ceSopenharmony_ci:host([mode])  .root{
132648f512ceSopenharmony_ci    padding: 1px 8px;
132748f512ceSopenharmony_ci}
132848f512ceSopenharmony_ci.root{
132948f512ceSopenharmony_ci    position: relative;
133048f512ceSopenharmony_ci    padding: 6px 8px;
133148f512ceSopenharmony_ci    display: flex;
133248f512ceSopenharmony_ci    align-items: center;
133348f512ceSopenharmony_ci    justify-content: space-between;
133448f512ceSopenharmony_ci    transition: all .3s;
133548f512ceSopenharmony_ci    border-radius: 2px;
133648f512ceSopenharmony_ci    background-color: #fff;
133748f512ceSopenharmony_ci    outline: none;
133848f512ceSopenharmony_ci    font-size: 1rem;
133948f512ceSopenharmony_ci    z-index: 2;
134048f512ceSopenharmony_ci    -webkit-user-select:none ;
134148f512ceSopenharmony_ci    -moz-user-select:none;
134248f512ceSopenharmony_ci    user-select:none;
134348f512ceSopenharmony_ci    width: 100%;
134448f512ceSopenharmony_ci}
134548f512ceSopenharmony_ci.body{
134648f512ceSopenharmony_ci    max-height: ${this.listHeight};
134748f512ceSopenharmony_ci    position: absolute;
134848f512ceSopenharmony_ci    top: 100%;
134948f512ceSopenharmony_ci    z-index: 99;
135048f512ceSopenharmony_ci    padding-top: 5px;
135148f512ceSopenharmony_ci    margin-top: 2px;
135248f512ceSopenharmony_ci    background-color: #fff;
135348f512ceSopenharmony_ci    width: 100%;
135448f512ceSopenharmony_ci    transition: all 0.2s;
135548f512ceSopenharmony_ci    transform: scaleY(.6);
135648f512ceSopenharmony_ci    visibility: hidden;
135748f512ceSopenharmony_ci    opacity: 0;
135848f512ceSopenharmony_ci    transform-origin: top center;
135948f512ceSopenharmony_ci    display: block;
136048f512ceSopenharmony_ci    flex-direction: column;
136148f512ceSopenharmony_ci    box-shadow: 0 5px 15px 0px #00000033;
136248f512ceSopenharmony_ci    border-radius: 2px;
136348f512ceSopenharmony_ci    overflow: auto;
136448f512ceSopenharmony_ci}
136548f512ceSopenharmony_ci.icon{
136648f512ceSopenharmony_ci    pointer-events: none;
136748f512ceSopenharmony_ci}
136848f512ceSopenharmony_ci.noSelect{
136948f512ceSopenharmony_ci  -webkit-touch-callout:none; /* iOS Safari */
137048f512ceSopenharmony_ci  -webkit-user-select:none;
137148f512ceSopenharmony_ci  -khtml-user-select:none;    /* Konqueror */
137248f512ceSopenharmony_ci  -moz-user-select:none;      /* Firefox */
137348f512ceSopenharmony_ci  -ms-user-select:none;       /* Internet Explorer/Edge */
137448f512ceSopenharmony_ci  user-select:none;           /* Non-prefixed version */
137548f512ceSopenharmony_ci}
137648f512ceSopenharmony_ci
137748f512ceSopenharmony_ci:host(:not([border]):not([disabled]):focus),
137848f512ceSopenharmony_ci:host([border='true']:not([disabled]):focus),
137948f512ceSopenharmony_ci:host(:not([border]):not([disabled]):hover),
138048f512ceSopenharmony_ci:host([border='true']:not([disabled]):hover){
138148f512ceSopenharmony_ci    border:1px solid #42b983
138248f512ceSopenharmony_ci}
138348f512ceSopenharmony_ci:host(:not([disabled]):focus) .body,
138448f512ceSopenharmony_ci:host(:not([disabled]):focus-within) .body{
138548f512ceSopenharmony_ci    transform: scaleY(1);
138648f512ceSopenharmony_ci    opacity: 1;
138748f512ceSopenharmony_ci    z-index: 99;
138848f512ceSopenharmony_ci    visibility: visible;
138948f512ceSopenharmony_ci}
139048f512ceSopenharmony_ci:host(:not([disabled]):focus)  input{
139148f512ceSopenharmony_ci    color: #bebebe;
139248f512ceSopenharmony_ci}
139348f512ceSopenharmony_ci:host(:not([border])[disabled]) *,
139448f512ceSopenharmony_ci:host([border='true'][disabled]) *{
139548f512ceSopenharmony_ci    background-color: #f5f5f5;
139648f512ceSopenharmony_ci    color: #b7b7b7;
139748f512ceSopenharmony_ci    cursor: not-allowed;
139848f512ceSopenharmony_ci}
139948f512ceSopenharmony_ci:host([border='false'][disabled]) *{
140048f512ceSopenharmony_ci    color: #b7b7b7;
140148f512ceSopenharmony_ci    cursor: not-allowed;
140248f512ceSopenharmony_ci}
140348f512ceSopenharmony_ci:host([loading]) .loading{
140448f512ceSopenharmony_ci    display: flex;
140548f512ceSopenharmony_ci}
140648f512ceSopenharmony_ci:host([loading]) .icon{
140748f512ceSopenharmony_ci    display: none;
140848f512ceSopenharmony_ci}
140948f512ceSopenharmony_ci:host(:not([loading])) .loading{
141048f512ceSopenharmony_ci    display: none;
141148f512ceSopenharmony_ci}
141248f512ceSopenharmony_ci:host(:not([loading])) .icon{
141348f512ceSopenharmony_ci    display: flex;
141448f512ceSopenharmony_ci}
141548f512ceSopenharmony_ci:host(:not([allow-clear])) .clear{
141648f512ceSopenharmony_ci    display: none;
141748f512ceSopenharmony_ci}
141848f512ceSopenharmony_ci.clear{
141948f512ceSopenharmony_ci    display: none;
142048f512ceSopenharmony_ci    color: #bfbfbf;
142148f512ceSopenharmony_ci}
142248f512ceSopenharmony_ci.clear:hover{
142348f512ceSopenharmony_ci    color: #8c8c8c;
142448f512ceSopenharmony_ci}
142548f512ceSopenharmony_ci.search{
142648f512ceSopenharmony_ci    display: none;
142748f512ceSopenharmony_ci    color: #bfbfbf;
142848f512ceSopenharmony_ci}
142948f512ceSopenharmony_ci.multipleRoot{
143048f512ceSopenharmony_ci    display: flex;
143148f512ceSopenharmony_ci    flex-direction: column;
143248f512ceSopenharmony_ci    flex-wrap: wrap;
143348f512ceSopenharmony_ci    flex-flow: wrap;
143448f512ceSopenharmony_ci    align-items: center;
143548f512ceSopenharmony_ci    width: 100%;
143648f512ceSopenharmony_ci}
143748f512ceSopenharmony_ci.tag{
143848f512ceSopenharmony_ci    display: inline-flex;
143948f512ceSopenharmony_ci    align-items: center;
144048f512ceSopenharmony_ci    background-color: #f5f5f5;
144148f512ceSopenharmony_ci    padding: 1px 4px;
144248f512ceSopenharmony_ci    height: auto;
144348f512ceSopenharmony_ci    font-size: .75rem;
144448f512ceSopenharmony_ci    font-weight: bold;
144548f512ceSopenharmony_ci    color: #242424;
144648f512ceSopenharmony_ci    overflow: auto;
144748f512ceSopenharmony_ci    position: relative;
144848f512ceSopenharmony_ci    margin-right: 4px;
144948f512ceSopenharmony_ci    margin-top: 1px;
145048f512ceSopenharmony_ci    margin-bottom: 1px;
145148f512ceSopenharmony_ci}
145248f512ceSopenharmony_ci.tag-close{
145348f512ceSopenharmony_ci    font-size: .8rem;
145448f512ceSopenharmony_ci    padding: 2px;
145548f512ceSopenharmony_ci    margin-left: 0px;
145648f512ceSopenharmony_ci    color: #999999;
145748f512ceSopenharmony_ci}
145848f512ceSopenharmony_ci.tag-close:hover{
145948f512ceSopenharmony_ci    color: #333;
146048f512ceSopenharmony_ci}
146148f512ceSopenharmony_ci
146248f512ceSopenharmony_ci</style>
146348f512ceSopenharmony_ci<div class="root noSelect" tabindex="0" hidefocus="true">
146448f512ceSopenharmony_ci    <div class="multipleRoot">
146548f512ceSopenharmony_ci        <input placeholder="${this.placeholder}" style="" autocomplete="off" ${this.showSearch ? '' : 'readonly'} tabindex="0">
146648f512ceSopenharmony_ci    </div><!--多选-->
146748f512ceSopenharmony_ci    <lit-loading class="loading" size="12"></lit-loading>
146848f512ceSopenharmony_ci    <!--<lit-icon class="icon" name='down' color="#c3c3c3"></lit-icon>-->
146948f512ceSopenharmony_ci    <svg class="icon" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;fill: #c3c3c3">
147048f512ceSopenharmony_ci        <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z"></path>
147148f512ceSopenharmony_ci    </svg>
147248f512ceSopenharmony_ci<!--    <lit-icon class="clear" name='close-circle-fill'></lit-icon>-->
147348f512ceSopenharmony_ci    <svg class="clear" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;">
147448f512ceSopenharmony_ci        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m165.4 618.2l-66-0.3L512 563.4l-99.3 118.4-66.1 0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
147548f512ceSopenharmony_ci    </svg>
147648f512ceSopenharmony_ci<!--    <lit-icon class="search" name='search'></lit-icon>-->
147748f512ceSopenharmony_ci    <svg class="search" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;">
147848f512ceSopenharmony_ci        <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6c3.2 3.2 8.4 3.2 11.6 0l43.6-43.5c3.2-3.2 3.2-8.4 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
147948f512ceSopenharmony_ci    </svg>
148048f512ceSopenharmony_ci</div>
148148f512ceSopenharmony_ci<div class="body">
148248f512ceSopenharmony_ci    <slot></slot>
148348f512ceSopenharmony_ci    <slot name="footer"></slot>
148448f512ceSopenharmony_ci</div>
148548f512ceSopenharmony_ci        `
148648f512ceSopenharmony_ci            }
148748f512ceSopenharmony_ci
148848f512ceSopenharmony_ci            isMultiple() {
148948f512ceSopenharmony_ci                return this.hasAttribute('mode') && this.getAttribute('mode') === 'multiple'
149048f512ceSopenharmony_ci            }
149148f512ceSopenharmony_ci
149248f512ceSopenharmony_ci            newTag(value, text) {
149348f512ceSopenharmony_ci                let tag = document.createElement('div');
149448f512ceSopenharmony_ci                let icon = document.createElement('lit-icon');
149548f512ceSopenharmony_ci                icon.classList.add('tag-close')
149648f512ceSopenharmony_ci                icon.name = 'close'
149748f512ceSopenharmony_ci                let span = document.createElement('span');
149848f512ceSopenharmony_ci                tag.classList.add('tag');
149948f512ceSopenharmony_ci                span.dataset['value'] = value;
150048f512ceSopenharmony_ci                span.textContent = text;
150148f512ceSopenharmony_ci                tag.append(span);
150248f512ceSopenharmony_ci                tag.append(icon);
150348f512ceSopenharmony_ci                icon.onclick = ev => {
150448f512ceSopenharmony_ci                    tag.parentElement.removeChild(tag);
150548f512ceSopenharmony_ci                    this.querySelector(`lit-select-option[value=${value}]`).removeAttribute('selected')
150648f512ceSopenharmony_ci                    if (this.shadowRoot.querySelectorAll('.tag').length == 0) {
150748f512ceSopenharmony_ci                        this.inputElement.style.width = 'auto';
150848f512ceSopenharmony_ci                        this.inputElement.placeholder = this.defaultPlaceholder;
150948f512ceSopenharmony_ci                    }
151048f512ceSopenharmony_ci                    ev.stopPropagation();
151148f512ceSopenharmony_ci                }
151248f512ceSopenharmony_ci                tag.value = value;
151348f512ceSopenharmony_ci                tag.dataset['value'] = value;
151448f512ceSopenharmony_ci                tag.text = text;
151548f512ceSopenharmony_ci                tag.dataset['text'] = text;
151648f512ceSopenharmony_ci                return tag;
151748f512ceSopenharmony_ci            }
151848f512ceSopenharmony_ci
151948f512ceSopenharmony_ci            //当 custom element首次被插入文档DOM时，被调用。
152048f512ceSopenharmony_ci            connectedCallback() {
152148f512ceSopenharmony_ci                this.tabIndex = 0;//设置当前组件为可以获取焦点
152248f512ceSopenharmony_ci                this.focused = false;
152348f512ceSopenharmony_ci                this.inputElement = this.shadowRoot.querySelector('input');
152448f512ceSopenharmony_ci                this.inputElement.style.width = '100%'
152548f512ceSopenharmony_ci                this.clearElement = this.shadowRoot.querySelector('.clear');
152648f512ceSopenharmony_ci                this.iconElement = this.shadowRoot.querySelector('.icon');
152748f512ceSopenharmony_ci                this.searchElement = this.shadowRoot.querySelector('.search');
152848f512ceSopenharmony_ci                this.multipleRootElement = this.shadowRoot.querySelector('.multipleRoot');
152948f512ceSopenharmony_ci                // console.log(this.multipleRootElement);
153048f512ceSopenharmony_ci                //点击清理 清空input值，展示placeholder，
153148f512ceSopenharmony_ci                this.clearElement.onclick = ev => {
153248f512ceSopenharmony_ci                    if (this.isMultiple()) {
153348f512ceSopenharmony_ci                        let delNodes = []
153448f512ceSopenharmony_ci                        this.multipleRootElement.childNodes.forEach(a => {
153548f512ceSopenharmony_ci                            if (a.tagName === 'DIV') {
153648f512ceSopenharmony_ci                                delNodes.push(a);
153748f512ceSopenharmony_ci                            }
153848f512ceSopenharmony_ci                        })
153948f512ceSopenharmony_ci                        for (let i = 0; i < delNodes.length; i++) {
154048f512ceSopenharmony_ci                            delNodes[i].remove();
154148f512ceSopenharmony_ci                        }
154248f512ceSopenharmony_ci                        if (this.shadowRoot.querySelectorAll('.tag').length == 0) {
154348f512ceSopenharmony_ci                            this.inputElement.style.width = 'auto';
154448f512ceSopenharmony_ci                            this.inputElement.placeholder = this.defaultPlaceholder;
154548f512ceSopenharmony_ci                        }
154648f512ceSopenharmony_ci                    }
154748f512ceSopenharmony_ci                    this.querySelectorAll('lit-select-option').forEach(a => a.removeAttribute('selected'));
154848f512ceSopenharmony_ci                    this.inputElement.value = ''
154948f512ceSopenharmony_ci                    this.clearElement.style.display = 'none';
155048f512ceSopenharmony_ci                    this.iconElement.style.display = 'flex';
155148f512ceSopenharmony_ci                    this.blur();
155248f512ceSopenharmony_ci                    ev.stopPropagation();//这里不会因为点击清理而触发 选择栏目显示或者隐藏
155348f512ceSopenharmony_ci                    this.dispatchEvent(new CustomEvent('onClear', { detail: ev }))//向外派发清理事件
155448f512ceSopenharmony_ci                }
155548f512ceSopenharmony_ci                //初始化时遍历所有的option节点
155648f512ceSopenharmony_ci                this.initOptions();
155748f512ceSopenharmony_ci                //当前控件点击时 如果时select本身 需要显示 或 隐藏选择栏目，通过this.focused变量控制（默认为false）
155848f512ceSopenharmony_ci                this.onclick = ev => {
155948f512ceSopenharmony_ci                    if (ev.target.tagName === 'LIT-SELECT') {
156048f512ceSopenharmony_ci                        if (!this.focused) {
156148f512ceSopenharmony_ci                            this.inputElement.focus();
156248f512ceSopenharmony_ci                            this.focused = true;
156348f512ceSopenharmony_ci                        } else {
156448f512ceSopenharmony_ci                            this.blur();
156548f512ceSopenharmony_ci                            this.focused = false;
156648f512ceSopenharmony_ci                        }
156748f512ceSopenharmony_ci                    }
156848f512ceSopenharmony_ci                }
156948f512ceSopenharmony_ci                this.onmouseover = this.onfocus = ev => {
157048f512ceSopenharmony_ci                    // console.log('onmouseover',ev);
157148f512ceSopenharmony_ci                    if (this.hasAttribute('allow-clear')) {
157248f512ceSopenharmony_ci                        if (this.inputElement.value.length > 0 || this.inputElement.placeholder !== this.defaultPlaceholder) {
157348f512ceSopenharmony_ci                            this.clearElement.style.display = 'flex'
157448f512ceSopenharmony_ci                            this.iconElement.style.display = 'none';
157548f512ceSopenharmony_ci                        } else {
157648f512ceSopenharmony_ci                            this.clearElement.style.display = 'none'
157748f512ceSopenharmony_ci                            this.iconElement.style.display = 'flex';
157848f512ceSopenharmony_ci                        }
157948f512ceSopenharmony_ci                    }
158048f512ceSopenharmony_ci                }
158148f512ceSopenharmony_ci                this.onmouseout = this.onblur = ev => {
158248f512ceSopenharmony_ci                    // console.log('onmouseout',ev);
158348f512ceSopenharmony_ci                    if (this.hasAttribute('allow-clear')) {
158448f512ceSopenharmony_ci                        this.clearElement.style.display = 'none';
158548f512ceSopenharmony_ci                        this.iconElement.style.display = 'flex';
158648f512ceSopenharmony_ci                    }
158748f512ceSopenharmony_ci                    this.focused = false;
158848f512ceSopenharmony_ci                }
158948f512ceSopenharmony_ci                //输入框获取焦点时，value值 暂存于 placeholder  然后value值清空，这样值会以placeholder形式灰色展示，鼠标位于第一个字符
159048f512ceSopenharmony_ci                this.inputElement.onfocus = ev => {
159148f512ceSopenharmony_ci                    if (this.hasAttribute('disabled')) return;//如果控件处于disabled状态 直接忽略
159248f512ceSopenharmony_ci                    if (this.inputElement.value.length > 0) {
159348f512ceSopenharmony_ci                        this.inputElement.placeholder = this.inputElement.value;
159448f512ceSopenharmony_ci                        this.inputElement.value = ''
159548f512ceSopenharmony_ci                    }
159648f512ceSopenharmony_ci                    if (this.hasAttribute('show-search')) {//如果有show-search属性 需要显示放大镜，隐藏向下的箭头
159748f512ceSopenharmony_ci                        this.searchElement.style.display = 'flex';
159848f512ceSopenharmony_ci                        this.iconElement.style.display = 'none';
159948f512ceSopenharmony_ci                    }
160048f512ceSopenharmony_ci                    this.querySelectorAll('lit-select-option').forEach(a => {//input获取焦点时显示所有可选项，相当于清理了搜索结果
160148f512ceSopenharmony_ci                        a.style.display = 'flex';
160248f512ceSopenharmony_ci                    })
160348f512ceSopenharmony_ci                }
160448f512ceSopenharmony_ci                //当输入框失去焦点的时候 placeholder 的值 保存到value上，input显示值
160548f512ceSopenharmony_ci                this.inputElement.onblur = ev => {
160648f512ceSopenharmony_ci                    if (this.hasAttribute('disabled')) return;//如果控件处于disabled状态 直接忽略
160748f512ceSopenharmony_ci                    if (this.isMultiple()) {
160848f512ceSopenharmony_ci                        if (this.hasAttribute('show-search')) {//如果有show-search属性 失去焦点需要 隐藏放大镜图标，显示默认的向下箭头图标
160948f512ceSopenharmony_ci                            this.searchElement.style.display = 'none';
161048f512ceSopenharmony_ci                            this.iconElement.style.display = 'flex';
161148f512ceSopenharmony_ci                        }
161248f512ceSopenharmony_ci                    } else {
161348f512ceSopenharmony_ci                        if (this.inputElement.placeholder !== this.defaultPlaceholder) {//如果placeholder为 请输入（默认值）不做处理
161448f512ceSopenharmony_ci                            this.inputElement.value = this.inputElement.placeholder; //placeholder 保存的值放入 value中
161548f512ceSopenharmony_ci                            this.inputElement.placeholder = this.defaultPlaceholder;//placeholder 值为 默认值（请输入）
161648f512ceSopenharmony_ci                        }
161748f512ceSopenharmony_ci                        if (this.hasAttribute('show-search')) {//如果有show-search属性 失去焦点需要 隐藏放大镜图标，显示默认的向下箭头图标
161848f512ceSopenharmony_ci                            this.searchElement.style.display = 'none';
161948f512ceSopenharmony_ci                            this.iconElement.style.display = 'flex';
162048f512ceSopenharmony_ci                        }
162148f512ceSopenharmony_ci                    }
162248f512ceSopenharmony_ci                }
162348f512ceSopenharmony_ci                //输入框每次文本变化 会匹配搜索的option 显示或者隐藏，达到搜索的效果
162448f512ceSopenharmony_ci                this.inputElement.oninput = ev => {
162548f512ceSopenharmony_ci                    // console.log(ev.target.value);
162648f512ceSopenharmony_ci                    let els = [...this.querySelectorAll('lit-select-option')];
162748f512ceSopenharmony_ci                    if (!ev.target.value) {
162848f512ceSopenharmony_ci                        els.forEach(a => a.style.display = 'flex');
162948f512ceSopenharmony_ci                    } else {
163048f512ceSopenharmony_ci                        els.forEach(a => {
163148f512ceSopenharmony_ci                            let value = a.getAttribute('value');
163248f512ceSopenharmony_ci                            // console.log(value.toLowerCase(), ev.target.value.toLowerCase());
163348f512ceSopenharmony_ci                            if (value.toLowerCase().indexOf(ev.target.value.toLowerCase()) !== -1 ||
163448f512ceSopenharmony_ci                                a.textContent.toLowerCase().indexOf(ev.target.value.toLowerCase()) !== -1) {
163548f512ceSopenharmony_ci                                a.style.display = 'flex';
163648f512ceSopenharmony_ci                            } else {
163748f512ceSopenharmony_ci                                a.style.display = 'none';
163848f512ceSopenharmony_ci                            }
163948f512ceSopenharmony_ci                        })
164048f512ceSopenharmony_ci                    }
164148f512ceSopenharmony_ci                }
164248f512ceSopenharmony_ci                //输入框按下回车键，自动输入当前搜索出来的第一行，及display!='none'的第一个，搜索会隐藏其他行
164348f512ceSopenharmony_ci                this.inputElement.onkeydown = ev => {
164448f512ceSopenharmony_ci                    if (ev.key === 'Backspace') {
164548f512ceSopenharmony_ci                        if (this.isMultiple()) {
164648f512ceSopenharmony_ci                            let tag = this.multipleRootElement.lastElementChild.previousElementSibling;
164748f512ceSopenharmony_ci                            if (tag) {
164848f512ceSopenharmony_ci                                console.log(tag.value);
164948f512ceSopenharmony_ci                                this.querySelector(`lit-select-option[value=${tag.value}]`).removeAttribute('selected');
165048f512ceSopenharmony_ci                                tag.remove()
165148f512ceSopenharmony_ci                                if (this.shadowRoot.querySelectorAll('.tag').length == 0) {
165248f512ceSopenharmony_ci                                    this.inputElement.style.width = 'auto';
165348f512ceSopenharmony_ci                                    this.inputElement.placeholder = this.defaultPlaceholder;
165448f512ceSopenharmony_ci                                }
165548f512ceSopenharmony_ci                            }
165648f512ceSopenharmony_ci                        } else {
165748f512ceSopenharmony_ci                            this.clear();
165848f512ceSopenharmony_ci                            this.dispatchEvent(new CustomEvent('onClear', { detail: ev }))//向外派发清理事件
165948f512ceSopenharmony_ci                        }
166048f512ceSopenharmony_ci                    } else if (ev.key === 'Enter') {
166148f512ceSopenharmony_ci                        let filter = [...this.querySelectorAll('lit-select-option')].filter(a => a.style.display !== 'none');
166248f512ceSopenharmony_ci                        if (filter.length > 0) {
166348f512ceSopenharmony_ci                            this.inputElement.value = filter[0].textContent;
166448f512ceSopenharmony_ci                            this.inputElement.placeholder = filter[0].textContent;
166548f512ceSopenharmony_ci                            this.blur();
166648f512ceSopenharmony_ci                            this.dispatchEvent(new CustomEvent('change', {
166748f512ceSopenharmony_ci                                detail: {
166848f512ceSopenharmony_ci                                    selected: true,
166948f512ceSopenharmony_ci                                    value: filter[0].getAttribute('value'),
167048f512ceSopenharmony_ci                                    text: filter[0].textContent
167148f512ceSopenharmony_ci                                }
167248f512ceSopenharmony_ci                            }));//向外层派发change事件，返回当前选中项
167348f512ceSopenharmony_ci                        }
167448f512ceSopenharmony_ci                    }
167548f512ceSopenharmony_ci                }
167648f512ceSopenharmony_ci            }
167748f512ceSopenharmony_ci
167848f512ceSopenharmony_ci            initOptions() {
167948f512ceSopenharmony_ci                this.querySelectorAll('lit-select-option').forEach(a => {
168048f512ceSopenharmony_ci                    //如果节点的值为 当前控件的默认值 defalut-value则 显示该值对应的option文本
168148f512ceSopenharmony_ci                    if (this.isMultiple()) {
168248f512ceSopenharmony_ci                        a.setAttribute('check', '');
168348f512ceSopenharmony_ci                        if (a.getAttribute('value') === this.defaultValue) {
168448f512ceSopenharmony_ci                            let tag = this.newTag(a.getAttribute('value'), a.textContent);
168548f512ceSopenharmony_ci                            this.multipleRootElement.insertBefore(tag, this.inputElement);
168648f512ceSopenharmony_ci                            this.inputElement.placeholder = '';
168748f512ceSopenharmony_ci                            this.inputElement.value = '';
168848f512ceSopenharmony_ci                            this.inputElement.style.width = '1px';
168948f512ceSopenharmony_ci                            a.setAttribute('selected', '');
169048f512ceSopenharmony_ci                        }
169148f512ceSopenharmony_ci                        // this.inputElement.focus();
169248f512ceSopenharmony_ci                    } else {
169348f512ceSopenharmony_ci                        if (a.getAttribute('value') === this.defaultValue) {
169448f512ceSopenharmony_ci                            this.inputElement.value = a.textContent;
169548f512ceSopenharmony_ci                            a.setAttribute('selected', '');
169648f512ceSopenharmony_ci                        }
169748f512ceSopenharmony_ci                    }
169848f512ceSopenharmony_ci                    //每个option设置onSelected事件 接受当前点击的option
169948f512ceSopenharmony_ci                    a.addEventListener('onSelected', (e) => {
170048f512ceSopenharmony_ci                        // console.log(e.detail);
170148f512ceSopenharmony_ci                        //所有option设置为未选中状态
170248f512ceSopenharmony_ci                        if (this.isMultiple()) {//多选
170348f512ceSopenharmony_ci                            if (a.hasAttribute('selected')) {
170448f512ceSopenharmony_ci                                // console.log(e.detail.value);
170548f512ceSopenharmony_ci                                let tag = this.shadowRoot.querySelector(`div[data-value=${e.detail.value}]`);
170648f512ceSopenharmony_ci                                // console.log(tag);
170748f512ceSopenharmony_ci                                tag.parentElement.removeChild(tag);
170848f512ceSopenharmony_ci                                e.detail.selected = false;
170948f512ceSopenharmony_ci                            } else {
171048f512ceSopenharmony_ci                                let tag = this.newTag(e.detail.value, e.detail.text);
171148f512ceSopenharmony_ci                                this.multipleRootElement.insertBefore(tag, this.inputElement);
171248f512ceSopenharmony_ci                                this.inputElement.placeholder = '';
171348f512ceSopenharmony_ci                                this.inputElement.value = '';
171448f512ceSopenharmony_ci                                this.inputElement.style.width = '1px';
171548f512ceSopenharmony_ci                            }
171648f512ceSopenharmony_ci                            if (this.shadowRoot.querySelectorAll('.tag').length == 0) {
171748f512ceSopenharmony_ci                                this.inputElement.style.width = 'auto';
171848f512ceSopenharmony_ci                                this.inputElement.placeholder = this.defaultPlaceholder;
171948f512ceSopenharmony_ci                            }
172048f512ceSopenharmony_ci                            this.inputElement.focus();
172148f512ceSopenharmony_ci                        } else {//单选
172248f512ceSopenharmony_ci                            [...this.querySelectorAll('lit-select-option')].forEach(a => a.removeAttribute('selected'))
172348f512ceSopenharmony_ci                            this.blur();//失去焦点，隐藏选择栏目列表
172448f512ceSopenharmony_ci                            this.inputElement.value = e.detail.text;
172548f512ceSopenharmony_ci                        }
172648f512ceSopenharmony_ci                        //设置当前option为选择状态
172748f512ceSopenharmony_ci                        if (a.hasAttribute('selected')) {
172848f512ceSopenharmony_ci                            a.removeAttribute('selected')
172948f512ceSopenharmony_ci                        } else {
173048f512ceSopenharmony_ci                            a.setAttribute('selected', '')
173148f512ceSopenharmony_ci                        }
173248f512ceSopenharmony_ci                        //设置input的值为当前选择的文本
173348f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('change', { detail: e.detail }));//向外层派发change事件，返回当前选中项
173448f512ceSopenharmony_ci                    })
173548f512ceSopenharmony_ci                })
173648f512ceSopenharmony_ci            }
173748f512ceSopenharmony_ci
173848f512ceSopenharmony_ci            //js调用清理选项
173948f512ceSopenharmony_ci            clear() {
174048f512ceSopenharmony_ci                this.inputElement.value = '';
174148f512ceSopenharmony_ci                this.inputElement.placeholder = this.defaultPlaceholder;
174248f512ceSopenharmony_ci            }
174348f512ceSopenharmony_ci
174448f512ceSopenharmony_ci            //重置为默认值
174548f512ceSopenharmony_ci            reset() {
174648f512ceSopenharmony_ci                this.querySelectorAll('lit-select-option').forEach(a => {
174748f512ceSopenharmony_ci                    //如果节点的值为 当前控件的默认值 defalut-value则 显示该值对应的option文本
174848f512ceSopenharmony_ci                    [...this.querySelectorAll('lit-select-option')].forEach(a => a.removeAttribute('selected'))
174948f512ceSopenharmony_ci                    if (a.getAttribute('value') === this.defaultValue) {
175048f512ceSopenharmony_ci                        this.inputElement.value = a.textContent;
175148f512ceSopenharmony_ci                        a.setAttribute('selected', '');
175248f512ceSopenharmony_ci                    }
175348f512ceSopenharmony_ci                })
175448f512ceSopenharmony_ci            }
175548f512ceSopenharmony_ci
175648f512ceSopenharmony_ci            //当 custom element从文档DOM中删除时，被调用。
175748f512ceSopenharmony_ci            disconnectedCallback() {
175848f512ceSopenharmony_ci
175948f512ceSopenharmony_ci            }
176048f512ceSopenharmony_ci
176148f512ceSopenharmony_ci            //当 custom element被移动到新的文档时，被调用。
176248f512ceSopenharmony_ci            adoptedCallback() {
176348f512ceSopenharmony_ci                console.log('Custom square element moved to new page.');
176448f512ceSopenharmony_ci            }
176548f512ceSopenharmony_ci
176648f512ceSopenharmony_ci            //当 custom element增加、删除、修改自身属性时，被调用。
176748f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
176848f512ceSopenharmony_ci                if (name === 'value' && this.inputElement) {
176948f512ceSopenharmony_ci                    if (newValue) {
177048f512ceSopenharmony_ci                        [...this.querySelectorAll('lit-select-option')].forEach(a => {
177148f512ceSopenharmony_ci                            if (a.getAttribute('value') === newValue) {
177248f512ceSopenharmony_ci                                a.setAttribute('selected', '');
177348f512ceSopenharmony_ci                                this.inputElement.value = a.textContent;
177448f512ceSopenharmony_ci                            } else {
177548f512ceSopenharmony_ci                                a.removeAttribute('selected')
177648f512ceSopenharmony_ci                            }
177748f512ceSopenharmony_ci                        })
177848f512ceSopenharmony_ci                    } else {
177948f512ceSopenharmony_ci                        this.clear();
178048f512ceSopenharmony_ci                    }
178148f512ceSopenharmony_ci                }
178248f512ceSopenharmony_ci            }
178348f512ceSopenharmony_ci
178448f512ceSopenharmony_ci            set dataSource(value) {
178548f512ceSopenharmony_ci                value.forEach(a => {
178648f512ceSopenharmony_ci                    let option = document.createElement('lit-select-option');
178748f512ceSopenharmony_ci                    option.setAttribute('value', a.key);
178848f512ceSopenharmony_ci                    option.textContent = a.val;
178948f512ceSopenharmony_ci                    this.append(option)
179048f512ceSopenharmony_ci                })
179148f512ceSopenharmony_ci                this.initOptions();
179248f512ceSopenharmony_ci            }
179348f512ceSopenharmony_ci
179448f512ceSopenharmony_ci        }
179548f512ceSopenharmony_ci        if (!customElements.get('lit-select')) {
179648f512ceSopenharmony_ci            customElements.define('lit-select', LitSelect);
179748f512ceSopenharmony_ci        }
179848f512ceSopenharmony_ci
179948f512ceSopenharmony_ci        class LitSelectGroup extends HTMLElement {
180048f512ceSopenharmony_ci            static get observedAttributes() {
180148f512ceSopenharmony_ci                return ['label']
180248f512ceSopenharmony_ci            }
180348f512ceSopenharmony_ci
180448f512ceSopenharmony_ci            get label() {
180548f512ceSopenharmony_ci                return this.getAttribute('label') || '';
180648f512ceSopenharmony_ci            }
180748f512ceSopenharmony_ci
180848f512ceSopenharmony_ci            set label(value) {
180948f512ceSopenharmony_ci                this.setAttribute('label', value);
181048f512ceSopenharmony_ci            }
181148f512ceSopenharmony_ci
181248f512ceSopenharmony_ci            constructor() {
181348f512ceSopenharmony_ci                super();
181448f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
181548f512ceSopenharmony_ci                shadowRoot.innerHTML = `
181648f512ceSopenharmony_ci        <style>
181748f512ceSopenharmony_ci        :host{
181848f512ceSopenharmony_ci            display: flex;
181948f512ceSopenharmony_ci            flex-direction: column;
182048f512ceSopenharmony_ci            /*padding-left: 10px;*/
182148f512ceSopenharmony_ci        }
182248f512ceSopenharmony_ci        .lab{
182348f512ceSopenharmony_ci            padding: 8px 10px 8px 10px;
182448f512ceSopenharmony_ci            font-size: .5rem;
182548f512ceSopenharmony_ci            color: #8c8c8c;
182648f512ceSopenharmony_ci        }
182748f512ceSopenharmony_ci        ::slotted(lit-select-option){
182848f512ceSopenharmony_ci            padding-left: 20px;
182948f512ceSopenharmony_ci        }
183048f512ceSopenharmony_ci        </style>
183148f512ceSopenharmony_ci        <div class="lab">${this.label}</div>
183248f512ceSopenharmony_ci        <slot></slot>
183348f512ceSopenharmony_ci        `
183448f512ceSopenharmony_ci            }
183548f512ceSopenharmony_ci
183648f512ceSopenharmony_ci            //当 custom element首次被插入文档DOM时，被调用。
183748f512ceSopenharmony_ci            connectedCallback() {
183848f512ceSopenharmony_ci
183948f512ceSopenharmony_ci            }
184048f512ceSopenharmony_ci
184148f512ceSopenharmony_ci            //当 custom element从文档DOM中删除时，被调用。
184248f512ceSopenharmony_ci            disconnectedCallback() {
184348f512ceSopenharmony_ci
184448f512ceSopenharmony_ci            }
184548f512ceSopenharmony_ci
184648f512ceSopenharmony_ci            //当 custom element被移动到新的文档时，被调用。
184748f512ceSopenharmony_ci            adoptedCallback() {
184848f512ceSopenharmony_ci                console.log('Custom square element moved to new page.');
184948f512ceSopenharmony_ci            }
185048f512ceSopenharmony_ci
185148f512ceSopenharmony_ci            //当 custom element增加、删除、修改自身属性时，被调用。
185248f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
185348f512ceSopenharmony_ci
185448f512ceSopenharmony_ci            }
185548f512ceSopenharmony_ci        }
185648f512ceSopenharmony_ci        if (!customElements.get('lit-select-group')) {
185748f512ceSopenharmony_ci            customElements.define('lit-select-group', LitSelectGroup);
185848f512ceSopenharmony_ci        }
185948f512ceSopenharmony_ci
186048f512ceSopenharmony_ci        class LitSelectOption extends HTMLElement {
186148f512ceSopenharmony_ci            static get observedAttributes() {
186248f512ceSopenharmony_ci                return ['selected', 'disabled', 'check']
186348f512ceSopenharmony_ci            }
186448f512ceSopenharmony_ci
186548f512ceSopenharmony_ci            constructor() {
186648f512ceSopenharmony_ci                super();
186748f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
186848f512ceSopenharmony_ci                shadowRoot.innerHTML = `
186948f512ceSopenharmony_ci        <style>
187048f512ceSopenharmony_ci        :host{
187148f512ceSopenharmony_ci            display: flex;
187248f512ceSopenharmony_ci            padding: 8px 10px;
187348f512ceSopenharmony_ci            transition: all .3s;
187448f512ceSopenharmony_ci            color: #333;
187548f512ceSopenharmony_ci            tab-index: -1;
187648f512ceSopenharmony_ci            overflow: scroll;
187748f512ceSopenharmony_ci            align-items: center;
187848f512ceSopenharmony_ci            justify-content: space-between;
187948f512ceSopenharmony_ci        }
188048f512ceSopenharmony_ci        :host(:not([disabled])[selected]){
188148f512ceSopenharmony_ci            background-color: #e9f7fe;
188248f512ceSopenharmony_ci            font-weight: bold;
188348f512ceSopenharmony_ci        }
188448f512ceSopenharmony_ci        :host(:not([disabled]):not([selected]):hover){
188548f512ceSopenharmony_ci            background-color: #f5f5f5;
188648f512ceSopenharmony_ci        }
188748f512ceSopenharmony_ci        :host([disabled]){
188848f512ceSopenharmony_ci            cursor: not-allowed;
188948f512ceSopenharmony_ci            color: #bfbfbf;
189048f512ceSopenharmony_ci        }
189148f512ceSopenharmony_ci        :host([selected][check]) .check{
189248f512ceSopenharmony_ci             display: flex;
189348f512ceSopenharmony_ci        }
189448f512ceSopenharmony_ci        :host(:not([selected])) .check{
189548f512ceSopenharmony_ci             display: none;
189648f512ceSopenharmony_ci        }
189748f512ceSopenharmony_ci        :host(:not([check])) .check{
189848f512ceSopenharmony_ci            display: none;
189948f512ceSopenharmony_ci        }
190048f512ceSopenharmony_ci        </style>
190148f512ceSopenharmony_ci        <slot></slot>
190248f512ceSopenharmony_ci        <lit-icon class="check" name="check"></lit-icon>
190348f512ceSopenharmony_ci        `
190448f512ceSopenharmony_ci            }
190548f512ceSopenharmony_ci
190648f512ceSopenharmony_ci            //当 custom element首次被插入文档DOM时，被调用。
190748f512ceSopenharmony_ci            connectedCallback() {
190848f512ceSopenharmony_ci                if (!this.hasAttribute('disabled')) {
190948f512ceSopenharmony_ci                    this.onclick = ev => {
191048f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('onSelected', {
191148f512ceSopenharmony_ci                            detail: {
191248f512ceSopenharmony_ci                                selected: true,
191348f512ceSopenharmony_ci                                value: this.getAttribute('value'),
191448f512ceSopenharmony_ci                                text: this.textContent
191548f512ceSopenharmony_ci                            }
191648f512ceSopenharmony_ci                        }))
191748f512ceSopenharmony_ci                    }
191848f512ceSopenharmony_ci                }
191948f512ceSopenharmony_ci
192048f512ceSopenharmony_ci            }
192148f512ceSopenharmony_ci
192248f512ceSopenharmony_ci            //当 custom element从文档DOM中删除时，被调用。
192348f512ceSopenharmony_ci            disconnectedCallback() {
192448f512ceSopenharmony_ci
192548f512ceSopenharmony_ci            }
192648f512ceSopenharmony_ci
192748f512ceSopenharmony_ci            //当 custom element被移动到新的文档时，被调用。
192848f512ceSopenharmony_ci            adoptedCallback() {
192948f512ceSopenharmony_ci                console.log('Custom square element moved to new page.');
193048f512ceSopenharmony_ci            }
193148f512ceSopenharmony_ci
193248f512ceSopenharmony_ci            //当 custom element增加、删除、修改自身属性时，被调用。
193348f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
193448f512ceSopenharmony_ci
193548f512ceSopenharmony_ci            }
193648f512ceSopenharmony_ci        }
193748f512ceSopenharmony_ci        if (!customElements.get('lit-select-option')) {
193848f512ceSopenharmony_ci            customElements.define('lit-select-option', LitSelectOption);
193948f512ceSopenharmony_ci        }
194048f512ceSopenharmony_ci
194148f512ceSopenharmony_ci        class LitTable extends HTMLElement {
194248f512ceSopenharmony_ci            static get observedAttributes() {
194348f512ceSopenharmony_ci                return ['scroll-y', 'selectable', 'defaultOrderColumn']
194448f512ceSopenharmony_ci            }
194548f512ceSopenharmony_ci
194648f512ceSopenharmony_ci            get selectable() {
194748f512ceSopenharmony_ci                return this.hasAttribute('selectable');
194848f512ceSopenharmony_ci            }
194948f512ceSopenharmony_ci
195048f512ceSopenharmony_ci            set selectable(value) {
195148f512ceSopenharmony_ci                if (value) {
195248f512ceSopenharmony_ci                    this.setAttribute('selectable', '');
195348f512ceSopenharmony_ci                } else {
195448f512ceSopenharmony_ci                    this.removeAttribute('selectable');
195548f512ceSopenharmony_ci                }
195648f512ceSopenharmony_ci            }
195748f512ceSopenharmony_ci
195848f512ceSopenharmony_ci            get scrollY() {
195948f512ceSopenharmony_ci                return this.getAttribute('scroll-y') || 'auto';
196048f512ceSopenharmony_ci            }
196148f512ceSopenharmony_ci
196248f512ceSopenharmony_ci            set scrollY(value) {
196348f512ceSopenharmony_ci                this.setAttribute('scroll-y', value);
196448f512ceSopenharmony_ci            }
196548f512ceSopenharmony_ci
196648f512ceSopenharmony_ci            get dataSource() {
196748f512ceSopenharmony_ci                return this.ds || [];
196848f512ceSopenharmony_ci            }
196948f512ceSopenharmony_ci
197048f512ceSopenharmony_ci            set dataSource(value) {
197148f512ceSopenharmony_ci                this.ds = value;
197248f512ceSopenharmony_ci                if (this.hasAttribute('tree')) {
197348f512ceSopenharmony_ci                    this.renderTreeTable();
197448f512ceSopenharmony_ci                } else {
197548f512ceSopenharmony_ci                    this.renderTable();
197648f512ceSopenharmony_ci                }
197748f512ceSopenharmony_ci            }
197848f512ceSopenharmony_ci
197948f512ceSopenharmony_ci            constructor() {
198048f512ceSopenharmony_ci                super();
198148f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
198248f512ceSopenharmony_ci                shadowRoot.innerHTML = `
198348f512ceSopenharmony_ci<style>
198448f512ceSopenharmony_ci:host{
198548f512ceSopenharmony_ci    display: grid;
198648f512ceSopenharmony_ci    grid-template-columns: repeat(1,1fr);
198748f512ceSopenharmony_ci    overflow: auto;
198848f512ceSopenharmony_ci    /*width: 500px;*/
198948f512ceSopenharmony_ci    width: 100%;
199048f512ceSopenharmony_ci    height: 100%;
199148f512ceSopenharmony_ci}
199248f512ceSopenharmony_ci.tr{
199348f512ceSopenharmony_ci    display: grid;
199448f512ceSopenharmony_ci    transition: all .3s;
199548f512ceSopenharmony_ci}
199648f512ceSopenharmony_ci.tr:nth-of-type(even){
199748f512ceSopenharmony_ci    background-color: #fcfcfc;
199848f512ceSopenharmony_ci}
199948f512ceSopenharmony_ci/*.tr:not(:last-of-type):not(:first-of-type){*/
200048f512ceSopenharmony_ci/*    border-top: 1px solid #f0f0f0;*/
200148f512ceSopenharmony_ci/*}*/
200248f512ceSopenharmony_ci/*.tr:last-of-type{*/
200348f512ceSopenharmony_ci/*    border-top: 1px solid #f0f0f0;*/
200448f512ceSopenharmony_ci/*    border-bottom: 1px solid #f0f0f0;*/
200548f512ceSopenharmony_ci/*}*/
200648f512ceSopenharmony_ci.tr{
200748f512ceSopenharmony_ci    background-color: #fff;
200848f512ceSopenharmony_ci}
200948f512ceSopenharmony_ci.tr:hover{
201048f512ceSopenharmony_ci    background-color: #f3f3f3; /*antd #fafafa 42b983*/
201148f512ceSopenharmony_ci}
201248f512ceSopenharmony_ci.td{
201348f512ceSopenharmony_ci    background-color: inherit;
201448f512ceSopenharmony_ci    box-sizing: border-box;
201548f512ceSopenharmony_ci    padding: 10px;
201648f512ceSopenharmony_ci    display: flex;
201748f512ceSopenharmony_ci    justify-content: flex-start;
201848f512ceSopenharmony_ci    align-items: center;
201948f512ceSopenharmony_ci    width: 100%;
202048f512ceSopenharmony_ci    height: auto;
202148f512ceSopenharmony_ci    /*overflow: auto;*/
202248f512ceSopenharmony_ci    border-left: 1px solid #f0f0f0;
202348f512ceSopenharmony_ci}
202448f512ceSopenharmony_ci.td-order{
202548f512ceSopenharmony_ci    /*background: green;*/
202648f512ceSopenharmony_ci}
202748f512ceSopenharmony_ci.td-order:before{
202848f512ceSopenharmony_ci
202948f512ceSopenharmony_ci}
203048f512ceSopenharmony_ci.td:last-of-type{
203148f512ceSopenharmony_ci    border-right: 1px solid #f0f0f0;
203248f512ceSopenharmony_ci}
203348f512ceSopenharmony_ci.table{
203448f512ceSopenharmony_ci     color: #262626;
203548f512ceSopenharmony_ci}
203648f512ceSopenharmony_ci:host(:not([noheader])) .thead{
203748f512ceSopenharmony_ci    display: grid;
203848f512ceSopenharmony_ci    position: sticky;
203948f512ceSopenharmony_ci    top: 0;
204048f512ceSopenharmony_ci    font-weight: bold;
204148f512ceSopenharmony_ci    font-size: .9rem;
204248f512ceSopenharmony_ci    color: #fff;
204348f512ceSopenharmony_ci    /*width: 100%;*/
204448f512ceSopenharmony_ci    background-color: #42b983;
204548f512ceSopenharmony_ci    z-index: 1;
204648f512ceSopenharmony_ci}
204748f512ceSopenharmony_ci/*配置有 noheader 表示不限时表头，tbody上添加 border-top*/
204848f512ceSopenharmony_ci:host([noheader]) .thead{
204948f512ceSopenharmony_ci    display: none;
205048f512ceSopenharmony_ci    position: sticky;
205148f512ceSopenharmony_ci    top: 0;
205248f512ceSopenharmony_ci    font-weight: bold;
205348f512ceSopenharmony_ci    font-size: .9rem;
205448f512ceSopenharmony_ci    color: #fff;
205548f512ceSopenharmony_ci    /*width: 100%;*/
205648f512ceSopenharmony_ci    background-color: #42b983;
205748f512ceSopenharmony_ci    z-index: 1;
205848f512ceSopenharmony_ci}
205948f512ceSopenharmony_ci:host([noheader]) .tbody{
206048f512ceSopenharmony_ci    border-top: 1px solid #f0f0f0;
206148f512ceSopenharmony_ci}
206248f512ceSopenharmony_ci
206348f512ceSopenharmony_ci.tbody{
206448f512ceSopenharmony_ci    width: 100%;
206548f512ceSopenharmony_ci    height: ${this.scrollY};
206648f512ceSopenharmony_ci    display: grid;
206748f512ceSopenharmony_ci    grid-template-columns: 1fr;
206848f512ceSopenharmony_ci    row-gap: 1px;
206948f512ceSopenharmony_ci    column-gap: 1px;
207048f512ceSopenharmony_ci    background-color: #f0f0f0;
207148f512ceSopenharmony_ci    border-bottom: 1px solid #f0f0f0;
207248f512ceSopenharmony_ci    /*overflow:  auto;*/
207348f512ceSopenharmony_ci    ${this.scrollY === 'auto' ? '' : 'overflow-y: auto'};
207448f512ceSopenharmony_ci}
207548f512ceSopenharmony_ci.th{
207648f512ceSopenharmony_ci    display: grid;
207748f512ceSopenharmony_ci    background-color: #42b983;
207848f512ceSopenharmony_ci    /*position: sticky;*/
207948f512ceSopenharmony_ci    /*top: 0;*/
208048f512ceSopenharmony_ci}
208148f512ceSopenharmony_ci
208248f512ceSopenharmony_ci.tree-icon{
208348f512ceSopenharmony_ci    font-size: 1.2rem;
208448f512ceSopenharmony_ci    width: 20px;
208548f512ceSopenharmony_ci    height: 20px;
208648f512ceSopenharmony_ci    padding-right: 5px;
208748f512ceSopenharmony_ci    padding-left: 5px;
208848f512ceSopenharmony_ci    cursor: pointer;
208948f512ceSopenharmony_ci}
209048f512ceSopenharmony_ci.tree-icon:hover{
209148f512ceSopenharmony_ci    color: #42b983;
209248f512ceSopenharmony_ci}
209348f512ceSopenharmony_ci.row-checkbox,row-checkbox-all{
209448f512ceSopenharmony_ci
209548f512ceSopenharmony_ci}
209648f512ceSopenharmony_ci
209748f512ceSopenharmony_ci.up-svg{
209848f512ceSopenharmony_ci    position: absolute;
209948f512ceSopenharmony_ci    right: 5px;
210048f512ceSopenharmony_ci    top: 8px;
210148f512ceSopenharmony_ci    width: 15px;
210248f512ceSopenharmony_ci    height: 15px;
210348f512ceSopenharmony_ci}
210448f512ceSopenharmony_ci.down-svg{
210548f512ceSopenharmony_ci    position: absolute;
210648f512ceSopenharmony_ci    right: 5px;
210748f512ceSopenharmony_ci    bottom: 8px;
210848f512ceSopenharmony_ci    width: 15px;
210948f512ceSopenharmony_ci    height: 15px;
211048f512ceSopenharmony_ci}
211148f512ceSopenharmony_ci</style>
211248f512ceSopenharmony_ci
211348f512ceSopenharmony_ci<slot id="slot" style="display: none"></slot>
211448f512ceSopenharmony_ci<div class="table">
211548f512ceSopenharmony_ci    <div class="thead"></div>
211648f512ceSopenharmony_ci    <div class="tbody"></div>
211748f512ceSopenharmony_ci</div>
211848f512ceSopenharmony_ci        `
211948f512ceSopenharmony_ci
212048f512ceSopenharmony_ci            }
212148f512ceSopenharmony_ci
212248f512ceSopenharmony_ci            /*根据column[]嵌套结构得到 grid css布局描述*/
212348f512ceSopenharmony_ci
212448f512ceSopenharmony_ci            //当 custom element首次被插入文档DOM时，被调用。
212548f512ceSopenharmony_ci            connectedCallback() {
212648f512ceSopenharmony_ci                this.st = this.shadowRoot.querySelector('#slot');
212748f512ceSopenharmony_ci                this.tableElement = this.shadowRoot.querySelector('.table');
212848f512ceSopenharmony_ci                this.theadElement = this.shadowRoot.querySelector('.thead');
212948f512ceSopenharmony_ci                this.tbodyElement = this.shadowRoot.querySelector('.tbody');
213048f512ceSopenharmony_ci                this.tableColumns = this.querySelectorAll('lit-table-column');
213148f512ceSopenharmony_ci                this.colCount = this.tableColumns.length;
213248f512ceSopenharmony_ci                this.st.addEventListener('slotchange', (event) => {
213348f512ceSopenharmony_ci                    this.theadElement.innerHTML = '';
213448f512ceSopenharmony_ci                    setTimeout(() => {
213548f512ceSopenharmony_ci                        this.columns = this.st.assignedElements();
213648f512ceSopenharmony_ci
213748f512ceSopenharmony_ci                        let rowElement = document.createElement('div');
213848f512ceSopenharmony_ci                        rowElement.classList.add('th');
213948f512ceSopenharmony_ci                        if (this.selectable) {
214048f512ceSopenharmony_ci                            let box = document.createElement('div');
214148f512ceSopenharmony_ci                            box.style.display = 'flex';
214248f512ceSopenharmony_ci                            box.style.justifyContent = 'center';
214348f512ceSopenharmony_ci                            box.style.alignItems = 'center';
214448f512ceSopenharmony_ci                            box.style.gridArea = "_checkbox_";
214548f512ceSopenharmony_ci                            box.classList.add('td');
214648f512ceSopenharmony_ci                            box.style.backgroundColor = "#ffffff66";
214748f512ceSopenharmony_ci                            let checkbox = document.createElement('lit-checkbox');
214848f512ceSopenharmony_ci                            checkbox.classList.add('row-checkbox-all');
214948f512ceSopenharmony_ci                            // checkbox.style.boxShadow = '0 0 1px #fff';
215048f512ceSopenharmony_ci                            // console.log(checkbox.shadowRoot.querySelector('input'));
215148f512ceSopenharmony_ci                            checkbox.onchange = e => {
215248f512ceSopenharmony_ci                                this.shadowRoot.querySelectorAll('.row-checkbox').forEach(a => a.checked = e.detail.checked);
215348f512ceSopenharmony_ci                                if (e.detail.checked) {
215448f512ceSopenharmony_ci                                    this.shadowRoot.querySelectorAll('.tr').forEach(a => a.setAttribute('checked', ''));
215548f512ceSopenharmony_ci                                } else {
215648f512ceSopenharmony_ci                                    this.shadowRoot.querySelectorAll('.tr').forEach(a => a.removeAttribute('checked'));
215748f512ceSopenharmony_ci                                }
215848f512ceSopenharmony_ci                            }
215948f512ceSopenharmony_ci
216048f512ceSopenharmony_ci                            box.appendChild(checkbox);
216148f512ceSopenharmony_ci                            rowElement.appendChild(box);
216248f512ceSopenharmony_ci                        }
216348f512ceSopenharmony_ci
216448f512ceSopenharmony_ci                        // let getGridDesc = (columns)=>{
216548f512ceSopenharmony_ci                        //     columns.forEach(a=>{
216648f512ceSopenharmony_ci                        //         // console.log(a);
216748f512ceSopenharmony_ci                        //         if(a.tagName==='LIT-TABLE-GROUP'){
216848f512ceSopenharmony_ci                        //             let children = [...a.querySelectorAll('lit-table-column')];
216948f512ceSopenharmony_ci                        //             // console.log(children);
217048f512ceSopenharmony_ci                        //             getGridDesc(children)
217148f512ceSopenharmony_ci                        //         }else{
217248f512ceSopenharmony_ci                        //             // console.log([...a.querySelectorAll('lit-table-column')]);
217348f512ceSopenharmony_ci                        //         }
217448f512ceSopenharmony_ci                        //     })
217548f512ceSopenharmony_ci                        // }
217648f512ceSopenharmony_ci                        // getGridDesc(this.columns);
217748f512ceSopenharmony_ci                        let area = [], gridTemplateColumns = [];
217848f512ceSopenharmony_ci                        let resolvingArea = (columns, x, y) => {
217948f512ceSopenharmony_ci                            columns.forEach((a, i) => {
218048f512ceSopenharmony_ci                                // console.log(a.getAttribute('key'),i);
218148f512ceSopenharmony_ci                                if (!area[y]) area[y] = []
218248f512ceSopenharmony_ci                                let key = a.getAttribute('key') || a.getAttribute('title')
218348f512ceSopenharmony_ci                                if (a.tagName === 'LIT-TABLE-GROUP') {
218448f512ceSopenharmony_ci                                    let len = a.querySelectorAll('lit-table-column').length;
218548f512ceSopenharmony_ci                                    let children = [...a.children].filter(a => a.tagName !== 'TEMPLATE');
218648f512ceSopenharmony_ci                                    if (children.length > 0) {
218748f512ceSopenharmony_ci                                        resolvingArea(children, x, y + 1);
218848f512ceSopenharmony_ci                                    }
218948f512ceSopenharmony_ci                                    for (let j = 0; j < len; j++) {
219048f512ceSopenharmony_ci                                        area[y][x] = { x, y, t: key };
219148f512ceSopenharmony_ci                                        x++;
219248f512ceSopenharmony_ci                                    }
219348f512ceSopenharmony_ci                                    let h = document.createElement('div');
219448f512ceSopenharmony_ci                                    h.classList.add('td');
219548f512ceSopenharmony_ci                                    h.style.justifyContent = a.getAttribute('align')
219648f512ceSopenharmony_ci                                    h.style.borderBottom = '1px solid #f0f0f0'
219748f512ceSopenharmony_ci                                    h.style.gridArea = key;
219848f512ceSopenharmony_ci                                    h.innerText = a.title;
219948f512ceSopenharmony_ci                                    if (a.hasAttribute('fixed')) {
220048f512ceSopenharmony_ci                                        this.fixed(h, a.getAttribute('fixed'), "#42b983")
220148f512ceSopenharmony_ci                                    }
220248f512ceSopenharmony_ci                                    rowElement.append(h);
220348f512ceSopenharmony_ci                                } else if (a.tagName === 'LIT-TABLE-COLUMN') {
220448f512ceSopenharmony_ci                                    area[y][x] = { x, y, t: key };
220548f512ceSopenharmony_ci                                    x++;
220648f512ceSopenharmony_ci                                    let h = document.createElement('div');
220748f512ceSopenharmony_ci                                    h.classList.add('td');
220848f512ceSopenharmony_ci                                    if (a.hasAttribute('order')) {
220948f512ceSopenharmony_ci                                        h.sortType = 0;
221048f512ceSopenharmony_ci                                        h.classList.add('td-order');
221148f512ceSopenharmony_ci                                        h.style.position = "relative"
221248f512ceSopenharmony_ci                                        let NS = "http://www.w3.org/2000/svg";
221348f512ceSopenharmony_ci                                        let upSvg = document.createElementNS(NS, "svg");
221448f512ceSopenharmony_ci                                        let upPath = document.createElementNS(NS, "path");
221548f512ceSopenharmony_ci                                        upSvg.setAttribute('fill', '#efefef');
221648f512ceSopenharmony_ci                                        upSvg.setAttribute('viewBox', '0 0 1024 1024');
221748f512ceSopenharmony_ci                                        upSvg.setAttribute('stroke', '#000000');
221848f512ceSopenharmony_ci                                        upSvg.classList.add('up-svg');
221948f512ceSopenharmony_ci                                        // upPath.setAttribute("d", "M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3c-3.8 5.3-0.1 12.7 6.5 12.7h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z");
222048f512ceSopenharmony_ci                                        upPath.setAttribute("d", "M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z");
222148f512ceSopenharmony_ci                                        // upPath.setAttribute("fill", "#ffffff");
222248f512ceSopenharmony_ci                                        // upPath.setAttribute("stroke-width", "2px");
222348f512ceSopenharmony_ci                                        // upPath.setAttribute("stroke", "rgba(207, 219, 230, 1)");
222448f512ceSopenharmony_ci                                        // upPath.setAttribute("marker-end", "url(#markerArrow)");
222548f512ceSopenharmony_ci                                        upSvg.appendChild(upPath);
222648f512ceSopenharmony_ci                                        let downSvg = document.createElementNS(NS, "svg");
222748f512ceSopenharmony_ci                                        let downPath = document.createElementNS(NS, "path");
222848f512ceSopenharmony_ci                                        downSvg.setAttribute('fill', '#efefef');
222948f512ceSopenharmony_ci                                        downSvg.setAttribute('viewBox', '0 0 1024 1024');
223048f512ceSopenharmony_ci                                        downSvg.setAttribute('stroke', '#efefef');
223148f512ceSopenharmony_ci                                        downSvg.classList.add('down-svg');
223248f512ceSopenharmony_ci                                        // downPath.setAttribute("d", "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z");
223348f512ceSopenharmony_ci                                        downPath.setAttribute("d", "M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z");
223448f512ceSopenharmony_ci                                        // downPath.setAttribute("fill", "#ffffff");
223548f512ceSopenharmony_ci                                        // downPath.setAttribute("stroke-width", "2px");
223648f512ceSopenharmony_ci                                        // downPath.setAttribute("stroke", "rgba(207, 219, 230, 1)");
223748f512ceSopenharmony_ci                                        // downPath.setAttribute("marker-end", "url(#markerArrow)");
223848f512ceSopenharmony_ci                                        downSvg.appendChild(downPath)
223948f512ceSopenharmony_ci                                        if (i == 0) {
224048f512ceSopenharmony_ci                                            h.sortType = 2; // 默认以第一列 降序排序 作为默认排序
224148f512ceSopenharmony_ci                                            upSvg.setAttribute('fill', '#efefef');
224248f512ceSopenharmony_ci                                            downSvg.setAttribute('fill', '#333');
224348f512ceSopenharmony_ci                                        }
224448f512ceSopenharmony_ci                                        h.appendChild(upSvg);
224548f512ceSopenharmony_ci                                        h.appendChild(downSvg);
224648f512ceSopenharmony_ci                                        h.onclick = ev => {
224748f512ceSopenharmony_ci                                            this.shadowRoot.querySelectorAll('.td-order svg').forEach(it => {
224848f512ceSopenharmony_ci                                                it.setAttribute('fill', '#efefef');
224948f512ceSopenharmony_ci                                                it.setAttribute('fill', '#efefef');
225048f512ceSopenharmony_ci                                                it.sortType = 0;
225148f512ceSopenharmony_ci                                            })
225248f512ceSopenharmony_ci                                            if (h.sortType == undefined || h.sortType == null) {
225348f512ceSopenharmony_ci                                                h.sortType = 0;
225448f512ceSopenharmony_ci                                            } else if (h.sortType === 2) {
225548f512ceSopenharmony_ci                                                h.sortType = 0;
225648f512ceSopenharmony_ci                                            } else {
225748f512ceSopenharmony_ci                                                h.sortType += 1;
225848f512ceSopenharmony_ci                                            }
225948f512ceSopenharmony_ci                                            // if(h.sortType == 2){
226048f512ceSopenharmony_ci                                            //     h.sortType = 1
226148f512ceSopenharmony_ci                                            // }else{
226248f512ceSopenharmony_ci                                            //     h.sortType = 2
226348f512ceSopenharmony_ci                                            // }
226448f512ceSopenharmony_ci                                            switch (h.sortType) {
226548f512ceSopenharmony_ci                                                case 1:
226648f512ceSopenharmony_ci                                                    upSvg.setAttribute('fill', '#333');
226748f512ceSopenharmony_ci                                                    downSvg.setAttribute('fill', '#efefef');
226848f512ceSopenharmony_ci                                                    break;
226948f512ceSopenharmony_ci                                                case 2:
227048f512ceSopenharmony_ci                                                    upSvg.setAttribute('fill', '#efefef');
227148f512ceSopenharmony_ci                                                    downSvg.setAttribute('fill', '#333');
227248f512ceSopenharmony_ci                                                    break;
227348f512ceSopenharmony_ci                                                default:
227448f512ceSopenharmony_ci                                                    upSvg.setAttribute('fill', "#efefef");
227548f512ceSopenharmony_ci                                                    downSvg.setAttribute('fill', "#efefef");
227648f512ceSopenharmony_ci                                                    break;
227748f512ceSopenharmony_ci                                            }
227848f512ceSopenharmony_ci                                            this.dispatchEvent(new CustomEvent("ColumnClick", {
227948f512ceSopenharmony_ci                                                detail: {
228048f512ceSopenharmony_ci                                                    sort: h.sortType, key: key
228148f512ceSopenharmony_ci                                                }, composed: true
228248f512ceSopenharmony_ci                                            }))
228348f512ceSopenharmony_ci                                        }
228448f512ceSopenharmony_ci                                    }
228548f512ceSopenharmony_ci                                    h.style.justifyContent = a.getAttribute('align')
228648f512ceSopenharmony_ci                                    gridTemplateColumns.push(a.getAttribute('width') || '1fr');
228748f512ceSopenharmony_ci                                    h.style.gridArea = key;
228848f512ceSopenharmony_ci                                    let titleLabel = document.createElement("label");
228948f512ceSopenharmony_ci                                    titleLabel.textContent = a.title;
229048f512ceSopenharmony_ci                                    // h.innerText = a.title;
229148f512ceSopenharmony_ci                                    h.appendChild(titleLabel);
229248f512ceSopenharmony_ci                                    if (a.hasAttribute('fixed')) {
229348f512ceSopenharmony_ci                                        this.fixed(h, a.getAttribute('fixed'), "#42b983")
229448f512ceSopenharmony_ci                                    }
229548f512ceSopenharmony_ci                                    rowElement.append(h);
229648f512ceSopenharmony_ci                                }
229748f512ceSopenharmony_ci
229848f512ceSopenharmony_ci                                // console.log(str)
229948f512ceSopenharmony_ci                                // console.log(a.title,i,a.querySelectorAll('lit-table-column').length);
230048f512ceSopenharmony_ci                            })
230148f512ceSopenharmony_ci                        }
230248f512ceSopenharmony_ci                        resolvingArea(this.columns, 0, 0);
230348f512ceSopenharmony_ci                        area.forEach((rows, j, array) => {
230448f512ceSopenharmony_ci                            for (let i = 0; i < this.colCount; i++) {
230548f512ceSopenharmony_ci                                if (!rows[i]) rows[i] = array[j - 1][i];
230648f512ceSopenharmony_ci                            }
230748f512ceSopenharmony_ci                        })
230848f512ceSopenharmony_ci
230948f512ceSopenharmony_ci                        // console.log(a.map(aa=>aa.t).join(' '));
231048f512ceSopenharmony_ci                        // console.log(gridTemplateColumns.join(' '));
231148f512ceSopenharmony_ci                        this.gridTemplateColumns = gridTemplateColumns.join(' ');
231248f512ceSopenharmony_ci                        if (this.selectable) {
231348f512ceSopenharmony_ci                            let s = area.map(a => '"_checkbox_ ' + (a.map(aa => aa.t).join(' ')) + '"').join(' ');
231448f512ceSopenharmony_ci                            rowElement.style.gridTemplateColumns = "60px " + gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
231548f512ceSopenharmony_ci                            rowElement.style.gridTemplateRows = `repeat(${area.length},1fr)`
231648f512ceSopenharmony_ci                            rowElement.style.gridTemplateAreas = s
231748f512ceSopenharmony_ci                        } else {
231848f512ceSopenharmony_ci                            let s = area.map(a => '"' + (a.map(aa => aa.t).join(' ')) + '"').join(' ');
231948f512ceSopenharmony_ci                            rowElement.style.gridTemplateColumns = gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
232048f512ceSopenharmony_ci                            rowElement.style.gridTemplateRows = `repeat(${area.length},1fr)`
232148f512ceSopenharmony_ci                            rowElement.style.gridTemplateAreas = s
232248f512ceSopenharmony_ci                        }
232348f512ceSopenharmony_ci                        this.theadElement.append(rowElement);
232448f512ceSopenharmony_ci                        if (this.hasAttribute('tree')) {
232548f512ceSopenharmony_ci                            this.renderTreeTable();
232648f512ceSopenharmony_ci                        } else {
232748f512ceSopenharmony_ci                            this.renderTable();
232848f512ceSopenharmony_ci                        }
232948f512ceSopenharmony_ci                    });
233048f512ceSopenharmony_ci
233148f512ceSopenharmony_ci                });
233248f512ceSopenharmony_ci
233348f512ceSopenharmony_ci                // this.shadowRoot.addEventListener("load", function (event) {
233448f512ceSopenharmony_ci                //     console.log("DOM fully loaded and parsed");
233548f512ceSopenharmony_ci                // });
233648f512ceSopenharmony_ci            }
233748f512ceSopenharmony_ci
233848f512ceSopenharmony_ci            //当 custom element从文档DOM中删除时，被调用。
233948f512ceSopenharmony_ci            disconnectedCallback() {
234048f512ceSopenharmony_ci
234148f512ceSopenharmony_ci            }
234248f512ceSopenharmony_ci
234348f512ceSopenharmony_ci            //当 custom element被移动到新的文档时，被调用。
234448f512ceSopenharmony_ci            adoptedCallback() {
234548f512ceSopenharmony_ci                console.log('Custom square element moved to new page.');
234648f512ceSopenharmony_ci            }
234748f512ceSopenharmony_ci
234848f512ceSopenharmony_ci            //当 custom element增加、删除、修改自身属性时，被调用。
234948f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
235048f512ceSopenharmony_ci
235148f512ceSopenharmony_ci            }
235248f512ceSopenharmony_ci
235348f512ceSopenharmony_ci            fixed(td, placement, bgColor, zIndex) {
235448f512ceSopenharmony_ci                td.style.position = 'sticky';
235548f512ceSopenharmony_ci                if (placement === "left") {
235648f512ceSopenharmony_ci                    td.style.left = '0px';
235748f512ceSopenharmony_ci                    // td.style.borderRight = '1px solid #f0f0f0';
235848f512ceSopenharmony_ci                    td.style.boxShadow = '3px 0px 5px #33333333'
235948f512ceSopenharmony_ci                    // td.style.backgroundColor=bgColor
236048f512ceSopenharmony_ci                } else if (placement === "right") {
236148f512ceSopenharmony_ci                    td.style.right = '0px';
236248f512ceSopenharmony_ci                    td.style.boxShadow = '-3px 0px 5px #33333333'
236348f512ceSopenharmony_ci                    // td.style.borderLeft = '1px solid #f0f0f0';
236448f512ceSopenharmony_ci                    // td.style.backgroundColor=bgColor
236548f512ceSopenharmony_ci                }
236648f512ceSopenharmony_ci            }
236748f512ceSopenharmony_ci
236848f512ceSopenharmony_ci            /*渲染成表格*/
236948f512ceSopenharmony_ci            renderTable() {
237048f512ceSopenharmony_ci                let that = this;
237148f512ceSopenharmony_ci                if (!this.columns) return;
237248f512ceSopenharmony_ci                if (!this.ds) return; // 如果没有设置数据源，直接返回
237348f512ceSopenharmony_ci                this.tbodyElement.innerHTML = '';//清空表格内容
237448f512ceSopenharmony_ci                // this.style.gridTemplateRows = `repeat(${this.ds.length}*2 ,1fr)`;
237548f512ceSopenharmony_ci                this.ds.forEach(rowData => {
237648f512ceSopenharmony_ci                    let rowElement = document.createElement('div');
237748f512ceSopenharmony_ci                    rowElement.classList.add('tr');
237848f512ceSopenharmony_ci                    rowElement.data = rowData;
237948f512ceSopenharmony_ci                    let gridTemplateColumns = []
238048f512ceSopenharmony_ci                    //如果table配置了selectable（选择行模式） 单独在行头部添加一个 checkbox
238148f512ceSopenharmony_ci                    if (this.selectable) {
238248f512ceSopenharmony_ci                        let box = document.createElement('div');
238348f512ceSopenharmony_ci                        box.style.display = 'flex';
238448f512ceSopenharmony_ci                        box.style.justifyContent = 'center';
238548f512ceSopenharmony_ci                        box.style.alignItems = 'center';
238648f512ceSopenharmony_ci                        box.classList.add('td');
238748f512ceSopenharmony_ci                        let checkbox = document.createElement('lit-checkbox');
238848f512ceSopenharmony_ci                        checkbox.classList.add('row-checkbox');
238948f512ceSopenharmony_ci                        checkbox.onchange = (e) => {//checkbox 的是否选中 会影响  行对应的 div上是否有 checked属性，用于标记
239048f512ceSopenharmony_ci                            if (e.detail.checked) {
239148f512ceSopenharmony_ci                                rowElement.setAttribute('checked', "");
239248f512ceSopenharmony_ci                            } else {
239348f512ceSopenharmony_ci                                rowElement.removeAttribute('checked');
239448f512ceSopenharmony_ci                            }
239548f512ceSopenharmony_ci                        }
239648f512ceSopenharmony_ci                        box.appendChild(checkbox);
239748f512ceSopenharmony_ci                        rowElement.appendChild(box);
239848f512ceSopenharmony_ci                    }
239948f512ceSopenharmony_ci                    this.tableColumns.forEach(cl => {
240048f512ceSopenharmony_ci                        let dataIndex = cl.getAttribute('data-index');
240148f512ceSopenharmony_ci                        gridTemplateColumns.push(cl.getAttribute('width') || '1fr')
240248f512ceSopenharmony_ci                        if (cl.template) {//如果自定义渲染,从模版中渲染得到节点
240348f512ceSopenharmony_ci                            let cloneNode = cl.template.render(rowData).content.cloneNode(true);
240448f512ceSopenharmony_ci                            // cloneNode.classList.add('td');
240548f512ceSopenharmony_ci                            let d = document.createElement('div');
240648f512ceSopenharmony_ci                            d.classList.add('td');
240748f512ceSopenharmony_ci                            d.style.justifyContent = cl.getAttribute('align')
240848f512ceSopenharmony_ci                            if (cl.hasAttribute('fixed')) {
240948f512ceSopenharmony_ci                                this.fixed(d, cl.getAttribute('fixed'), "#ffffff")
241048f512ceSopenharmony_ci                            }
241148f512ceSopenharmony_ci                            d.append(cloneNode);
241248f512ceSopenharmony_ci                            rowElement.append(d);
241348f512ceSopenharmony_ci                        } else {
241448f512ceSopenharmony_ci                            let td = document.createElement('div');
241548f512ceSopenharmony_ci                            td.classList.add('td');
241648f512ceSopenharmony_ci                            td.style.justifyContent = cl.getAttribute('align')
241748f512ceSopenharmony_ci                            if (cl.hasAttribute('fixed')) {
241848f512ceSopenharmony_ci                                this.fixed(td, cl.getAttribute('fixed'), "#ffffff")
241948f512ceSopenharmony_ci                            }
242048f512ceSopenharmony_ci                            // td.style.position='sticky';
242148f512ceSopenharmony_ci                            // td.innerHTML = rowData[dataIndex];
242248f512ceSopenharmony_ci                            td.innerHTML = `<code style="padding:0;margin:0">${rowData[dataIndex].toString().replace('\n', "")}</code>`;
242348f512ceSopenharmony_ci                            // console.log(cl,cl.template);
242448f512ceSopenharmony_ci                            rowElement.append(td);
242548f512ceSopenharmony_ci                        }
242648f512ceSopenharmony_ci
242748f512ceSopenharmony_ci                    })
242848f512ceSopenharmony_ci                    if (this.selectable) { //如果 带选择的table 前面添加一个 60px的列
242948f512ceSopenharmony_ci                        rowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
243048f512ceSopenharmony_ci                    } else {
243148f512ceSopenharmony_ci                        rowElement.style.gridTemplateColumns = gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
243248f512ceSopenharmony_ci                    }
243348f512ceSopenharmony_ci                    rowElement.onclick = e => {
243448f512ceSopenharmony_ci                        this.dispatchEvent(new CustomEvent('onRowClick', { detail: rowData, composed: true }));
243548f512ceSopenharmony_ci                    }
243648f512ceSopenharmony_ci                    this.tbodyElement.append(rowElement);
243748f512ceSopenharmony_ci                })
243848f512ceSopenharmony_ci            }
243948f512ceSopenharmony_ci
244048f512ceSopenharmony_ci            /*渲染树表结构*/
244148f512ceSopenharmony_ci            renderTreeTable() {
244248f512ceSopenharmony_ci                if (!this.columns) return;
244348f512ceSopenharmony_ci                if (!this.ds) return;
244448f512ceSopenharmony_ci                this.tbodyElement.innerHTML = '';
244548f512ceSopenharmony_ci                /*通过list 构建 tree 结构*/
244648f512ceSopenharmony_ci                let ids = JSON.parse(this.getAttribute('tree') || `["id","pid"]`);
244748f512ceSopenharmony_ci                let toTreeData = (data, id, pid) => {
244848f512ceSopenharmony_ci                    let cloneData = JSON.parse(JSON.stringify(data));
244948f512ceSopenharmony_ci                    return cloneData.filter(father => {
245048f512ceSopenharmony_ci                        let branchArr = cloneData.filter(child => father[id] == child[pid]);
245148f512ceSopenharmony_ci                        branchArr.length > 0 ? father['children'] = branchArr : '';
245248f512ceSopenharmony_ci                        return !father[pid];
245348f512ceSopenharmony_ci                    });
245448f512ceSopenharmony_ci                }
245548f512ceSopenharmony_ci                let treeData = toTreeData(this.ds, ids[0], ids[1]);//
245648f512ceSopenharmony_ci                // console.log(treeData);
245748f512ceSopenharmony_ci                let offset = 30;
245848f512ceSopenharmony_ci                let offsetVal = offset;
245948f512ceSopenharmony_ci                const drawRow = (arr, parentNode) => {
246048f512ceSopenharmony_ci                    arr.forEach(rowData => {
246148f512ceSopenharmony_ci                        let rowElement = document.createElement('div');
246248f512ceSopenharmony_ci                        rowElement.classList.add('tr');
246348f512ceSopenharmony_ci                        rowElement.data = rowData;
246448f512ceSopenharmony_ci                        let gridTemplateColumns = [];
246548f512ceSopenharmony_ci                        if (this.selectable) {
246648f512ceSopenharmony_ci                            let box = document.createElement('div');
246748f512ceSopenharmony_ci                            box.style.display = 'flex';
246848f512ceSopenharmony_ci                            box.style.justifyContent = 'center';
246948f512ceSopenharmony_ci                            box.style.alignItems = 'center';
247048f512ceSopenharmony_ci                            box.classList.add('td');
247148f512ceSopenharmony_ci                            let checkbox = document.createElement('lit-checkbox');
247248f512ceSopenharmony_ci                            checkbox.classList.add('row-checkbox');
247348f512ceSopenharmony_ci                            checkbox.onchange = (e) => {
247448f512ceSopenharmony_ci                                if (e.detail.checked) {
247548f512ceSopenharmony_ci                                    rowElement.setAttribute('checked', "");
247648f512ceSopenharmony_ci                                } else {
247748f512ceSopenharmony_ci                                    rowElement.removeAttribute('checked');
247848f512ceSopenharmony_ci                                }
247948f512ceSopenharmony_ci                                const changeChildNode = (rowElement, checked) => {
248048f512ceSopenharmony_ci                                    let id = rowElement.getAttribute('id');
248148f512ceSopenharmony_ci                                    let pid = rowElement.getAttribute('pid');
248248f512ceSopenharmony_ci                                    this.shadowRoot.querySelectorAll(`div[pid=${id}]`).forEach(a => {
248348f512ceSopenharmony_ci                                        a.querySelector('.row-checkbox').checked = checked;
248448f512ceSopenharmony_ci                                        if (checked) {
248548f512ceSopenharmony_ci                                            a.setAttribute('checked', '');
248648f512ceSopenharmony_ci                                        } else {
248748f512ceSopenharmony_ci                                            a.removeAttribute('checked');
248848f512ceSopenharmony_ci                                        }
248948f512ceSopenharmony_ci                                        changeChildNode(a, checked);
249048f512ceSopenharmony_ci                                    });
249148f512ceSopenharmony_ci                                };
249248f512ceSopenharmony_ci                                changeChildNode(rowElement, e.detail.checked);
249348f512ceSopenharmony_ci                            }
249448f512ceSopenharmony_ci                            box.appendChild(checkbox);
249548f512ceSopenharmony_ci                            rowElement.appendChild(box);
249648f512ceSopenharmony_ci                        }
249748f512ceSopenharmony_ci                        this.tableColumns.forEach((cl, index) => {
249848f512ceSopenharmony_ci                            let dataIndex = cl.getAttribute('data-index');
249948f512ceSopenharmony_ci                            gridTemplateColumns.push(cl.getAttribute('width') || '1fr')
250048f512ceSopenharmony_ci                            let td;
250148f512ceSopenharmony_ci                            if (cl.template) {
250248f512ceSopenharmony_ci                                let cloneNode = cl.template.render(rowData).content.cloneNode(true);
250348f512ceSopenharmony_ci                                // cloneNode.classList.add('td');
250448f512ceSopenharmony_ci                                td = document.createElement('div');
250548f512ceSopenharmony_ci                                td.classList.add('td');
250648f512ceSopenharmony_ci                                td.style.justifyContent = cl.getAttribute('align')
250748f512ceSopenharmony_ci                                if (cl.hasAttribute('fixed')) {
250848f512ceSopenharmony_ci                                    this.fixed(td, cl.getAttribute('fixed'), "#ffffff")
250948f512ceSopenharmony_ci                                }
251048f512ceSopenharmony_ci                                td.append(cloneNode);
251148f512ceSopenharmony_ci                            } else {
251248f512ceSopenharmony_ci                                td = document.createElement('div');
251348f512ceSopenharmony_ci                                td.classList.add('td');
251448f512ceSopenharmony_ci                                td.style.justifyContent = cl.getAttribute('align')
251548f512ceSopenharmony_ci                                if (cl.hasAttribute('fixed')) {
251648f512ceSopenharmony_ci                                    this.fixed(td, cl.getAttribute('fixed'), "#ffffff")
251748f512ceSopenharmony_ci                                }
251848f512ceSopenharmony_ci                                // td.style.position='sticky';
251948f512ceSopenharmony_ci                                td.innerHTML = rowData[dataIndex];
252048f512ceSopenharmony_ci                                // console.log(cl,cl.template);
252148f512ceSopenharmony_ci                            }
252248f512ceSopenharmony_ci                            if (index === 0) {
252348f512ceSopenharmony_ci                                if (rowData.children && rowData.children.length > 0) {
252448f512ceSopenharmony_ci                                    let btn = document.createElement('lit-icon');
252548f512ceSopenharmony_ci                                    btn.classList.add('tree-icon');
252648f512ceSopenharmony_ci                                    btn.name = 'minus-square';
252748f512ceSopenharmony_ci                                    td.insertBefore(btn, td.firstChild);
252848f512ceSopenharmony_ci                                    td.style.paddingLeft = (offsetVal - 30) + 'px';
252948f512ceSopenharmony_ci                                    btn.onclick = (e) => {
253048f512ceSopenharmony_ci                                        const foldNode = (rowElement) => {
253148f512ceSopenharmony_ci                                            let id = rowElement.getAttribute('id');
253248f512ceSopenharmony_ci                                            let pid = rowElement.getAttribute('pid');
253348f512ceSopenharmony_ci                                            this.shadowRoot.querySelectorAll(`div[pid=${id}]`).forEach(a => {
253448f512ceSopenharmony_ci                                                let id = a.getAttribute('id');
253548f512ceSopenharmony_ci                                                let pid = a.getAttribute('pid');
253648f512ceSopenharmony_ci                                                a.style.display = 'none';
253748f512ceSopenharmony_ci                                                foldNode(a);
253848f512ceSopenharmony_ci                                            });
253948f512ceSopenharmony_ci                                            if (rowElement.querySelector('.tree-icon')) {
254048f512ceSopenharmony_ci                                                rowElement.querySelector('.tree-icon').name = 'plus-square';
254148f512ceSopenharmony_ci                                            }
254248f512ceSopenharmony_ci                                            rowElement.removeAttribute('expand');
254348f512ceSopenharmony_ci                                        };
254448f512ceSopenharmony_ci                                        const expendNode = (rowElement) => {
254548f512ceSopenharmony_ci                                            let id = rowElement.getAttribute('id');
254648f512ceSopenharmony_ci                                            let pid = rowElement.getAttribute('pid');
254748f512ceSopenharmony_ci                                            this.shadowRoot.querySelectorAll(`div[pid=${id}]`).forEach(a => {
254848f512ceSopenharmony_ci                                                let id = a.getAttribute('id');
254948f512ceSopenharmony_ci                                                let pid = a.getAttribute('pid');
255048f512ceSopenharmony_ci                                                a.style.display = '';
255148f512ceSopenharmony_ci                                                // expendNode(a);
255248f512ceSopenharmony_ci                                            });
255348f512ceSopenharmony_ci                                            if (rowElement.querySelector('.tree-icon')) {
255448f512ceSopenharmony_ci                                                rowElement.querySelector('.tree-icon').name = 'minus-square';
255548f512ceSopenharmony_ci                                            }
255648f512ceSopenharmony_ci                                            rowElement.setAttribute('expand', '');
255748f512ceSopenharmony_ci                                        }
255848f512ceSopenharmony_ci                                        if (rowElement.hasAttribute('expand')) {
255948f512ceSopenharmony_ci                                            foldNode(rowElement);
256048f512ceSopenharmony_ci                                        } else {
256148f512ceSopenharmony_ci                                            expendNode(rowElement);
256248f512ceSopenharmony_ci                                        }
256348f512ceSopenharmony_ci                                    };
256448f512ceSopenharmony_ci                                } else {
256548f512ceSopenharmony_ci                                    td.style.paddingLeft = offsetVal + 'px';
256648f512ceSopenharmony_ci                                }
256748f512ceSopenharmony_ci                            }
256848f512ceSopenharmony_ci                            rowElement.append(td);
256948f512ceSopenharmony_ci
257048f512ceSopenharmony_ci                        })
257148f512ceSopenharmony_ci                        if (this.selectable) {
257248f512ceSopenharmony_ci                            rowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
257348f512ceSopenharmony_ci                        } else {
257448f512ceSopenharmony_ci                            rowElement.style.gridTemplateColumns = gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
257548f512ceSopenharmony_ci                        }
257648f512ceSopenharmony_ci                        rowElement.onclick = e => {
257748f512ceSopenharmony_ci                            // console.log(rowElement.style.gridTemplateColumns);
257848f512ceSopenharmony_ci                            // LitMessage.info(JSON.stringify(rowData));
257948f512ceSopenharmony_ci                        }
258048f512ceSopenharmony_ci                        parentNode.append(rowElement);
258148f512ceSopenharmony_ci                        rowElement.setAttribute('id', rowData[ids[0]]);
258248f512ceSopenharmony_ci                        rowElement.setAttribute('pid', rowData[ids[1]]);
258348f512ceSopenharmony_ci                        rowElement.setAttribute('expand', '');
258448f512ceSopenharmony_ci                        if (rowData.children && rowData.children.length > 0) {
258548f512ceSopenharmony_ci                            //有子节点的 前面加上 + 图标 表示可以展开节点
258648f512ceSopenharmony_ci
258748f512ceSopenharmony_ci                            offsetVal = offsetVal + offset;
258848f512ceSopenharmony_ci                            drawRow(rowData.children, parentNode);
258948f512ceSopenharmony_ci                            offsetVal = offsetVal - offset;
259048f512ceSopenharmony_ci                        }
259148f512ceSopenharmony_ci                    });
259248f512ceSopenharmony_ci                };
259348f512ceSopenharmony_ci                drawRow(treeData, this.tbodyElement);
259448f512ceSopenharmony_ci            }
259548f512ceSopenharmony_ci
259648f512ceSopenharmony_ci            //获取选中的行数据
259748f512ceSopenharmony_ci            getCheckRows() {
259848f512ceSopenharmony_ci                return [...this.shadowRoot.querySelectorAll('div[class=tr][checked]')].map(a => a.data).map(a => {
259948f512ceSopenharmony_ci                    delete a['children'];
260048f512ceSopenharmony_ci                    return a;
260148f512ceSopenharmony_ci                });
260248f512ceSopenharmony_ci            }
260348f512ceSopenharmony_ci
260448f512ceSopenharmony_ci            deleteRowsCondition(fn) {
260548f512ceSopenharmony_ci                this.shadowRoot.querySelectorAll("div[class=tr]").forEach(tr => {
260648f512ceSopenharmony_ci                    if (fn(tr.data)) {
260748f512ceSopenharmony_ci                        tr.remove();
260848f512ceSopenharmony_ci                    }
260948f512ceSopenharmony_ci                })
261048f512ceSopenharmony_ci            }
261148f512ceSopenharmony_ci        }
261248f512ceSopenharmony_ci        if (!customElements.get('lit-table')) {
261348f512ceSopenharmony_ci            customElements.define('lit-table', LitTable);
261448f512ceSopenharmony_ci        }
261548f512ceSopenharmony_ci
261648f512ceSopenharmony_ci        class LitTableColumn extends HTMLElement {
261748f512ceSopenharmony_ci            static get observedAttributes() {
261848f512ceSopenharmony_ci                return ['name', 'order']
261948f512ceSopenharmony_ci            }
262048f512ceSopenharmony_ci
262148f512ceSopenharmony_ci            constructor() {
262248f512ceSopenharmony_ci                super();
262348f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
262448f512ceSopenharmony_ci                shadowRoot.innerHTML = `
262548f512ceSopenharmony_ci<style>
262648f512ceSopenharmony_ci:host{ }
262748f512ceSopenharmony_ci</style>
262848f512ceSopenharmony_ci<slot id="slot"></slot>
262948f512ceSopenharmony_ci        `
263048f512ceSopenharmony_ci            }
263148f512ceSopenharmony_ci            //当 custom element首次被插入文档DOM时，被调用。
263248f512ceSopenharmony_ci            connectedCallback() {
263348f512ceSopenharmony_ci                this.template = null;
263448f512ceSopenharmony_ci                this.st = this.shadowRoot.querySelector('#slot')
263548f512ceSopenharmony_ci                this.st.addEventListener('slotchange', () => {
263648f512ceSopenharmony_ci                    const elements = this.st.assignedElements({ flatten: false });
263748f512ceSopenharmony_ci                    if (elements.length > 0) {
263848f512ceSopenharmony_ci                        this.template = elements[0];
263948f512ceSopenharmony_ci                    }
264048f512ceSopenharmony_ci                })
264148f512ceSopenharmony_ci            }
264248f512ceSopenharmony_ci
264348f512ceSopenharmony_ci            //当 custom element从文档DOM中删除时，被调用。
264448f512ceSopenharmony_ci            disconnectedCallback() {
264548f512ceSopenharmony_ci
264648f512ceSopenharmony_ci            }
264748f512ceSopenharmony_ci
264848f512ceSopenharmony_ci            //当 custom element被移动到新的文档时，被调用。
264948f512ceSopenharmony_ci            adoptedCallback() {
265048f512ceSopenharmony_ci                console.log('Custom square element moved to new page.');
265148f512ceSopenharmony_ci            }
265248f512ceSopenharmony_ci
265348f512ceSopenharmony_ci            //当 custom element增加、删除、修改自身属性时，被调用。
265448f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
265548f512ceSopenharmony_ci
265648f512ceSopenharmony_ci            }
265748f512ceSopenharmony_ci        }
265848f512ceSopenharmony_ci        if (!customElements.get('lit-table-column')) {
265948f512ceSopenharmony_ci            customElements.define('lit-table-column', LitTableColumn);
266048f512ceSopenharmony_ci        }
266148f512ceSopenharmony_ci
266248f512ceSopenharmony_ci        class LitTableGroup extends HTMLElement {
266348f512ceSopenharmony_ci            static get observedAttributes() {
266448f512ceSopenharmony_ci                return ['title']
266548f512ceSopenharmony_ci            }
266648f512ceSopenharmony_ci
266748f512ceSopenharmony_ci            get title() {
266848f512ceSopenharmony_ci                return this.getAttribute('title');
266948f512ceSopenharmony_ci            }
267048f512ceSopenharmony_ci
267148f512ceSopenharmony_ci            set title(value) {
267248f512ceSopenharmony_ci                this.setAttribute('title', value);
267348f512ceSopenharmony_ci            }
267448f512ceSopenharmony_ci
267548f512ceSopenharmony_ci            constructor() {
267648f512ceSopenharmony_ci                super();
267748f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
267848f512ceSopenharmony_ci                shadowRoot.innerHTML = `
267948f512ceSopenharmony_ci        <style>
268048f512ceSopenharmony_ci        :host{ }
268148f512ceSopenharmony_ci        </style>
268248f512ceSopenharmony_ci        <slot id="sl"></slot>
268348f512ceSopenharmony_ci        `
268448f512ceSopenharmony_ci            }
268548f512ceSopenharmony_ci
268648f512ceSopenharmony_ci            //当 custom element首次被插入文档DOM时，被调用。
268748f512ceSopenharmony_ci            connectedCallback() {
268848f512ceSopenharmony_ci
268948f512ceSopenharmony_ci            }
269048f512ceSopenharmony_ci
269148f512ceSopenharmony_ci            //当 custom element从文档DOM中删除时，被调用。
269248f512ceSopenharmony_ci            disconnectedCallback() {
269348f512ceSopenharmony_ci
269448f512ceSopenharmony_ci            }
269548f512ceSopenharmony_ci
269648f512ceSopenharmony_ci            //当 custom element被移动到新的文档时，被调用。
269748f512ceSopenharmony_ci            adoptedCallback() {
269848f512ceSopenharmony_ci                console.log('Custom square element moved to new page.');
269948f512ceSopenharmony_ci            }
270048f512ceSopenharmony_ci
270148f512ceSopenharmony_ci            //当 custom element增加、删除、修改自身属性时，被调用。
270248f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
270348f512ceSopenharmony_ci
270448f512ceSopenharmony_ci            }
270548f512ceSopenharmony_ci        }
270648f512ceSopenharmony_ci        if (!customElements.get('lit-table-group')) {
270748f512ceSopenharmony_ci            customElements.define('lit-table-group', LitTableGroup);
270848f512ceSopenharmony_ci        }
270948f512ceSopenharmony_ci
271048f512ceSopenharmony_ci        class LitTabpane extends HTMLElement {
271148f512ceSopenharmony_ci            static get observedAttributes() { return ['tab', 'key', 'disabled', 'icon', 'closeable', 'hide']; }
271248f512ceSopenharmony_ci            constructor() {
271348f512ceSopenharmony_ci                super();
271448f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
271548f512ceSopenharmony_ci                shadowRoot.innerHTML = `
271648f512ceSopenharmony_ci<style>
271748f512ceSopenharmony_ci:host(){
271848f512ceSopenharmony_ci    scroll-behavior: smooth;
271948f512ceSopenharmony_ci    -webkit-overflow-scrolling: touch;
272048f512ceSopenharmony_ci    overflow: auto;
272148f512ceSopenharmony_ci    width: 100%;
272248f512ceSopenharmony_ci}
272348f512ceSopenharmony_ci</style>
272448f512ceSopenharmony_ci<slot></slot>
272548f512ceSopenharmony_ci`
272648f512ceSopenharmony_ci            }
272748f512ceSopenharmony_ci
272848f512ceSopenharmony_ci            get tab() {
272948f512ceSopenharmony_ci                return this.getAttribute('tab');
273048f512ceSopenharmony_ci            }
273148f512ceSopenharmony_ci
273248f512ceSopenharmony_ci            set tab(value) {
273348f512ceSopenharmony_ci                this.setAttribute("tab", value);
273448f512ceSopenharmony_ci            }
273548f512ceSopenharmony_ci
273648f512ceSopenharmony_ci            get icon() {
273748f512ceSopenharmony_ci                return this.getAttribute("icon");
273848f512ceSopenharmony_ci            }
273948f512ceSopenharmony_ci
274048f512ceSopenharmony_ci            get disabled() {
274148f512ceSopenharmony_ci                return this.getAttribute('disabled') !== null;
274248f512ceSopenharmony_ci            }
274348f512ceSopenharmony_ci
274448f512ceSopenharmony_ci            set disabled(value) {
274548f512ceSopenharmony_ci                if (value === null || !value) {
274648f512ceSopenharmony_ci                    this.removeAttribute("disabled");
274748f512ceSopenharmony_ci                } else {
274848f512ceSopenharmony_ci                    this.setAttribute("disabled", value);
274948f512ceSopenharmony_ci                }
275048f512ceSopenharmony_ci            }
275148f512ceSopenharmony_ci            get closeable() {
275248f512ceSopenharmony_ci                return this.getAttribute('closeable') !== null;
275348f512ceSopenharmony_ci            }
275448f512ceSopenharmony_ci            set closeable(value) {
275548f512ceSopenharmony_ci                if (value === null || !value) {
275648f512ceSopenharmony_ci                    this.removeAttribute("closeable");
275748f512ceSopenharmony_ci                } else {
275848f512ceSopenharmony_ci                    this.setAttribute("closeable", value);
275948f512ceSopenharmony_ci                }
276048f512ceSopenharmony_ci            }
276148f512ceSopenharmony_ci
276248f512ceSopenharmony_ci            get key() {
276348f512ceSopenharmony_ci                return this.getAttribute("key");
276448f512ceSopenharmony_ci            }
276548f512ceSopenharmony_ci            set key(value) {
276648f512ceSopenharmony_ci                this.setAttribute("key", value);
276748f512ceSopenharmony_ci            }
276848f512ceSopenharmony_ci
276948f512ceSopenharmony_ci            get hide() {
277048f512ceSopenharmony_ci                return this.getAttribute('hide') !== null;
277148f512ceSopenharmony_ci            }
277248f512ceSopenharmony_ci            set hide(value) {
277348f512ceSopenharmony_ci                if (value === null || !value) {
277448f512ceSopenharmony_ci                    this.removeAttribute("hide");
277548f512ceSopenharmony_ci                } else {
277648f512ceSopenharmony_ci                    this.setAttribute("hide", value);
277748f512ceSopenharmony_ci                }
277848f512ceSopenharmony_ci            }
277948f512ceSopenharmony_ci
278048f512ceSopenharmony_ci            //当 custom element首次被插入文档DOM时，被调用。
278148f512ceSopenharmony_ci            connectedCallback() { }
278248f512ceSopenharmony_ci
278348f512ceSopenharmony_ci            //当 custom element从文档DOM中删除时，被调用。
278448f512ceSopenharmony_ci            disconnectedCallback() { }
278548f512ceSopenharmony_ci
278648f512ceSopenharmony_ci            //当 custom element被移动到新的文档时，被调用。
278748f512ceSopenharmony_ci            adoptedCallback() { }
278848f512ceSopenharmony_ci
278948f512ceSopenharmony_ci            //当 custom element增加、删除、修改自身属性时，被调用。
279048f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
279148f512ceSopenharmony_ci                if (oldValue !== newValue && newValue !== undefined) {
279248f512ceSopenharmony_ci                    if (name === 'tab' && this.parentNode) {
279348f512ceSopenharmony_ci                        this.parentNode.updateLabel && this.parentNode.updateLabel(this.key, newValue);
279448f512ceSopenharmony_ci                    }
279548f512ceSopenharmony_ci                    if (name === 'disabled' && this.parentNode) {
279648f512ceSopenharmony_ci                        this.parentNode.updateDisabled && this.parentNode.updateDisabled(this.key, newValue);
279748f512ceSopenharmony_ci                    }
279848f512ceSopenharmony_ci                    if (name === 'closeable' && this.parentNode) {
279948f512ceSopenharmony_ci                        this.parentNode.updateCloseable && this.parentNode.updateCloseable(this.key, newValue);
280048f512ceSopenharmony_ci                    }
280148f512ceSopenharmony_ci                    if (name === 'hide' && this.parentNode) {
280248f512ceSopenharmony_ci                        this.parentNode.updateCloseable && this.parentNode.updateHide(this.key, newValue);
280348f512ceSopenharmony_ci                    }
280448f512ceSopenharmony_ci                }
280548f512ceSopenharmony_ci            }
280648f512ceSopenharmony_ci        }
280748f512ceSopenharmony_ci        if (!customElements.get('lit-tabpane')) {
280848f512ceSopenharmony_ci            customElements.define('lit-tabpane', LitTabpane);
280948f512ceSopenharmony_ci        }
281048f512ceSopenharmony_ci
281148f512ceSopenharmony_ci        class LitTabs extends HTMLElement {
281248f512ceSopenharmony_ci            static get observedAttributes() {
281348f512ceSopenharmony_ci                //mode = flat(default) | card
281448f512ceSopenharmony_ci                //position = top | top-left | top-center | top-right | left | left-top | left-center | left-bottom | right | bottom
281548f512ceSopenharmony_ci                return ['activekey', 'mode', 'position']
281648f512ceSopenharmony_ci            }
281748f512ceSopenharmony_ci
281848f512ceSopenharmony_ci            constructor() {
281948f512ceSopenharmony_ci                super();
282048f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
282148f512ceSopenharmony_ci                shadowRoot.innerHTML = `
282248f512ceSopenharmony_ci        <style>
282348f512ceSopenharmony_ci        :host{
282448f512ceSopenharmony_ci            display: block;
282548f512ceSopenharmony_ci            text-align: unset;
282648f512ceSopenharmony_ci            color: #252525;
282748f512ceSopenharmony_ci            background-color: #fff;
282848f512ceSopenharmony_ci            box-shadow: #00000033 0 0 10px ;
282948f512ceSopenharmony_ci            /*padding: 10px;*/
283048f512ceSopenharmony_ci            /*margin-right: 10px;*/
283148f512ceSopenharmony_ci        }
283248f512ceSopenharmony_ci        ::slotted(lit-tabpane){
283348f512ceSopenharmony_ci            box-sizing:border-box;
283448f512ceSopenharmony_ci            width:100%;
283548f512ceSopenharmony_ci            height:100%;
283648f512ceSopenharmony_ci            /*padding:10px;*/
283748f512ceSopenharmony_ci            flex-shrink:0;
283848f512ceSopenharmony_ci            overflow:auto;
283948f512ceSopenharmony_ci        }
284048f512ceSopenharmony_ci        .nav-item{
284148f512ceSopenharmony_ci            display: inline-flex;
284248f512ceSopenharmony_ci            justify-content: center;
284348f512ceSopenharmony_ci            align-items: center;
284448f512ceSopenharmony_ci            padding: 6px 0px 6px 12px;
284548f512ceSopenharmony_ci            font-size: .9rem;
284648f512ceSopenharmony_ci            font-weight: normal;
284748f512ceSopenharmony_ci            cursor: pointer;
284848f512ceSopenharmony_ci            transition: all 0.3s;
284948f512ceSopenharmony_ci            flex-shrink: 0;
285048f512ceSopenharmony_ci        }
285148f512ceSopenharmony_ci        .nav-item lit-icon{
285248f512ceSopenharmony_ci            margin-right: 2px;
285348f512ceSopenharmony_ci            font-size: inherit;
285448f512ceSopenharmony_ci        }
285548f512ceSopenharmony_ci        .nav-item:hover{
285648f512ceSopenharmony_ci            color: #42b983;
285748f512ceSopenharmony_ci        }
285848f512ceSopenharmony_ci        .nav-item[data-disabled]{
285948f512ceSopenharmony_ci            pointer-events: all;
286048f512ceSopenharmony_ci            cursor: not-allowed;
286148f512ceSopenharmony_ci            color: #bfbfbf;
286248f512ceSopenharmony_ci        }
286348f512ceSopenharmony_ci        .nav-item[data-selected]{
286448f512ceSopenharmony_ci            color: #42b983;;
286548f512ceSopenharmony_ci        }
286648f512ceSopenharmony_ci        .tab-content{
286748f512ceSopenharmony_ci            display: block;
286848f512ceSopenharmony_ci            background-color: #fff;
286948f512ceSopenharmony_ci            flex:1;
287048f512ceSopenharmony_ci        }
287148f512ceSopenharmony_ci
287248f512ceSopenharmony_ci        /*
287348f512ceSopenharmony_ci         *   top  top-left top-center top-right
287448f512ceSopenharmony_ci         */
287548f512ceSopenharmony_ci        :host(:not([position])) .nav-root,
287648f512ceSopenharmony_ci        :host([position^='top']) .nav-root{
287748f512ceSopenharmony_ci            display: flex;
287848f512ceSopenharmony_ci            position: relative;
287948f512ceSopenharmony_ci            justify-content: center;
288048f512ceSopenharmony_ci            align-items: center;
288148f512ceSopenharmony_ci        }
288248f512ceSopenharmony_ci        :host(:not([mode]):not([position])) .tab-line,/*移动的线条*/
288348f512ceSopenharmony_ci        :host([mode='flat'][position^='top']) .tab-line{
288448f512ceSopenharmony_ci            position:absolute;
288548f512ceSopenharmony_ci            bottom: 2px;
288648f512ceSopenharmony_ci            background-color: #42b983;
288748f512ceSopenharmony_ci            height: 2px;
288848f512ceSopenharmony_ci            transform: translateY(100%);
288948f512ceSopenharmony_ci            transition: all 0.3s;
289048f512ceSopenharmony_ci        }
289148f512ceSopenharmony_ci
289248f512ceSopenharmony_ci        :host(:not([position])) .tab-nav-container,
289348f512ceSopenharmony_ci        :host([position^='top']) .tab-nav-container{
289448f512ceSopenharmony_ci            display: flex;
289548f512ceSopenharmony_ci            position: relative;
289648f512ceSopenharmony_ci            flex-direction: column;
289748f512ceSopenharmony_ci            overflow-y: hidden;
289848f512ceSopenharmony_ci            overflow-x: auto;
289948f512ceSopenharmony_ci            overflow: -moz-scrollbars-none;
290048f512ceSopenharmony_ci            -ms-overflow-style: none;
290148f512ceSopenharmony_ci            transition: all 0.3s;
290248f512ceSopenharmony_ci            flex: 1;
290348f512ceSopenharmony_ci            /*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/
290448f512ceSopenharmony_ci            /*background-repeat: no-repeat;*/
290548f512ceSopenharmony_ci            /*background-size: 50px 100%, 15px 100%;*/
290648f512ceSopenharmony_ci            /*background-attachment: local,scroll,local,scroll;*/
290748f512ceSopenharmony_ci            /*border-bottom: #f0f0f0 1px solid;*/
290848f512ceSopenharmony_ci        }
290948f512ceSopenharmony_ci        :host([position='top']) .tab-nav,
291048f512ceSopenharmony_ci        :host([position='top-left']) .tab-nav{
291148f512ceSopenharmony_ci            display: flex;
291248f512ceSopenharmony_ci            position: relative;
291348f512ceSopenharmony_ci            justify-content: flex-start;
291448f512ceSopenharmony_ci        }
291548f512ceSopenharmony_ci        :host([position='top-center']) .tab-nav{
291648f512ceSopenharmony_ci            display: flex;
291748f512ceSopenharmony_ci            justify-content: center;
291848f512ceSopenharmony_ci        }
291948f512ceSopenharmony_ci        :host([position='top-right']) .tab-nav{
292048f512ceSopenharmony_ci            display: flex;
292148f512ceSopenharmony_ci            justify-content: flex-end;
292248f512ceSopenharmony_ci        }
292348f512ceSopenharmony_ci
292448f512ceSopenharmony_ci        :host([position^='top'][mode='card']) .nav-item{
292548f512ceSopenharmony_ci            border-top: 1px solid #f0f0f0;
292648f512ceSopenharmony_ci            border-left: 1px solid #f0f0f0;
292748f512ceSopenharmony_ci            border-right: 1px solid #f0f0f0;
292848f512ceSopenharmony_ci            border-bottom: 1px solid #f0f0f0;
292948f512ceSopenharmony_ci            bottom: 0px;
293048f512ceSopenharmony_ci            margin-right: 2px;
293148f512ceSopenharmony_ci            position: relative;
293248f512ceSopenharmony_ci        }
293348f512ceSopenharmony_ci        :host([position^='top']) .tab-nav-bg-line{
293448f512ceSopenharmony_ci            position: absolute;bottom: 0;height: 1px;background-color: #f0f0f0;width: 100%
293548f512ceSopenharmony_ci        }
293648f512ceSopenharmony_ci        :host([position^='top'][mode='card']) .nav-item:not([data-selected]){
293748f512ceSopenharmony_ci            background-color: #f6f6f6;
293848f512ceSopenharmony_ci            border-bottom: 1px solid #f0f0f0;
293948f512ceSopenharmony_ci        }
294048f512ceSopenharmony_ci        :host([position^='top'][mode='card']) .nav-item[data-selected]{
294148f512ceSopenharmony_ci            background-color: #ffffff;
294248f512ceSopenharmony_ci            border-bottom: 1px solid #fff;
294348f512ceSopenharmony_ci            bottom: 0px;
294448f512ceSopenharmony_ci        }
294548f512ceSopenharmony_ci        /*
294648f512ceSopenharmony_ci            bottom bottom-left bottom-center bottom-right
294748f512ceSopenharmony_ci        */
294848f512ceSopenharmony_ci        :host([position^='bottom']) .tab{
294948f512ceSopenharmony_ci            display: flex;
295048f512ceSopenharmony_ci            flex-direction: column-reverse;
295148f512ceSopenharmony_ci        }
295248f512ceSopenharmony_ci        :host([mode='flat'][position^='bottom']) .tab-line{
295348f512ceSopenharmony_ci            position:absolute;
295448f512ceSopenharmony_ci            top: -3px;
295548f512ceSopenharmony_ci            background-color: #42b983;
295648f512ceSopenharmony_ci            height: 2px;
295748f512ceSopenharmony_ci            transform: translateY(-100%);
295848f512ceSopenharmony_ci            transition: all 0.3s;
295948f512ceSopenharmony_ci        }
296048f512ceSopenharmony_ci        :host([position^='bottom']) .tab-nav-container{
296148f512ceSopenharmony_ci            display: flex;
296248f512ceSopenharmony_ci            position: relative;
296348f512ceSopenharmony_ci            flex-direction: column;
296448f512ceSopenharmony_ci            overflow-x: auto;
296548f512ceSopenharmony_ci            overflow-y: visible;
296648f512ceSopenharmony_ci            overflow: -moz-scrollbars-none;
296748f512ceSopenharmony_ci            -ms-overflow-style: none;
296848f512ceSopenharmony_ci            transition: all 0.3s;
296948f512ceSopenharmony_ci            flex: 1;
297048f512ceSopenharmony_ci            /*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/
297148f512ceSopenharmony_ci            /*background-repeat: no-repeat;*/
297248f512ceSopenharmony_ci            /*background-size: 50px 100%, 15px 100%;*/
297348f512ceSopenharmony_ci            /*background-attachment: local,scroll,local,scroll;*/
297448f512ceSopenharmony_ci            border-top: #f0f0f0 1px solid;
297548f512ceSopenharmony_ci        }
297648f512ceSopenharmony_ci        :host([position^='bottom']) .nav-root{
297748f512ceSopenharmony_ci            display: flex;
297848f512ceSopenharmony_ci            justify-content: center;
297948f512ceSopenharmony_ci            align-items: center;
298048f512ceSopenharmony_ci        }
298148f512ceSopenharmony_ci        :host([position='bottom']) .tab-nav,
298248f512ceSopenharmony_ci        :host([position='bottom-left']) .tab-nav{
298348f512ceSopenharmony_ci            display: flex;
298448f512ceSopenharmony_ci            position: relative;
298548f512ceSopenharmony_ci            justify-content: flex-start;
298648f512ceSopenharmony_ci        }
298748f512ceSopenharmony_ci        :host([position='bottom-center']) .tab-nav{
298848f512ceSopenharmony_ci            display: flex;
298948f512ceSopenharmony_ci            justify-content: center;
299048f512ceSopenharmony_ci        }
299148f512ceSopenharmony_ci        :host([position='bottom-right']) .tab-nav{
299248f512ceSopenharmony_ci            display: flex;
299348f512ceSopenharmony_ci            justify-content: flex-end;
299448f512ceSopenharmony_ci        }
299548f512ceSopenharmony_ci        :host([position^='bottom'][mode='card']) .nav-item{
299648f512ceSopenharmony_ci            border-top: 1px solid #ffffff;
299748f512ceSopenharmony_ci            border-left: 1px solid #f0f0f0;
299848f512ceSopenharmony_ci            border-right: 1px solid #f0f0f0;
299948f512ceSopenharmony_ci            border-bottom: 1px solid #f0f0f0;
300048f512ceSopenharmony_ci            top: -1px;
300148f512ceSopenharmony_ci            margin-right: 2px;
300248f512ceSopenharmony_ci            position: relative;
300348f512ceSopenharmony_ci        }
300448f512ceSopenharmony_ci        :host([position^='bottom']) .tab-nav-bg-line{
300548f512ceSopenharmony_ci            position: absolute;top: 0;height: 1px;background-color: #f0f0f0;width: 100%
300648f512ceSopenharmony_ci        }
300748f512ceSopenharmony_ci        :host([position^='bottom'][mode='card']) .nav-item:not([data-selected]){
300848f512ceSopenharmony_ci            background-color: #f5f5f5;
300948f512ceSopenharmony_ci            border-top: 1px solid #f0f0f0;
301048f512ceSopenharmony_ci        }
301148f512ceSopenharmony_ci        :host([position^='bottom'][mode='card']) .nav-item[data-selected]{
301248f512ceSopenharmony_ci            background-color: #ffffff;
301348f512ceSopenharmony_ci            border-top: 1px solid #fff;
301448f512ceSopenharmony_ci            top: -1px;
301548f512ceSopenharmony_ci        }
301648f512ceSopenharmony_ci        /*
301748f512ceSopenharmony_ci        left left-top left-center left-bottom
301848f512ceSopenharmony_ci        */
301948f512ceSopenharmony_ci        :host([position^='left']) .tab{
302048f512ceSopenharmony_ci            display: flex;
302148f512ceSopenharmony_ci            flex-direction: row;
302248f512ceSopenharmony_ci        }
302348f512ceSopenharmony_ci        :host([mode='flat'][position^='left']) .tab-line{
302448f512ceSopenharmony_ci            position:absolute;
302548f512ceSopenharmony_ci            right: 1px;
302648f512ceSopenharmony_ci            background-color: #42b983;
302748f512ceSopenharmony_ci            width: 3px;
302848f512ceSopenharmony_ci            transform: translateX(100%);
302948f512ceSopenharmony_ci            transition: all 0.3s;
303048f512ceSopenharmony_ci        }
303148f512ceSopenharmony_ci        :host([position^='left']) .tab-nav-container{
303248f512ceSopenharmony_ci            display: flex;
303348f512ceSopenharmony_ci            position: relative;
303448f512ceSopenharmony_ci            flex-direction: row;
303548f512ceSopenharmony_ci            overflow-x: auto;
303648f512ceSopenharmony_ci            overflow-y: visible;
303748f512ceSopenharmony_ci            overflow: -moz-scrollbars-none;
303848f512ceSopenharmony_ci            -ms-overflow-style: none;
303948f512ceSopenharmony_ci            transition: all 0.3s;
304048f512ceSopenharmony_ci            flex: 1;
304148f512ceSopenharmony_ci            /*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/
304248f512ceSopenharmony_ci            /*background-repeat: no-repeat;*/
304348f512ceSopenharmony_ci            /*background-size: 50px 100%, 15px 100%;*/
304448f512ceSopenharmony_ci            /*background-attachment: local,scroll,local,scroll;*/
304548f512ceSopenharmony_ci            border-right: #f0f0f0 1px solid;
304648f512ceSopenharmony_ci        }
304748f512ceSopenharmony_ci        :host([position^='left']) .nav-root{
304848f512ceSopenharmony_ci            display: flex;
304948f512ceSopenharmony_ci            flex-direction: column;
305048f512ceSopenharmony_ci            justify-content: center;
305148f512ceSopenharmony_ci            align-items: center;
305248f512ceSopenharmony_ci        }
305348f512ceSopenharmony_ci        :host([position='left']) .tab-nav,
305448f512ceSopenharmony_ci        :host([position='left-top']) .tab-nav{
305548f512ceSopenharmony_ci            display: flex;
305648f512ceSopenharmony_ci            position: relative;
305748f512ceSopenharmony_ci            flex-direction: column;
305848f512ceSopenharmony_ci            justify-content: flex-start;
305948f512ceSopenharmony_ci        }
306048f512ceSopenharmony_ci        :host([position='left-center']) .tab-nav{
306148f512ceSopenharmony_ci            display: flex;
306248f512ceSopenharmony_ci            position: relative;
306348f512ceSopenharmony_ci            flex-direction: column;
306448f512ceSopenharmony_ci            justify-content: center;
306548f512ceSopenharmony_ci        }
306648f512ceSopenharmony_ci        :host([position='left-bottom']) .tab-nav{
306748f512ceSopenharmony_ci            display: flex;
306848f512ceSopenharmony_ci            position: relative;
306948f512ceSopenharmony_ci            flex-direction: column;
307048f512ceSopenharmony_ci            justify-content: flex-end;
307148f512ceSopenharmony_ci        }
307248f512ceSopenharmony_ci        :host([position^='left'][mode='card']) .nav-item{
307348f512ceSopenharmony_ci            border-top: 1px solid #f0f0f0;
307448f512ceSopenharmony_ci            border-left: 1px solid #f0f0f0;
307548f512ceSopenharmony_ci            border-right: 1px solid #ffffff;
307648f512ceSopenharmony_ci            border-bottom: 1px solid #f0f0f0;
307748f512ceSopenharmony_ci            right: -1px;
307848f512ceSopenharmony_ci            margin-bottom: 2px;
307948f512ceSopenharmony_ci            position: relative;
308048f512ceSopenharmony_ci        }
308148f512ceSopenharmony_ci        :host([position^='left']) .tab-nav-bg-line{
308248f512ceSopenharmony_ci            position: absolute;right: 0;width: 1px;background-color: #f0f0f0;width: 100%
308348f512ceSopenharmony_ci        }
308448f512ceSopenharmony_ci        :host([position^='left'][mode='card']) .nav-item:not([data-selected]){
308548f512ceSopenharmony_ci            background-color: #f5f5f5;
308648f512ceSopenharmony_ci            border-right: 1px solid #f0f0f0;
308748f512ceSopenharmony_ci        }
308848f512ceSopenharmony_ci        :host([position^='left'][mode='card']) .nav-item[data-selected]{
308948f512ceSopenharmony_ci            background-color: #ffffff;
309048f512ceSopenharmony_ci            border-bottom: 1px solid #fff;
309148f512ceSopenharmony_ci            right: -1px;
309248f512ceSopenharmony_ci        }
309348f512ceSopenharmony_ci        /*
309448f512ceSopenharmony_ci        right right-top right-center right-bottom
309548f512ceSopenharmony_ci        */
309648f512ceSopenharmony_ci        :host([position^='right']) .tab{
309748f512ceSopenharmony_ci            display: flex;
309848f512ceSopenharmony_ci            flex-direction: row-reverse;
309948f512ceSopenharmony_ci        }
310048f512ceSopenharmony_ci        :host([mode='flat'][position^='right']) .tab-line{
310148f512ceSopenharmony_ci            position:absolute;
310248f512ceSopenharmony_ci            left: 1px;
310348f512ceSopenharmony_ci            background-color: #42b983;
310448f512ceSopenharmony_ci            width: 3px;
310548f512ceSopenharmony_ci            transform: translateX(-100%);
310648f512ceSopenharmony_ci            transition: all 0.3s;
310748f512ceSopenharmony_ci        }
310848f512ceSopenharmony_ci        :host([position^='right']) .tab-nav-container{
310948f512ceSopenharmony_ci            display: flex;
311048f512ceSopenharmony_ci            position: relative;
311148f512ceSopenharmony_ci            flex-direction: row-reverse;
311248f512ceSopenharmony_ci            overflow-x: auto;
311348f512ceSopenharmony_ci            overflow-y: visible;
311448f512ceSopenharmony_ci            overflow: -moz-scrollbars-none;
311548f512ceSopenharmony_ci            -ms-overflow-style: none;
311648f512ceSopenharmony_ci            transition: all 0.3s;
311748f512ceSopenharmony_ci            flex: 1;
311848f512ceSopenharmony_ci            /*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/
311948f512ceSopenharmony_ci            /*background-repeat: no-repeat;*/
312048f512ceSopenharmony_ci            /*background-size: 50px 100%, 15px 100%;*/
312148f512ceSopenharmony_ci            /*background-attachment: local,scroll,local,scroll;*/
312248f512ceSopenharmony_ci            border-left: #f0f0f0 1px solid;
312348f512ceSopenharmony_ci        }
312448f512ceSopenharmony_ci        :host([position^='right']) .nav-root{
312548f512ceSopenharmony_ci            display: flex;
312648f512ceSopenharmony_ci            flex-direction: column;
312748f512ceSopenharmony_ci            justify-content: center;
312848f512ceSopenharmony_ci            align-items: center;
312948f512ceSopenharmony_ci        }
313048f512ceSopenharmony_ci        :host([position='right']) .tab-nav,
313148f512ceSopenharmony_ci        :host([position='right-top']) .tab-nav{
313248f512ceSopenharmony_ci            display: flex;
313348f512ceSopenharmony_ci            position: relative;
313448f512ceSopenharmony_ci            flex-direction: column;
313548f512ceSopenharmony_ci            justify-content: flex-start;
313648f512ceSopenharmony_ci        }
313748f512ceSopenharmony_ci        :host([position='right-center']) .tab-nav{
313848f512ceSopenharmony_ci            display: flex;
313948f512ceSopenharmony_ci            position: relative;
314048f512ceSopenharmony_ci            flex-direction: column;
314148f512ceSopenharmony_ci            justify-content: center;
314248f512ceSopenharmony_ci        }
314348f512ceSopenharmony_ci        :host([position='right-bottom']) .tab-nav{
314448f512ceSopenharmony_ci            display: flex;
314548f512ceSopenharmony_ci            position: relative;
314648f512ceSopenharmony_ci            flex-direction: column;
314748f512ceSopenharmony_ci            justify-content: flex-end;
314848f512ceSopenharmony_ci        }
314948f512ceSopenharmony_ci        :host([position^='right'][mode='card']) .nav-item{
315048f512ceSopenharmony_ci            border-top: 1px solid #f0f0f0;
315148f512ceSopenharmony_ci            border-left: 1px solid #ffffff;
315248f512ceSopenharmony_ci            border-right: 1px solid #f0f0f0;
315348f512ceSopenharmony_ci            border-bottom: 1px solid #f0f0f0;
315448f512ceSopenharmony_ci            left: -1px;
315548f512ceSopenharmony_ci            margin-top: 2px;
315648f512ceSopenharmony_ci            position: relative;
315748f512ceSopenharmony_ci        }
315848f512ceSopenharmony_ci        :host([position^='right']) .tab-nav-bg-line{
315948f512ceSopenharmony_ci            position: absolute;left: 0;width: 1px;background-color: #f0f0f0;width: 100%
316048f512ceSopenharmony_ci        }
316148f512ceSopenharmony_ci        :host([position^='right'][mode='card']) .nav-item:not([data-selected]){
316248f512ceSopenharmony_ci            background-color: #f5f5f5;
316348f512ceSopenharmony_ci            border-left: 1px solid #f0f0f0;
316448f512ceSopenharmony_ci        }
316548f512ceSopenharmony_ci        :host([position^='right'][mode='card']) .nav-item[data-selected]{
316648f512ceSopenharmony_ci            background-color: #ffffff;
316748f512ceSopenharmony_ci            left: -1px;
316848f512ceSopenharmony_ci        }
316948f512ceSopenharmony_ci
317048f512ceSopenharmony_ci
317148f512ceSopenharmony_ci        .tab-nav-container::-webkit-scrollbar {
317248f512ceSopenharmony_ci            display: none;
317348f512ceSopenharmony_ci        }
317448f512ceSopenharmony_ci
317548f512ceSopenharmony_ci
317648f512ceSopenharmony_ci        /*关闭的图标*/
317748f512ceSopenharmony_ci        .close-icon:hover{
317848f512ceSopenharmony_ci            color: #000;
317948f512ceSopenharmony_ci        }
318048f512ceSopenharmony_ci        .nav-item[data-closeable] .close-icon{
318148f512ceSopenharmony_ci            display: block;
318248f512ceSopenharmony_ci            padding: 5px 5px 5px 5px;
318348f512ceSopenharmony_ci            color: #999;
318448f512ceSopenharmony_ci        }
318548f512ceSopenharmony_ci        .nav-item[data-closeable] .no-close-icon{
318648f512ceSopenharmony_ci            display: none;
318748f512ceSopenharmony_ci        }
318848f512ceSopenharmony_ci        .nav-item:not([data-closeable]) .no-close-icon{
318948f512ceSopenharmony_ci            display: block;
319048f512ceSopenharmony_ci        }
319148f512ceSopenharmony_ci        .nav-item:not([data-closeable]) .close-icon{
319248f512ceSopenharmony_ci            display: none;
319348f512ceSopenharmony_ci        }
319448f512ceSopenharmony_ci        .nav-item:not([data-hide]){
319548f512ceSopenharmony_ci            display: block;
319648f512ceSopenharmony_ci        }
319748f512ceSopenharmony_ci        .nav-item[data-hide]{
319848f512ceSopenharmony_ci            display: none;
319948f512ceSopenharmony_ci        }
320048f512ceSopenharmony_ci
320148f512ceSopenharmony_ci        </style>
320248f512ceSopenharmony_ci        <style id="filter"></style>
320348f512ceSopenharmony_ci        <div class="tab">
320448f512ceSopenharmony_ci            <div class="nav-root">
320548f512ceSopenharmony_ci                <slot name="left" style="flex:1"></slot>
320648f512ceSopenharmony_ci                <div class="tab-nav-container" >
320748f512ceSopenharmony_ci                    <div class="tab-nav-bg-line"></div>
320848f512ceSopenharmony_ci                    <div class="tab-nav" id="nav"></div>
320948f512ceSopenharmony_ci                    <div class="tab-line" id="tab-line"></div>
321048f512ceSopenharmony_ci                </div>
321148f512ceSopenharmony_ci                <slot name="right" style="flex:1"></slot>
321248f512ceSopenharmony_ci            </div>
321348f512ceSopenharmony_ci            <div class="tab-content">
321448f512ceSopenharmony_ci                <slot id="slot">NEED CONTENT</slot>
321548f512ceSopenharmony_ci            </div>
321648f512ceSopenharmony_ci        </div>
321748f512ceSopenharmony_ci        `
321848f512ceSopenharmony_ci            }
321948f512ceSopenharmony_ci
322048f512ceSopenharmony_ci            get position() {
322148f512ceSopenharmony_ci                return this.getAttribute('position') || 'top';
322248f512ceSopenharmony_ci            }
322348f512ceSopenharmony_ci
322448f512ceSopenharmony_ci            set position(value) {
322548f512ceSopenharmony_ci                this.setAttribute('position', value);
322648f512ceSopenharmony_ci            }
322748f512ceSopenharmony_ci
322848f512ceSopenharmony_ci            get mode() {
322948f512ceSopenharmony_ci                return this.getAttribute('mode') || 'flat';
323048f512ceSopenharmony_ci            }
323148f512ceSopenharmony_ci
323248f512ceSopenharmony_ci            set mode(value) {
323348f512ceSopenharmony_ci                this.setAttribute('mode', value);
323448f512ceSopenharmony_ci            }
323548f512ceSopenharmony_ci
323648f512ceSopenharmony_ci            get activekey() {
323748f512ceSopenharmony_ci                return this.getAttribute("activekey");
323848f512ceSopenharmony_ci            }
323948f512ceSopenharmony_ci
324048f512ceSopenharmony_ci            set activekey(value) {
324148f512ceSopenharmony_ci                this.setAttribute('activekey', value);
324248f512ceSopenharmony_ci            }
324348f512ceSopenharmony_ci
324448f512ceSopenharmony_ci            updateLabel(key, value) {
324548f512ceSopenharmony_ci                // console.log(key, value);
324648f512ceSopenharmony_ci                if (this.nav) {
324748f512ceSopenharmony_ci                    let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
324848f512ceSopenharmony_ci                    if (item) {
324948f512ceSopenharmony_ci                        item.querySelector("span").innerHTML = value;
325048f512ceSopenharmony_ci                        this.initTabPos()
325148f512ceSopenharmony_ci                    }
325248f512ceSopenharmony_ci                }
325348f512ceSopenharmony_ci            }
325448f512ceSopenharmony_ci
325548f512ceSopenharmony_ci            updateDisabled(key, value) {
325648f512ceSopenharmony_ci                // console.log(key, value);
325748f512ceSopenharmony_ci                if (this.nav) {
325848f512ceSopenharmony_ci                    let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
325948f512ceSopenharmony_ci                    if (item) {
326048f512ceSopenharmony_ci                        if (value) {
326148f512ceSopenharmony_ci                            item.setAttribute('data-disabled', '')
326248f512ceSopenharmony_ci                        } else {
326348f512ceSopenharmony_ci                            item.removeAttribute('data-disabled');
326448f512ceSopenharmony_ci                        }
326548f512ceSopenharmony_ci                        this.initTabPos()
326648f512ceSopenharmony_ci                    }
326748f512ceSopenharmony_ci                }
326848f512ceSopenharmony_ci            }
326948f512ceSopenharmony_ci            updateCloseable(key, value) {
327048f512ceSopenharmony_ci                if (this.nav) {
327148f512ceSopenharmony_ci                    let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
327248f512ceSopenharmony_ci                    if (item) {
327348f512ceSopenharmony_ci                        if (value) {
327448f512ceSopenharmony_ci                            item.setAttribute('data-closeable', '')
327548f512ceSopenharmony_ci                        } else {
327648f512ceSopenharmony_ci                            item.removeAttribute('data-closeable');
327748f512ceSopenharmony_ci                        }
327848f512ceSopenharmony_ci                        this.initTabPos()
327948f512ceSopenharmony_ci                    }
328048f512ceSopenharmony_ci                }
328148f512ceSopenharmony_ci            }
328248f512ceSopenharmony_ci            updateHide(key, value) {
328348f512ceSopenharmony_ci                if (this.nav) {
328448f512ceSopenharmony_ci                    let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
328548f512ceSopenharmony_ci                    if (item) {
328648f512ceSopenharmony_ci                        if (value) {
328748f512ceSopenharmony_ci                            item.setAttribute('data-hide', '')
328848f512ceSopenharmony_ci                        } else {
328948f512ceSopenharmony_ci                            item.removeAttribute('data-hide');
329048f512ceSopenharmony_ci                        }
329148f512ceSopenharmony_ci                        this.initTabPos()
329248f512ceSopenharmony_ci                    }
329348f512ceSopenharmony_ci                }
329448f512ceSopenharmony_ci            }
329548f512ceSopenharmony_ci
329648f512ceSopenharmony_ci            initTabPos() {
329748f512ceSopenharmony_ci                const items = this.nav.querySelectorAll(".nav-item");
329848f512ceSopenharmony_ci                Array.from(items).forEach((a, index) => {
329948f512ceSopenharmony_ci                    this.tabPos[a.dataset.key] = {
330048f512ceSopenharmony_ci                        index: index,
330148f512ceSopenharmony_ci                        width: a.offsetWidth,
330248f512ceSopenharmony_ci                        height: a.offsetHeight,
330348f512ceSopenharmony_ci                        left: a.offsetLeft,
330448f512ceSopenharmony_ci                        top: a.offsetTop,
330548f512ceSopenharmony_ci                        label: a.textContent
330648f512ceSopenharmony_ci                    }
330748f512ceSopenharmony_ci                })
330848f512ceSopenharmony_ci                if (this.activekey) {
330948f512ceSopenharmony_ci                    if (this.position.startsWith('left')) {
331048f512ceSopenharmony_ci                        this.line.style = `height:${this.tabPos[this.activekey].height}px;transform:translate(100%,${this.tabPos[this.activekey].top}px)`;
331148f512ceSopenharmony_ci                    } else if (this.position.startsWith('top')) {
331248f512ceSopenharmony_ci                        if (this.tabPos[this.activekey]) {
331348f512ceSopenharmony_ci                            this.line.style = `width:${this.tabPos[this.activekey].width}px;transform:translate(${this.tabPos[this.activekey].left}px,100%)`;
331448f512ceSopenharmony_ci                        }
331548f512ceSopenharmony_ci                    } else if (this.position.startsWith('right')) {
331648f512ceSopenharmony_ci                        this.line.style = `height:${this.tabPos[this.activekey].height}px;transform:translate(-100%,${this.tabPos[this.activekey].top}px)`;
331748f512ceSopenharmony_ci                    } else if (this.position.startsWith('bottom')) {
331848f512ceSopenharmony_ci                        this.line.style = `width:${this.tabPos[this.activekey].width}px;transform:translate(${this.tabPos[this.activekey].left}px,100%)`;
331948f512ceSopenharmony_ci                    }
332048f512ceSopenharmony_ci                }
332148f512ceSopenharmony_ci            }
332248f512ceSopenharmony_ci
332348f512ceSopenharmony_ci            //当 custom element首次被插入文档DOM时，被调用。
332448f512ceSopenharmony_ci            connectedCallback() {
332548f512ceSopenharmony_ci                let that = this;
332648f512ceSopenharmony_ci                this.tabPos = {}
332748f512ceSopenharmony_ci                this.nav = this.shadowRoot.querySelector('#nav')
332848f512ceSopenharmony_ci                this.line = this.shadowRoot.querySelector('#tab-line')
332948f512ceSopenharmony_ci                this.slots = this.shadowRoot.querySelector('#slot');
333048f512ceSopenharmony_ci                this.slots.addEventListener('slotchange', () => {
333148f512ceSopenharmony_ci                    const elements = this.slots.assignedElements();
333248f512ceSopenharmony_ci                    let panes = this.querySelectorAll('lit-tabpane');
333348f512ceSopenharmony_ci                    if (this.activekey) {
333448f512ceSopenharmony_ci                        panes.forEach(a => {
333548f512ceSopenharmony_ci                            if (a.key === this.activekey) {
333648f512ceSopenharmony_ci                                a.style.display = 'block'
333748f512ceSopenharmony_ci                            } else {
333848f512ceSopenharmony_ci                                a.style.display = 'none';
333948f512ceSopenharmony_ci                            }
334048f512ceSopenharmony_ci                        })
334148f512ceSopenharmony_ci                    } else {
334248f512ceSopenharmony_ci                        panes.forEach((a, index) => {
334348f512ceSopenharmony_ci                            if (index === 0) {
334448f512ceSopenharmony_ci                                a.style.display = 'block'
334548f512ceSopenharmony_ci                                this.activekey = a.key
334648f512ceSopenharmony_ci                            } else {
334748f512ceSopenharmony_ci                                a.style.display = 'none';
334848f512ceSopenharmony_ci                            }
334948f512ceSopenharmony_ci                        })
335048f512ceSopenharmony_ci                    }
335148f512ceSopenharmony_ci
335248f512ceSopenharmony_ci                    let navHtml = "";
335348f512ceSopenharmony_ci                    elements.forEach(a => {
335448f512ceSopenharmony_ci                        if (a.disabled) {
335548f512ceSopenharmony_ci                            navHtml += `<div class="nav-item" data-key="${a.key}" data-disabled ${a.closeable ? 'data-closeable' : ''} ${a.hide ? 'data-hide' : ''}>
335648f512ceSopenharmony_ci                    ${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``}
335748f512ceSopenharmony_ci                    <span>${a.tab}</span>
335848f512ceSopenharmony_ci                    <lit-icon class="close-icon" name='close' size="12"></lit-icon><div class="no-close-icon" style="margin-right: 12px"></div>
335948f512ceSopenharmony_ci                    </div>`;
336048f512ceSopenharmony_ci                        } else {
336148f512ceSopenharmony_ci                            if (a.key === this.activekey) {
336248f512ceSopenharmony_ci                                navHtml += `<div class="nav-item" data-key="${a.key}" data-selected ${a.closeable ? 'data-closeable' : ''} ${a.hide ? 'data-hide' : ''}>
336348f512ceSopenharmony_ci                        ${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``}
336448f512ceSopenharmony_ci                        <span>${a.tab}</span>
336548f512ceSopenharmony_ci                        <lit-icon class="close-icon" name='close' size="12"></lit-icon><div class="no-close-icon" style="margin-right: 12px"></div>
336648f512ceSopenharmony_ci                        </div>`;
336748f512ceSopenharmony_ci                            } else {
336848f512ceSopenharmony_ci                                navHtml += `<div class="nav-item" data-key="${a.key}" ${a.closeable ? 'data-closeable' : ''} ${a.hide ? 'data-hide' : ''}>
336948f512ceSopenharmony_ci                            ${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``}
337048f512ceSopenharmony_ci                            <span>${a.tab}</span>
337148f512ceSopenharmony_ci                            <lit-icon class="close-icon" name='close' size="12"></lit-icon><div class="no-close-icon" style="margin-right: 12px"></div>
337248f512ceSopenharmony_ci                            </div>`;
337348f512ceSopenharmony_ci                            }
337448f512ceSopenharmony_ci
337548f512ceSopenharmony_ci                        }
337648f512ceSopenharmony_ci                    })
337748f512ceSopenharmony_ci                    this.nav.innerHTML = navHtml;
337848f512ceSopenharmony_ci                    this.initTabPos()
337948f512ceSopenharmony_ci                    this.nav.querySelectorAll('.close-icon').forEach(a => {
338048f512ceSopenharmony_ci                        a.onclick = (e) => {
338148f512ceSopenharmony_ci                            e.stopPropagation();
338248f512ceSopenharmony_ci                            const closeKey = e.target.parentElement.dataset.key;
338348f512ceSopenharmony_ci                            console.log(closeKey);
338448f512ceSopenharmony_ci                            console.log(e.target.parentElement.parentElement);
338548f512ceSopenharmony_ci                            this.nav.removeChild(e.target.parentElement)
338648f512ceSopenharmony_ci                            let elements = this.slots.assignedElements();
338748f512ceSopenharmony_ci                            let closeElement = elements.filter(a => a.key === closeKey)[0];
338848f512ceSopenharmony_ci                            closeElement.parentElement.removeChild(closeElement)
338948f512ceSopenharmony_ci                            if (closeElement.style.display !== 'none') {
339048f512ceSopenharmony_ci                                elements = this.slots.assignedElements();
339148f512ceSopenharmony_ci                                let elArr = elements.filter(a => !a.hasAttribute('disabled'));
339248f512ceSopenharmony_ci                                if (elArr.length > 0) {
339348f512ceSopenharmony_ci                                    elArr[0].style.display = 'block';
339448f512ceSopenharmony_ci                                    this.activekey = elArr[0].key
339548f512ceSopenharmony_ci                                }
339648f512ceSopenharmony_ci                            }
339748f512ceSopenharmony_ci                        }
339848f512ceSopenharmony_ci                    });
339948f512ceSopenharmony_ci                })
340048f512ceSopenharmony_ci                this.nav.onclick = (e) => {
340148f512ceSopenharmony_ci                    if (e.target.closest('div').hasAttribute('data-disabled')) return;
340248f512ceSopenharmony_ci                    let key = e.target.closest('div').dataset.key;
340348f512ceSopenharmony_ci                    this.activeByKey(key)
340448f512ceSopenharmony_ci                    let label = e.target.closest('div').querySelector('span').textContent;
340548f512ceSopenharmony_ci                    this.dispatchEvent(new CustomEvent('onTabClick', { detail: { key: key, tab: label } }))
340648f512ceSopenharmony_ci                };
340748f512ceSopenharmony_ci            }
340848f512ceSopenharmony_ci            set onTabClick(fn) {
340948f512ceSopenharmony_ci                this.addEventListener('onTabClick', fn);
341048f512ceSopenharmony_ci            }
341148f512ceSopenharmony_ci            activeByKey(key) {
341248f512ceSopenharmony_ci                if (key === null || key === undefined) return; //如果没有key 不做相应
341348f512ceSopenharmony_ci                this.nav.querySelectorAll('.nav-item').forEach(a => {
341448f512ceSopenharmony_ci                    if (a.getAttribute('data-key') === key) {
341548f512ceSopenharmony_ci                        a.setAttribute('data-selected', 'true');
341648f512ceSopenharmony_ci                    } else {
341748f512ceSopenharmony_ci                        a.removeAttribute('data-selected');
341848f512ceSopenharmony_ci                    }
341948f512ceSopenharmony_ci                })
342048f512ceSopenharmony_ci                let tbp = this.querySelector(`lit-tabpane[key='${key}']`);
342148f512ceSopenharmony_ci                let panes = this.querySelectorAll('lit-tabpane');
342248f512ceSopenharmony_ci                panes.forEach(a => {
342348f512ceSopenharmony_ci                    if (a.key === key) {
342448f512ceSopenharmony_ci                        a.style.display = 'block';
342548f512ceSopenharmony_ci                        this.activekey = a.key;
342648f512ceSopenharmony_ci                        this.initTabPos()
342748f512ceSopenharmony_ci                    } else {
342848f512ceSopenharmony_ci                        a.style.display = 'none';
342948f512ceSopenharmony_ci                    }
343048f512ceSopenharmony_ci                })
343148f512ceSopenharmony_ci            }
343248f512ceSopenharmony_ci            /*激活选中 key 对应的 pane  成功返回true，没有找到key对应的pane 返回false*/
343348f512ceSopenharmony_ci            activePane(key) {
343448f512ceSopenharmony_ci                if (key === null || key === undefined) return false;
343548f512ceSopenharmony_ci                let tbp = this.querySelector(`lit-tabpane[key='${key}']`);
343648f512ceSopenharmony_ci                if (tbp) {
343748f512ceSopenharmony_ci                    this.activeByKey(key)
343848f512ceSopenharmony_ci                    return true;
343948f512ceSopenharmony_ci                } else {
344048f512ceSopenharmony_ci                    return false;
344148f512ceSopenharmony_ci                }
344248f512ceSopenharmony_ci            }
344348f512ceSopenharmony_ci            //当 custom element从文档DOM中删除时，被调用。
344448f512ceSopenharmony_ci            disconnectedCallback() {
344548f512ceSopenharmony_ci
344648f512ceSopenharmony_ci            }
344748f512ceSopenharmony_ci
344848f512ceSopenharmony_ci            //当 custom element被移动到新的文档时，被调用。
344948f512ceSopenharmony_ci            adoptedCallback() {
345048f512ceSopenharmony_ci                console.log('Custom square element moved to new page.');
345148f512ceSopenharmony_ci            }
345248f512ceSopenharmony_ci
345348f512ceSopenharmony_ci            //当 custom element增加、删除、修改自身属性时，被调用。
345448f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
345548f512ceSopenharmony_ci                if (name === 'activekey' && this.nav && oldValue !== newValue) {
345648f512ceSopenharmony_ci                    this.activeByKey(newValue)
345748f512ceSopenharmony_ci                }
345848f512ceSopenharmony_ci            }
345948f512ceSopenharmony_ci        }
346048f512ceSopenharmony_ci        if (!customElements.get('lit-tabs')) {
346148f512ceSopenharmony_ci            customElements.define('lit-tabs', LitTabs);
346248f512ceSopenharmony_ci        }
346348f512ceSopenharmony_ci
346448f512ceSopenharmony_ci        class AppDiffFlame extends HTMLElement {
346548f512ceSopenharmony_ci            draw;
346648f512ceSopenharmony_ci            drawC;
346748f512ceSopenharmony_ci            rowHeight = 17;
346848f512ceSopenharmony_ci
346948f512ceSopenharmony_ci            static get observedAttributes() {
347048f512ceSopenharmony_ci                return []
347148f512ceSopenharmony_ci            }
347248f512ceSopenharmony_ci
347348f512ceSopenharmony_ci            constructor() {
347448f512ceSopenharmony_ci                super();
347548f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
347648f512ceSopenharmony_ci                shadowRoot.innerHTML = `
347748f512ceSopenharmony_ci        <style>
347848f512ceSopenharmony_ci        :host{
347948f512ceSopenharmony_ci            font-size:inherit;
348048f512ceSopenharmony_ci            display:inline-flex;
348148f512ceSopenharmony_ci            align-items: center;
348248f512ceSopenharmony_ci            justify-content:center;
348348f512ceSopenharmony_ci            height: 100%;
348448f512ceSopenharmony_ci            width: 100%;
348548f512ceSopenharmony_ci            margin-bottom: 40px;
348648f512ceSopenharmony_ci        }
348748f512ceSopenharmony_ci        canvas { border: 1px solid #e9e9e9; }
348848f512ceSopenharmony_ci        #title{
348948f512ceSopenharmony_ci            font-weight: bold;
349048f512ceSopenharmony_ci            height: auto;
349148f512ceSopenharmony_ci        }
349248f512ceSopenharmony_ci        #title span{
349348f512ceSopenharmony_ci            color: gray;
349448f512ceSopenharmony_ci        }
349548f512ceSopenharmony_ci        #funcNameSpan{
349648f512ceSopenharmony_ci            display: inline-block;
349748f512ceSopenharmony_ci            border: 1px solid #e9e9e9;
349848f512ceSopenharmony_ci            box-sizing: border-box;
349948f512ceSopenharmony_ci            border-radius: 2px;
350048f512ceSopenharmony_ci            padding: 2px 8px;
350148f512ceSopenharmony_ci            background: #fff;
350248f512ceSopenharmony_ci             color: gray;
350348f512ceSopenharmony_ci            flex: 3;
350448f512ceSopenharmony_ci            margin-left: 10px;
350548f512ceSopenharmony_ci        }
350648f512ceSopenharmony_ci        #percentSpan{
350748f512ceSopenharmony_ci            display: inline-block;
350848f512ceSopenharmony_ci            border: 1px solid #e9e9e9;
350948f512ceSopenharmony_ci            margin-left: 10px;
351048f512ceSopenharmony_ci            box-sizing: border-box;
351148f512ceSopenharmony_ci            border-radius: 2px;
351248f512ceSopenharmony_ci            padding: 2px 8px;
351348f512ceSopenharmony_ci            background: #fff;
351448f512ceSopenharmony_ci            min-width: 160px;
351548f512ceSopenharmony_ci            max-width: 160px;
351648f512ceSopenharmony_ci            margin-left: 10px;
351748f512ceSopenharmony_ci            width: 100px;
351848f512ceSopenharmony_ci            height: 30px;
351948f512ceSopenharmony_ci            color: gray;
352048f512ceSopenharmony_ci        }
352148f512ceSopenharmony_ci        #diffSpan{
352248f512ceSopenharmony_ci            display: inline-block;
352348f512ceSopenharmony_ci            border: 1px solid #e9e9e9;
352448f512ceSopenharmony_ci            margin-left: 10px;
352548f512ceSopenharmony_ci            box-sizing: border-box;
352648f512ceSopenharmony_ci            border-radius: 2px;
352748f512ceSopenharmony_ci            padding: 2px 8px;
352848f512ceSopenharmony_ci            background: #fff;
352948f512ceSopenharmony_ci            min-width: 160px;
353048f512ceSopenharmony_ci            max-width: 160px;
353148f512ceSopenharmony_ci            margin-left: 10px;
353248f512ceSopenharmony_ci            width: 100px;
353348f512ceSopenharmony_ci            height: 30px;
353448f512ceSopenharmony_ci            color: gray;
353548f512ceSopenharmony_ci        }
353648f512ceSopenharmony_ci        #history{
353748f512ceSopenharmony_ci            display: none;
353848f512ceSopenharmony_ci            border: 1px solid #42b983;
353948f512ceSopenharmony_ci            box-sizing: border-box;
354048f512ceSopenharmony_ci            border-radius: 2px;
354148f512ceSopenharmony_ci            padding: 2px 8px;
354248f512ceSopenharmony_ci            background: #fff;
354348f512ceSopenharmony_ci            width: 100px;
354448f512ceSopenharmony_ci            margin-left: 10px;
354548f512ceSopenharmony_ci            height: 30px;
354648f512ceSopenharmony_ci            cursor: pointer;
354748f512ceSopenharmony_ci            user-select: none;
354848f512ceSopenharmony_ci        }
354948f512ceSopenharmony_ci        #history:hover{
355048f512ceSopenharmony_ci            background: #42b983;
355148f512ceSopenharmony_ci            color: #fff;
355248f512ceSopenharmony_ci        }
355348f512ceSopenharmony_ci        #searchInput{
355448f512ceSopenharmony_ci            height: 30px;
355548f512ceSopenharmony_ci            margin-left: 10px;
355648f512ceSopenharmony_ci            margin-right: 10px;
355748f512ceSopenharmony_ci            flex: 1;
355848f512ceSopenharmony_ci        }
355948f512ceSopenharmony_ci        </style>
356048f512ceSopenharmony_ci        <div style="position: relative;width: 100%">
356148f512ceSopenharmony_ci            <div id="title">Process <span id="pid"></span> <span id="processName"></span> Thread <span id="tid"></span> <span id="threadName"></span><span id="sample"></span></div>
356248f512ceSopenharmony_ci            <canvas id="panel" title=""></canvas>
356348f512ceSopenharmony_ci            <div id="controller" style="position: absolute;top: 32px;display: flex;width: 100%">
356448f512ceSopenharmony_ci                <span id="history">Zoom Out</span>
356548f512ceSopenharmony_ci                <span id="funcNameSpan"></span>
356648f512ceSopenharmony_ci                <span id="diffSpan"></span>
356748f512ceSopenharmony_ci                <span id="percentSpan"></span>
356848f512ceSopenharmony_ci                <lit-input id="searchInput" placeholder="search"  allow-clear>Search</lit-input>
356948f512ceSopenharmony_ci            </div>
357048f512ceSopenharmony_ci        </div>
357148f512ceSopenharmony_ci        <slot></slot>
357248f512ceSopenharmony_ci        `
357348f512ceSopenharmony_ci            }
357448f512ceSopenharmony_ci
357548f512ceSopenharmony_ci            connectedCallback() {
357648f512ceSopenharmony_ci                this.history = [];
357748f512ceSopenharmony_ci                this.historyRefer = [];
357848f512ceSopenharmony_ci                this.panel = this.shadowRoot.getElementById('panel');
357948f512ceSopenharmony_ci                this.controller = this.shadowRoot.getElementById('controller');
358048f512ceSopenharmony_ci                this.funcNameSpan = this.shadowRoot.getElementById('funcNameSpan');
358148f512ceSopenharmony_ci                this.percentSpan = this.shadowRoot.getElementById('percentSpan');
358248f512ceSopenharmony_ci                this.diffSpan = this.shadowRoot.getElementById('diffSpan');
358348f512ceSopenharmony_ci                this.historySpan = this.shadowRoot.getElementById('history');
358448f512ceSopenharmony_ci                this.searchInput = this.shadowRoot.getElementById('searchInput');
358548f512ceSopenharmony_ci                this.pid = this.shadowRoot.getElementById('pid');
358648f512ceSopenharmony_ci                this.tid = this.shadowRoot.getElementById('tid');
358748f512ceSopenharmony_ci                this.processName = this.shadowRoot.getElementById('processName');
358848f512ceSopenharmony_ci                this.threadName = this.shadowRoot.getElementById('threadName');
358948f512ceSopenharmony_ci                this.sample = this.shadowRoot.getElementById('sample');
359048f512ceSopenharmony_ci                this.titleDiv = this.shadowRoot.getElementById('title');
359148f512ceSopenharmony_ci                this.context = this.panel.getContext('2d');
359248f512ceSopenharmony_ci                this.panel.width = this.shadowRoot.host.clientWidth;
359348f512ceSopenharmony_ci                this.panel.height = this.shadowRoot.host.clientHeight;
359448f512ceSopenharmony_ci                this.historySpan.onclick = e => {
359548f512ceSopenharmony_ci                    if (this.history.length > 2) {
359648f512ceSopenharmony_ci                        this.history.pop();
359748f512ceSopenharmony_ci                        this.historyRefer.pop();
359848f512ceSopenharmony_ci                        this.zoomOutRefer(this.historyRefer[this.historyRefer.length - 1])
359948f512ceSopenharmony_ci                        this.zoomOut(this.history[this.history.length - 1])
360048f512ceSopenharmony_ci                    } else if (this.history.length == 2) {
360148f512ceSopenharmony_ci                        this.history.pop();
360248f512ceSopenharmony_ci                        this.historyRefer.pop();
360348f512ceSopenharmony_ci                        this.zoomOutRefer(this.historyRefer[this.historyRefer.length - 1])
360448f512ceSopenharmony_ci                        this.zoomOut(this.history[this.history.length - 1])
360548f512ceSopenharmony_ci                        this.historySpan.style.display = 'none';
360648f512ceSopenharmony_ci                    } else {
360748f512ceSopenharmony_ci                        this.historySpan.style.display = 'none';
360848f512ceSopenharmony_ci                    }
360948f512ceSopenharmony_ci                }
361048f512ceSopenharmony_ci                this.searchInput.addEventListener("onPressEnter", (e) => {
361148f512ceSopenharmony_ci                    this.keyword = e.currentTarget.value;
361248f512ceSopenharmony_ci                    requestAnimationFrame(this.draw);
361348f512ceSopenharmony_ci                })
361448f512ceSopenharmony_ci                this.searchInput.addEventListener('onClear', e => {
361548f512ceSopenharmony_ci                    this.keyword = null;
361648f512ceSopenharmony_ci                    requestAnimationFrame(this.draw);
361748f512ceSopenharmony_ci                })
361848f512ceSopenharmony_ci                this.panel.onmouseover = (e) => {
361948f512ceSopenharmony_ci                    this.mouseState = 'mouseOver';
362048f512ceSopenharmony_ci                }
362148f512ceSopenharmony_ci                this.panel.onmouseleave = e => {
362248f512ceSopenharmony_ci                    this.mouseState = 'mouseLeave';
362348f512ceSopenharmony_ci                    this.mouseX = 0;
362448f512ceSopenharmony_ci                    this.mouseY = 0;
362548f512ceSopenharmony_ci                    requestAnimationFrame(this.draw)
362648f512ceSopenharmony_ci                }
362748f512ceSopenharmony_ci                this.panel.onmousemove = e => {
362848f512ceSopenharmony_ci                    const pos = e.currentTarget.getBoundingClientRect();
362948f512ceSopenharmony_ci                    this.mouseX = e.clientX - pos.left;
363048f512ceSopenharmony_ci                    this.mouseY = e.clientY - pos.top;
363148f512ceSopenharmony_ci                    this.mouseState = 'mouseMove';
363248f512ceSopenharmony_ci                    requestAnimationFrame(this.draw)
363348f512ceSopenharmony_ci                }
363448f512ceSopenharmony_ci                this.panel.onmousedown = e => {
363548f512ceSopenharmony_ci                    this.mouseState = 'mouseDown';
363648f512ceSopenharmony_ci                    // const pos = e.currentTarget.getBoundingClientRect();
363748f512ceSopenharmony_ci                    // this.mouseX = e.clientX - pos.left;
363848f512ceSopenharmony_ci                    // this.mouseY = e.clientY - pos.top;
363948f512ceSopenharmony_ci                    // requestAnimationFrame(this.draw)
364048f512ceSopenharmony_ci                }
364148f512ceSopenharmony_ci                this.panel.onmouseup = e => {
364248f512ceSopenharmony_ci                    this.mouseState = 'mouseUp';
364348f512ceSopenharmony_ci                    const pos = e.currentTarget.getBoundingClientRect();
364448f512ceSopenharmony_ci                    this.mouseX = e.clientX - pos.left;
364548f512ceSopenharmony_ci                    this.mouseY = e.clientY - pos.top;
364648f512ceSopenharmony_ci                    requestAnimationFrame(this.draw)
364748f512ceSopenharmony_ci                }
364848f512ceSopenharmony_ci                // this.panel.onclick = (e)=>{
364948f512ceSopenharmony_ci                //     this.mouseState = 'mouseClick';
365048f512ceSopenharmony_ci                // }
365148f512ceSopenharmony_ci            }
365248f512ceSopenharmony_ci
365348f512ceSopenharmony_ci            set data(value) {
365448f512ceSopenharmony_ci                this._data = value;
365548f512ceSopenharmony_ci                this._dataRefer = value.jsonRefer;
365648f512ceSopenharmony_ci                /**
365748f512ceSopenharmony_ci                 * type 值默认为1
365848f512ceSopenharmony_ci                 * 1 Show percentage of event count relative to the current thread
365948f512ceSopenharmony_ci                 * 2 Show percentage of event count relative to the current process
366048f512ceSopenharmony_ci                 * 3 Show percentage of event count relative to all process
366148f512ceSopenharmony_ci                 * 4 show event count
366248f512ceSopenharmony_ci                 * 5 show event count in milliseconds
366348f512ceSopenharmony_ci                 * 其他值
366448f512ceSopenharmony_ci                 * pid, processName, tid, threadName, eventCount, sampleCount, CallOrder(g节点)
366548f512ceSopenharmony_ci                 */
366648f512ceSopenharmony_ci                this.type = value.type;
366748f512ceSopenharmony_ci                // reverse 表示火焰图需要是否需要倒序绘制，value中没有传reverse，默认表示false 既正序绘制
366848f512ceSopenharmony_ci                this.reverse = value.reverse || false;
366948f512ceSopenharmony_ci                // CallOrder.symbol 如果为-1 表示为根节点
367048f512ceSopenharmony_ci                if (value.CallOrder.symbol === -1) {
367148f512ceSopenharmony_ci                    this._c = value.CallOrder.callStack;
367248f512ceSopenharmony_ci                    this._cRef = this.threadRefer.CallOrder.callStack;
367348f512ceSopenharmony_ci                } else {
367448f512ceSopenharmony_ci                    this._c = [value.CallOrder];
367548f512ceSopenharmony_ci                    this._cRef = [this.threadRefer.CallOrder];
367648f512ceSopenharmony_ci                }
367748f512ceSopenharmony_ci                // console.log(this.data.json, this.dataRefer)
367848f512ceSopenharmony_ci                // console.log(this.c, this.cRef)
367948f512ceSopenharmony_ci                this.history.push(this._c)
368048f512ceSopenharmony_ci                this.historyRefer.push(this.cRef)
368148f512ceSopenharmony_ci                // 获取选项的 eventCount值 例如：hw-cpu-cycles 和 processes 同层级节点  表示所有进程的eventCount值求和
368248f512ceSopenharmony_ci                this.eventCountAllProcess = this._data.json.recordSampleInfo[window.eventIndex].eventCount
368348f512ceSopenharmony_ci                console.log("diff eventCountAllProcess = " + this.eventCountAllProcess)
368448f512ceSopenharmony_ci                if (value.pid) {
368548f512ceSopenharmony_ci                    // 当前进程的 eventCount值，没有直接送json中去取是因为，第一次传的json 和 windows.data 一样，后续点击了 自节点传入的是子集，可能取的不准确
368648f512ceSopenharmony_ci                    this.eventCountCurrentProcess = this._data.json.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === value.pid)[0].eventCount
368748f512ceSopenharmony_ci                    console.log("diff eventCountCurrentProcess = " + this.eventCountCurrentProcess)
368848f512ceSopenharmony_ci                    // 将进程号显示在界面上
368948f512ceSopenharmony_ci                    this.pid.textContent = value.pid;
369048f512ceSopenharmony_ci                } else {
369148f512ceSopenharmony_ci                    // this.titleDiv.style.display = 'none';
369248f512ceSopenharmony_ci                }
369348f512ceSopenharmony_ci                if (value.tid) {
369448f512ceSopenharmony_ci                    // 取当前线程的 eventCount 值
369548f512ceSopenharmony_ci                    this.eventCountCurrentThread = this._data.json.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === value.pid)[0].threads.filter(it => it.tid === value.tid)[0].eventCount;
369648f512ceSopenharmony_ci                    this.eventCountCurrentThreadRefer = this._data.jsonRefer.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === value.pid)[0].threads.filter(it => it.tid === value.tid)[0].eventCount;
369748f512ceSopenharmony_ci                    console.log("diff eventCountCurrentThread = " + this.eventCountCurrentThread)
369848f512ceSopenharmony_ci                    // 显示线程号
369948f512ceSopenharmony_ci                    this.tid.textContent = value.tid;
370048f512ceSopenharmony_ci                }
370148f512ceSopenharmony_ci                if (value.sampleCount) {
370248f512ceSopenharmony_ci                    //显示sampleCount值 ，这个值在 thread节点里，只有线程有
370348f512ceSopenharmony_ci                    this.sample.textContent = ' (Samples: ' + value.sampleCount + ")";
370448f512ceSopenharmony_ci                }
370548f512ceSopenharmony_ci                if (value.processName) {
370648f512ceSopenharmony_ci                    //显示进程名 null显示空字符串
370748f512ceSopenharmony_ci                    this.processName.textContent = value.processName ? `(${value.processName})` : '';
370848f512ceSopenharmony_ci                }
370948f512ceSopenharmony_ci                if (value.threadName) {
371048f512ceSopenharmony_ci                    //显示线程名 null显示空字符串
371148f512ceSopenharmony_ci                    this.threadName.textContent = value.threadName ? `(${value.threadName})` : '';
371248f512ceSopenharmony_ci                }
371348f512ceSopenharmony_ci                if (value.funcName) {
371448f512ceSopenharmony_ci                    //如果是单独绘制Funtion Tab界面下的火焰图，只有 函数名称， 上面的 的进程线程信息不显示
371548f512ceSopenharmony_ci                    this.titleDiv.innerHTML = `${value.funcName}`
371648f512ceSopenharmony_ci                    this.controller.style.top = `${this.titleDiv.clientHeight + 10}px`
371748f512ceSopenharmony_ci                }
371848f512ceSopenharmony_ci                //获取最大层级，用于做火焰图高度计算，点击子节点后 maxDepth 也对应变化
371948f512ceSopenharmony_ci                this.maxDepth = this.getMaxDepth(this.data.CallOrder.callStack) + 5; //设置最大层级
372048f512ceSopenharmony_ci                this.maxDepthRefer = this.getMaxDepth(this.threadRefer.CallOrder.callStack) + 5; //设置最大层级
372148f512ceSopenharmony_ci                console.log("diff maxDepth = " + this.maxDepth + " maxDepthRefer = " + this.maxDepthRefer)
372248f512ceSopenharmony_ci                this.sumCount = this.data.CallOrder.subEvents; //设置根节点的 sumCount
372348f512ceSopenharmony_ci                this.sumCountRefer = this.threadRefer.CallOrder.subEvents; //设置根节点的 sumCountRefer 用来做对比
372448f512ceSopenharmony_ci                console.log("diff sumCount = " + this.sumCount + " sumCountRefer = " + this.sumCountRefer)
372548f512ceSopenharmony_ci                // console.log(this.threadRefer)//对比的线程数据
372648f512ceSopenharmony_ci                //计算canvas的宽度和高度
372748f512ceSopenharmony_ci                this.panel.height = this.maxDepth * this.rowHeight
372848f512ceSopenharmony_ci                this.panel.width = this.shadowRoot.host.clientWidth
372948f512ceSopenharmony_ci                //设置canvas 的大小
373048f512ceSopenharmony_ci                this.makeHighRes(this.panel);
373148f512ceSopenharmony_ci                //开始调用draw方法绘制一帧
373248f512ceSopenharmony_ci                requestAnimationFrame(this.draw);
373348f512ceSopenharmony_ci            }
373448f512ceSopenharmony_ci
373548f512ceSopenharmony_ci            get data() {
373648f512ceSopenharmony_ci                return this._data;
373748f512ceSopenharmony_ci            }
373848f512ceSopenharmony_ci
373948f512ceSopenharmony_ci            //需要对比的原始数据
374048f512ceSopenharmony_ci            get dataRefer() {
374148f512ceSopenharmony_ci                return this._dataRefer;
374248f512ceSopenharmony_ci            }
374348f512ceSopenharmony_ci
374448f512ceSopenharmony_ci            set dataRefer(val) {
374548f512ceSopenharmony_ci                this._dataRefer = val;
374648f512ceSopenharmony_ci            }
374748f512ceSopenharmony_ci
374848f512ceSopenharmony_ci            /*
374948f512ceSopenharmony_ci              获取要对比的 thread数据
375048f512ceSopenharmony_ci             */
375148f512ceSopenharmony_ci            get threadRefer() {
375248f512ceSopenharmony_ci                return this._threadRefer;
375348f512ceSopenharmony_ci            }
375448f512ceSopenharmony_ci
375548f512ceSopenharmony_ci            /**
375648f512ceSopenharmony_ci             * 设置要对比的数据 这里传入的是 thread 节点；包含 {tid，eventCount,sampleCount,libs:[],CallOrder:[],CalledOrder:[]}
375748f512ceSopenharmony_ci             * @param val
375848f512ceSopenharmony_ci             */
375948f512ceSopenharmony_ci            set threadRefer(val) {
376048f512ceSopenharmony_ci                this._threadRefer = val;
376148f512ceSopenharmony_ci            }
376248f512ceSopenharmony_ci
376348f512ceSopenharmony_ci            /**
376448f512ceSopenharmony_ci             * 点击图形中子节点时 传入 当前节点当作根节点绘制
376548f512ceSopenharmony_ci             * @param value
376648f512ceSopenharmony_ci             */
376748f512ceSopenharmony_ci            set c(value) {
376848f512ceSopenharmony_ci                //显示回退button
376948f512ceSopenharmony_ci                this.historySpan.style.display = 'block';
377048f512ceSopenharmony_ci                //设置相对根节点
377148f512ceSopenharmony_ci                this._c = value;
377248f512ceSopenharmony_ci                //添加历史记录，用于回退到上一图形状态
377348f512ceSopenharmony_ci                this.history.push(this._c)
377448f512ceSopenharmony_ci                // 下面代码实现 canvas 随内容高度变化
377548f512ceSopenharmony_ci                // this.maxDepth = this._getMaxDepth(value) + 5; //设置最大层级
377648f512ceSopenharmony_ci                // this.panel.height = this.maxDepth * this.rowHeight
377748f512ceSopenharmony_ci                // this.panel.width = this.shadowRoot.host.clientWidth;
377848f512ceSopenharmony_ci                // this.makeHighRes(this.panel);
377948f512ceSopenharmony_ci                //开始绘制
378048f512ceSopenharmony_ci                requestAnimationFrame(this.draw);
378148f512ceSopenharmony_ci            }
378248f512ceSopenharmony_ci
378348f512ceSopenharmony_ci            get c() {
378448f512ceSopenharmony_ci                return this._c;
378548f512ceSopenharmony_ci            }
378648f512ceSopenharmony_ci
378748f512ceSopenharmony_ci            get cRef() {
378848f512ceSopenharmony_ci                return this._cRef
378948f512ceSopenharmony_ci            }
379048f512ceSopenharmony_ci
379148f512ceSopenharmony_ci            set cRef(val) {
379248f512ceSopenharmony_ci                this._cRef = val;
379348f512ceSopenharmony_ci                this.historyRefer.push(this._cRef)
379448f512ceSopenharmony_ci            }
379548f512ceSopenharmony_ci
379648f512ceSopenharmony_ci            zoomOutRefer(value) {
379748f512ceSopenharmony_ci                this._cRef = value;
379848f512ceSopenharmony_ci            }
379948f512ceSopenharmony_ci            zoomOut(value) {
380048f512ceSopenharmony_ci                this._c = value;
380148f512ceSopenharmony_ci                // 下面代码实现 canvas 随内容高度变化
380248f512ceSopenharmony_ci                // this.maxDepth = this._getMaxDepth(value) + 5; //设置最大层级
380348f512ceSopenharmony_ci                // // this.sumCount = value.reduce((acc, cur) => acc + cur.s, 0); //设置根节点的 sumCount
380448f512ceSopenharmony_ci                // this.panel.height = this.maxDepth * this.rowHeight
380548f512ceSopenharmony_ci                // this.panel.width = this.shadowRoot.host.clientWidth;
380648f512ceSopenharmony_ci                // this.makeHighRes(this.panel);
380748f512ceSopenharmony_ci                requestAnimationFrame(this.draw);
380848f512ceSopenharmony_ci            }
380948f512ceSopenharmony_ci
381048f512ceSopenharmony_ci            makeHighRes(canvas) {
381148f512ceSopenharmony_ci                let ctx = canvas.getContext('2d');
381248f512ceSopenharmony_ci                let dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
381348f512ceSopenharmony_ci                let oldWidth = canvas.width;
381448f512ceSopenharmony_ci                let oldHeight = canvas.height;
381548f512ceSopenharmony_ci                canvas.width = Math.round(oldWidth * dpr);
381648f512ceSopenharmony_ci                canvas.height = Math.round(oldHeight * dpr);
381748f512ceSopenharmony_ci                canvas.style.width = oldWidth + 'px';
381848f512ceSopenharmony_ci                canvas.style.height = oldHeight + 'px';
381948f512ceSopenharmony_ci                ctx.scale(dpr, dpr);
382048f512ceSopenharmony_ci                this.context = ctx;
382148f512ceSopenharmony_ci                return ctx;
382248f512ceSopenharmony_ci            }
382348f512ceSopenharmony_ci
382448f512ceSopenharmony_ci            //绘制火焰图
382548f512ceSopenharmony_ci            draw = () => {
382648f512ceSopenharmony_ci                // requestAnimationFrame(this.draw);
382748f512ceSopenharmony_ci                let ctx = this.context;
382848f512ceSopenharmony_ci                // ctx.clearRect(0, 0, this.panel.width, this.panel.height);
382948f512ceSopenharmony_ci                //绘制背景渐变色
383048f512ceSopenharmony_ci                let grad = ctx.createLinearGradient(0, 0, 0, this.panel.height / 2); //创建一个渐变色线性对象
383148f512ceSopenharmony_ci                grad.addColorStop(0, "#eeeeee");                  //定义渐变色颜色
383248f512ceSopenharmony_ci                grad.addColorStop(1, "#efefb1");
383348f512ceSopenharmony_ci                ctx.fillStyle = grad;                         //设置fillStyle为当前的渐变对象
383448f512ceSopenharmony_ci                ctx.fillRect(0, 0, this.panel.width, this.panel.height);
383548f512ceSopenharmony_ci                // console.log(this.c,this.cRef);
383648f512ceSopenharmony_ci                if (this.data) {
383748f512ceSopenharmony_ci                    //如果需要倒序绘制调用drawCReverse方法绘制
383848f512ceSopenharmony_ci                    if (this.reverse) {
383948f512ceSopenharmony_ci                        this.drawCReverse(
384048f512ceSopenharmony_ci                            this.c,
384148f512ceSopenharmony_ci                            1,
384248f512ceSopenharmony_ci                            {
384348f512ceSopenharmony_ci                                x: 0,
384448f512ceSopenharmony_ci                                y: this.rowHeight * 4,
384548f512ceSopenharmony_ci                                w: this.panel.clientWidth,
384648f512ceSopenharmony_ci                                h: this.rowHeight
384748f512ceSopenharmony_ci                            });
384848f512ceSopenharmony_ci                    } else {
384948f512ceSopenharmony_ci                        //绘制正序图，需要3个参数  节点数据,当前绘制的层级,当前这行的Rect数据
385048f512ceSopenharmony_ci                        this.drawC(
385148f512ceSopenharmony_ci                            this.c,//根节点
385248f512ceSopenharmony_ci                            this.cRef,
385348f512ceSopenharmony_ci                            1,
385448f512ceSopenharmony_ci                            {
385548f512ceSopenharmony_ci                                x: 0,
385648f512ceSopenharmony_ci                                y: this.panel.clientHeight - this.rowHeight,
385748f512ceSopenharmony_ci                                w: this.panel.clientWidth,
385848f512ceSopenharmony_ci                                h: this.rowHeight
385948f512ceSopenharmony_ci                            });
386048f512ceSopenharmony_ci                    }
386148f512ceSopenharmony_ci                }
386248f512ceSopenharmony_ci            }
386348f512ceSopenharmony_ci
386448f512ceSopenharmony_ci            //根据type类型计算 统计数据
386548f512ceSopenharmony_ci            getStatistics(c) {
386648f512ceSopenharmony_ci                let statistics;//鼠标hover展示的百分比
386748f512ceSopenharmony_ci                switch (this.type) {
386848f512ceSopenharmony_ci                    case 1: //current thread
386948f512ceSopenharmony_ci                        statistics = c.subEvents * 100 / this.eventCountCurrentThread;
387048f512ceSopenharmony_ci                        statistics = statistics.toFixed(2)
387148f512ceSopenharmony_ci                        statistics = `${statistics}%`
387248f512ceSopenharmony_ci                        break;
387348f512ceSopenharmony_ci                    case 2: // current process
387448f512ceSopenharmony_ci                        statistics = c.subEvents * 100 / this.eventCountCurrentProcess;
387548f512ceSopenharmony_ci                        statistics = statistics.toFixed(2)
387648f512ceSopenharmony_ci                        statistics = `${statistics}%`
387748f512ceSopenharmony_ci                        break;
387848f512ceSopenharmony_ci                    case 3: // all process
387948f512ceSopenharmony_ci                        statistics = c.subEvents * 100 / this.eventCountAllProcess;
388048f512ceSopenharmony_ci                        statistics = statistics.toFixed(2)
388148f512ceSopenharmony_ci                        statistics = `${statistics}%`
388248f512ceSopenharmony_ci                        break;
388348f512ceSopenharmony_ci                    case 4: //event count
388448f512ceSopenharmony_ci                        statistics = c.subEvents;
388548f512ceSopenharmony_ci                        statistics = `${statistics}`
388648f512ceSopenharmony_ci                        break;
388748f512ceSopenharmony_ci                    case 5: //event count in milliseconds
388848f512ceSopenharmony_ci                        statistics = c.subEvents / 1000000;
388948f512ceSopenharmony_ci                        statistics = statistics.toFixed(3)
389048f512ceSopenharmony_ci                        statistics = `${statistics} ms`
389148f512ceSopenharmony_ci                        break;
389248f512ceSopenharmony_ci                    default: //current thread
389348f512ceSopenharmony_ci                        statistics = c.subEvents * 100 / this.eventCountCurrentThread;
389448f512ceSopenharmony_ci                        statistics = statistics.toFixed(2)
389548f512ceSopenharmony_ci                        statistics = `${statistics}%`
389648f512ceSopenharmony_ci                        break;
389748f512ceSopenharmony_ci                }
389848f512ceSopenharmony_ci                return statistics;
389948f512ceSopenharmony_ci            }
390048f512ceSopenharmony_ci
390148f512ceSopenharmony_ci            //HTML反转义
390248f512ceSopenharmony_ci            htmlDecode(text) {
390348f512ceSopenharmony_ci                let temp = document.createElement("div");
390448f512ceSopenharmony_ci                temp.innerHTML = text;
390548f512ceSopenharmony_ci                let output = temp.innerText || temp.textContent;
390648f512ceSopenharmony_ci                temp = null;
390748f512ceSopenharmony_ci                return output;
390848f512ceSopenharmony_ci            }
390948f512ceSopenharmony_ci
391048f512ceSopenharmony_ci            //获取方法名
391148f512ceSopenharmony_ci            getFunctionName(f) {
391248f512ceSopenharmony_ci                let funName = "";
391348f512ceSopenharmony_ci                if (this._data.json.SymbolMap[f]) {
391448f512ceSopenharmony_ci                    funName = this._data.json.SymbolMap[f].symbol;
391548f512ceSopenharmony_ci                } else {
391648f512ceSopenharmony_ci                    let f = c[i].symbol;
391748f512ceSopenharmony_ci                    console.log(`processId:${this.pid.textContent} processName:${this.processName.textContent} threadId:${this.tid.textContent} threadName:${this.threadName.textContent}`, c[i], "SymbolMap中没有对应的值")
391848f512ceSopenharmony_ci                }
391948f512ceSopenharmony_ci                return this.htmlDecode(funName);
392048f512ceSopenharmony_ci            }
392148f512ceSopenharmony_ci
392248f512ceSopenharmony_ci            //根据比对对象的funId 在比对数组中找到对应的函数名
392348f512ceSopenharmony_ci            getFunctionNameRefer(f) {
392448f512ceSopenharmony_ci                let funName = "";
392548f512ceSopenharmony_ci                if (this.dataRefer.SymbolMap[f]) {
392648f512ceSopenharmony_ci                    funName = this.dataRefer.SymbolMap[f].symbol;
392748f512ceSopenharmony_ci                } else {
392848f512ceSopenharmony_ci                    // let f = c[i].symbol;
392948f512ceSopenharmony_ci                    // console.log(`processId:${this.pid.textContent} processName:${this.processName.textContent} threadId:${this.tid.textContent} threadName:${this.threadName.textContent}`, c[i], "SymbolMap中没有对应的值")
393048f512ceSopenharmony_ci                }
393148f512ceSopenharmony_ci                return this.htmlDecode(funName);
393248f512ceSopenharmony_ci            }
393348f512ceSopenharmony_ci
393448f512ceSopenharmony_ci            //根据百分比获取显示的背景色，如果 搜索框中的关键字与当前funcName 匹配则单独显示色值
393548f512ceSopenharmony_ci            getColor(percent2, funName) {
393648f512ceSopenharmony_ci                let heatColor;
393748f512ceSopenharmony_ci                if (this.keyword && this.keyword.length > 0 && funName.indexOf(this.keyword) != -1) {
393848f512ceSopenharmony_ci                    heatColor = { r: 0x66, g: 0xad, b: 0xff };
393948f512ceSopenharmony_ci                } else {
394048f512ceSopenharmony_ci                    heatColor = this.getHeatColor(percent2);
394148f512ceSopenharmony_ci                }
394248f512ceSopenharmony_ci                return heatColor;
394348f512ceSopenharmony_ci            }
394448f512ceSopenharmony_ci
394548f512ceSopenharmony_ci            //倒序绘制
394648f512ceSopenharmony_ci            drawCReverse = (c, dept, rect) => {
394748f512ceSopenharmony_ci                let ctx = this.context;
394848f512ceSopenharmony_ci                let offset = 0
394948f512ceSopenharmony_ci                for (let i = 0; i < c.length; i++) {
395048f512ceSopenharmony_ci                    let funName = this.getFunctionName(c[i].symbol);
395148f512ceSopenharmony_ci                    let funcId = c[i].symbol;
395248f512ceSopenharmony_ci                    let percent = c[i].subEvents * 100 / (c.reduce((acc, cur) => acc + cur.subEvents, 0));
395348f512ceSopenharmony_ci                    let percent2 = c[i].subEvents * 100 / this.sumCount;
395448f512ceSopenharmony_ci                    if (percent2 < 0.1) continue //过滤掉 百分比为0.1一下的节点
395548f512ceSopenharmony_ci                    let heatColor = this.getColor(percent2, funName);
395648f512ceSopenharmony_ci                    let w = rect.w * (percent / 100.0);
395748f512ceSopenharmony_ci                    if (w < 1) {
395848f512ceSopenharmony_ci                        w = 1
395948f512ceSopenharmony_ci                    }
396048f512ceSopenharmony_ci                    let _x = rect.x + offset;
396148f512ceSopenharmony_ci                    //绘制填充矩形
396248f512ceSopenharmony_ci                    ctx.fillStyle = `rgba(${heatColor.r}, ${heatColor.g}, ${heatColor.b}, 1)`;
396348f512ceSopenharmony_ci                    ctx.fillRect(_x, rect.y + 2, w, rect.h - 2);
396448f512ceSopenharmony_ci                    // 绘制文本
396548f512ceSopenharmony_ci                    ctx.fillStyle = "rgba(0,0,0,1)";
396648f512ceSopenharmony_ci                    let txtWidth = ctx.measureText(funName).width;//文本长度
396748f512ceSopenharmony_ci                    let chartWidth = txtWidth / funName.length;//每个字符长度
396848f512ceSopenharmony_ci                    let number = (w - 6) / chartWidth;//可以显示多少字符
396948f512ceSopenharmony_ci                    if (number >= 4 && number < funName.length - 3) {
397048f512ceSopenharmony_ci                        ctx.fillText(funName.slice(0, number - 3) + '...', _x + 3, rect.y + 13, w - 6)
397148f512ceSopenharmony_ci                    } else if (number >= 4) {
397248f512ceSopenharmony_ci                        ctx.fillText(funName, _x + 3, rect.y + 13, w - 6)
397348f512ceSopenharmony_ci                    }
397448f512ceSopenharmony_ci                    let _rect = {
397548f512ceSopenharmony_ci                        x: _x, y: rect.y, w: w, h: rect.h
397648f512ceSopenharmony_ci                    }
397748f512ceSopenharmony_ci                    c[i].rect = _rect;
397848f512ceSopenharmony_ci
397948f512ceSopenharmony_ci                    if (this.mouseX > _x && this.mouseX < _x + w && this.mouseY > rect.h * 3 + (dept) * rect.h && this.mouseY < rect.h * 3 + (dept + 1) * rect.h) {
398048f512ceSopenharmony_ci                        if (this.mouseState === 'mouseMove') {
398148f512ceSopenharmony_ci                            //绘制边框矩形
398248f512ceSopenharmony_ci                            // ctx.font = '12px serif';
398348f512ceSopenharmony_ci                            ctx.lineWidth = 2;
398448f512ceSopenharmony_ci                            ctx.strokeStyle = `#000000`;
398548f512ceSopenharmony_ci                            ctx.strokeRect(_x, rect.y + 1, w - 1, rect.h);
398648f512ceSopenharmony_ci                            this.funcNameSpan.textContent = funName
398748f512ceSopenharmony_ci                            this.panel.title = funName
398848f512ceSopenharmony_ci                            this.percentSpan.textContent = this.getStatistics(c[i]);
398948f512ceSopenharmony_ci                        } else {
399048f512ceSopenharmony_ci                            if (this.mouseState === 'mouseUp') {
399148f512ceSopenharmony_ci                                this.mouseState = null;
399248f512ceSopenharmony_ci                                if (!this.compareNodes(this.c, [c[i]])) {
399348f512ceSopenharmony_ci                                    this.c = [c[i]];
399448f512ceSopenharmony_ci                                }
399548f512ceSopenharmony_ci                            }
399648f512ceSopenharmony_ci                        }
399748f512ceSopenharmony_ci                    } else {
399848f512ceSopenharmony_ci                        ctx.lineWidth = 1;
399948f512ceSopenharmony_ci                        // ctx.font = '11px serif';
400048f512ceSopenharmony_ci                    }
400148f512ceSopenharmony_ci                    offset += w;
400248f512ceSopenharmony_ci                    // console.log(_rect,dept,percent,funName);
400348f512ceSopenharmony_ci                    //递归绘制子节点
400448f512ceSopenharmony_ci                    if (c[i].callStack && c[i].callStack.length > 0) {
400548f512ceSopenharmony_ci                        _rect.y = _rect.y + _rect.h
400648f512ceSopenharmony_ci                        this.drawCReverse(c[i].callStack, dept + 1, _rect);
400748f512ceSopenharmony_ci                    }
400848f512ceSopenharmony_ci                }
400948f512ceSopenharmony_ci            }
401048f512ceSopenharmony_ci
401148f512ceSopenharmony_ci            //正序绘制
401248f512ceSopenharmony_ci            drawC = (c, cRef, dept, rect) => {
401348f512ceSopenharmony_ci                let ctx = this.context;
401448f512ceSopenharmony_ci                let offset = 0//用来保存x坐标的偏移量，保证在rect的矩形范围内从左往右绘制 c集合中的节点
401548f512ceSopenharmony_ci                for (let i = 0; i < c.length; i++) {
401648f512ceSopenharmony_ci                    let funName = this.getFunctionName(c[i].symbol);
401748f512ceSopenharmony_ci                    // console.log(dept,this.data.SymbolMap[c[i].symbol].symbol);
401848f512ceSopenharmony_ci                    let funcId = c[i].symbol;//获取funcId
401948f512ceSopenharmony_ci                    //计算这个节点的subEvents值 在当前传入集合的subEvents总和中占的百分比，因为rect默认是最大宽宽的，递归后最越来越小，根据这个百分比和 rect矩形的宽度计算节点绘制的宽度
402048f512ceSopenharmony_ci                    let percent = c[i].subEvents * 100 / (c.reduce((acc, cur) => acc + cur.subEvents, 0));//sumCount;
402148f512ceSopenharmony_ci                    //计算这个节点的subEvents 在总的sumCount（对应的是最大宽度）中占比，这个百分比用来计算颜色，占比越少颜色越浅
402248f512ceSopenharmony_ci                    let percent2 = c[i].subEvents * 100 / this.sumCount;
402348f512ceSopenharmony_ci                    if (percent2 < 0.1) continue //过滤掉 百分比为0.1一下的节点
402448f512ceSopenharmony_ci                    let heatColor = this.getColor(percent2, funName);
402548f512ceSopenharmony_ci                    let w = rect.w * (percent / 100.0);
402648f512ceSopenharmony_ci                    if (w < 1) {
402748f512ceSopenharmony_ci                        w = 1
402848f512ceSopenharmony_ci                    }
402948f512ceSopenharmony_ci                    let _x = rect.x + offset;
403048f512ceSopenharmony_ci                    //绘制填充矩形
403148f512ceSopenharmony_ci                    ctx.fillStyle = `rgba(${heatColor.r}, ${heatColor.g}, ${heatColor.b}, 1)`;
403248f512ceSopenharmony_ci                    let __rect = { x: _x, y: rect.y + 2, w: w, h: rect.h - 2 }
403348f512ceSopenharmony_ci                    ctx.fillRect(__rect.x, __rect.y, __rect.w, __rect.h);
403448f512ceSopenharmony_ci
403548f512ceSopenharmony_ci                    //覆盖要比较的数据 (显示的方法名，显示的矩形对象,宽度的百分比，需要比对节点集合[需要根据funName从中取得要比较的节点])
403648f512ceSopenharmony_ci                    let nodeRefer = this.drawReferData(ctx, funName, __rect, percent, cRef);
403748f512ceSopenharmony_ci
403848f512ceSopenharmony_ci                    // 绘制文本
403948f512ceSopenharmony_ci                    ctx.fillStyle = "rgba(0,0,0,1)";
404048f512ceSopenharmony_ci                    let txtWidth = ctx.measureText(funName).width;//文本长度
404148f512ceSopenharmony_ci                    let chartWidth = txtWidth / funName.length;//每个字符长度
404248f512ceSopenharmony_ci                    let number = (w - 6) / chartWidth;//可以显示多少字符
404348f512ceSopenharmony_ci                    if (number >= 4 && number < funName.length - 3) {
404448f512ceSopenharmony_ci                        ctx.fillText(funName.slice(0, number - 3) + '...', _x + 3, rect.y + 13, w - 6)
404548f512ceSopenharmony_ci                    } else if (number >= 4) {
404648f512ceSopenharmony_ci                        ctx.fillText(funName, _x + 3, rect.y + 13, w - 6)
404748f512ceSopenharmony_ci                    }
404848f512ceSopenharmony_ci                    let _rect = {
404948f512ceSopenharmony_ci                        x: _x, y: rect.y, w: w, h: rect.h
405048f512ceSopenharmony_ci                    }
405148f512ceSopenharmony_ci                    c[i].rect = _rect;
405248f512ceSopenharmony_ci
405348f512ceSopenharmony_ci                    if (this.mouseX > _x && this.mouseX < _x + w && this.mouseY > (this.maxDepth - dept) * rect.h && this.mouseY < (this.maxDepth - dept + 1) * rect.h) {
405448f512ceSopenharmony_ci                        if (this.mouseState === 'mouseMove') {
405548f512ceSopenharmony_ci                            //绘制边框矩形
405648f512ceSopenharmony_ci                            // ctx.font = '12px serif';
405748f512ceSopenharmony_ci                            ctx.lineWidth = 2;
405848f512ceSopenharmony_ci                            ctx.strokeStyle = `#000000`;
405948f512ceSopenharmony_ci                            ctx.strokeRect(_x, rect.y + 1, w - 1, rect.h);
406048f512ceSopenharmony_ci                            this.funcNameSpan.textContent = funName
406148f512ceSopenharmony_ci                            this.panel.title = funName
406248f512ceSopenharmony_ci                            this.percentSpan.textContent = this.getStatistics(c[i]);
406348f512ceSopenharmony_ci                            let node = this.fetchSameFuncNameData(funName, cRef);
406448f512ceSopenharmony_ci                            var diff = 0.0;
406548f512ceSopenharmony_ci                            if (node) {
406648f512ceSopenharmony_ci                                let percentRefer = node.subEvents * 100 / (cRef.reduce((acc, cur) => acc + cur.subEvents, 0))
406748f512ceSopenharmony_ci                                diff = (percent - percentRefer).toFixed(2)
406848f512ceSopenharmony_ci                            }
406948f512ceSopenharmony_ci                            this.diffSpan.textContent = `diff: ${diff}%`;
407048f512ceSopenharmony_ci                        } else {
407148f512ceSopenharmony_ci                            if (this.mouseState === 'mouseUp') {
407248f512ceSopenharmony_ci                                this.mouseState = null;
407348f512ceSopenharmony_ci                                if (!this.compareNodes(this.c, [c[i]])) {
407448f512ceSopenharmony_ci                                    this.c = [c[i]];
407548f512ceSopenharmony_ci                                    this.cRef = [nodeRefer];
407648f512ceSopenharmony_ci                                }
407748f512ceSopenharmony_ci                            }
407848f512ceSopenharmony_ci                        }
407948f512ceSopenharmony_ci                    } else {
408048f512ceSopenharmony_ci                        ctx.lineWidth = 1;
408148f512ceSopenharmony_ci                        // ctx.font = '11px serif';
408248f512ceSopenharmony_ci                    }
408348f512ceSopenharmony_ci                    offset += w;
408448f512ceSopenharmony_ci                    // console.log(_rect,dept,percent,funName);
408548f512ceSopenharmony_ci                    //递归绘制子节点
408648f512ceSopenharmony_ci                    if (c[i].callStack && c[i].callStack.length > 0) {
408748f512ceSopenharmony_ci                        _rect.y = _rect.y - _rect.h
408848f512ceSopenharmony_ci                        this.drawC(c[i].callStack, nodeRefer ? nodeRefer.callStack : [], dept + 1, _rect);
408948f512ceSopenharmony_ci                    }
409048f512ceSopenharmony_ci                }
409148f512ceSopenharmony_ci            }
409248f512ceSopenharmony_ci
409348f512ceSopenharmony_ci            //在对比数组中找到 方法名与 funName相同的节点
409448f512ceSopenharmony_ci            fetchSameFuncNameData(funName, cRef) {
409548f512ceSopenharmony_ci                let node = cRef.filter(it => {
409648f512ceSopenharmony_ci                    let funNameRefer = this.getFunctionNameRefer(it.symbol);
409748f512ceSopenharmony_ci                    return funName === funNameRefer
409848f512ceSopenharmony_ci                })
409948f512ceSopenharmony_ci                // console.log("cRef:",funName,cRef,node)
410048f512ceSopenharmony_ci                if (node && node.length > 0) {
410148f512ceSopenharmony_ci                    return node[0];
410248f512ceSopenharmony_ci                } else {
410348f512ceSopenharmony_ci                    return null;
410448f512ceSopenharmony_ci                }
410548f512ceSopenharmony_ci            }
410648f512ceSopenharmony_ci
410748f512ceSopenharmony_ci            //对比数据，如果要比对的数据宽度大于绘制节点宽度 显示红色，否则显示蓝色，颜色深度取决于大多少或者小多少
410848f512ceSopenharmony_ci            drawReferData(ctx, funName, rect, percent, cRef) {
410948f512ceSopenharmony_ci                //根据funName 在cRef集合中找到同函数名的节点
411048f512ceSopenharmony_ci                let node = this.fetchSameFuncNameData(funName, cRef);
411148f512ceSopenharmony_ci                if (node) {
411248f512ceSopenharmony_ci                    let percentRefer = node.subEvents * 100 / (cRef.reduce((acc, cur) => acc + cur.subEvents, 0));//sumCount;
411348f512ceSopenharmony_ci                    // console.log("找到相同节点", funName, rect.w, percent, percentRefer, node)
411448f512ceSopenharmony_ci                    //如果绘制的百分比小于要比较的百分比
411548f512ceSopenharmony_ci                    if (percent < percentRefer) {
411648f512ceSopenharmony_ci                        let offset = Math.abs(percent - percentRefer);
411748f512ceSopenharmony_ci                        if (offset > 0 && offset <= 10) {
411848f512ceSopenharmony_ci                            ctx.fillStyle = `#66B3FF`;
411948f512ceSopenharmony_ci                        } else if (offset > 10 && offset <= 20) {
412048f512ceSopenharmony_ci                            ctx.fillStyle = `#2894FF`;
412148f512ceSopenharmony_ci                        } else if (offset > 20 && offset <= 30) {
412248f512ceSopenharmony_ci                            ctx.fillStyle = `#0072E3`;
412348f512ceSopenharmony_ci                        } else if (offset > 30 && offset <= 50) {
412448f512ceSopenharmony_ci                            ctx.fillStyle = `#0066CC`;
412548f512ceSopenharmony_ci                        } else {
412648f512ceSopenharmony_ci                            ctx.fillStyle = `#005AB5`;
412748f512ceSopenharmony_ci                        }
412848f512ceSopenharmony_ci                        ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
412948f512ceSopenharmony_ci                    } else if (percent > percentRefer) {
413048f512ceSopenharmony_ci                        let offset = Math.abs(percent - percentRefer);
413148f512ceSopenharmony_ci                        if (offset > 0 && offset <= 10) {
413248f512ceSopenharmony_ci                            ctx.fillStyle = `#FF7575`;
413348f512ceSopenharmony_ci                        } else if (offset > 10 && offset <= 20) {
413448f512ceSopenharmony_ci                            ctx.fillStyle = `#FF2D2D`;
413548f512ceSopenharmony_ci                        } else if (offset > 20 && offset <= 30) {
413648f512ceSopenharmony_ci                            ctx.fillStyle = `#EA0000`;
413748f512ceSopenharmony_ci                        } else if (offset > 30 && offset <= 50) {
413848f512ceSopenharmony_ci                            ctx.fillStyle = `#CE0000`;
413948f512ceSopenharmony_ci                        } else {
414048f512ceSopenharmony_ci                            ctx.fillStyle = `#AE0000`;
414148f512ceSopenharmony_ci                        }
414248f512ceSopenharmony_ci                        ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
414348f512ceSopenharmony_ci                    }
414448f512ceSopenharmony_ci                }
414548f512ceSopenharmony_ci                return node;
414648f512ceSopenharmony_ci            }
414748f512ceSopenharmony_ci
414848f512ceSopenharmony_ci
414948f512ceSopenharmony_ci            compareNode(na, nb) {
415048f512ceSopenharmony_ci                let res = false;
415148f512ceSopenharmony_ci                if (na.selfEvents === nb.selfEvents && na.subEvents === nb.subEvents && na.symbol === nb.symbol) {
415248f512ceSopenharmony_ci                    res = this.compareNodes(na.callStack || [], nb.callStack || []);
415348f512ceSopenharmony_ci                }
415448f512ceSopenharmony_ci                return res;
415548f512ceSopenharmony_ci            }
415648f512ceSopenharmony_ci
415748f512ceSopenharmony_ci            compareNodes(a, b) {
415848f512ceSopenharmony_ci                let res = false;
415948f512ceSopenharmony_ci                if (a.length === b.length) {
416048f512ceSopenharmony_ci                    if (a.length === 0) {
416148f512ceSopenharmony_ci                        return true;
416248f512ceSopenharmony_ci                    }
416348f512ceSopenharmony_ci                    for (let i = 0; i < a.length; i++) {
416448f512ceSopenharmony_ci                        res = this.compareNode(a[i], b[i])
416548f512ceSopenharmony_ci                    }
416648f512ceSopenharmony_ci                }
416748f512ceSopenharmony_ci                return res;
416848f512ceSopenharmony_ci            }
416948f512ceSopenharmony_ci
417048f512ceSopenharmony_ci            getMaxDepth(nodes) {
417148f512ceSopenharmony_ci                let isArray = Array.isArray(nodes);
417248f512ceSopenharmony_ci                let sumCount;
417348f512ceSopenharmony_ci                if (isArray) {
417448f512ceSopenharmony_ci                    sumCount = nodes.reduce((acc, cur) => acc + cur.subEvents, 0);
417548f512ceSopenharmony_ci                } else {
417648f512ceSopenharmony_ci                    sumCount = nodes.subEvents;
417748f512ceSopenharmony_ci                }
417848f512ceSopenharmony_ci                let width = sumCount * 100.0 / this.sumCount;
417948f512ceSopenharmony_ci                if (width < 0.1) {
418048f512ceSopenharmony_ci                    return 0;
418148f512ceSopenharmony_ci                }
418248f512ceSopenharmony_ci                let children = isArray ? this.splitChildrenForNodes(nodes) : nodes.callStack;
418348f512ceSopenharmony_ci                let childDepth = 0;
418448f512ceSopenharmony_ci                if (children) {
418548f512ceSopenharmony_ci                    for (let child of children) {
418648f512ceSopenharmony_ci                        childDepth = Math.max(childDepth, this.getMaxDepth(child));
418748f512ceSopenharmony_ci                    }
418848f512ceSopenharmony_ci                }
418948f512ceSopenharmony_ci                return childDepth + 1;
419048f512ceSopenharmony_ci            }
419148f512ceSopenharmony_ci
419248f512ceSopenharmony_ci            splitChildrenForNodes(nodes) {
419348f512ceSopenharmony_ci                let map = new Map();
419448f512ceSopenharmony_ci                for (let node of nodes) {
419548f512ceSopenharmony_ci                    for (let child of node.callStack) {
419648f512ceSopenharmony_ci                        let subNodes = map.get(child.symbol);
419748f512ceSopenharmony_ci                        if (subNodes) {
419848f512ceSopenharmony_ci                            subNodes.push(child);
419948f512ceSopenharmony_ci                        } else {
420048f512ceSopenharmony_ci                            map.set(child.symbol, [child]);
420148f512ceSopenharmony_ci                        }
420248f512ceSopenharmony_ci                    }
420348f512ceSopenharmony_ci                }
420448f512ceSopenharmony_ci                let res = [];
420548f512ceSopenharmony_ci                for (let subNodes of map.values()) {
420648f512ceSopenharmony_ci                    res.push(subNodes.length == 1 ? subNodes[0] : subNodes);
420748f512ceSopenharmony_ci                }
420848f512ceSopenharmony_ci                return res;
420948f512ceSopenharmony_ci            }
421048f512ceSopenharmony_ci
421148f512ceSopenharmony_ci            //根据百分比获取节点的背景色
421248f512ceSopenharmony_ci            getHeatColor(widthPercentage) {
421348f512ceSopenharmony_ci                return {
421448f512ceSopenharmony_ci                    r: Math.floor(245 + 10 * (1 - widthPercentage * 0.01)),
421548f512ceSopenharmony_ci                    g: Math.floor(110 + 105 * (1 - widthPercentage * 0.01)),
421648f512ceSopenharmony_ci                    b: 100,
421748f512ceSopenharmony_ci                };
421848f512ceSopenharmony_ci            }
421948f512ceSopenharmony_ci
422048f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
422148f512ceSopenharmony_ci            }
422248f512ceSopenharmony_ci        }
422348f512ceSopenharmony_ci        if (!customElements.get('app-diff-flame')) {
422448f512ceSopenharmony_ci            customElements.define('app-diff-flame', AppDiffFlame);
422548f512ceSopenharmony_ci        }
422648f512ceSopenharmony_ci
422748f512ceSopenharmony_ci        class AppNormalFlame extends HTMLElement {
422848f512ceSopenharmony_ci            draw;
422948f512ceSopenharmony_ci            drawC;
423048f512ceSopenharmony_ci            rowHeight = 17;
423148f512ceSopenharmony_ci
423248f512ceSopenharmony_ci            static get observedAttributes() {
423348f512ceSopenharmony_ci                return []
423448f512ceSopenharmony_ci            }
423548f512ceSopenharmony_ci
423648f512ceSopenharmony_ci            constructor() {
423748f512ceSopenharmony_ci                super();
423848f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
423948f512ceSopenharmony_ci                shadowRoot.innerHTML = `
424048f512ceSopenharmony_ci        <style>
424148f512ceSopenharmony_ci        :host{
424248f512ceSopenharmony_ci            font-size:inherit;
424348f512ceSopenharmony_ci            display:inline-flex;
424448f512ceSopenharmony_ci            align-items: center;
424548f512ceSopenharmony_ci            justify-content:center;
424648f512ceSopenharmony_ci            height: 100%;
424748f512ceSopenharmony_ci            width: 100%;
424848f512ceSopenharmony_ci            margin-bottom: 40px;
424948f512ceSopenharmony_ci        }
425048f512ceSopenharmony_ci        canvas { border: 1px solid #e9e9e9; }
425148f512ceSopenharmony_ci        #title{
425248f512ceSopenharmony_ci            font-weight: bold;
425348f512ceSopenharmony_ci            height: auto;
425448f512ceSopenharmony_ci        }
425548f512ceSopenharmony_ci        #title span{
425648f512ceSopenharmony_ci            color: gray;
425748f512ceSopenharmony_ci        }
425848f512ceSopenharmony_ci        #funcNameSpan{
425948f512ceSopenharmony_ci            display: inline-block;
426048f512ceSopenharmony_ci            border: 1px solid #e9e9e9;
426148f512ceSopenharmony_ci            box-sizing: border-box;
426248f512ceSopenharmony_ci            border-radius: 2px;
426348f512ceSopenharmony_ci            padding: 2px 8px;
426448f512ceSopenharmony_ci            background: #fff;
426548f512ceSopenharmony_ci             color: gray;
426648f512ceSopenharmony_ci            flex: 3;
426748f512ceSopenharmony_ci            margin-left: 10px;
426848f512ceSopenharmony_ci        }
426948f512ceSopenharmony_ci        #percentSpan{
427048f512ceSopenharmony_ci            display: inline-block;
427148f512ceSopenharmony_ci            border: 1px solid #e9e9e9;
427248f512ceSopenharmony_ci            margin-left: 10px;
427348f512ceSopenharmony_ci            box-sizing: border-box;
427448f512ceSopenharmony_ci            border-radius: 2px;
427548f512ceSopenharmony_ci            padding: 2px 8px;
427648f512ceSopenharmony_ci            background: #fff;
427748f512ceSopenharmony_ci            min-width: 160px;
427848f512ceSopenharmony_ci            max-width: 160px;
427948f512ceSopenharmony_ci            margin-left: 10px;
428048f512ceSopenharmony_ci            width: 100px;
428148f512ceSopenharmony_ci            height: 30px;
428248f512ceSopenharmony_ci            color: gray;
428348f512ceSopenharmony_ci        }
428448f512ceSopenharmony_ci        #history{
428548f512ceSopenharmony_ci            display: none;
428648f512ceSopenharmony_ci            border: 1px solid #42b983;
428748f512ceSopenharmony_ci            box-sizing: border-box;
428848f512ceSopenharmony_ci            border-radius: 2px;
428948f512ceSopenharmony_ci            padding: 2px 8px;
429048f512ceSopenharmony_ci            background: #fff;
429148f512ceSopenharmony_ci            width: 100px;
429248f512ceSopenharmony_ci            margin-left: 10px;
429348f512ceSopenharmony_ci            height: 30px;
429448f512ceSopenharmony_ci            cursor: pointer;
429548f512ceSopenharmony_ci            user-select: none;
429648f512ceSopenharmony_ci        }
429748f512ceSopenharmony_ci        #history:hover{
429848f512ceSopenharmony_ci            background: #42b983;
429948f512ceSopenharmony_ci            color: #fff;
430048f512ceSopenharmony_ci        }
430148f512ceSopenharmony_ci        #searchInput{
430248f512ceSopenharmony_ci            height: 30px;
430348f512ceSopenharmony_ci            margin-left: 10px;
430448f512ceSopenharmony_ci            margin-right: 10px;
430548f512ceSopenharmony_ci            flex: 1;
430648f512ceSopenharmony_ci        }
430748f512ceSopenharmony_ci        </style>
430848f512ceSopenharmony_ci        <div style="position: relative;width: 100%">
430948f512ceSopenharmony_ci            <div id="title">Process <span id="pid"></span> <span id="processName"></span> Thread <span id="tid"></span> <span id="threadName"></span><span id="sample"></span></div>
431048f512ceSopenharmony_ci            <canvas id="panel" title=""></canvas>
431148f512ceSopenharmony_ci            <div id="controller" style="position: absolute;top: 32px;display: flex;width: 100%">
431248f512ceSopenharmony_ci                <span id="history">Zoom Out</span>
431348f512ceSopenharmony_ci                <span id="funcNameSpan"></span>
431448f512ceSopenharmony_ci                <span id="percentSpan"></span>
431548f512ceSopenharmony_ci                <lit-input id="searchInput" placeholder="search"  allow-clear>Search</lit-input>
431648f512ceSopenharmony_ci            </div>
431748f512ceSopenharmony_ci        </div>
431848f512ceSopenharmony_ci        <slot></slot>
431948f512ceSopenharmony_ci        `
432048f512ceSopenharmony_ci            }
432148f512ceSopenharmony_ci
432248f512ceSopenharmony_ci            connectedCallback() {
432348f512ceSopenharmony_ci                this.history = [];
432448f512ceSopenharmony_ci                this.panel = this.shadowRoot.getElementById('panel');
432548f512ceSopenharmony_ci                this.controller = this.shadowRoot.getElementById('controller');
432648f512ceSopenharmony_ci                this.funcNameSpan = this.shadowRoot.getElementById('funcNameSpan');
432748f512ceSopenharmony_ci                this.percentSpan = this.shadowRoot.getElementById('percentSpan');
432848f512ceSopenharmony_ci                this.historySpan = this.shadowRoot.getElementById('history');
432948f512ceSopenharmony_ci                this.searchInput = this.shadowRoot.getElementById('searchInput');
433048f512ceSopenharmony_ci                this.pid = this.shadowRoot.getElementById('pid');
433148f512ceSopenharmony_ci                this.tid = this.shadowRoot.getElementById('tid');
433248f512ceSopenharmony_ci                this.processName = this.shadowRoot.getElementById('processName');
433348f512ceSopenharmony_ci                this.threadName = this.shadowRoot.getElementById('threadName');
433448f512ceSopenharmony_ci                this.sample = this.shadowRoot.getElementById('sample');
433548f512ceSopenharmony_ci                this.titleDiv = this.shadowRoot.getElementById('title');
433648f512ceSopenharmony_ci                this.context = this.panel.getContext('2d');
433748f512ceSopenharmony_ci                this.panel.width = this.shadowRoot.host.clientWidth;
433848f512ceSopenharmony_ci                this.panel.height = this.shadowRoot.host.clientHeight;
433948f512ceSopenharmony_ci                this.historySpan.onclick = e => {
434048f512ceSopenharmony_ci                    if (this.history.length > 2) {
434148f512ceSopenharmony_ci                        this.history.pop();
434248f512ceSopenharmony_ci                        this.zoomOut(this.history[this.history.length - 1])
434348f512ceSopenharmony_ci                    } else if (this.history.length == 2) {
434448f512ceSopenharmony_ci                        this.history.pop();
434548f512ceSopenharmony_ci                        this.zoomOut(this.history[this.history.length - 1])
434648f512ceSopenharmony_ci                        this.historySpan.style.display = 'none';
434748f512ceSopenharmony_ci                    } else {
434848f512ceSopenharmony_ci                        this.historySpan.style.display = 'none';
434948f512ceSopenharmony_ci                    }
435048f512ceSopenharmony_ci                }
435148f512ceSopenharmony_ci                this.searchInput.addEventListener("onPressEnter", (e) => {
435248f512ceSopenharmony_ci                    this.keyword = e.currentTarget.value;
435348f512ceSopenharmony_ci                    requestAnimationFrame(this.draw);
435448f512ceSopenharmony_ci                })
435548f512ceSopenharmony_ci                this.searchInput.addEventListener('onClear', e => {
435648f512ceSopenharmony_ci                    this.keyword = null;
435748f512ceSopenharmony_ci                    requestAnimationFrame(this.draw);
435848f512ceSopenharmony_ci                })
435948f512ceSopenharmony_ci                this.panel.onmouseover = (e) => {
436048f512ceSopenharmony_ci                    this.mouseState = 'mouseOver';
436148f512ceSopenharmony_ci                }
436248f512ceSopenharmony_ci                this.panel.onmouseleave = e => {
436348f512ceSopenharmony_ci                    this.mouseState = 'mouseLeave';
436448f512ceSopenharmony_ci                    this.mouseX = 0;
436548f512ceSopenharmony_ci                    this.mouseY = 0;
436648f512ceSopenharmony_ci                    requestAnimationFrame(this.draw)
436748f512ceSopenharmony_ci                }
436848f512ceSopenharmony_ci                this.panel.onmousemove = e => {
436948f512ceSopenharmony_ci                    const pos = e.currentTarget.getBoundingClientRect();
437048f512ceSopenharmony_ci                    this.mouseX = e.clientX - pos.left;
437148f512ceSopenharmony_ci                    this.mouseY = e.clientY - pos.top;
437248f512ceSopenharmony_ci                    this.mouseState = 'mouseMove';
437348f512ceSopenharmony_ci                    requestAnimationFrame(this.draw)
437448f512ceSopenharmony_ci                }
437548f512ceSopenharmony_ci                this.panel.onmousedown = e => {
437648f512ceSopenharmony_ci                    this.mouseState = 'mouseDown';
437748f512ceSopenharmony_ci                    // const pos = e.currentTarget.getBoundingClientRect();
437848f512ceSopenharmony_ci                    // this.mouseX = e.clientX - pos.left;
437948f512ceSopenharmony_ci                    // this.mouseY = e.clientY - pos.top;
438048f512ceSopenharmony_ci                    // requestAnimationFrame(this.draw)
438148f512ceSopenharmony_ci                }
438248f512ceSopenharmony_ci                this.panel.onmouseup = e => {
438348f512ceSopenharmony_ci                    this.mouseState = 'mouseUp';
438448f512ceSopenharmony_ci                    const pos = e.currentTarget.getBoundingClientRect();
438548f512ceSopenharmony_ci                    this.mouseX = e.clientX - pos.left;
438648f512ceSopenharmony_ci                    this.mouseY = e.clientY - pos.top;
438748f512ceSopenharmony_ci                    requestAnimationFrame(this.draw)
438848f512ceSopenharmony_ci                }
438948f512ceSopenharmony_ci                // this.panel.onclick = (e)=>{
439048f512ceSopenharmony_ci                //     this.mouseState = 'mouseClick';
439148f512ceSopenharmony_ci                // }
439248f512ceSopenharmony_ci            }
439348f512ceSopenharmony_ci
439448f512ceSopenharmony_ci            set data(value) {
439548f512ceSopenharmony_ci                this._data = value;
439648f512ceSopenharmony_ci                this.type = value.type;
439748f512ceSopenharmony_ci                this.reverse = value.reverse || false;
439848f512ceSopenharmony_ci                if (value.CallOrder.symbol === -1) {
439948f512ceSopenharmony_ci                    this._c = value.CallOrder.callStack;
440048f512ceSopenharmony_ci                } else {
440148f512ceSopenharmony_ci                    this._c = [value.CallOrder];
440248f512ceSopenharmony_ci                }
440348f512ceSopenharmony_ci                this.history.push(this._c)
440448f512ceSopenharmony_ci                this.eventCountAllProcess = value.json.recordSampleInfo[window.eventIndex].eventCount
440548f512ceSopenharmony_ci                if (value.pid) {
440648f512ceSopenharmony_ci                    this.eventCountCurrentProcess = value.json.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === value.pid)[0].eventCount
440748f512ceSopenharmony_ci                    this.pid.textContent = value.pid;
440848f512ceSopenharmony_ci                } else {
440948f512ceSopenharmony_ci                    // this.titleDiv.style.display = 'none';
441048f512ceSopenharmony_ci                }
441148f512ceSopenharmony_ci                if (value.tid) {
441248f512ceSopenharmony_ci                    this.eventCountCurrentThread = value.json.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === value.pid)[0].threads.filter(it => it.tid === value.tid)[0].eventCount;
441348f512ceSopenharmony_ci                    this.tid.textContent = value.tid;
441448f512ceSopenharmony_ci                }
441548f512ceSopenharmony_ci                if (value.sampleCount) {
441648f512ceSopenharmony_ci                    this.sample.textContent = ' (Samples: ' + value.sampleCount + ")";
441748f512ceSopenharmony_ci                }
441848f512ceSopenharmony_ci                if (value.processName) {
441948f512ceSopenharmony_ci                    this.processName.textContent = value.processName ? `(${value.processName})` : '';
442048f512ceSopenharmony_ci                }
442148f512ceSopenharmony_ci                if (value.threadName) {
442248f512ceSopenharmony_ci                    this.threadName.textContent = value.threadName ? `(${value.threadName})` : '';
442348f512ceSopenharmony_ci                }
442448f512ceSopenharmony_ci                if (value.funcName) {
442548f512ceSopenharmony_ci                    this.titleDiv.innerHTML = `${value.funcName}`
442648f512ceSopenharmony_ci                    this.controller.style.top = `${this.titleDiv.clientHeight + 10}px`
442748f512ceSopenharmony_ci                }
442848f512ceSopenharmony_ci                this.maxDepth = this.getMaxDepth(this.data.CallOrder.callStack) + 5; //设置最大层级
442948f512ceSopenharmony_ci                this.sumCount = this.data.CallOrder.subEvents; //设置根节点的 sumCount
443048f512ceSopenharmony_ci                this.panel.height = this.maxDepth * this.rowHeight
443148f512ceSopenharmony_ci                this.panel.width = this.shadowRoot.host.clientWidth
443248f512ceSopenharmony_ci                this.makeHighRes(this.panel);
443348f512ceSopenharmony_ci                requestAnimationFrame(this.draw);
443448f512ceSopenharmony_ci            }
443548f512ceSopenharmony_ci
443648f512ceSopenharmony_ci            get data() {
443748f512ceSopenharmony_ci                return this._data;
443848f512ceSopenharmony_ci            }
443948f512ceSopenharmony_ci
444048f512ceSopenharmony_ci            set c(value) {
444148f512ceSopenharmony_ci                this.historySpan.style.display = 'block';
444248f512ceSopenharmony_ci                this._c = value;
444348f512ceSopenharmony_ci                this.history.push(this._c)
444448f512ceSopenharmony_ci                // 下面代码实现 canvas 随内容高度变化
444548f512ceSopenharmony_ci                // this.maxDepth = this._getMaxDepth(value) + 5; //设置最大层级
444648f512ceSopenharmony_ci                // this.panel.height = this.maxDepth * this.rowHeight
444748f512ceSopenharmony_ci                // this.panel.width = this.shadowRoot.host.clientWidth;
444848f512ceSopenharmony_ci                // this.makeHighRes(this.panel);
444948f512ceSopenharmony_ci                requestAnimationFrame(this.draw);
445048f512ceSopenharmony_ci            }
445148f512ceSopenharmony_ci
445248f512ceSopenharmony_ci            get c() {
445348f512ceSopenharmony_ci                return this._c;
445448f512ceSopenharmony_ci            }
445548f512ceSopenharmony_ci
445648f512ceSopenharmony_ci            zoomOut(value) {
445748f512ceSopenharmony_ci                this._c = value;
445848f512ceSopenharmony_ci                // 下面代码实现 canvas 随内容高度变化
445948f512ceSopenharmony_ci                // this.maxDepth = this._getMaxDepth(value) + 5; //设置最大层级
446048f512ceSopenharmony_ci                // // this.sumCount = value.reduce((acc, cur) => acc + cur.s, 0); //设置根节点的 sumCount
446148f512ceSopenharmony_ci                // this.panel.height = this.maxDepth * this.rowHeight
446248f512ceSopenharmony_ci                // this.panel.width = this.shadowRoot.host.clientWidth;
446348f512ceSopenharmony_ci                // this.makeHighRes(this.panel);
446448f512ceSopenharmony_ci                requestAnimationFrame(this.draw);
446548f512ceSopenharmony_ci            }
446648f512ceSopenharmony_ci
446748f512ceSopenharmony_ci            makeHighRes(canvas) {
446848f512ceSopenharmony_ci                let ctx = canvas.getContext('2d');
446948f512ceSopenharmony_ci                let dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
447048f512ceSopenharmony_ci                let oldWidth = canvas.width;
447148f512ceSopenharmony_ci                let oldHeight = canvas.height;
447248f512ceSopenharmony_ci                canvas.width = Math.round(oldWidth * dpr);
447348f512ceSopenharmony_ci                canvas.height = Math.round(oldHeight * dpr);
447448f512ceSopenharmony_ci                canvas.style.width = oldWidth + 'px';
447548f512ceSopenharmony_ci                canvas.style.height = oldHeight + 'px';
447648f512ceSopenharmony_ci                ctx.scale(dpr, dpr);
447748f512ceSopenharmony_ci                this.context = ctx;
447848f512ceSopenharmony_ci                return ctx;
447948f512ceSopenharmony_ci            }
448048f512ceSopenharmony_ci
448148f512ceSopenharmony_ci            draw = () => {
448248f512ceSopenharmony_ci                // requestAnimationFrame(this.draw);
448348f512ceSopenharmony_ci                let ctx = this.context;
448448f512ceSopenharmony_ci                // ctx.clearRect(0, 0, this.panel.width, this.panel.height);
448548f512ceSopenharmony_ci                let grad = ctx.createLinearGradient(0, 0, 0, this.panel.height / 2); //创建一个渐变色线性对象
448648f512ceSopenharmony_ci                grad.addColorStop(0, "#eeeeee");                  //定义渐变色颜色
448748f512ceSopenharmony_ci                grad.addColorStop(1, "#efefb1");
448848f512ceSopenharmony_ci                ctx.fillStyle = grad;                         //设置fillStyle为当前的渐变对象
448948f512ceSopenharmony_ci                ctx.fillRect(0, 0, this.panel.width, this.panel.height);
449048f512ceSopenharmony_ci                if (this.data) {
449148f512ceSopenharmony_ci                    if (this.reverse) {
449248f512ceSopenharmony_ci                        this.drawCReverse(
449348f512ceSopenharmony_ci                            this.c,
449448f512ceSopenharmony_ci                            1,
449548f512ceSopenharmony_ci                            {
449648f512ceSopenharmony_ci                                x: 0,
449748f512ceSopenharmony_ci                                y: this.rowHeight * 4,
449848f512ceSopenharmony_ci                                w: this.panel.clientWidth,
449948f512ceSopenharmony_ci                                h: this.rowHeight
450048f512ceSopenharmony_ci                            });
450148f512ceSopenharmony_ci                    } else {
450248f512ceSopenharmony_ci                        this.drawC(
450348f512ceSopenharmony_ci                            this.c,
450448f512ceSopenharmony_ci                            1,
450548f512ceSopenharmony_ci                            {
450648f512ceSopenharmony_ci                                x: 0,
450748f512ceSopenharmony_ci                                y: this.panel.clientHeight - this.rowHeight,
450848f512ceSopenharmony_ci                                w: this.panel.clientWidth,
450948f512ceSopenharmony_ci                                h: this.rowHeight
451048f512ceSopenharmony_ci                            });
451148f512ceSopenharmony_ci                    }
451248f512ceSopenharmony_ci                }
451348f512ceSopenharmony_ci            }
451448f512ceSopenharmony_ci
451548f512ceSopenharmony_ci            getStatistics(c) {
451648f512ceSopenharmony_ci                let statistics;//鼠标hover展示的百分比
451748f512ceSopenharmony_ci                switch (this.type) {
451848f512ceSopenharmony_ci                    case 1: //current thread
451948f512ceSopenharmony_ci                        statistics = c.subEvents * 100 / this.eventCountCurrentThread;
452048f512ceSopenharmony_ci                        statistics = statistics.toFixed(2)
452148f512ceSopenharmony_ci                        statistics = `${statistics}%`
452248f512ceSopenharmony_ci                        break;
452348f512ceSopenharmony_ci                    case 2: // current process
452448f512ceSopenharmony_ci                        statistics = c.subEvents * 100 / this.eventCountCurrentProcess;
452548f512ceSopenharmony_ci                        statistics = statistics.toFixed(2)
452648f512ceSopenharmony_ci                        statistics = `${statistics}%`
452748f512ceSopenharmony_ci                        break;
452848f512ceSopenharmony_ci                    case 3: // all process
452948f512ceSopenharmony_ci                        statistics = c.subEvents * 100 / this.eventCountAllProcess;
453048f512ceSopenharmony_ci                        statistics = statistics.toFixed(2)
453148f512ceSopenharmony_ci                        statistics = `${statistics}%`
453248f512ceSopenharmony_ci                        break;
453348f512ceSopenharmony_ci                    case 4: //event count
453448f512ceSopenharmony_ci                        statistics = c.subEvents;
453548f512ceSopenharmony_ci                        statistics = `${statistics}`
453648f512ceSopenharmony_ci                        break;
453748f512ceSopenharmony_ci                    case 5: //event count in milliseconds
453848f512ceSopenharmony_ci                        statistics = c.subEvents / 1000000;
453948f512ceSopenharmony_ci                        statistics = statistics.toFixed(3)
454048f512ceSopenharmony_ci                        statistics = `${statistics} ms`
454148f512ceSopenharmony_ci                        break;
454248f512ceSopenharmony_ci                    default: //current thread
454348f512ceSopenharmony_ci                        statistics = c.subEvents * 100 / this.eventCountCurrentThread;
454448f512ceSopenharmony_ci                        statistics = statistics.toFixed(2)
454548f512ceSopenharmony_ci                        statistics = `${statistics}%`
454648f512ceSopenharmony_ci                        break;
454748f512ceSopenharmony_ci                }
454848f512ceSopenharmony_ci                return statistics;
454948f512ceSopenharmony_ci            }
455048f512ceSopenharmony_ci
455148f512ceSopenharmony_ci            //HTML反转义
455248f512ceSopenharmony_ci            htmlDecode(text) {
455348f512ceSopenharmony_ci                let temp = document.createElement("div");
455448f512ceSopenharmony_ci                temp.innerHTML = text;
455548f512ceSopenharmony_ci                let output = temp.innerText || temp.textContent;
455648f512ceSopenharmony_ci                temp = null;
455748f512ceSopenharmony_ci                return output;
455848f512ceSopenharmony_ci            }
455948f512ceSopenharmony_ci
456048f512ceSopenharmony_ci            getFunctionName(f) {
456148f512ceSopenharmony_ci                let funName = "";
456248f512ceSopenharmony_ci                if (this.data.json.SymbolMap[f]) {
456348f512ceSopenharmony_ci                    funName = this.data.json.SymbolMap[f].symbol;
456448f512ceSopenharmony_ci                } else {
456548f512ceSopenharmony_ci                    let f = c[i].symbol;
456648f512ceSopenharmony_ci                    console.log(`processId:${this.pid.textContent} processName:${this.processName.textContent} threadId:${this.tid.textContent} threadName:${this.threadName.textContent}`, c[i], "SymbolMap中没有对应的值")
456748f512ceSopenharmony_ci                }
456848f512ceSopenharmony_ci                return this.htmlDecode(funName);
456948f512ceSopenharmony_ci            }
457048f512ceSopenharmony_ci
457148f512ceSopenharmony_ci            getColor(percent2, funName) {
457248f512ceSopenharmony_ci                let heatColor;
457348f512ceSopenharmony_ci                if (this.keyword && this.keyword.length > 0 && funName.indexOf(this.keyword) != -1) {
457448f512ceSopenharmony_ci                    heatColor = { r: 0x66, g: 0xad, b: 0xff };
457548f512ceSopenharmony_ci                } else {
457648f512ceSopenharmony_ci                    heatColor = this.getHeatColor(percent2);
457748f512ceSopenharmony_ci                }
457848f512ceSopenharmony_ci                return heatColor;
457948f512ceSopenharmony_ci            }
458048f512ceSopenharmony_ci
458148f512ceSopenharmony_ci            drawCReverse = (c, dept, rect) => {
458248f512ceSopenharmony_ci                let ctx = this.context;
458348f512ceSopenharmony_ci                let offset = 0
458448f512ceSopenharmony_ci                for (let i = 0; i < c.length; i++) {
458548f512ceSopenharmony_ci                    let funName = this.getFunctionName(c[i].symbol);
458648f512ceSopenharmony_ci                    let funcId = c[i].symbol;
458748f512ceSopenharmony_ci                    let percent = c[i].subEvents * 100 / (c.reduce((acc, cur) => acc + cur.subEvents, 0));
458848f512ceSopenharmony_ci                    let percent2 = c[i].subEvents * 100 / this.sumCount;
458948f512ceSopenharmony_ci                    if (percent2 < 0.1) continue //过滤掉 百分比为0.1一下的节点
459048f512ceSopenharmony_ci                    let heatColor = this.getColor(percent2, funName);
459148f512ceSopenharmony_ci                    let w = rect.w * (percent / 100.0);
459248f512ceSopenharmony_ci                    if (w < 1) {
459348f512ceSopenharmony_ci                        w = 1
459448f512ceSopenharmony_ci                    }
459548f512ceSopenharmony_ci                    let _x = rect.x + offset;
459648f512ceSopenharmony_ci                    //绘制填充矩形
459748f512ceSopenharmony_ci                    ctx.fillStyle = `rgba(${heatColor.r}, ${heatColor.g}, ${heatColor.b}, 1)`;
459848f512ceSopenharmony_ci                    ctx.fillRect(_x, rect.y + 2, w, rect.h - 2);
459948f512ceSopenharmony_ci                    // 绘制文本
460048f512ceSopenharmony_ci                    ctx.fillStyle = "rgba(0,0,0,1)";
460148f512ceSopenharmony_ci                    let txtWidth = ctx.measureText(funName).width;//文本长度
460248f512ceSopenharmony_ci                    let chartWidth = txtWidth / funName.length;//每个字符长度
460348f512ceSopenharmony_ci                    let number = (w - 6) / chartWidth;//可以显示多少字符
460448f512ceSopenharmony_ci                    if (number >= 4 && number < funName.length - 3) {
460548f512ceSopenharmony_ci                        ctx.fillText(funName.slice(0, number - 3) + '...', _x + 3, rect.y + 13, w - 6)
460648f512ceSopenharmony_ci                    } else if (number >= 4) {
460748f512ceSopenharmony_ci                        ctx.fillText(funName, _x + 3, rect.y + 13, w - 6)
460848f512ceSopenharmony_ci                    }
460948f512ceSopenharmony_ci                    let _rect = {
461048f512ceSopenharmony_ci                        x: _x, y: rect.y, w: w, h: rect.h
461148f512ceSopenharmony_ci                    }
461248f512ceSopenharmony_ci                    c[i].rect = _rect;
461348f512ceSopenharmony_ci
461448f512ceSopenharmony_ci                    if (this.mouseX > _x && this.mouseX < _x + w && this.mouseY > rect.h * 3 + (dept) * rect.h && this.mouseY < rect.h * 3 + (dept + 1) * rect.h) {
461548f512ceSopenharmony_ci                        if (this.mouseState === 'mouseMove') {
461648f512ceSopenharmony_ci                            //绘制边框矩形
461748f512ceSopenharmony_ci                            // ctx.font = '12px serif';
461848f512ceSopenharmony_ci                            ctx.lineWidth = 2;
461948f512ceSopenharmony_ci                            ctx.strokeStyle = `#000000`;
462048f512ceSopenharmony_ci                            ctx.strokeRect(_x, rect.y + 1, w - 1, rect.h);
462148f512ceSopenharmony_ci                            this.funcNameSpan.textContent = funName
462248f512ceSopenharmony_ci                            this.panel.title = funName
462348f512ceSopenharmony_ci                            this.percentSpan.textContent = this.getStatistics(c[i]);
462448f512ceSopenharmony_ci                        } else {
462548f512ceSopenharmony_ci                            if (this.mouseState === 'mouseUp') {
462648f512ceSopenharmony_ci                                this.mouseState = null;
462748f512ceSopenharmony_ci                                if (!this.compareNodes(this.c, [c[i]])) {
462848f512ceSopenharmony_ci                                    this.c = [c[i]];
462948f512ceSopenharmony_ci                                }
463048f512ceSopenharmony_ci                            }
463148f512ceSopenharmony_ci                        }
463248f512ceSopenharmony_ci                    } else {
463348f512ceSopenharmony_ci                        ctx.lineWidth = 1;
463448f512ceSopenharmony_ci                        // ctx.font = '11px serif';
463548f512ceSopenharmony_ci                    }
463648f512ceSopenharmony_ci                    offset += w;
463748f512ceSopenharmony_ci                    // console.log(_rect,dept,percent,funName);
463848f512ceSopenharmony_ci                    //递归绘制子节点
463948f512ceSopenharmony_ci                    if (c[i].callStack && c[i].callStack.length > 0) {
464048f512ceSopenharmony_ci                        _rect.y = _rect.y + _rect.h
464148f512ceSopenharmony_ci                        this.drawCReverse(c[i].callStack, dept + 1, _rect);
464248f512ceSopenharmony_ci                    }
464348f512ceSopenharmony_ci                }
464448f512ceSopenharmony_ci            }
464548f512ceSopenharmony_ci            drawC = (c, dept, rect) => {
464648f512ceSopenharmony_ci                let ctx = this.context;
464748f512ceSopenharmony_ci                let offset = 0
464848f512ceSopenharmony_ci                for (let i = 0; i < c.length; i++) {
464948f512ceSopenharmony_ci                    let funName = this.getFunctionName(c[i].symbol);
465048f512ceSopenharmony_ci                    // console.log(dept,this.data.SymbolMap[c[i].symbol].symbol);
465148f512ceSopenharmony_ci                    let funcId = c[i].symbol;
465248f512ceSopenharmony_ci                    let percent = c[i].subEvents * 100 / (c.reduce((acc, cur) => acc + cur.subEvents, 0));//sumCount;
465348f512ceSopenharmony_ci                    let percent2 = c[i].subEvents * 100 / this.sumCount;
465448f512ceSopenharmony_ci                    if (percent2 < 0.1) continue //过滤掉 百分比为0.1一下的节点
465548f512ceSopenharmony_ci                    let heatColor = this.getColor(percent2, funName);
465648f512ceSopenharmony_ci                    let w = rect.w * (percent / 100.0);
465748f512ceSopenharmony_ci                    if (w < 1) {
465848f512ceSopenharmony_ci                        w = 1
465948f512ceSopenharmony_ci                    }
466048f512ceSopenharmony_ci                    let _x = rect.x + offset;
466148f512ceSopenharmony_ci                    //绘制填充矩形
466248f512ceSopenharmony_ci                    ctx.fillStyle = `rgba(${heatColor.r}, ${heatColor.g}, ${heatColor.b}, 1)`;
466348f512ceSopenharmony_ci                    ctx.fillRect(_x, rect.y + 2, w, rect.h - 2);
466448f512ceSopenharmony_ci                    // 绘制文本
466548f512ceSopenharmony_ci                    ctx.fillStyle = "rgba(0,0,0,1)";
466648f512ceSopenharmony_ci                    let txtWidth = ctx.measureText(funName).width;//文本长度
466748f512ceSopenharmony_ci                    let chartWidth = txtWidth / funName.length;//每个字符长度
466848f512ceSopenharmony_ci                    let number = (w - 6) / chartWidth;//可以显示多少字符
466948f512ceSopenharmony_ci                    if (number >= 4 && number < funName.length - 3) {
467048f512ceSopenharmony_ci                        ctx.fillText(funName.slice(0, number - 3) + '...', _x + 3, rect.y + 13, w - 6)
467148f512ceSopenharmony_ci                    } else if (number >= 4) {
467248f512ceSopenharmony_ci                        ctx.fillText(funName, _x + 3, rect.y + 13, w - 6)
467348f512ceSopenharmony_ci                    }
467448f512ceSopenharmony_ci                    let _rect = {
467548f512ceSopenharmony_ci                        x: _x, y: rect.y, w: w, h: rect.h
467648f512ceSopenharmony_ci                    }
467748f512ceSopenharmony_ci                    c[i].rect = _rect;
467848f512ceSopenharmony_ci
467948f512ceSopenharmony_ci                    if (this.mouseX > _x && this.mouseX < _x + w && this.mouseY > (this.maxDepth - dept) * rect.h && this.mouseY < (this.maxDepth - dept + 1) * rect.h) {
468048f512ceSopenharmony_ci                        if (this.mouseState === 'mouseMove') {
468148f512ceSopenharmony_ci                            //绘制边框矩形
468248f512ceSopenharmony_ci                            // ctx.font = '12px serif';
468348f512ceSopenharmony_ci                            ctx.lineWidth = 2;
468448f512ceSopenharmony_ci                            ctx.strokeStyle = `#000000`;
468548f512ceSopenharmony_ci                            ctx.strokeRect(_x, rect.y + 1, w - 1, rect.h);
468648f512ceSopenharmony_ci                            this.funcNameSpan.textContent = funName
468748f512ceSopenharmony_ci                            this.panel.title = funName
468848f512ceSopenharmony_ci                            this.percentSpan.textContent = this.getStatistics(c[i]);
468948f512ceSopenharmony_ci                        } else {
469048f512ceSopenharmony_ci                            if (this.mouseState === 'mouseUp') {
469148f512ceSopenharmony_ci                                this.mouseState = null;
469248f512ceSopenharmony_ci                                if (!this.compareNodes(this.c, [c[i]])) {
469348f512ceSopenharmony_ci                                    this.c = [c[i]];
469448f512ceSopenharmony_ci                                }
469548f512ceSopenharmony_ci                            }
469648f512ceSopenharmony_ci                        }
469748f512ceSopenharmony_ci                    } else {
469848f512ceSopenharmony_ci                        ctx.lineWidth = 1;
469948f512ceSopenharmony_ci                        // ctx.font = '11px serif';
470048f512ceSopenharmony_ci                    }
470148f512ceSopenharmony_ci                    offset += w;
470248f512ceSopenharmony_ci                    // console.log(_rect,dept,percent,funName);
470348f512ceSopenharmony_ci                    //递归绘制子节点
470448f512ceSopenharmony_ci                    if (c[i].callStack && c[i].callStack.length > 0) {
470548f512ceSopenharmony_ci                        _rect.y = _rect.y - _rect.h
470648f512ceSopenharmony_ci                        this.drawC(c[i].callStack, dept + 1, _rect);
470748f512ceSopenharmony_ci                    }
470848f512ceSopenharmony_ci                }
470948f512ceSopenharmony_ci            }
471048f512ceSopenharmony_ci
471148f512ceSopenharmony_ci            compareNode(na, nb) {
471248f512ceSopenharmony_ci                let res = false;
471348f512ceSopenharmony_ci                if (na.selfEvents === nb.selfEvents && na.subEvents === nb.subEvents && na.symbol === nb.symbol) {
471448f512ceSopenharmony_ci                    res = this.compareNodes(na.callStack || [], nb.callStack || []);
471548f512ceSopenharmony_ci                }
471648f512ceSopenharmony_ci                return res;
471748f512ceSopenharmony_ci            }
471848f512ceSopenharmony_ci
471948f512ceSopenharmony_ci            compareNodes(a, b) {
472048f512ceSopenharmony_ci                let res = false;
472148f512ceSopenharmony_ci                if (a.length === b.length) {
472248f512ceSopenharmony_ci                    if (a.length === 0) {
472348f512ceSopenharmony_ci                        return true;
472448f512ceSopenharmony_ci                    }
472548f512ceSopenharmony_ci                    for (let i = 0; i < a.length; i++) {
472648f512ceSopenharmony_ci                        res = this.compareNode(a[i], b[i])
472748f512ceSopenharmony_ci                    }
472848f512ceSopenharmony_ci                }
472948f512ceSopenharmony_ci                return res;
473048f512ceSopenharmony_ci            }
473148f512ceSopenharmony_ci
473248f512ceSopenharmony_ci            getMaxDepth(nodes) {
473348f512ceSopenharmony_ci                let isArray = Array.isArray(nodes);
473448f512ceSopenharmony_ci                let sumCount;
473548f512ceSopenharmony_ci                if (isArray) {
473648f512ceSopenharmony_ci                    sumCount = nodes.reduce((acc, cur) => acc + cur.subEvents, 0);
473748f512ceSopenharmony_ci                } else {
473848f512ceSopenharmony_ci                    sumCount = nodes.subEvents;
473948f512ceSopenharmony_ci                }
474048f512ceSopenharmony_ci                let width = sumCount * 100.0 / this.sumCount;
474148f512ceSopenharmony_ci                if (width < 0.1) {
474248f512ceSopenharmony_ci                    return 0;
474348f512ceSopenharmony_ci                }
474448f512ceSopenharmony_ci                let children = isArray ? this.splitChildrenForNodes(nodes) : nodes.callStack;
474548f512ceSopenharmony_ci                let childDepth = 0;
474648f512ceSopenharmony_ci                if (children) {
474748f512ceSopenharmony_ci                    for (let child of children) {
474848f512ceSopenharmony_ci                        childDepth = Math.max(childDepth, this.getMaxDepth(child));
474948f512ceSopenharmony_ci                    }
475048f512ceSopenharmony_ci                }
475148f512ceSopenharmony_ci                return childDepth + 1;
475248f512ceSopenharmony_ci            }
475348f512ceSopenharmony_ci
475448f512ceSopenharmony_ci            splitChildrenForNodes(nodes) {
475548f512ceSopenharmony_ci                let map = new Map();
475648f512ceSopenharmony_ci                for (let node of nodes) {
475748f512ceSopenharmony_ci                    for (let child of node.callStack) {
475848f512ceSopenharmony_ci                        let subNodes = map.get(child.symbol);
475948f512ceSopenharmony_ci                        if (subNodes) {
476048f512ceSopenharmony_ci                            subNodes.push(child);
476148f512ceSopenharmony_ci                        } else {
476248f512ceSopenharmony_ci                            map.set(child.symbol, [child]);
476348f512ceSopenharmony_ci                        }
476448f512ceSopenharmony_ci                    }
476548f512ceSopenharmony_ci                }
476648f512ceSopenharmony_ci                let res = [];
476748f512ceSopenharmony_ci                for (let subNodes of map.values()) {
476848f512ceSopenharmony_ci                    res.push(subNodes.length == 1 ? subNodes[0] : subNodes);
476948f512ceSopenharmony_ci                }
477048f512ceSopenharmony_ci                return res;
477148f512ceSopenharmony_ci            }
477248f512ceSopenharmony_ci
477348f512ceSopenharmony_ci            getHeatColor(widthPercentage) {
477448f512ceSopenharmony_ci                return {
477548f512ceSopenharmony_ci                    r: Math.floor(245 + 10 * (1 - widthPercentage * 0.01)),
477648f512ceSopenharmony_ci                    g: Math.floor(110 + 105 * (1 - widthPercentage * 0.01)),
477748f512ceSopenharmony_ci                    b: 100,
477848f512ceSopenharmony_ci                };
477948f512ceSopenharmony_ci            }
478048f512ceSopenharmony_ci
478148f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
478248f512ceSopenharmony_ci            }
478348f512ceSopenharmony_ci        }
478448f512ceSopenharmony_ci        if (!customElements.get('app-normal-flame')) {
478548f512ceSopenharmony_ci            customElements.define('app-normal-flame', AppNormalFlame);
478648f512ceSopenharmony_ci        }
478748f512ceSopenharmony_ci
478848f512ceSopenharmony_ci        class AppFlameGraph extends HTMLElement {
478948f512ceSopenharmony_ci            static get observedAttributes() {
479048f512ceSopenharmony_ci                return ['color', 'size']
479148f512ceSopenharmony_ci            }
479248f512ceSopenharmony_ci
479348f512ceSopenharmony_ci            constructor() {
479448f512ceSopenharmony_ci                super();
479548f512ceSopenharmony_ci                const shadowRoot = this.attachShadow({ mode: 'open' });
479648f512ceSopenharmony_ci                shadowRoot.innerHTML = `
479748f512ceSopenharmony_ci        <style>
479848f512ceSopenharmony_ci        :host{
479948f512ceSopenharmony_ci            font-size:inherit;
480048f512ceSopenharmony_ci            display:inline-flex;
480148f512ceSopenharmony_ci            align-items: center;
480248f512ceSopenharmony_ci            justify-content:center;
480348f512ceSopenharmony_ci            width: 100%;
480448f512ceSopenharmony_ci        }
480548f512ceSopenharmony_ci        </style>
480648f512ceSopenharmony_ci        <div style="width: 100%;display: flex;flex-direction: column">
480748f512ceSopenharmony_ci            <lit-select id="typeSelect" default-value="1" mode="single" style="width:40vw;margin-bottom: 10px;align-self: flex-end">
480848f512ceSopenharmony_ci                    <lit-select-option value="1">Show percentage of event count relative to the current thread</lit-select-option>
480948f512ceSopenharmony_ci                    <lit-select-option value="2">Show percentage of event count relative to the current process</lit-select-option>
481048f512ceSopenharmony_ci                    <lit-select-option value="3">Show percentage of event count relative to all process</lit-select-option>
481148f512ceSopenharmony_ci                    <lit-select-option value="4">show event count</lit-select-option>
481248f512ceSopenharmony_ci                    <lit-select-option value="5">show event count in milliseconds</lit-select-option>
481348f512ceSopenharmony_ci            </lit-select>
481448f512ceSopenharmony_ci            <div id="panel" style="width: 100%"></div>
481548f512ceSopenharmony_ci        </div>
481648f512ceSopenharmony_ci        <slot></slot>
481748f512ceSopenharmony_ci        `
481848f512ceSopenharmony_ci            }
481948f512ceSopenharmony_ci
482048f512ceSopenharmony_ci            get dataRefer() {
482148f512ceSopenharmony_ci                return this._dataRefer;
482248f512ceSopenharmony_ci            }
482348f512ceSopenharmony_ci
482448f512ceSopenharmony_ci            //设置比对的数据，【这里是json文件中加载的数据 需要从 recordSampleInfo[index] 取进程集合 线程集合】
482548f512ceSopenharmony_ci            set dataRefer(val) {
482648f512ceSopenharmony_ci                this._dataRefer = val;
482748f512ceSopenharmony_ci            }
482848f512ceSopenharmony_ci
482948f512ceSopenharmony_ci            get data() {
483048f512ceSopenharmony_ci                return this._json || null;
483148f512ceSopenharmony_ci            }
483248f512ceSopenharmony_ci
483348f512ceSopenharmony_ci            set data(json) {
483448f512ceSopenharmony_ci                //如果已经给过值，不重新刷新
483548f512ceSopenharmony_ci                if (this.isFinished) {
483648f512ceSopenharmony_ci                    return;
483748f512ceSopenharmony_ci                }
483848f512ceSopenharmony_ci                this._json = json;
483948f512ceSopenharmony_ci                this.panel = this.shadowRoot.getElementById('panel');
484048f512ceSopenharmony_ci                this.panel.innerHTML = '';
484148f512ceSopenharmony_ci                let processes = json.recordSampleInfo[window.eventIndex].processes;
484248f512ceSopenharmony_ci                let processesRefer;
484348f512ceSopenharmony_ci                if (this.dataRefer) {
484448f512ceSopenharmony_ci                    processesRefer = this.dataRefer.recordSampleInfo[window.eventIndex].processes;
484548f512ceSopenharmony_ci                }
484648f512ceSopenharmony_ci                processes.slice(0).forEach(it => {
484748f512ceSopenharmony_ci                    let itRefer
484848f512ceSopenharmony_ci                    if (processesRefer) {
484948f512ceSopenharmony_ci                        itRefer = processesRefer.find(element => element.pid == it.pid);//找到要比较的进程
485048f512ceSopenharmony_ci                    }
485148f512ceSopenharmony_ci                    //slice(0,1) 控制只绘制一个线程数据，用作测试
485248f512ceSopenharmony_ci                    it.threads.slice(0).forEach(th => {
485348f512ceSopenharmony_ci                        let pid = it.pid;
485448f512ceSopenharmony_ci                        let processName = json.processNameMap[it.pid];
485548f512ceSopenharmony_ci                        let tid = th.tid;
485648f512ceSopenharmony_ci                        let threadName = json.threadNameMap[th.tid];
485748f512ceSopenharmony_ci                        let eventCount = th.eventCount;
485848f512ceSopenharmony_ci                        let sampleCount = th.sampleCount;
485948f512ceSopenharmony_ci                        let g = th.CallOrder;
486048f512ceSopenharmony_ci                        if (this.dataRefer) {
486148f512ceSopenharmony_ci                            console.log("create diff")
486248f512ceSopenharmony_ci                            let thRefer;
486348f512ceSopenharmony_ci                            if (itRefer) {
486448f512ceSopenharmony_ci                                thRefer = itRefer.threads.find(e => e.tid == th.tid);//找到要比较的线程
486548f512ceSopenharmony_ci                            }
486648f512ceSopenharmony_ci                            let chart = document.createElement('app-diff-flame');
486748f512ceSopenharmony_ci                            chart.style.width = '100%'
486848f512ceSopenharmony_ci                            chart.style.height = 'auto';
486948f512ceSopenharmony_ci                            chart.style.display = 'flex'
487048f512ceSopenharmony_ci                            this.panel.appendChild(chart);
487148f512ceSopenharmony_ci                            chart.threadRefer = thRefer;//注意 app-flame-graph中的dataRefer中保存的是加载的json完整数据集，app-chart-flame中的dataRefer缓存的是对比的线程数据
487248f512ceSopenharmony_ci                            chart.data = {
487348f512ceSopenharmony_ci                                json: json,//显示的json数据集【直接从json文件读取的完整json结构】
487448f512ceSopenharmony_ci                                jsonRefer: this.dataRefer,//需要把完整的对比数据也传入过去，因为只传入thread对比数据需要 完整数据中的eventCount去计算百分比，计算宽度，然后对比原始宽度多还是少
487548f512ceSopenharmony_ci                                type: this.type || 1,
487648f512ceSopenharmony_ci                                pid, processName, tid, threadName, eventCount, sampleCount, CallOrder: g
487748f512ceSopenharmony_ci                            }
487848f512ceSopenharmony_ci                        } else {
487948f512ceSopenharmony_ci                            console.log("create normal")
488048f512ceSopenharmony_ci                            let chart = document.createElement('app-normal-flame');
488148f512ceSopenharmony_ci                            chart.style.width = '100%'
488248f512ceSopenharmony_ci                            chart.style.height = 'auto';
488348f512ceSopenharmony_ci                            chart.style.display = 'flex'
488448f512ceSopenharmony_ci                            this.panel.appendChild(chart);
488548f512ceSopenharmony_ci                            chart.data = {
488648f512ceSopenharmony_ci                                json: json,
488748f512ceSopenharmony_ci                                type: this.type || 1,
488848f512ceSopenharmony_ci                                pid, processName, tid, threadName, eventCount, sampleCount, CallOrder: g
488948f512ceSopenharmony_ci                            }
489048f512ceSopenharmony_ci                        }
489148f512ceSopenharmony_ci                        // console.log(pid,processName,tid,threadName,sampleCount,g);
489248f512ceSopenharmony_ci                    })
489348f512ceSopenharmony_ci                })
489448f512ceSopenharmony_ci                this.isFinished = true;
489548f512ceSopenharmony_ci            }
489648f512ceSopenharmony_ci
489748f512ceSopenharmony_ci            connectedCallback() {
489848f512ceSopenharmony_ci                this.isFinished = false;
489948f512ceSopenharmony_ci                this.panel = this.shadowRoot.getElementById('panel');
490048f512ceSopenharmony_ci                this.typeSelect = this.shadowRoot.getElementById('typeSelect');
490148f512ceSopenharmony_ci                this.typeSelect.onchange = ev => {
490248f512ceSopenharmony_ci                    this.type = parseInt(ev.detail.value);
490348f512ceSopenharmony_ci                    this.isFinished = false;
490448f512ceSopenharmony_ci                    this.data = this.data; //切换分类后刷新
490548f512ceSopenharmony_ci                }
490648f512ceSopenharmony_ci            }
490748f512ceSopenharmony_ci
490848f512ceSopenharmony_ci            attributeChangedCallback(name, oldValue, newValue) {
490948f512ceSopenharmony_ci                if (name == 'color' && this.loading) {
491048f512ceSopenharmony_ci                    this.loading.style.color = newValue;
491148f512ceSopenharmony_ci                }
491248f512ceSopenharmony_ci                if (name == 'size' && this.loading) {
491348f512ceSopenharmony_ci                    this.loading.style.fontSize = newValue + 'px';
491448f512ceSopenharmony_ci                }
491548f512ceSopenharmony_ci            }
491648f512ceSopenharmony_ci        }
491748f512ceSopenharmony_ci        if (!customElements.get('app-flame-graph')) {
491848f512ceSopenharmony_ci            customElements.define('app-flame-graph', AppFlameGraph);
491948f512ceSopenharmony_ci        }
492048f512ceSopenharmony_ci
492148f512ceSopenharmony_ci        (function (values) {
492248f512ceSopenharmony_ci
492348f512ceSopenharmony_ci            function createPromise(callback) {
492448f512ceSopenharmony_ci                if (callback) {
492548f512ceSopenharmony_ci                    return new Promise((resolve, _) => callback(resolve));
492648f512ceSopenharmony_ci                }
492748f512ceSopenharmony_ci                return new Promise((resolve, _) => resolve());
492848f512ceSopenharmony_ci            }
492948f512ceSopenharmony_ci
493048f512ceSopenharmony_ci            function initGlobalObjects1() {
493148f512ceSopenharmony_ci                let recordData = document.querySelector('#record_data_diff_1').textContent;
493248f512ceSopenharmony_ci                if (recordData.trim().length > 0) {
493348f512ceSopenharmony_ci                    return new Promise((resolve, reject) => {
493448f512ceSopenharmony_ci                        resolve(JSON.parse(recordData));
493548f512ceSopenharmony_ci                    })
493648f512ceSopenharmony_ci                } else {
493748f512ceSopenharmony_ci                    return fetch('data-diff-1.json').then(response => response.json())
493848f512ceSopenharmony_ci                }
493948f512ceSopenharmony_ci            }
494048f512ceSopenharmony_ci            function initGlobalObjects2() {
494148f512ceSopenharmony_ci                let recordData = document.querySelector('#record_data_diff_2').textContent;
494248f512ceSopenharmony_ci                if (recordData.trim().length > 0) {
494348f512ceSopenharmony_ci                    return new Promise((resolve, reject) => {
494448f512ceSopenharmony_ci                        resolve(JSON.parse(recordData));
494548f512ceSopenharmony_ci                    })
494648f512ceSopenharmony_ci                } else {
494748f512ceSopenharmony_ci                    return fetch('data-diff-2.json').then(response => response.json())
494848f512ceSopenharmony_ci                }
494948f512ceSopenharmony_ci            }
495048f512ceSopenharmony_ci
495148f512ceSopenharmony_ci            function waitDocumentReady() {
495248f512ceSopenharmony_ci                return createPromise((resolve) => document.addEventListener("DOMContentLoaded", resolve));
495348f512ceSopenharmony_ci            }
495448f512ceSopenharmony_ci
495548f512ceSopenharmony_ci            createPromise()
495648f512ceSopenharmony_ci                .then(waitDocumentReady)
495748f512ceSopenharmony_ci                .then(() => Promise.all([initGlobalObjects1(), initGlobalObjects2()]))
495848f512ceSopenharmony_ci                .then((array) => {
495948f512ceSopenharmony_ci                    let j1 = array[0]
496048f512ceSopenharmony_ci                    let j2 = array[1]
496148f512ceSopenharmony_ci                    // window.data = j1; // 没有用到function 模块 不用保存
496248f512ceSopenharmony_ci                    let eventSelector1 = document.querySelector('#events1')
496348f512ceSopenharmony_ci                    let changeBaseBt = document.querySelector('#changeBaseBt')
496448f512ceSopenharmony_ci                    if (j1.recordSampleInfo && j1.recordSampleInfo.length > 0) {
496548f512ceSopenharmony_ci                        let events = [];
496648f512ceSopenharmony_ci                        j1.recordSampleInfo.forEach((e, index) => {
496748f512ceSopenharmony_ci                            events.push({ key: index + '', val: e.eventConfigName })
496848f512ceSopenharmony_ci                        })
496948f512ceSopenharmony_ci                        eventSelector1.dataSource = events;
497048f512ceSopenharmony_ci                        window.eventIndex = 0;
497148f512ceSopenharmony_ci                    }
497248f512ceSopenharmony_ci                    let loading = document.querySelector('#loading');
497348f512ceSopenharmony_ci                    let tabs = document.querySelector('#tabs')
497448f512ceSopenharmony_ci                    let diffFlame = document.querySelector('#diff-flame');
497548f512ceSopenharmony_ci                    let flame1 = document.querySelector('#flame-1');
497648f512ceSopenharmony_ci                    let flame2 = document.querySelector('#flame-2');
497748f512ceSopenharmony_ci                    let legend1 = document.querySelector('#legend-1');
497848f512ceSopenharmony_ci                    let legend2 = document.querySelector('#legend-2');
497948f512ceSopenharmony_ci                    tabs.onTabClick = (e) => {
498048f512ceSopenharmony_ci                        if (e.detail.key == 1) {
498148f512ceSopenharmony_ci                            diffFlame.isFinished = false;
498248f512ceSopenharmony_ci                            diffFlame.dataRefer = window.isReserved ? j1 : j2; //对换显示数据和对比数据
498348f512ceSopenharmony_ci                            diffFlame.data = window.isReserved ? j2 : j1;//将 对比的数据当作显示数据
498448f512ceSopenharmony_ci                        } else if (e.detail.key == 2) {
498548f512ceSopenharmony_ci                            flame1.isFinished = false;
498648f512ceSopenharmony_ci                            flame1.data = j1;
498748f512ceSopenharmony_ci                        } else {
498848f512ceSopenharmony_ci                            flame2.isFinished = false;
498948f512ceSopenharmony_ci                            flame2.data = j2;
499048f512ceSopenharmony_ci                        }
499148f512ceSopenharmony_ci                    }
499248f512ceSopenharmony_ci                    //火焰图
499348f512ceSopenharmony_ci                    window.isReserved = false; //定义变量。表示是否反转基本画图数据，默认为false ,表示以 data-diff-1.json 数据图形数据，data-diff-2.json 为比较数据
499448f512ceSopenharmony_ci                    diffFlame.isFinished = false;
499548f512ceSopenharmony_ci                    diffFlame.dataRefer = j2; //设置需要对比的数据集，flame.data赋值会引起绘制，所以这行要先设置对比数据
499648f512ceSopenharmony_ci                    diffFlame.data = j1;//要绘制火焰图需要显示的数据
499748f512ceSopenharmony_ci                    eventSelector1.addEventListener('change', (e) => {
499848f512ceSopenharmony_ci                        loading.style.display = 'flex'
499948f512ceSopenharmony_ci                        window.eventIndex = parseInt(e.detail.value);//改变界面最上面的select 缓存的index刷新 绘制的数据需要这个index去总数据中取
500048f512ceSopenharmony_ci                        diffFlame.isFinished = false;
500148f512ceSopenharmony_ci                        diffFlame.dataRefer = j2;
500248f512ceSopenharmony_ci                        diffFlame.data = j1;//这里触发了界面更新
500348f512ceSopenharmony_ci                        flame1.isFinished = false;
500448f512ceSopenharmony_ci                        flame1.data = j1;
500548f512ceSopenharmony_ci                        flame2.isFinished = false;
500648f512ceSopenharmony_ci                        flame2.data = j2;
500748f512ceSopenharmony_ci                        loading.style.display = 'none'
500848f512ceSopenharmony_ci                    })
500948f512ceSopenharmony_ci                    changeBaseBt.addEventListener('click', (e) => {
501048f512ceSopenharmony_ci                        window.isReserved = !window.isReserved
501148f512ceSopenharmony_ci                        changeBaseBt.setAttribute('enable', 'false');
501248f512ceSopenharmony_ci                        loading.style.display = 'flex'
501348f512ceSopenharmony_ci                        legend1.textContent = window.isReserved ? "diff-data-2" : "diff-data-1";
501448f512ceSopenharmony_ci                        legend2.textContent = window.isReserved ? "diff-data-1" : "diff-data-2";
501548f512ceSopenharmony_ci                        diffFlame.isFinished = false;
501648f512ceSopenharmony_ci                        diffFlame.dataRefer = window.isReserved ? j1 : j2; //对换显示数据和对比数据
501748f512ceSopenharmony_ci                        diffFlame.data = window.isReserved ? j2 : j1;//将 对比的数据当作显示数据
501848f512ceSopenharmony_ci                        loading.style.display = 'none'
501948f512ceSopenharmony_ci                        changeBaseBt.setAttribute('enable', 'true');
502048f512ceSopenharmony_ci                    })
502148f512ceSopenharmony_ci                })
502248f512ceSopenharmony_ci        }())
502348f512ceSopenharmony_ci    </script>
502448f512ceSopenharmony_ci    <div style="width: 100%;height: 100%">
502548f512ceSopenharmony_ci        <div style="width: 100%;display: flex;flex-direction: column;align-items: center">
502648f512ceSopenharmony_ci            <lit-loading id="loading" size="32" style="display: none"></lit-loading>
502748f512ceSopenharmony_ci        </div>
502848f512ceSopenharmony_ci        <div style="display: flex;flex-direction: row;align-items: center;padding: 15px;justify-content: space-between">
502948f512ceSopenharmony_ci            <div>
503048f512ceSopenharmony_ci                <span style="font-weight: bold;margin-right: 10px">Event Type :</span>
503148f512ceSopenharmony_ci                <lit-select id="events1" default-value="0" style="width: 400px"></lit-select>
503248f512ceSopenharmony_ci            </div>
503348f512ceSopenharmony_ci        </div>
503448f512ceSopenharmony_ci        <lit-tabs id='tabs' position="top-left" activekey="1" mode="flat">
503548f512ceSopenharmony_ci            <lit-tabpane id="pane1" tab="diff-flame" key="1">
503648f512ceSopenharmony_ci                <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
503748f512ceSopenharmony_ci                    <div style="display: flex;flex-direction: row;align-items: center">
503848f512ceSopenharmony_ci                        <div style="display: flex;flex-direction: row;align-items: center">
503948f512ceSopenharmony_ci                            <span>图形数据: </span>
504048f512ceSopenharmony_ci                            <span id="legend-1">data-diff-1</span>
504148f512ceSopenharmony_ci                        </div>
504248f512ceSopenharmony_ci                        <div style="display: flex;flex-direction: row;margin-left: 20px;align-items: center">
504348f512ceSopenharmony_ci                            <span>比较数据: </span>
504448f512ceSopenharmony_ci                            <span id="legend-2">data-diff-2</span>
504548f512ceSopenharmony_ci                        </div>
504648f512ceSopenharmony_ci                        <div id="changeBaseBt" style="background-color: coral;color: white;margin-left: 40px;
504748f512ceSopenharmony_ci                padding: 7px 15px 7px 15px;border-radius: 5px;cursor: pointer">change</div>
504848f512ceSopenharmony_ci                    </div>
504948f512ceSopenharmony_ci                    <div style="display: flex;flex-direction: row;align-items: center">
505048f512ceSopenharmony_ci                        <div style="display: flex;flex-direction: row;align-items: center">
505148f512ceSopenharmony_ci                            <span style="width: 10px;height: 10px;background-color:#2894FF;margin-right: 10px"></span>
505248f512ceSopenharmony_ci                            <span>函数执行时间相比小于（颜色越深则差值越大）</span>
505348f512ceSopenharmony_ci                        </div>
505448f512ceSopenharmony_ci                        <div style="display: flex;flex-direction: row;align-items: center;margin-left: 30px">
505548f512ceSopenharmony_ci                            <span style="width: 10px;height: 10px;background-color:#FF2D2D;margin-right: 10px"></span>
505648f512ceSopenharmony_ci                            <span>函数执行时间相比大于（颜色越深则差值越大）</span>
505748f512ceSopenharmony_ci                        </div>
505848f512ceSopenharmony_ci                    </div>
505948f512ceSopenharmony_ci                </div>
506048f512ceSopenharmony_ci                <div style="padding: 20px">
506148f512ceSopenharmony_ci                    <app-flame-graph id="diff-flame"></app-flame-graph>
506248f512ceSopenharmony_ci                </div>
506348f512ceSopenharmony_ci            </lit-tabpane>
506448f512ceSopenharmony_ci            <lit-tabpane id="pane2" tab="data-1-flame" key="2">
506548f512ceSopenharmony_ci                <app-flame-graph id="flame-1"></app-flame-graph>
506648f512ceSopenharmony_ci            </lit-tabpane>
506748f512ceSopenharmony_ci            <lit-tabpane id="pane3" tab="data-2-flame" key="3">
506848f512ceSopenharmony_ci                <app-flame-graph id="flame-2"></app-flame-graph>
506948f512ceSopenharmony_ci            </lit-tabpane>
507048f512ceSopenharmony_ci        </lit-tabs>
507148f512ceSopenharmony_ci    </div>
5072