<template>
    <div>

      <div style="position:fixed;left:10px;bottom:10px;width:20px;height:20px;border:0px red solid">
          <el-popover placement="top-end" width="190" trigger="manual" v-model="visible">
                <div>
                    <i class="el-icon-close" style="float:right" @click="toggleCalc"></i>
                    <el-input type="textarea" v-model.trim="preText" rows="10" class="calc-val" > </el-input>
                    <el-row class="mt5">
                        
                        <el-tooltip placement="top" effect="light">
                            <div slot="content">
                                解析结果:
                                <div v-for="(item,idx) in dataArr" :key="idx">{{item}}</div>
                            </div>
                            <span><span class="calc-span">计数 :</span> {{count}}</span>
                        </el-tooltip>
                    </el-row>
                    <template v-if="isAllNum">
                        <el-row class="mt5"><span class="calc-span">求和 :</span> {{formatNum(sum)}}</el-row>
                        <el-row class="mt5"><span class="calc-span">平均 :</span> {{formatNum(avg)}}</el-row>
                        <el-row class="mt5" v-if="dataArr.length==2"><span class="calc-span">商 :</span> {{formatNum(div)}}</el-row>
                    </template>
                </div>
                <i slot="reference" @click="toggleCalc"
                     class="fa fa-calculator" style="font-size:20px;color:#FAECD8"></i>
            </el-popover>
      </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            visible : false,
            values : "",
            preText : "",
        }
    },
    mounted() {
    },
    computed: {
        dataArr(){
            if(!this.preText) return [];
            var arr = this.preText.split("\n");
            var newarr = [];
            arr.map((item)=>{
                item = item.replace(/\s|%|∞/g,"");
                newarr.push(item);
            })
            newarr = newarr.filter((item)=>{return item !==""});
            for (var i =0;i < newarr.length;i++){
                var val = newarr[i];
                if(val.indexOf("(")!=-1){
                    val = val.substring(0,val.indexOf("("))
                    if(!isNaN(val)) newarr[i] = val;
                }
                if(val.indexOf("/")!=-1){
                    val = val.substring(0,val.indexOf("/"))
                    if(!isNaN(val)) newarr[i] = val;
                }
                if(isNaN(val) && !isNaN(val.replace(/,/g,""))){
                    newarr[i] = val.replace(/,/g,"");
                }
            }
            return newarr;
        },
        isAllNum(){
            for(var i=0;i<this.dataArr.length;i++){
                var item = this.dataArr[i];
                if(isNaN(item)){
                    return false;
                }
            }
            return true;
        },
        count(){
            return this.dataArr.length
        },
        sum() {
            if(!this.isAllNum) return "";
            var val = this.dataArr.join("+");
            val = eval(val);
            return val;
        },
        avg() {
            if(!this.isAllNum) return "";
            if(this.count==0) return "";
            var val = this.sum/this.count;
            return val;
        },
        div(){
            if(!this.isAllNum) return "";
            if(this.count!==2) return "";
            if(this.dataArr[1]==0) return "";
            var val = this.dataArr[0]/this.dataArr[1];
            return val;
        }
    },
    methods: {
        formatNum(num){
            if(this.bigMoneyFixFormat4){
                num = this.bigMoneyFixFormat4(num);
            }else{
                num = this.bigMoneyFixFormat(num);
                if(num) num = num.replace(".00","")
            }
            return num;
        },
        setCalcText(text){
            text = text.replace(/\n\r/g,"");
            this.preText = text;
            this.visible = true;
        },
        toggleCalc(){
            if(this.visible){
                this.visible = false;
            }else {
                this.showCalc();
            }
        },
        showCalc(){
            var that = this;
            clearTimeout(this.calcTimer);
            this.visible = true;
            this.calcTimer = setTimeout(function(){
                that.visible = false;
            },60000)
        }
    }
}
</script>

<style lang="less">
.calc-val{
    textarea {
        resize:none;
    }
}

</style>

<style lang="less" scoped>

.calc-span{
    display: inline-block;
    width: 43px;
    text-align: right;
}
</style>