<template>
  <el-dialog
    width="85%"
    @opened="opened()"
    @closed="closed()"
    :show-close="false"
    class="my-info-dialog"
  >
    <template #title>
      <div style="margin-top: -10px; color: #ffffff">参数对比</div>
    </template>
    <div class="body">
      <div class="title" v-if="labelList.length > 0">
        <div class="labelList">
          <div
            :class="items?.type ? 'label_on' : 'label'"
            v-for="(items, index) in labelList"
            :key="index"
            @click="handleClick(items)"
          >
            {{ items.name }}
          </div>
        </div>
      </div>

      <div class="titleList" v-if="dataList.length > 0">
        <el-table
          :data="dataList"
          class="table"
          width="100%"
          :header-cell-style="{
            background: '#000000',
            color: 'rgb(220,220,220)',
            padding: '4px',
            fontSize: '14px',
            'border-bottom': 'solid 1px black',
          }"
          :cell-style="{
            height: '45px',
            background: 'rgb(30,30,30)',
            color: 'rgb(220,220,220)',
            'line-height': '0px',
            fontSize: '12px',
            'border-bottom': '1px solid #000000',
          }"
        >
          <el-table-column
            v-for="(item, index) in titleList"
            :key="index"
            min-width="170"
            align="center"
            :label="item.name"
            @click="showPercent(item)"
          >
            <template #default="scope" @click="showPercent(item)">
              <span @click="showPercent(item)">
                <div
                  class="cell"
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <div
                    class="left"
                    v-if="item.showFlag && index !== 0"
                    :style="`width:${
                      (scope?.row.filter((val) => val.name === item.name)[0]
                        ?.value /
                        item.maxValue) *
                      95
                    }%;position: absolute;left: 10px;`"
                  ></div>
                  <div style="position: absolute">
                    {{
                      index === 0
                        ? scope?.row.filter((val) => val.name === item.name)[0]
                            ?.value
                        : scope?.row
                            .filter((val) => val.name === item.name)[0]
                            ?.value?.toFixed(2)
                    }}
                  </div>
                </div>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import api from "api/index";
export default {
  props: {
    chooseList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      dataList: [],
      labelList: [],
      allData: {},
      arrList: [],
      titleList: [],
      // intervals: null,
    };
  },
  methods: {
    opened() {
      this.dataList = [];
      this.getCompared();
      // this.intervals = setInterval(this.getCompared, 5000);
    },
    getCompared() {
      this.labelList = [
        {
          name: "全部",
        },
      ];
      let arr = [];
      this.chooseList.forEach((item) => {
        let obj = `${item.stationId}.${item.modelId}`;
        arr.push(obj);
      });
      let list = Array.from(new Set(arr));
      let params = list.join(",");
      api.stationCompared(params).then((res) => {
        if (res) {
          this.arrList = res.data[list[0]];
          this.allData = res.data;
          this.labelList = [...this.labelList, ...res.data[list[0]]];
          this.labelList.forEach((item) => {
            item.type = true;
          });
          this.titleList = JSON.parse(JSON.stringify(this.labelList));
          this.titleList[0].name = "风机";
          this.getLatest(0);
        }
      });
    },
    getLatest(index) {
      let list = [];

      let arr = this.arrList.map((item) => {
        return {
          ...item,
        };
      });
      this.titleList.forEach((item, index) => {
        if (index !== 0) {
          arr.filter((val) => val.name === item.name)[0].type = true;
        }
      });
      arr.map((item) => {
        if (this.labelList.filter((val) => val.name === item.name)[0]?.type) {
          list.push(item.code);
        }
      });
      arr.unshift({
        name: "风机",
        value: this.chooseList[index].windturbineId,
      });
      let params = list.join(",");
      api
        .nitWinturbineBaseData({
          thingType: "windturbine",
          thingId: this.chooseList[index].windturbineId,
          uniformCodes: params,
        })
        .then((res) => {
          if (res) {
            arr.forEach((item) => {
              if (item.type) {
                item.value = res.data[item.code]?.value;
              }
            });
            this.dataList.push(arr);
            if (index < this.chooseList.length - 1) {
              index++;
              this.getLatest(index);
            } else {
              this.titleList.forEach((item, index) => {
                if (index > 0) {
                  let datas = [];
                  this.dataList.map((items) => {
                    datas.push(
                      items.filter((val) => item.name === val.name)[0]?.value
                    );
                  });
                  item.maxValue = Math.max.apply(
                    null,
                    datas.map((v) => v)
                  );
                  item.showFlag = false;
                }
              });
            }
          }
        });
    },
    closed() {
      this.labelList = [];
      this.dataList = [];
      this.allData = {};
      this.arrList = [];
      // clearInterval(this.intervals);
      // this.intervals = null;
    },
    handleClick(value) {
      this.dataList = [];
      this.titleList = [];
      let titleList = [
        {
          name: "风机",
          type: true,
        },
      ];
      if (value.name === "全部") {
        if (value.type) {
          this.labelList.forEach((item) => {
            item.type = false;
          });
        } else {
          this.labelList.forEach((item) => {
            item.type = true;
          });
        }
      } else {
        value.type = !value.type;
      }
      this.labelList.forEach((item) => {
        if (item.type && item.name !== "全部") {
          titleList.push(item);
        }
      });
      this.titleList = JSON.parse(JSON.stringify(titleList));
      this.getLatest(0);
    },
    showPercent(item) {
      item.showFlag = !item.showFlag;
    },
  },
};
</script>
<style scoped>
.body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 62vh;
  overflow-y: auto;
}
.title {
  /* height: 300px; */
}
.labelList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.label {
  border: 1px solid #999999;
  padding: 2px 4px;
  margin: 0 10px 10px 0;
  color: #999999;
}
.label_on {
  border: 1px solid rgba(37, 116, 219, 1);
  background-color: rgba(37, 116, 219, 1);
  color: #ffffff;
  padding: 2px 4px;
  margin: 0 10px 10px 0;
}
.titleList {
  width: 100%;
}
.left {
  height: 20px;
  background: linear-gradient(
    to right,
    rgba(37, 116, 219, 1),
    rgba(37, 116, 219, 0.6)
  );
}
.table {
  background-color: #000000 !important;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #000000 !important;
}

.el-table__header {
  width: 100% !important;
}

.el-table__body-wrapper {
  background-color: #000000 !important;
}

.el-table::before {
  width: 0;
}
.el-table__body-wrapper is-scrolling-left {
  height: 90% !important;
}
/* .el-table--scrollable-y ::-webkit-scrollbar {
  display: none;
} */
</style>