From 525d6af888359c8d9f6d7e6212ae82c1baafd9e8 Mon Sep 17 00:00:00 2001
From: buvta <12312540+buvta@users.noreply.github.com>
Date: Sat, 31 Oct 2020 18:33:08 +0800
Subject: [PATCH] =?UTF-8?q?Play=E6=94=AF=E6=8C=81=E9=A2=91=E9=81=93?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Film.vue |  3 +-
 src/components/Play.vue | 72 +++++++++++++++++++++++++++++++++++++++--
 2 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/src/components/Film.vue b/src/components/Film.vue
index eaa66a2..e0c19d3 100644
--- a/src/components/Film.vue
+++ b/src/components/Film.vue
@@ -619,7 +619,6 @@ export default {
       }
     },
     querySearch (queryString, cb) {
-      if (this.searchList.length === 0) return
       var searchList = this.searchList.slice(0, -1)
       var results = queryString ? searchList.filter(this.createFilter(queryString)) : this.searchList
       // 调用 callback 返回建议列表的数据
@@ -748,7 +747,7 @@ export default {
         if (this.searchGroup === undefined) setting.find().then(res => { this.searchGroup = res.searchGroup })
       })
     },
-    getSearchViewMode() {
+    getSearchViewMode () {
       setting.find().then(res => {
         this.searchViewMode = res.searchViewMode === undefined ? 'picture' : res.searchViewMode
       })
diff --git a/src/components/Play.vue b/src/components/Play.vue
index 2cf6152..3a28207 100644
--- a/src/components/Play.vue
+++ b/src/components/Play.vue
@@ -192,10 +192,23 @@
           </span>
         </div>
         <div class="list-body zy-scroll" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
-          <el-tree
+          <el-autocomplete
+            clearable
+            size="small"
+            v-model.trim="searchTxt"
+            value-key="keywords"
+            :fetch-suggestions="querySearch"
+            :popper-append-to-body="false"
+            popper-class="popper"
+            placeholder="搜索"
+            @keyup.enter.native="searchAndRecord">
+           <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-autocomplete>
+          <el-tree ref="channelTree"
             :data="channelListForShow"
             :props="defaultProps"
             accordion
+            :filter-node-method="filterNode"
             @node-click="handleNodeClick">
           </el-tree>
         </div>
@@ -205,7 +218,7 @@
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import { star, history, setting, shortcut, mini, channelList, sites } from '../lib/dexie'
+import { star, history, setting, shortcut, mini, channelList, iptvSearch, sites } from '../lib/dexie'
 import zy from '../lib/site/tools'
 import Player from 'xgplayer'
 import HlsJsPlayer from 'xgplayer-hls.js'
@@ -306,6 +319,8 @@ export default {
       isStar: false,
       isTop: false,
       mini: {},
+      searchTxt: '',
+      searchRecordList: [],
       channelList: [],
       channelListForShow: [],
       channelListShow: false,
@@ -393,16 +408,67 @@ export default {
       } else {
         span.innerText = `${this.name}`
       }
+    },
+    searchTxt () {
+      if (this.searchTxt === '清除历史记录...') {
+        this.clearSearchRecords()
+        this.searchTxt = ''
+      }
+      this.searchEvent()
     }
   },
   methods: {
     ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
     handleNodeClick (node) {
-      console.log(node)
       if (node.channel) {
         this.playChannel(node.channel)
       }
     },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.toLowerCase().includes(value.toLowerCase())
+    },
+    querySearch (queryString, cb) {
+      var searchRecordList = this.searchRecordList.slice(0, -1)
+      var results = queryString ? searchRecordList.filter(this.createFilter(queryString)) : this.searchRecordList
+      // 调用 callback 返回建议列表的数据
+      console.log(results)
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (item) => {
+        return (item.keywords.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    getSearchRecordList () {
+      iptvSearch.all().then(res => {
+        this.searchRecordList = res.reverse()
+        this.searchRecordList.push({ id: this.searchRecordList.length + 1, keywords: '清除历史记录...' })
+      })
+    },
+    addSearchRecord () {
+      const wd = this.searchTxt
+      if (wd) {
+        iptvSearch.find({ keywords: wd }).then(res => {
+          if (!res) {
+            iptvSearch.add({ keywords: wd })
+          }
+          this.getSearchRecordList()
+        })
+      }
+    },
+    clearSearchRecords () {
+      iptvSearch.clear().then(res => {
+        this.getSearchRecordList()
+      })
+    },
+    searchEvent () {
+      this.$refs.channelTree.filter(this.searchTxt)
+    },
+    searchAndRecord () {
+      this.addSearchRecord()
+      this.searchEvent()
+    },
     async getUrls () {
       if (this.video.key === '') {
         return false