<template>
    <div v-hasPermi="['dcs:eqData:edit']" class="eqData_rt_boxs1_box_text2">
        <i class="el-icon-remove progressBar_icon" @click="decrease"></i>
        <el-popover placement="top" width="150" trigger="click" @hide="emitEnlarge" popper-class="progressBar_popover">
            <el-tabs v-model="tabActiveName" type="card" tab-position="left" @tab-click="handleTabClick"
                class="progressBar_popover2">
                <el-tab-pane label="100%" name="100">100%</el-tab-pane>
                <el-tab-pane label="80%" name="80">80%</el-tab-pane>
                <el-tab-pane label="60%" name="60">60%</el-tab-pane>
                <el-tab-pane label="40%" name="40">40%</el-tab-pane>
                <el-tab-pane label="20%" name="20">20%</el-tab-pane>
                <el-tab-pane label="0%" name="0">0%</el-tab-pane>
            </el-tabs>
            <div class="progressBar_text1"> 自定义输入</div>
            <div class="progressBar_input">
                <input type="text" v-model="inputValue"  @input="limitInputValue" ></input>
                <span>%</span>
            </div>
            <el-button slot="reference" class="progressBar_text">
                {{ inputValue }} <span>%</span>
            </el-button>
        </el-popover>
        <i class="el-icon-circle-plus progressBar_icon" @click="increase"></i>
    </div>
</template>

<script>
export default {
    props: {
        initialValue: {
            type: [Number,String],
            default: 0 // 默认值
        }
    },
    data() {
        return {
            tabActiveName: '100', // 默认选中的标签
            inputValue: Number(this.initialValue || 0), // 输入框的值
        }
    },
    watch: {
        initialValue(newVal) {
            this.inputValue = Number(newVal || 0);
        }
    },
    methods: {
        increase() {
            this.inputValue += 10;
            if (this.inputValue > 100) {
                this.inputValue = 100;
            }
            // console.log(this.inputValue);
            this.$emit('enlarge', Number(this.inputValue))
        },
        decrease() {
            this.inputValue =parseFloat(this.inputValue) - 10.0;
            if (this.inputValue < 0) {
                this.inputValue = 0;
            }
            // console.log(this.inputValue);
            this.$emit('enlarge', Number(this.inputValue))
        },
        handleTabClick(tab, event) {
            console.log('点击选项卡', this.inputValue);
            console.log('点击选项卡', typeof(tab.name),event);
            this.inputValue =  parseInt(tab.name, 10);
        },
        emitEnlarge(){
            this.$emit('enlarge', Number(this.inputValue))
        },
        limitInputValue(event) {
            const value = event.target.value;
            const regex = /^[0-9]*\.?[0-9]*$/; // 正则表达式：可包括数字和一个小数点
            // 检查输入的值是否符合规则
            if (!regex.test(value)) {
                this.inputValue = value.replace(/[^0-9]/g, ''); // 过滤非数字
            }

            const numValue = parseFloat(this.inputValue); // 将输入值转换为数字
            if (numValue < 0) {
                this.inputValue = 0; // 设置为 0
            } else if (numValue > 100) {
                this.inputValue = 100; // 设置为 100
            }
            
        }
    
        
    }
}
</script>

<style lang="scss">
/* 添加必要的样式 */
.eqData_rt_boxs1_box_text2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;


    .progressBar_text {
        display: flex;
        width: 50px;
        padding: 4px;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        background: #192E4F;
        color: #D8E0E6;
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        border: none;

        span {
            font-size: 12px;
        }
    }

    .progressBar_icon {
        color: #27B7F4;
        font-size: 20px;
    }

    .eqData_rt_boxs1_box_text2_1 {
        display: flex;
        width: 50px;
        padding: 4px;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        background: #10213E;
        color: #F0F9FF;
        font-family: "PingFang SC";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        input {
            width: 30px;
            background-color: transparent;
            border: none;
            color: #F0F9FF;
            font-family: "PingFang SC";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-align: center;
            outline: none;
        }

        span {
            font-size: 8px;
        }
    }

    .eqData_rt_boxs1_box_text2_2 {
        display: flex;
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        border: 1px solid #2C539B;
        background: linear-gradient(180deg, #3F5F9E 0%, #15305F 100%);
        color: #7ECAFF;
        font-family: "PingFang SC";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        /* 鼠标悬停改回默认样式 */
        cursor: default;
    }
}

.progressBar_text1,
.progressBar_input {
    color: #526EA1;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: auto;

}

.progressBar_input {

    display: flex;
    width: 125px;
    padding: 4px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 5px;
    background: #10213E;
    color: #F0F9FF;


    input {
        width: 30px;
        background-color: transparent;
        border: none;
        color: #F0F9FF;
        font-family: "PingFang SC";
        font-size: 12px;
        text-align: center;
        outline: none;
    }
}
.el-popover,
  .el-popper {
    border-radius: 5px;
    border: 1px solid #4373C8 !important;
    background: #071329;
  }
  
  .el-popover {
    padding: 0;
  }
  
  .el-tab-pane {
    display: none;
  }
  
  .el-tabs__nav {
    width: 148px;
  }
</style>
