<template>
    <div class="keyword_wrap">
		<el-dialog
		  title="关键词推荐"
		  :visible.sync="dialogVisible"
		  width="800"
          class="keyword_dialog"
		  append-to-body
		  :lock-scroll="false"

		  >
          <div class="keyword_label">请搜索或采用关键词种类</div>
          <div v-if="dialogVisible">
              <el-select @change="changeKeyword" v-model="keyword" clearable class="keyword_select" popper-class="keyword_dropdown" filterable :filter-method="filterMethod" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.type"
                    :value="item.content">
                    <span v-html="item.newType||item.type"></span>
                    </el-option>
              </el-select>
              <div>
                <div class="keyword_name" >
                    <el-scrollbar style="height:256px">
                        <ul>
                            <li v-for="(item,index) in keywordList" :class="activeIndex == index?'active_li':''" :key="index" @click="keywordClick(index)">{{item.type}}</li>
                        </ul>
                    </el-scrollbar>
                </div>
                <div class="keyword_con">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 8}"
                        placeholder="请输入内容"
                        v-model="content">
                    </el-input>
                    <span class="keyword_con_label">
                       <!-- <img class="keyword_con_img" src="@/assets/img/performance/tip.png" alt=""> -->
                        关键词可编辑或删减</span>
                    <div class="keyword_btn" @click="handclick">应用关键词</div>
                </div>
              </div>
          </div>


		</el-dialog>
    </div>
</template>

<script>
import api from '@/api/radar/radar.js';
 var debounce=function(fn, delay = 300) {
			var timer = null;
			return function() {
				var _this = this;
				var args = arguments;
				if (timer) clearTimeout(timer);
				timer = setTimeout(function() {
					fn.apply(_this, args);
				}, delay);
			};
}
export default {
    data(){
        return{
            dialogVisible:false,
            activeIndex:0,
            keyword:"",
            content:"",
            options:[],
            keywordList:[]
        }
    },
    methods:{
		
        changeKeyword(){
            this.keywordList.map((item,index)=>{
                if(item.content == this.keyword){
                    this.activeIndex = index
                    this.content = this.keywordList[this.activeIndex].content
                    this.$nextTick(()=>{
                        let el = document.getElementsByClassName("active_li")[0]
                        el.scrollIntoView()
                    })
                }
            })
        },
        // 筛选方法
		filterMethod: debounce(function(filterVal) {
            let newArr = JSON.parse(JSON.stringify(this.keywordList))
			if (filterVal) {
				let filterArr = newArr.filter((item) => {
					if (item == null) {
						return false
					} else {
                        item.newType = item.type.replace(new RegExp(filterVal, 'g'), "<span style='color:#FF204E;'>" + filterVal +
								"</span>")
						return item.type.toLowerCase().includes(filterVal.toLowerCase())
					}


				})
				this.options = filterArr;
			} else {
				this.options = newArr;
			}
		}, 500),
        handclick(){
            this.$emit('keywordClick',this.content)
            Object.assign(this.$data, this.$options.data()) //重置data
        },
        keywordClick(index){
            this.activeIndex = index
            this.content = this.keywordList[this.activeIndex].content
        },
        show(){
		  api.keywordList().then(res => {
		  	console.log(res);
		  	  if(res.code==200){
		  	    this.keywordList = res.data
		  	    this.options = res.data
		  	    // localStorage.setItem("keyword",JSON.stringify(res.data.data))
		  	    this.content = this.keywordList[this.activeIndex].content;
		  	    this.dialogVisible = true;
		  	  }
		  }).catch(error => {
		  });
		  this.dialogVisible = true;
            if(localStorage.getItem("keyword")){
                this.keywordList = JSON.parse(localStorage.getItem("keyword"));
                this.options = this.keywordList;
                this.content = this.keywordList[this.activeIndex].content;
                this.dialogVisible = true;
            }else{
                api.keywordList().then(res => {
                	console.log(res);
                	  if(res.code==200){
                	    this.keywordList = res.data
                	    this.options = res.data
                	    localStorage.setItem("keyword",JSON.stringify(res.data.data))
                	    this.content = this.keywordList[this.activeIndex].content;
                	    this.dialogVisible = true;
                	  }
                }).catch(error => {
                });
            }

        },
    },
}
</script>

<style lang="scss">
    .keyword_dialog{
        .el-dialog{
            width: 800px;
            height: 384px;
            background: #FFFFFF;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            position: relative;
            .keyword_label{
                position: absolute;
                top: 11px;
                left: 115px;
            }
            .el-dialog__header{
                padding-left: 24px;
                padding-top: 9px;
                color: #333333;
                font-weight: bold;
                border-bottom: 1px solid #EEEEEE;
                .el-dialog__title{
                    font-size: 16px;
                }
                .el-dialog__headerbtn{
                    font-size: 20px;
                    top: 5px;
                    right: 16px;
                }
            }
            .el-dialog__body{
                padding-top: 16px;
                .keyword_select{
                    margin-bottom: 8px;
                    width: 376px;
                    .el-input,.el-input__inner{
                        width: 376px;
                    }
                }
                .keyword_name{
                    display: inline-block;
                    text-align: center;
                    width: 180px;
                    position: relative;
                    background:#F8F8F8;
                    border:1px solid rgba(230,230,230,1);
                    border-radius:2px 2px 0px 0px;
                    .el-scrollbar__wrap{
                        overflow-x: hidden;
                    }
                    li{
                        height:40px;
                        line-height:40px;
                        box-sizing: border-box;
                        cursor: pointer;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        padding: 0  5px;
                        color: #999999;
                        &:hover{
                            color: #0081FF;
                            background: #E2EDFF;
                            font-weight:bold;
                        }
                    }
                    .active_li{
                            color: #0081FF;
                            background: #E2EDFF;
                            font-weight:bold;
                    }
                    .el-input .el-input__inner{
                        height: 40px;
                        border-radius: 4px 4px 0 0;
                        border: none;
                        border-bottom: 1px solid #E6E6E6;
                    }
                }
                .keyword_con{
                    float: right;
                    display: inline-block;
                    position: relative;
                    margin-right: 4px;
                    width: 576px;
                    height:258px;
                    background:rgba(255,255,255,1);
                    border:1px solid rgba(230,230,230,1);
                    border-radius:2px 2px 0px 0px;
                    box-sizing: border-box;
                    textarea{
                        border: none;
                        resize:none;
                        max-height: 256px;
                        color: #333333;
                        padding: 16px;
                    }
                    .keyword_btn{
                        cursor: pointer;
                        line-height:28px;
                        color: #ffffff;
                        text-align: center;
                        position: absolute;
                        bottom: 24px;
                        right: 16px;

                        width: 102px;
                        height: 28px;
                        background: #0081FF;
                        border-radius: 2px 2px 2px 2px;
                        opacity: 1;
                    }
                    .keyword_con_label{
                        color: #999999;
                        font-size: 12px;
                        margin-left: 16px;
                        .keyword_con_img{
                            width: 14px;
                            height: 14px;
                            position: relative;
                            top: -2px;
                        }
                    }
                }
            }
        }
    }

    .el-autocomplete-suggestion{
        width: 140px!important;
    }
    .el-autocomplete-suggestion__wrap{
        max-height: 370px!important;
    }
</style>
