<template>
  <div class="network">
    <div class="setting">
      <div class="setting-header">
        <div class="setting-header__title f-z18">以太网属性</div>
        <div class="setting-header__close">
          <svg-icon height="22" width="22" name="close" />
        </div>
      </div>

      <div class="setting-content">
        <div class="setting-content__main">
          <div class="tabbar">
            <div
              class="item"
              v-for="(todo, index) in tab"
              :key="index"
              :class="{ active: index === 0 }"
            >
              {{ todo }}
            </div>
          </div>
        </div>

        <div class="setting-content__footer">
          <div class="setting-content__footer-btn m-r20">确定</div>
          <div class="setting-content__footer-btn">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const tab = ref(['网络', '共享']);
</script>

<style lang="scss" scoped>
.setting {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  width: 435px;
  height: 605px;
  background: #ffffff;
  border: 1px solid #979797;
  box-shadow: 0 10px 17px 0 #8787874d;
  @include flex(flex-start, center, column);
  &-header {
    @include flex(space-between);
    padding: 21px 16px 14px 12px;
    width: 100%;
  }
  &-content {
    flex: 1;
    width: 100%;
    background: #f0f0f0;
    padding: 6px 10px 17px;
    @include flex(flex-start, center, column);
    width: 100%;
    .tabbar {
      @include flex(flex-start);
      position: relative;
      background: #f0f0f0;
      &:before {
        @include border-xline(142, 0, bottom);
      }
      .item {
        @include wh(71px, 46px);
        @include flexCenters();
        &.active {
          background: #ffffff;
          border-block-start: 1px solid #979797; /* 上边框（逻辑起始边） */
          border-inline-end: 1px solid #979797; /* 右边框（逻辑结束边） */
        }
        &:nth-of-type(2) {
          border-bottom: 1px solid #979797;
          border-block-start: 1px solid #979797; /* 上边框（逻辑起始边） */
          border-inline-end: 1px solid #979797; /* 右边框（逻辑结束边） */
        }
      }
    }
    &__main {
      border: 1px solid #979797;
      border-top: none;
      border-right: none;
      flex: 1;
      width: 100%;
      position: relative;
      background: #ffffff;
      &:before {
        @include border-yline(46, 0, right);
      }
    }
    &__footer {
      @include flex(flex-end);
      width: 100%;
      margin-top: 13px;
      &-btn {
        width: 88px;
        height: 28px;
        background: #e1e1e1;
        border: 1px solid #979797;
        @include flexCenters();
      }
    }
  }
}

@mixin flexCenters() {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex($justifyContent: flex-start, $alignItems: center, $direction: row) {
  display: flex;
  align-items: $alignItems;
  justify-content: $justifyContent;
  flex-direction: $direction;
}

@for $i from 10 through 45 {
  .f-z#{$i} {
    font-size: 1px * $i;
  }
}

@for $i from 1 through 45 {
  .m-t#{$i} {
    margin-top: 1px * $i;
  }
  .m-r#{$i} {
    margin-right: 1px * $i;
  }
  .m-b#{$i} {
    margin-bottom: 1px * $i;
  }
  .m-l#{$i} {
    margin-left: 1px * $i;
  }

  .p-t#{$i} {
    padding-top: 1px * $i;
  }
  .p-r#{$i} {
    padding-right: 1px * $i;
  }
  .p-b#{$i} {
    padding-bottom: 1px * $i;
  }
  .p-l#{$i} {
    padding-left: 1px * $i;
  }
}

@mixin wh($width, $height) {
  width: $width;
  height: $height;
}

@mixin border-xline($lt: 16, $rg: 0, $horz: top) {
  content: ' ';
  position: absolute;
  left: $lt + px;
  right: $rg + px;
  height: 1px;
  border-#{$horz}: 1px solid #979797;
  z-index: 2;
  @if $horz== 'bottom' {
    bottom: 0;
  } @else {
    top: 0;
  }
}

@mixin border-yline($top: 0, $bottom: 0, $horz: right, $color: #979797) {
  content: ' ';
  position: absolute;
  top: $top + px;
  bottom: $bottom + px;
  height: calc(100% - #{$top}px - #{$bottom}px);
  border-#{$horz}: 1px solid $color;
  z-index: 2;
  @if $horz== 'right' {
    right: 0;
  } @else {
    left: 0;
  }
}
</style>