<template>
  <div class="attribTemplate">
    <div class="attribContent1">
      <div style="display: flex">
        <el-input
          placeholder="设备类型"
          v-model="filterText"
          class="attContentInput"
          style="width: 90%"
        >
          <template #suffix>
            <i class="el-icon-search el-input__icon"></i>
          </template>
        </el-input>
        <el-button type="success" @click="addItem()">新增</el-button>
      </div>

      <div class="attSwitch">
        <div
          class="attSwitchOne"
          :style="data.length - 1 > data.length ? 'border-bottom: 0' : ''"
          v-for="(data, ind) in attSwitchData"
          :key="ind"
          @click="attSwitchOne(ind)"
        >
          <div>{{ data.lable }}</div>
          <div>{{ data.value }}</div>
        </div>
      </div>
    </div>
    <div class="attribContent2">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        style="background-color: #fff; height: 100%"
        class="tabsSizeColor"
        v-if="activeBool"
      >
        <el-tab-pane label="模板1" name="first"></el-tab-pane>
        <!-- <el-tab-pane label="视频监测设备" name="second"> </el-tab-pane>
        <el-tab-pane label="通信设备" name="third"> </el-tab-pane>
        <el-tab-pane label="通道列表" name="five"> </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'attribTemplate',
  components: {},
  props: {},
  data() {
    return {}
  },
  setup() {
    const attSwitchData = [
      {
        id: 'powerEquip',
        lable: '电力监测设备',
        value: 1,
      },
      {
        id: 'videoEquip',
        lable: '视频监测设备',
        value: 0,
      },
      {
        id: 'communicateEquip',
        lable: '通信设备',
        value: 0,
      },
      {
        id: 'channelList',
        lable: '通道列表',
        value: 0,
      },
    ]
    return {
      filterText: ref(''),
      attSwitchData,
      activeName:ref('first'),
      activeBool: ref(true),
    }
  },
  methods: {
    attSwitchOne(id) {
      var dom = document.getElementsByClassName('attSwitchOne')
      var cont = dom[id].getAttribute('style')
      if (cont != null && cont != '') {
        dom[id].setAttribute('style', '')
      } else {
        this.attSwitchData.map((val, ind) => {
          val
          dom[ind].setAttribute('style', '')
        })
        dom[id].setAttribute('style', 'background-color: #409eff')
      }
    },

    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
})
</script>

<style lang="scss">
.attribTemplate {
  display: flex;
  height: calc(100vh - 130px);
  // padding: 30px;
  // margin-top: 50px;
  .attribContent1 {
    background-color: #fff;
    width: 20%;
    height: 100%;
    margin-right: 25px;
    padding: 20px;
    .attContentInput {
      width: 9rem;
      margin-right: 15px;
    }
    .attSwitch {
      margin-top: 20px;
      width: 100%;
      height: 20px;
      cursor: pointer;
      .attSwitchOne {
        display: flex;
        border: 0.5px solid silver;
        padding: 8px;
        font-size: 13px;
        div:nth-child(1) {
          width: 100%;
        }
      }
      .attSwitchOne:hover {
        background-color: #409eff;
      }
      .attSwitchOne:focus {
        background-color: #409eff;
      }
    }
  }
  .attribContent2 {
    background-color: #fff;
    width: 80%;
    height: 100%;
  }
}

// tab重置样式
.tabsSizeColor > .el-tabs__header .el-tabs__item {
  line-height: 50px;
  height: 50px;
  font-size: 16px;
}

.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 2px solid #409eff;
  color: #409eff;
}
.el-tabs__header {
  margin-bottom: 0;
}
.el-tabs--card > .el-tabs__header .el-tabs__item,
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
</style>