<template>
  <div class="params_setting">
    <div class="nav_box">
      <el-radio-group
        class="header-radio"
        v-model="selectedTab"
      >
        <el-radio-button label="0">参数配置</el-radio-button>
        <el-radio-button label="1">层级设置</el-radio-button>
      </el-radio-group>
    </div>
    <params-config v-if="selectedTab === '0'" />
    <level-config v-else />
  </div>
</template>

<script>
import ParamsConfig from "./components/paramsConfig.vue" // 参数配置
import LevelConfig from "./components/levelConfig.vue" // 层级配置
export default {
  data() {
    return {
      selectedTab: "0",
    };
  },
  components: {
    ParamsConfig,
    LevelConfig
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.params_setting {
  .nav_box {
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    .header-radio {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ebebeb;

      .btn-disabled {
        ::v-deep .el-radio-button__inner {
          background-color: #e7e7e7;
        }
      }

      .el-radio-button {
        flex: 1;

        ::v-deep .el-radio-button__inner {
          width: 100%;
          border: none;
          font-weight: 400;
          letter-spacing: 0.44px;
          line-height: 25px;
          font-size: 16px;
          color: #666666;
          padding: 11px 0 12px 0;
        }

        ::v-deep
          .el-radio-button__orig-radio:checked
          + .el-radio-button__inner {
          background-color: #4886f8;
          font-weight: 400;
          color: #ffffff;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }

        &:nth-child(2) {
          &::before,
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 21px;
            width: 1px;
            background: #ebebeb;
            z-index: 1;
          }

          &::after {
            right: 1px;
          }
        }

        &.is-active {
          &::before,
          &::after {
            content: none;
          }
        }
      }
    }
  }
}
</style>
