<template>
	<div>
		<popup :reverse="isReverse" :height="height" v-model="show" :mask="mask" :history-model="historyModel1" id="chat-says-popup" @on-hide="onPopupHide" @on-show="onPopupShow" style="overflow-y:scroll;-webkit-overflow-scrolling:touch;">
			<ul class="commonSays">
	            <li class='defaults' v-for="(item,index) in commonLanguage">
	            	<span class="says_detail" @click="clickSays(item)">{{item}}</span>
					<span class="edit" v-if="isedit && index>2" @click="editThisSays(item, index)"><i class="zhidian-font zf-editor1"></i></span>
					<span class="del_this" v-if="isdel && index>2" @click="delThisSays(item,index)"><i class="zhidian-font zf-delete"></i></span>
	            </li>              
				<li class="add_newSays">
					<span class="add_" @click="addNewSays" v-if="isadd"><i class="zhidian-font zf-add"></i>新增</span>
					<span class="add_ok" @click="completed" v-if="iscomplete">完成</span>
					<span class="setting" @click="settingSays" v-if="issetting"><i class="zhidian-font zf-set"></i></span>
				</li>
			</ul>
		</popup>
		<!-- 新增常用语 -->
		<div class="bg" style="width:100%;height:100%;position:fixed;left:0;top:0;z-index:8888;background:rgba(0,0,0,0.5);" v-if="isbg"></div>
		<popup :reverse="isReverse"  v-model="showAddSays" :mask="mask" :history-model="historyModel2" id="chat-addSays-popup" @on-hide="onPopupHide" @on-show="onPopupShow" >
			<div class="add_father">
				<span class="close" @click="closeAdd"><i class="zhidian-font zf-close"></i></span>
				<span class="add_title" v-if="isAdding">添加常用语</span>
				<span class="add_title" v-if="isEditing">编辑常用语</span>
	            <textarea name="" @keyup="keyupFun" id="edit_says" v-model="AddSaysVal" placeholder="请输入常用语..." ></textarea>
	            <span class="count_num">
	                <em id="count">{{textLen}}</em>/40
	            </span>
	            <div class="complete_edit" @click="addComplete" v-if="isAdding">完 成</div>
	            <div class="complete_edit" @click="editComplete" v-if="isEditing">完 成</div>
	        </div>
	    </popup>
        <div class="_warm"  v-if="isremind">
            <p class="warm_content">温馨提示</p>
            <div class="wram_title">该条常用语已存在，请重新编辑!</div>
            <div class="onok" @click="onok">知道了</div>
        </div>
	    <!-- 编辑常用语 -->
	</div>
</template>
<script>
	export default {
		props: {
			value: Boolean
		},
		data() {
			return {
				isReverse: false,
				mask: false,
				height: '200',
				sayings: {},
				isadd: true,
				iscomplete: false,
				issetting: true,
				isdel: false,
				isedit: false,
				isbg : false,
				showAddSays: false,   //新增popup
				AddSaysVal: '',  //新增内容
				textLen: 0,
				isAdding: false,   //新增常用语title
				isEditing: false,	//编辑常用语title
				indexId: '',
                isremind: false,
                show:this.value,
                historyModel1:false,
                historyModel2:false
			}
		},
		methods: {
			//设置
			settingSays() {
    			this.isadd = false
    			this.iscomplete = true
    			this.issetting = false
    			this.isedit = true
    			this.isdel = true
    		},
    		//新增
    		addNewSays() {
    			this.AddSaysVal = ''
    			this.textLen = 0
    			this.isbg = true
    			this.showAddSays = true
    			this.isAdding = true
    			this.isEditing = false
    		},
    		//新增完成
    		addComplete() {
    			if(this.AddSaysVal.trim().length === 0 ){
                    return false
    			} else {
                    let sayings = this.$store.state.IMStore.commonLanguage             
                    let _sayings = sayings.split('/')
                    for(let i=0;i<_sayings.length;i++){
                        if( _sayings[i] === this.AddSaysVal){
                            this.showAddSays = false
                            this.isbg = true
                            this.isremind = true
                            return false
                        }
                    }
    				this.$store.state.IMStore.commonLanguage = this.$store.state.IMStore.commonLanguage+"/"+this.AddSaysVal
    				this.isbg = false
    				this.showAddSays = false
    			}
    		},
            onok() {
                this.isbg = false
                this.isremind = false
                this.showAddSays = false
            },
    		//编辑完成
    		editComplete(index) {
    			this.isbg = false
				this.showAddSays = false
    			let arr_says
    			let nowSays = this.$store.state.IMStore.commonLanguage 
    			arr_says = nowSays.split('/')
    			for(let index1 in arr_says){
                    if( arr_says[index1] === this.AddSaysVal){
                        this.isbg = true
                        this.isremind = true
                        return false
                    }else{
                       let str_says = []
                        if(index1 == this.indexId){
                            str_says = arr_says.splice(this.indexId,1)
                        } 
                    }
    			}
    			this.$store.state.IMStore.commonLanguage = arr_says.join('/') +'/'+this.AddSaysVal
    		},
    		//删除
    		delThisSays(item,index) {
    			let arr_says
    			let nowSays = this.$store.state.IMStore.commonLanguage 
    			arr_says = nowSays.split('/')
    			for(let index1 in arr_says){
    				let str_says = []
    				if(index1 == index){
    					str_says = arr_says.splice(index,1)
    				}
    			}    
    			this.$store.state.IMStore.commonLanguage = arr_says.join('/')	
    		},
    		//编辑
    		editThisSays(item, index) {
    			this.indexId=index
    			this.AddSaysVal = item
    			this.textLen = item.length
    			this.isbg = true
    			this.showAddSays = true
    			this.isAdding = false
    			this.isEditing = true

    		},
    		//设置完成
    		completed() {
    			this.isadd = true
    			this.iscomplete = false
    			this.issetting = true
    			this.isedit = false
    			this.isdel = false
    		},
    		//字数跟随变化
    		keyupFun(){
                this.textLen = this.AddSaysVal.length;
                if (this.textLen > 40) {
                    this.textLen = 40;
                    this.AddSaysVal = this.AddSaysVal.substring(0, 40);
                }
            },
    		//关闭
    		closeAdd() {
    			this.isbg = false
    			this.showAddSays = false
    		},
			onPopupShow() {},
    		onPopupHide() {},
    		clickSays(saysObj) {
    			this.$emit('on-click-says',saysObj)
    		}
    		
		},
		computed:{
			commonLanguage(){
                let sayings = this.$store.state.IMStore.commonLanguage             
                let _sayings = sayings.split('/')
                return _sayings;
            }
		},
        watch:{
            value(val) {
              this.show = val
            }
        }
	}
</script>