<template>
  <div class="health-1">
    <div class="selections mg-b-16">
      <div class="item">未确认缺陷</div>
      <div class="item">未确认缺陷</div>
      <div class="item active">未确认缺陷</div>
      <div class="item">未确认缺陷</div>
    </div>
    <div class="power-info mg-b-16">
      <div class="info-tab">
        <div class="tab active">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-wind-site'" />
          </i>
          <span> 24小时健康趋势 </span>
        </div>
        <div class="tab">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-wind-site'" />
          </i>
          <span> 7日健康趋势 </span>
        </div>
        <div class="tab">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-wind-site'" />
          </i>
          <span>30日健康趋势</span>
        </div>
        <div class="empty"></div>
        <div class="tab">
          <span>全部风场健康趋势</span>
        </div>
      </div>
      <div class="info-chart">
        <panel class="info-chart-panel" :title="'损失电量分析'">
          <vertival-bar-line-chart :height="'310px'" />
        </panel>
      </div>
    </div>
    <div class="health-report">
      <panel class="health-report-panel" :title="'健康报告'" :showLine="false">
        <div class="actions mg-b-16">
          <div class="item green">当日内推荐</div>
          <div class="item purple">三日内推荐</div>
          <div class="item gray">超三日推荐</div>
        </div>
        <div class="report-items">
          <div class="item">
            <div class="title">风机编号：QG01_04</div>
            <div class="info">
              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
              <p>推荐检修时间：2021-06-04 16:00:00</p>
              <p>推荐时间对应风速：2.4</p>
              <p>判断时间：2021-05-27 08:20:00</p>
              <div class="actions mg-t-16">
                <button class="btn success">
                  <i class="fa fa-check"></i>
                  提交
                </button>
                <button class="btn">
                  <i class="fa fa-close"></i>
                  取消
                </button>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">风机编号：QG01_04</div>
            <div class="info">
              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
              <p>推荐检修时间：2021-06-04 16:00:00</p>
              <p>推荐时间对应风速：2.4</p>
              <p>判断时间：2021-05-27 08:20:00</p>
              <div class="actions mg-t-16">
                <button class="btn success">
                  <i class="fa fa-check"></i>
                  提交
                </button>
                <button class="btn">
                  <i class="fa fa-close"></i>
                  取消
                </button>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">风机编号：QG01_04</div>
            <div class="info">
              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
              <p>推荐检修时间：2021-06-04 16:00:00</p>
              <p>推荐时间对应风速：2.4</p>
              <p>判断时间：2021-05-27 08:20:00</p>
              <div class="actions mg-t-16">
                <button class="btn success">
                  <i class="fa fa-check"></i>
                  提交
                </button>
                <button class="btn">
                  <i class="fa fa-close"></i>
                  取消
                </button>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">风机编号：QG01_04</div>
            <div class="info">
              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
              <p>推荐检修时间：2021-06-04 16:00:00</p>
              <p>推荐时间对应风速：2.4</p>
              <p>判断时间：2021-05-27 08:20:00</p>
              <div class="actions mg-t-16">
                <button class="btn success">
                  <i class="fa fa-check"></i>
                  提交
                </button>
                <button class="btn">
                  <i class="fa fa-close"></i>
                  取消
                </button>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">风机编号：QG01_04</div>
            <div class="info">
              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
              <p>推荐检修时间：2021-06-04 16:00:00</p>
              <p>推荐时间对应风速：2.4</p>
              <p>判断时间：2021-05-27 08:20:00</p>
              <div class="actions mg-t-16">
                <button class="btn success">
                  <i class="fa fa-check"></i>
                  提交
                </button>
                <button class="btn">
                  <i class="fa fa-close"></i>
                  取消
                </button>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">风机编号：QG01_04</div>
            <div class="info">
              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
              <p>推荐检修时间：2021-06-04 16:00:00</p>
              <p>推荐时间对应风速：2.4</p>
              <p>判断时间：2021-05-27 08:20:00</p>
              <div class="actions mg-t-16">
                <button class="btn success">
                  <i class="fa fa-check"></i>
                  提交
                </button>
                <button class="btn">
                  <i class="fa fa-close"></i>
                  取消
                </button>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">风机编号：QG01_04</div>
            <div class="info">
              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
              <p>推荐检修时间：2021-06-04 16:00:00</p>
              <p>推荐时间对应风速：2.4</p>
              <p>判断时间：2021-05-27 08:20:00</p>
              <div class="actions mg-t-16">
                <button class="btn success">
                  <i class="fa fa-check"></i>
                  提交
                </button>
                <button class="btn">
                  <i class="fa fa-close"></i>
                  取消
                </button>
              </div>
            </div>
          </div>
        </div>
      </panel>
    </div>
  </div>
</template>

<script>
import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
export default {
  setup() {},
  components: { SvgIcon, Panel, VertivalBarLineChart },
};
</script>

<style lang="less">
.health-1 {
  .selections {
    display: flex;

    .item {
      flex: 0 0 128px;
      text-align: center;
      line-height: 33px;
      margin-right: 8px;
      color: @font-color;
      font-size: @fontsize-s;
      background: fade(@gray, 20);
      border: 1px solid fade(@gray, 20);

      &:hover,
      &.active {
        background: fade(@green, 20);
        border: 1px solid @green;
        color: @green;
        cursor: pointer;
      }
    }
  }

  .power-info {
    display: flex;
    .info-tab {
      flex: 0 0 156px;
      display: flex;
      flex-direction: column;
      height: 350px;
      margin-right: 1.4815vh;

      .tab {
        position: relative;
        flex: 0 0 auto;
        text-align: center;
        line-height: 33px;
        margin-right: 8px;
        color: @gray-l;
        font-size: 12px;
        background: fade(@gray, 20);
        border: 1px solid fade(@gray, 20);

        display: flex;
        align-items: center;

        i {
          margin: 0 1.4815vh;
          svg use {
            fill: @gray-l;
          }
        }

        &:hover,
        &.active {
          background: fade(@green, 20);
          border: 1px solid @green;
          color: @green;
          cursor: pointer;
          
          i svg use {
            fill: @green;
          }
        }

        &.active::after {
          box-sizing: content-box;
          width: 0px;
          height: 0px;
          position: absolute;
          right: -19px;
          padding: 0;
          border-bottom: 9px solid @green;
          border-top: 9px solid transparent;
          border-left: 9px solid transparent;
          border-right: 9px solid transparent;
          display: block;
          content: "";
          z-index: 10;
          transform: rotate(90deg);
        }

        &.active::before {
          box-sizing: content-box;
          width: 0px;
          height: 0px;
          position: absolute;
          right: -17px;
          padding: 0;
          border-bottom: 9px solid #063319;
          border-top: 9px solid transparent;
          border-left: 9px solid transparent;
          border-right: 9px solid transparent;
          display: block;
          content: "";
          z-index: 12;
          transform: rotate(90deg);
        }

        & + .tab {
          margin-top: 0.7407vh;
        }

        &:last-child {
          text-align: center;
          justify-content: center;
        }
      }

      .empty {
        flex: 1 0 auto;
      }
    }

    .info-chart {
      flex: 1 0 auto;
    }
  }

  .health-report {
    // 健康报告 按钮样式
    .actions {
      display: flex;

      .item {
        flex: 0 0 102px;
        text-align: center;
        line-height: 33px;
        margin-right: 8px;
        color: fade(@white, 75);
        font-size: @fontsize-s;

        &.green {
          background: @green;
        }

        &.purple {
          background: @purple;
        }

        &.gray {
          background: @gray;
        }
      }
    }

    .report-items {
      display: flex;
      flex-wrap: wrap;

      .item {
        flex: 0 0 calc(100% / 6 - 16px);
        margin-bottom: 16px;

        & + .item {
          margin-left: 16px;
        }

        &:nth-child(6n + 1) {
          margin-left: 0px;
        }

        .title {
          background: fade(@gray, 40);
          // color: fade(@white, 75);
          color: @gray-l;
          line-height: 37px;
          padding-left: 16px;
          font-size: @fontsize-s;
        }

        .info {
          background: fade(@gray, 20);
          padding: 16px;
          font-size: @fontsize-s;
          color: @font-color;
          line-height: 1.5;
          p {
            margin: 0;
            line-height: 2;
          }

          .actions {
            display: flex;
            align-items: center;
            justify-content: center;

            .success {
              border-color: #05bb4c;
              color: #05bb4c;
              background: rgba(5, 187, 76, 0.2);
            }
          }
        }
      }
    }
  }
}
</style>
