<template>
  <div class="wind-site-warning">
    <div class="search pd-16">
      <el-row class="mg-b-16">
        <div class="query">
          <input class="search-input" name="query" v-model="query" />
        </div>
        <button class="btn search">搜索</button>
        <div class="empty"></div>
        <button class="btn empty-btn">重置</button>
      </el-row>
      <el-row class="options">
        <el-col class="option-item" :span="8" v-for="option in options" :key="option" @click="onOptionClick(option)" :class="{ active: option.isActive, 'has-value': option.count != '' }">
          <div class="count">{{ option.count }}</div>
          <div class="text">{{ option.text }}</div>
        </el-col>
      </el-row>
    </div>
    <div class="warning-list">
      <Table :data="warning" />
    </div>
  </div>
</template>

<script>
import Table from "../../../../components/coms/table/table.vue";
export default {
  components: {
    Table,
  },
  data() {
    return {
      query: "",
      options: [
        {
          id: "",
          text: "总故障",
          count: "1",
          isActive: true,
        },
        {
          id: "",
          text: "总故障",
          count: "",
          isActive: false,
        },
        {
          id: "",
          text: "总故障",
          count: "1",
          isActive: false,
        },
        {
          id: "",
          text: "叶轮刹车类",
          count: "1",
          isActive: false,
        },
        {
          id: "",
          text: "发电机类",
          count: "1",
          isActive: false,
        },
        {
          id: "",
          text: "电网类",
          count: "1",
        },
        {
          id: "",
          text: "电网类",
          count: "1",
        },
      ],
      warning: {
        column: [
          {
            name: "报警编号",
            field: "Code",
            is_num: true, // 是否为数字
          },
          {
            name: "PLC变量名",
            field: "Text",
          },
          {
            name: "报警信息",
            field: "Warning",
          },
          {
            name: "报警状态",
            field: "State",
            template: function(data) {
              if (data != "正常") return "<div class='error-state'></div>";
              else return data;
            },
          },
        ],
        data: [
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "不正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
          {
            Code: "1000",
            Text: "变桨电池充电的故障",
            Warning: "error_battery_charger",
            State: "正常",
          },
        ],
      },
    };
  },
  methods: {
    onOptionClick(option) {
      option.isActive = !option.isActive;
    },
  },
};
</script>

<style lang="less">
.wind-site-warning {
  border: 1px solid @darkgray;

  .search {
    .query {
      height: 100%;
      flex: 0 0 auto;
      .search-input {
        background: transparent;
        border: 1px solid @darkgray;
        padding: 0.741vh;
        color: @gray;
        outline: unset;
        border-radius: 0%;
        margin-right: 0.741vh;
      }
    }

    button {
      height: 100%;
      flex: 0 0 auto;
      background: transparent;
      border: 1px solid @darkgray;
      padding: 0.741vh 1.481vh;
      color: @gray;
      font-size: @fontsize-s;
      cursor: pointer;
    }

    .empty {
      flex: auto;
    }

    .options {
      .option-item {
        display: flex;
        padding-bottom: 0.741vh;
        color: @gray;
        cursor: pointer;
        font-size: @fontsize-s;

        .count {
          flex: 0 0 3.704vh;
          padding: 0.37vh;
          text-align: center;
          border: 1px solid @darkgray;
          margin-right: 0.37vh;
          line-height: 2.222vh;
        }

        .text {
          flex: 1 0 auto;
          padding: 0.741vh;
          text-align: center;
          border: 1px solid @darkgray;
        }

        & + .option-item {
          padding-left: 0.741vh;
        }

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

        &.has-value {
          .text,
          .count {
            border-color: @purple;
            color: @purple;
          }
        }

        &.active,
        &:hover {
          .text,
          .count {
            border-color: @green;
            color: @green;
          }
        }
      }
    }
  }

  .warning-list {
    .error-state {
      width: 0.741vh;
      height: 0.741vh;
      border-radius: 50%;
      background-color: @red;
      margin: auto;
    }
  }
}
</style>
