From 76d3800c557608d0bf7e38d5b67618f2889fed04 Mon Sep 17 00:00:00 2001
From: duanzhijiang <duanzhijiang@kylinos.cn>
Date: Thu, 1 Sep 2022 20:50:16 +0800
Subject: [PATCH] =?UTF-8?q?TASK:=20#105399=20=E5=AE=9E=E7=8E=B0=E6=89=8B?=
 =?UTF-8?q?=E6=8C=87=E6=BF=80=E6=B4=BBswitch=E5=85=A8=E5=B1=8F=E8=BF=9E?=
 =?UTF-8?q?=E7=BB=AD=E6=BB=91=E5=8A=A8=E8=A7=A6=E5=8F=91=E5=BC=80=E5=85=B3?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/switch/switch-styles.ts | 52 ++++++++++++++++++++++++++
 src/components/switch/switch.ts        | 47 ++++++++++++++++++++---
 2 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/src/components/switch/switch-styles.ts b/src/components/switch/switch-styles.ts
index f5a4390..8baa25c 100644
--- a/src/components/switch/switch-styles.ts
+++ b/src/components/switch/switch-styles.ts
@@ -75,6 +75,17 @@ export const sharedStyles: CSSResult = css`
     /*checkbox选中时按钮的样式*/
     left: 18px;
   }
+  :host([size='small']) .iconFalse {
+    left: 24px;
+    top: 6px;
+    width: 6px;
+    height: 6px;
+  }
+  :host([size='small']) .iconTrue {
+    left: 11px;
+    top: 6px;
+    height: 7px;
+  }
 
   /*Large*/
   :host([size='large']) label {
@@ -92,6 +103,18 @@ export const sharedStyles: CSSResult = css`
     left: 26px;
   }
 
+  :host([size='large']) .iconFalse {
+    left: 34px;
+    top: 8px;
+    width: 9px;
+    height: 9px;
+  }
+  :host([size='large']) .iconTrue {
+    top: 9px;
+    height: 9px;
+    left: 14px;
+  }
+
   /*ExtraLarge*/
   :host([size='extralarge']) label {
     width: 62px;
@@ -107,4 +130,33 @@ export const sharedStyles: CSSResult = css`
     /*checkbox选中时按钮的样式*/
     left: 30px;
   }
+  :host([size='extralarge']) .iconFalse {
+    left: 39px;
+    top: 9px;
+    width: 11px;
+    height: 11px;
+  }
+  :host([size='extralarge']) .iconTrue {
+    top: 10px;
+    height: 10px;
+    left: 16px;
+  }
+
+  .iconFalse {
+    position: absolute;
+    left: 29px;
+    top: 7px;
+    width: 8px;
+    height: 8px;
+    background-color: #e9e9e9;
+    border-radius: 50%;
+    border: 1px solid #b1b1b1;
+  }
+  .iconTrue {
+    position: absolute;
+    left: 13px;
+    top: 7px;
+    height: 8px;
+    border-left: 1px solid #fff;
+  }
 `
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index 58e6ded..d4881e4 100755
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -1,6 +1,7 @@
 import {html, LitElement, CSSResultArray} from 'lit'
-import {customElement, property} from 'lit/decorators.js'
+import {customElement, property, query} from 'lit/decorators.js'
 import {sharedStyles} from './switch-styles'
+// import {classMap} from 'lit/directives/class-map.js'
 
 @customElement('star-switch')
 export class StarSwitch extends LitElement {
@@ -9,32 +10,66 @@ export class StarSwitch extends LitElement {
     return [sharedStyles]
   }
 
-  // @property({type: String}) switchtype = ''
+  @property({type: Number}) right = 0
+  @property({type: Number}) left = 0
+  @property({type: Number}) switchx = 0
+  @property({type: Number}) x = 0
   @property({type: Boolean}) disabled = false
   @property({type: Boolean}) checked = false
+  @property({type: String}) switchicon = ''
   @property({type: String})
-  get switchColor() {
+  get switchcolor() {
     return this._backgoundColor
   }
-
-  set switchColor(value: string) {
+  set switchcolor(value: string) {
     this.style.setProperty('--background-color', value)
     this._backgoundColor = value
   }
 
+  @query('#switchBall') switchBall!: HTMLLabelElement
+  @query('#base') base!: HTMLInputElement
+
   render() {
     return html`
       <input
         ?disabled="${this.disabled}"
         ?checked="${this.checked}"
+        @change=${(evt: Event) =>
+          (this.checked = (evt.target as HTMLInputElement).checked)}
         type="checkbox"
         class="base"
         id="base"
         switchcolor="#0265dc"
       />
-      <label for="base"></label>
+      <label id="switchBall" for="base" @touchmove=${this.selectTouchMove}>
+        <!-- <div class="${this.checked ? 'iconTrue' : 'iconFalse '}"></div> -->
+      </label>
     `
   }
+  selectTouchMove(evt: TouchEvent) {
+    if (!this.disabled) {
+      let right = this.switchBall.getBoundingClientRect().right
+      let left = this.switchBall.getBoundingClientRect().left
+      let switchx = (right - left) / 2 + left
+      let x = evt.touches[0].clientX
+      if (x >= switchx) {
+        this.base.setAttribute('checked', '')
+      } else {
+        this.base.removeAttribute('checked')
+      }
+    }
+  }
+  // private touchMove(evt: TouchEvent) {
+  //   let right = this.switchBall.getBoundingClientRect().right
+  //   let left = this.switchBall.getBoundingClientRect().left
+  //   let switchx = (right - left) / 2 + left
+  //   let x = evt.touches[0].clientX
+  //   if (x >= switchx) {
+  //     this.base.setAttribute('checked', '')
+  //   } else {
+  //     this.base.removeAttribute('checked')
+  //   }
+  // }
 }
 
 declare global {