<template>
  <div class="device">
    <titileLine name="设备"></titileLine>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane class="device-pane-font" label="关注设备" name="first">
        <div
          v-for="(item, index) in deviceList"
          :key="index"
          class="devicelist"
        >
          <div style="display: flex; flex-direction: column">
            <div
              class="device-pane-font-top"
              style="margin-bottom: 4px; display: flex; font-size: 14px"
            >
              {{ item.a }}
            </div>
            <div class="device-pane-font-bottom">
              {{ item.b }}
            </div>
            <div
              v-if="item.c"
              style="display: flex; align-items: center; margin-top: 8px"
            >
              <div class="device-pane-font-bottom-item">
                {{ item.c }}
              </div>
              &nbsp&nbsp
              <div style="color: #333333">
                {{ item.d }}:&nbsp&nbsp<span
                  style="color: #3464cc; font-size: 13px"
                  >{{ item.e }}</span
                >
              </div>
            </div>
          </div>
          <div><i class="el-icon-more"></i></div>
        </div>
      </el-tab-pane>
      <el-tab-pane class="device-pane-font" label="检索设备" name="second">
        <div
          v-for="(item, index) in deviceList3"
          :key="index"
          class="devicelist"
        >
          <div style="display: flex; flex-direction: column">
            <div
              class="device-pane-font-top"
              style="margin-bottom: 4px; display: flex; font-size: 14px"
            >
              {{ item.a }}
            </div>
            <div class="device-pane-font-bottom">
              {{ item.b }}
            </div>
            <div
              v-if="item.c"
              style="display: flex; align-items: center; margin-top: 8px"
            >
              <div class="device-pane-font-bottom-item">
                {{ item.c }}
              </div>
              &nbsp&nbsp
              <div style="color: #333333">
                {{ item.d }}:&nbsp&nbsp<span
                  style="color: #3464cc; font-size: 13px"
                  >{{ item.e }}</span
                >
              </div>
            </div>
          </div>
          <div><i class="el-icon-more"></i></div>
        </div>
      </el-tab-pane>
      <el-tab-pane class="device-pane-font" label="收藏设备" name="third">
        <div
          v-for="(item, index) in deviceList2"
          :key="index"
          class="devicelist"
        >
          <div style="display: flex; flex-direction: column">
            <div
              class="device-pane-font-top"
              style="margin-bottom: 4px; display: flex; font-size: 14px"
            >
              {{ item.a }}
            </div>
            <div class="device-pane-font-bottom">
              {{ item.b }}
            </div>
            <div
              v-if="item.c"
              style="display: flex; align-items: center; margin-top: 8px"
            >
              <div class="device-pane-font-bottom-item">
                {{ item.c }}
              </div>
              &nbsp&nbsp
              <div style="color: #333333">
                {{ item.d }}:&nbsp&nbsp<span
                  style="color: #3464cc; font-size: 13px"
                  >{{ item.e }}</span
                >
              </div>
            </div>
          </div>
          <div><i class="el-icon-more"></i></div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div
      style="
        height: 50px;
        position: absolute;

        width: 100%;
        bottom: 0;
        transform: translate(-50%);
        left: 50%;
      "
    ></div>
    <!--    <div class="devicelookmore" v-show="show">查看更多</div>-->
  </div>
</template>
<script>
import titileLine from "@/components/titileLine";
export default {
  data() {
    return {
      activeName: "first",
      show: false,
      deviceList: [
        {
          a: "10kV麻龙线何冲变公用杆变",
          b: "10kV | 所属供电公司",
        },
        {
          a: "X311金新线",
          b: "10kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108261",
        },
        {
          a: "35kV学院区站",
          b: "10kV | 所属供电公司",
        },
        {
          a: "10kV王新II线",
          b: "35kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108262",
        },
        {
          a: "泰华路35kV站#3",
          b: "10kV | 所属供电公司",
        },
        {
          a: "泰华路35kV站#2",
          b: "10kV | 所属供电公司",
        },
        {
          a: "泰华路35kV站#1",
          b: "10kV | 所属供电公司",
        },
        {
          a: "泰华路35kV站#5",
          b: "10kV | 所属供电公司",
        },
        {
          a: "10kV麻龙线何冲变公用杆变",
          b: "10kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108261",
        },
        {
          a: "10kV麻龙线何冲变公用杆变",
          b: "10kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108261",
        },
        {
          a: "10kV麻龙线何冲变公用杆变",
          b: "10kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108261",
        },
        {
          a: "10kV麻龙线何冲变公用杆变",
          b: "10kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108261",
        },
        {
          a: "10kV麻龙线何冲变公用杆变",
          b: "10kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108261",
        },
        {
          a: "10kV麻龙线何冲变公用杆变",
          b: "10kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108261",
        },
      ],
      deviceList2: [
        {
          a: "10kV麻龙线何冲变公用杆变",
          b: "10kV | 所属供电公司",
        },
        {
          a: "X311金新线",
          b: "10kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108261",
        },
        {
          a: "35kV学院区站",
          b: "10kV | 所属供电公司",
        },
        {
          a: "10kV王新II线",
          b: "35kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108262",
        },
      ],
      deviceList3: [
        {
          a: "10kV麻龙线何冲变公用杆变",
          b: "10kV | 所属供电公司",
        },
        {
          a: "X311金新线",
          b: "10kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108261",
        },
        {
          a: "35kV学院区站",
          b: "10kV | 所属供电公司",
        },
        {
          a: "10kV王新II线",
          b: "35kV | 所属供电公司",
          c: "巡视中",
          d: "常规巡视",
          e: "XS102021108262",
        },
        {
          a: "泰华路35kV站#2",
          b: "10kV | 所属供电公司",
        },
        {
          a: "泰华路35kV站#1",
          b: "10kV | 所属供电公司",
        },
        {
          a: "泰华路35kV站#5",
          b: "10kV | 所属供电公司",
        },
      ],
    };
  },
  components: {
    titileLine,
  },
  mounted() {
    let bodyh = $(document.body).height();
    $(".device").height(Number(bodyh) - 100);
    // if (Number($(".device-pane-font").height()) >= Number(bodyh - 100)) {
    //   this.show = true;
    // }

    $(".boxleft .device-pane-font").height($(".boxleft").height());
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped>
.device {
  overflow: hidden;
  padding-left: 20px;
  display: flex;
  position: relative;
  flex-direction: column;
  box-sizing: border-box;

  width: 300px;
}
.devicetitle {
  display: flex;
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  height: 20px;
  opacity: 0.7;
  border-bottom: 1px solid #477eff;
}
.device-pane-font {
  width: 100%;
  overflow-y: auto;
}
.device-pane-font::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}
.device-pane-font::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ced7ec;
}
.device-pane-font {
  color: #3464cc;
  font-size: 14px;
}

.device /deep/.el-tabs__content {
  overflow-y: auto;
}
.device .devicelookmore {
  width: 94%;
  height: 26px;

  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf3fb;
  border-radius: 13px 13px 13px 13px;
  opacity: 1;
  color: #333333;
  font-size: 13px;
  position: absolute;
  bottom: 20px;
  transform: translate(-50%);
  left: 50%;
}
.device /deep/.el-tabs__nav-wrap::after {
  position: static;
}
.device /deep/ .el-tabs__item.is-active {
  color: #333333;
  font-size: 14px;
}
.device /deep/ .el-tabs__item {
  color: #3464cc;
}
.device /deep/ .el-tabs__active-bar {
  background-color: #3464cc;
}
.device /deep/ .el-collapse-item__arrow {
  display: none;
}
.device /deep/ .el-collapse {
  border-top: none;
}
.device-pane-font-top {
  font-weight: 500;
  color: #3464cc;
  font-family: PingFang SC-Medium, PingFang SC;
}
.device-pane-font-bottom {
  font-weight: 400;
  color: #333333;
  font-family: PingFang SC-Regular, PingFang SC;
  margin-top: 4px;
  display: flex;
  font-size: 13px;
}
.device-pane-font-bottom-item {
  width: 50px;
  height: 20px;
  display: flex;
  align-items: center;
  font-size: 12px;
  background: #58b1ff;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  color: #ffffff;
  justify-content: center;
}
.device .devicelist {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #f4f4f4;
  padding: 10px;

  box-sizing: border-box;
}
</style>
