<script setup lang="ts">
import { ref, reactive } from 'vue'
const lineTabs = ref([
    {
        label: '线路一定值',
        value: '1'
    },
    {
        label: '线路二定值',
        value: '2'
    },
    {
        label: '线路三定值',
        value: '3'
    },
    {
        label: '线路四定值',
        value: '4'
    },
    {
        label: '线路五定值',
        value: '5'
    }
])
const activeTab = ref('1')
const infoList = ref({
    category: {a: '180', b: '180', c: '开出1', d: '0'},
    voltage: {a: '180', b: '180', c: '开出1', d: '0'},
    current: {a: '180', b: '180', c: '开出1', d: '0'},
    diffCurrent: {a: '180', b: '180', c: '开出1', d: '0'},
    power: {a: '180', b: '180', c: '开出1', d: '0'},
    frequency: {a: '180', b: '180', c: '开出1', d: '0'},
    ptBreak: {a: '180', b: '180', c: '开出1', d: '1'},
    ctBreak: {a: '180', b: '180', c: '开出1', d: '1'},
})
const handleSave = () => {

}
const options = ref([
    {
        label: '开出1',
        value: '1'
    },
    {
        label: '开出2',
        value: '2'
    },
])
</script>

<template>
    <div class="line-page">
        <div class="line-tabs">
            <div class="tab-item" v-for="item in lineTabs" :key="item.value"
                :class="{ 'is-active': activeTab === item.value }" @click="activeTab = item.value">
                {{ item.label }}
            </div>
        </div>
        <div class="line-tabs-box">
            <div class="tab-content">
                <div class="tab-content-item">
                    <div class="tab-content-item-box" style="height: 265px;">越限告警</div>
                    <div class="tab-content-item-box" style="height: 85px;">故障告警</div>
                </div>
                <div class="tab-content-item">
                    <div class="tab-content-item-box box-height">类别</div>
                    <div class="tab-content-item-box box-color box-height">电压</div>
                    <div class="tab-content-item-box box-color box-height">电流</div>
                    <div class="tab-content-item-box box-color box-height">差流</div>
                    <div class="tab-content-item-box box-color box-height">功率</div>
                    <div class="tab-content-item-box box-color box-height">频率</div>
                    <div class="tab-content-item-box box-color box-height">PT断线</div>
                    <div class="tab-content-item-box box-color box-height">CT断线</div>
                </div>
                <div class="tab-content-item">
                    <div class="tab-content-item-box box-height">限制</div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.voltage.a" style="width: 100%;" :controls="false" />
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.current.a" style="width: 100%;" :controls="false" />
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.diffCurrent.a" style="width: 100%;" :controls="false" />
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.power.a" style="width: 100%;" :controls="false" />
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.frequency.a" style="width: 100%;" :controls="false" />
                    </div>
                    <div class="tab-content-item-box box-color box-height" style="border: none;">
                        <img src="@/assets/images/menuicon/noitem.png" style="width: 100%; height: 100%;" alt="">
                    </div>
                    <div class="tab-content-item-box box-color box-height" style="border: none;">
                        <img src="@/assets/images/menuicon/noitem.png" style="width: 100%; height: 100%;" alt="">
                    </div>
                </div>
                <div class="tab-content-item">
                    <div class="tab-content-item-box box-height">延时（s）</div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.voltage.b" style="width: 100%;" :controls="false" />
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.current.b" style="width: 100%;" :controls="false" />
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.diffCurrent.b" style="width: 100%;" :controls="false" />
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.power.b" style="width: 100%;" :controls="false" />
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.frequency.b" style="width: 100%;" :controls="false" />
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.ptBreak.b" style="width: 100%;" :controls="false" />
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-input-number v-model="infoList.ctBreak.b" style="width: 100%;" :controls="false" />
                    </div>
                </div>
                <div class="tab-content-item">
                     <div class="tab-content-item-box box-height">输出节点</div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-select v-model="infoList.voltage.c">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-select v-model="infoList.current.c">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-select v-model="infoList.diffCurrent.c">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-select v-model="infoList.power.c">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-select v-model="infoList.frequency.c">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-select v-model="infoList.ptBreak.c" >
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-select v-model="infoList.ctBreak.c" >
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>
                 <div class="tab-content-item">
                    <div class="tab-content-item-box box-height">是否投入</div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-switch v-model="infoList.voltage.d" active-value="1" inactive-value="0"></el-switch>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-switch v-model="infoList.current.d" active-value="1" inactive-value="0"></el-switch>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-switch v-model="infoList.diffCurrent.d" active-value="1" inactive-value="0"></el-switch>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-switch v-model="infoList.power.d" active-value="1" inactive-value="0"></el-switch>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-switch v-model="infoList.frequency.d" active-value="1" inactive-value="10"></el-switch>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-switch v-model="infoList.ptBreak.d" active-value="1" inactive-value="0"></el-switch>
                    </div>
                    <div class="tab-content-item-box box-color box-height">
                        <el-switch v-model="infoList.ctBreak.d" active-value="1" inactive-value="0"></el-switch>
                    </div>
                </div>
            </div>
            <el-button type="primary" class="save-btn" @click="handleSave">保存</el-button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.line-page {
    width: 100%;
    height: 100%;
    padding: 20px;

    .line-tabs {
        display: flex;
        gap: 10px;
        padding-left: 20px;

        .tab-item {
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #e9ecf3;
            border: 1px solid #dfe4ee;
            border-radius: 10px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
            box-shadow: 0px 0px 6px rgba(232, 236, 244, 1);
            font-size: 14px;
            color: #606060;
            cursor: pointer;
        }

        .is-active {
            color: #ffffff;
            background-color: #0099ff;
            border-color: #0099ff;
        }
    }

    .line-tabs-box {
        width: 100%;

        .tab-content {
            width: 100%;
            display: flex;
            padding: 60px 0;
            background-color: #ffffff;
            // height: calc(100vh - 260px);
            border-radius: 4px;
            box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
            padding: 20px 20px;
            min-height: max-content;
            gap: 5px;
            .tab-content-item {
                width: calc(100% / 6);
                display: flex;
                flex-direction: column;
                gap: 5px;

                .tab-content-item-box {
                    width: 100%;
                    background-color: #f9fafe;
                    box-sizing: border-box;
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgba(228, 228, 228, 1);
                    border-radius: 4px;
                    font-size: 14px;
                    color: #787878;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    text-align: center;
                    align-items: center;
                }

                .box-color {
                    background-color: #ffffff;
                }
                .box-height{
                    height: 40px;
                }
            }

        }

        .save-btn {
            margin-top: 30px;
            width: 150px;
            height: 40px;
            font-size: 14px;
            background-color: #0099ff;
        }
    }
}
:deep(.el-select__wrapper),
  :deep(.el-input__wrapper) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    text-align: center !important;
  }
  :deep(.el-select__wrapper.is-hover),
  :deep(.el-input__wrapper.is-hover),
  :deep(.el-select__wrapper.is-focused),
  :deep(.el-input__wrapper.is-focused) {
    box-shadow: none !important;
    border: none !important;
  }
  :deep(.el-input__inner){
    text-align: center !important;
  }
</style>