<template>
    <div class="center">
        <template v-for="(item,index) in stringArr">
          <span
            :key="index"
            @click="checkItem(item,index)"
            ref="span"
            :class="{
                'saga-warning': isWarning(index)
            } "
            class="cut-string saga-border pointer border-hover"
          >{{item}}</span>
        </template>
  </div>
</template>
<script>
    export default {
        props: {
            string: {
                type: String,
                default: ""
            },
            closedStr: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                // stringArr: this.string.split(""),
                obj: {},
                arr: [],
                keywordIndexArr: []
            }
        },
        computed: {
            stringArr(){
                return this.string.split("")
            }
        },
        created() {this.recursiveGetIndex(0)},
        mounted() {},
        methods: {
            //是否在危险状态
            isWarning(val){
                if(this.keywordIndexArr.indexOf(val) > -1){
                    return true
                }else{
                    return false
                }
            },
            recursiveGetIndex(start){ //递归获取满足关键字的索引值
                if (this.closedStr) {
                    let index = this.string.indexOf(this.closedStr,start)
                    if(index != -1){
                        for(let i = 0; i < this.closedStr.length; i++){
                            this.keywordIndexArr.push(index + i)
                        }
                        this.recursiveGetIndex(index + this.closedStr.length)
                    }
                } 
            },
            aiGetIndex(str){ //递归获取满足ai关键字的索引值
                let index = this.string.indexOf(str),
                    arr = []
                if(index != -1){
                    for(let i = 0; i < str.length; i++){
                        arr.push(index + i)
                    }
                }
                return arr
            },
            checkItem(item, index) {
                if(this.obj.hasOwnProperty(index)){
                    delete this.obj[index]
                    let classList = this.$refs.span[index].getAttribute('class')
                    if(classList.indexOf('bg') > -1){
                        classList = classList.split('bg')
                    }
                    this.$refs.span[index].setAttribute('class',classList)
                }else{
                    this.obj[index] = item
                    let classList = this.$refs.span[index].getAttribute('class') + ' bg'
                    this.$refs.span[index].setAttribute('class',classList)
                }
            },
            clear(str) {
                this.obj = {}
                // this.stringArr = this.string.split("")
                for(let i = 0; i < this.stringArr.length; i++){
                    if (this.$refs.span && this.$refs.span[i]) {
                        let classList = this.$refs.span[i].getAttribute('class')
                        if(classList.indexOf('bg') > -1){
                            classList = classList.split('bg')
                        }
                        this.$refs.span[i].setAttribute('class',classList)
                    }
                }
                if(!!str){
                    let aiIndexArr = this.aiGetIndex(str)
                    // let strsArr = str.split("")
                    // strsArr.map((item,index) => {
                        for(let j = 0; j < this.stringArr.length;j++){
                            if(aiIndexArr.indexOf(j) > -1){
                                this.obj[j] = this.stringArr[j]
                                let classList = this.$refs.span[j].getAttribute('class') + ' bg'
                                this.$refs.span[j].setAttribute('class',classList)
                            }
                        }
                    // })
                }
            },
            getData() {
                let string = ""
                for (let key in this.obj) {
                    string += this.obj[key]
                }
                return string
            }
        },
        watch: {
            string: function() {
                this.keywordIndexArr = []
                this.recursiveGetIndex(0)
                this.clear()
            }
        }
    }
</script>
<style lang="scss" scoped>
    .cut-string {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        display: inline-block;
        box-sizing: border-box;
        margin: 0 5px;
    }
    .saga-warning{
        color: #fff;
        background-color: #e6a23c;
        border-color: #e6a23c;
    }
    .bg {
        background: #409EFF;
        color: #fff;
        border-color: #409EFF;
    }
</style>
