From eb3a9bc4a3aae1a362a772274dffc3eaf156840f Mon Sep 17 00:00:00 2001
From: JiwenBai <jiwen.bai@tusimple.ai>
Date: Mon, 12 Aug 2019 20:21:28 +0800
Subject: [PATCH] fixed(advance-table-sorticon): click icon key is not
 correcting

---
 package.json                                  |  2 +-
 .../common/AdvanceTable/sortIcon/index.vue    | 61 +++++++++++--------
 packages/common/AdvanceTable/src/main.vue     |  8 +--
 3 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index f6e349e9f..96aee823b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.2.88",
+  "version": "0.2.89",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/packages/common/AdvanceTable/sortIcon/index.vue b/packages/common/AdvanceTable/sortIcon/index.vue
index ad5c2a8bc..eb7424baa 100644
--- a/packages/common/AdvanceTable/sortIcon/index.vue
+++ b/packages/common/AdvanceTable/sortIcon/index.vue
@@ -4,7 +4,7 @@
       type="md-arrow-dropdown"
       :style="{
         fontSize: fontSize,
-        opacity: downOpacity,
+        opacity: opacitys.downOpacity,
         transform: 'scale(0.8)'
       }"
       @click.native="changeDownSort()"
@@ -13,7 +13,7 @@
       type="md-arrow-dropup"
       :style="{
         fontSize: fontSize,
-        opacity: upOpacity,
+        opacity: opacitys.upOpacity,
         transform: 'scale(0.8)'
       }"
       @click.native="changeUpSort()"
@@ -22,6 +22,23 @@
 </template>
 <script>
 // refer to https://github.com/TuSimple/infra-ecos-webui/blob/develop/src/components/SortIcon.vue
+const computeOpacity = (val) => {
+  let self = {}
+  switch (val) {
+    case 0:
+      self.upOpacity = 0.3
+      self.downOpacity = 0.3
+      break
+    case 1:
+      self.upOpacity = 1
+      self.downOpacity = 0.3
+      break
+    case -1:
+      self.upOpacity = 0.3
+      self.downOpacity = 1
+  }
+  return self
+}
 export default {
   name: 'SortIcon',
   props: {
@@ -40,12 +57,20 @@ export default {
       downOpacity: 0.3
     }
   },
-  watch: {
-    value (val) {
-      if (val !== null) { this.setSort(val) }
+  computed: {
+    opacitys () {
+      let val = this.value
+      return computeOpacity(val)
     }
   },
+  // watch: {
+  //   value (val) {
+  //     if (val !== null) { this.setSort(val) }
+  //   }
+  // },
   mounted () {
+    console.log('TCL: mounted -> this.value', this.value)
+
     if (this.value !== 0) {
       this.setSort(this.value)
     }
@@ -60,7 +85,7 @@ export default {
       } else {
         v = -1
       }
-      this.$emit('input', v)
+      this.setSort(v)
     },
     changeUpSort () {
       let v = this.value
@@ -70,28 +95,14 @@ export default {
       } else {
         v = 1
       }
-      this.$emit('input', v)
+      this.setSort(v)
     },
     setSort (val) {
-      this.$emit('onSortTypeChange', this.value)
+      this.$emit('input', val)
 
-      this.changeOpacity(val)
-    },
-    changeOpacity (val) {
-      const self = this
-      switch (val) {
-        case 0:
-          self.upOpacity = 0.3
-          self.downOpacity = 0.3
-          break
-        case 1:
-          self.upOpacity = 1
-          self.downOpacity = 0.3
-          break
-        case -1:
-          self.upOpacity = 0.3
-          self.downOpacity = 1
-      }
+      this.$emit('onSortTypeChange', val)
+
+      // this.changeOpacity(val)
     }
   }
 }
diff --git a/packages/common/AdvanceTable/src/main.vue b/packages/common/AdvanceTable/src/main.vue
index 350e0f215..c1d749e2e 100644
--- a/packages/common/AdvanceTable/src/main.vue
+++ b/packages/common/AdvanceTable/src/main.vue
@@ -11,7 +11,7 @@
       </div>
       <div
         class="n-advance-table__operation__right"
-        :style="search?'margin-bottom: 18px;':''"
+        :style="search ? 'margin-bottom: 18px;' : ''"
       >
         <slot name="table-operation" />
         <div
@@ -115,7 +115,7 @@
             v-for="column in columns"
             :key="column.key"
             :style="computeAlign(column)"
-            :class="computeTdClass(column,rowData)"
+            :class="computeTdClass(column, rowData)"
           >
             <row
               :index="i"
@@ -139,8 +139,8 @@
         <div style="width:100%;display:table-caption;">
           <Loading
             style="margin-top:20px;"
-            :circle="{time:'1.5s'}"
-            :svg="{height: '150px', width: '250px'}"
+            :circle="{ time: '1.5s' }"
+            :svg="{ height: '150px', width: '250px' }"
           />
         </div>
       </template>