<template>
  <div class="device">
    <titileLine name="任务与计划"></titileLine>
    <echart></echart>
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <el-input
        style="flex: 1"
        placeholder="请输入内容"
        v-model="input"
        clearable
      >
        <i class="el-icon-zoom-in el-input__icon" slot="suffix"> </i>
      </el-input>
      <div style="font-size: 12px; margin-left: 10px">任务数(10个)</div>
    </div>
    <div class="devicelistRight">
      <div
        v-for="(item, index) in deviceList"
        :key="index"
        style="
          display: flex;
          justify-content: space-between;
          width: 100%;
          border-bottom: 1px solid #f4f4f4;
          padding: 10px;
          box-sizing: border-box;
        "
      >
        <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
            v-if="item.c"
            style="display: flex; align-items: center; margin-top: 8px"
          >
            <div class="statsTitil" :style="{ background: item.color }">
              {{ item.c }}
            </div>
            &nbsp&nbsp
            <div style="color: #333333; font-size: 13px">
              {{ item.d }}:&nbsp&nbsp<span style="color: #3464cc">{{
                item.e
              }}</span
              ><span
                style="
                  background: #ff00001a;
                  border-radius: 5px;

                  padding-left: 5px;
                  padding-right: 5px;
                  border: 1px solid #d97474;
                "
                v-if="item.num"
                >{{ item.num }}</span
              >
            </div>
          </div>
        </div>
        <div><i class="el-icon-more"></i></div>
      </div>
    </div>
  </div>
</template>
<script>
import echart from "@/components/echart";
import titileLine from "@/components/titileLine";
export default {
  data() {
    return {
      activeName: "first",
      input: "共10个",
      show: false,
      deviceList: [
        {
          a: "10kV麻龙线何冲变公用杆变",
          b: "10kV | 所属供电公司",
          c: "运行中",
          d: "远程智巡",
          e: "2022-09-20~20",
          color: "#70E17B",
        },
        {
          a: "110kV保山线第35次巡视",
          b: "10kV | 所属供电公司",
          c: "计划中",
          d: "常规巡视",
          e: "2022-09-20~20",
          color: "#5B8FF9",
        },
        {
          a: "110kV保山线第35次巡视",
          b: "10kV | 所属供电公司",
          c: "已完成",
          d: "常规巡视",
          e: "2022-09-20~20",
          color: "#657798",
          num: "10",
        },
        {
          a: "110kV保山线第35次巡视",
          b: "10kV | 所属供电公司",
          c: "运行中",
          d: "远程智巡",
          e: "2022-09-20~20",
          color: "#70E17B",
        },
        {
          a: "110kV保山线第35次巡视",
          b: "10kV | 所属供电公司",
          c: "计划中",
          d: "常规巡视",
          e: "2022-09-20~20",
          color: "#5B8FF9",
          num: "12",
        },
        {
          a: "110kV保山线第35次巡视",
          b: "10kV | 所属供电公司",
          c: "已完成",
          d: "常规巡视",
          e: "2022-09-20~20",
          color: "#657798",
        },
        {
          a: "110kV保山线第35次巡视",
          b: "10kV | 所属供电公司",
          c: "已完成",
          d: "常规巡视",
          e: "2022-09-20~20",
          color: "#657798",
        },
        {
          a: "110kV保山线第35次巡视",
          b: "10kV | 所属供电公司",
          c: "已完成",
          d: "常规巡视",
          e: "2022-09-20~20",
          color: "#657798",
        },
        {
          a: "110kV保山线第35次巡视",
          b: "10kV | 所属供电公司",
          c: "已完成",
          d: "常规巡视",
          e: "2022-09-20~20",
          color: "#657798",
        },
      ],
    };
  },
  components: {
    echart,
    titileLine,
  },
  mounted() {
    let bodyh = $(document.body).height();
    $(".device").height(Number(bodyh) - 100);
    // if (Number($(".device-pane-font").height()) >= Number(bodyh - 100)) {
    //   this.show = true;
    // }
  },
  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;
}
.devicelistRight {
  width: 100%;
  overflow-y: auto;
}
.devicelistRight::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}
.devicelistRight::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ced7ec;
}
.statsTitil {
  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;
}

.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 {
  color: #3464cc;
  font-size: 14px;
}

.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-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
}
/deep/ .el-input__inner {
  border: none;
  background: rgba(0, 0, 0, 0.04);
}
</style>
