<template>
  <el-row type="flex">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">时间：</div>
          <div class="search-input">
            <el-date-picker
              v-model="time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">等间隔：</div>
          <div class="search-input">
            <el-select
              v-if="!chooseStatus"
              @change="switchChange(selectValue)"
              class="inputs"
              v-model="selectValue"
              placeholder="请选择"
            >
              <el-option
                v-for="item in timeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-actions">
          <!-- <button class="btn" @click="clearDb">重置对标选项</button> -->
          <button class="btn" @click="dbfx">原数据对标</button>
        </div>
      </div>
    </div>
  </el-row>
  <el-row :type="'flex'" class="content mg-b-8">
    <ComTable
      :data="tableData"
      :height="'30vh'"
      v-loading="tableLoading"
      ref="curRef"
      element-loading-text="拼命加载中"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></ComTable>
  </el-row>
  <el-row :type="'flex'" class="content" :style="{ height: '44vh' }">
    <el-col :span="24">
      <multiple-y-line-chart-normal
        height="45vh"
        :list="Powertrend"
        :yAxises="PowertrendYAxises"
        :showLegend="true"
        :markLineData="markLineData"/>
    </el-col>
  </el-row>
</template>

<script>
import ComTable from "@/components/coms/table/table.vue";
import MultipleYLineChartNormal from "../../components/chart/line/multiple-y-line-chart-normal.vue";
export default {
  components: {
    ComTable,
    MultipleYLineChartNormal,
  },
  data() {
    const that = this;
    return {
      Powertrend: [
        {
          title: "",
          yAxisIndex: 0, // 使用单位
          value: [],
        },
      ],
      PowertrendYAxises: [
        {
          name: "",
          min: 0,
          max: null,
          unit: "",
          position: "left",
        },
        {
          name: "",
          min: 0,
          max: 25,
          unit: "",
          position: "right",
        },
      ],
      selectValue: "60",
      timeoptions: [
        {
          value: "60",
          label: "一分钟",
        },
        {
          value: "300",
          label: "五分钟",
        },
        {
          value: "600",
          label: "十分钟",
        },
        {
          value: "1800",
          label: "三十分钟",
        }
      ],
      time: [that.st - 3600 * 1000 * 24, that.st + 1000 * 10 * 60],
      point: [],
      pointdes: [],

      pageSize: 20,
      model: [],
      station: "",
      windturbinename: "",
      isvisiable: false,
      checkLength: 0, //对标分析只能选择5个
      tableData: {
        column: [
          {
            name: "",
            field: "check",
            is_light: false,
            width: "50px",
            template: function () {
              return "<input class='check curCheckBox' type='CheckBox'/>";
            },
            click: function (event, data) {
              let point = data.point,
                pointdes = data.pointdes;
              if (event.target.checked == false && that.checkLength <= 5) {
                that.point.forEach((item, i) => {
                  if (item == point) {
                    that.point.splice(i, 1);
                    that.pointdes.splice(i, 1);
                  }
                });
                that.checkLength--;
              } else if (event.target.checked && that.checkLength < 5) {
                that.point.push(point);
                that.pointdes.push(pointdes);
                that.checkLength++;
              } else if (that.checkLength == 5) {
                event.target.checked = false;
              }
            },
          },
          {
            name: "序号",
            field: "index",
            is_light: false,
            width: "30px",
          },
          {
            name: "测点名称",
            field: "point",
            is_light: false,
            width: "400px",
          },
          {
            name: "测点描述",
            field: "pointdes",
            is_light: false,
            width: "350px",
          },
          {
            name: "操作",
            is_light: false,
            width: "250px",
            template: () => {
              return "<el-button type='text' style='cursor: pointer;' value='config'>查看原数据</el-button>&nbsp";
            },
            click(e, row) {
              that.onClickOption(e, row);
            },
          },
        ],
        data: [],
      },
    };
  },
  props: {
    data: {
      type: Array,
    },
    st: {
      type: String,
    },
    markLineData: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    onClickOption(e, row) {
      // 操作按钮
      let that = this;
      if ("config" == e.target.getAttribute("value")) {
        //原始数据
        that.requestDetailData(
          [row.point],
          [row.pointdes],
          [
            Date.parse(new Date(that.time[0])),
            Date.parse(new Date(that.time[1])),
          ],
          that.selectValue
        );
        that.clearDb();
      }
    },
    list(data) {
      var that = this;
      that.tableData.data = [];
      if (data.length) {
        for (var i = 0; i < data.length; i++) {
          let obj = {
            index: i + 1,
            windturbineid: data[i].windturbineid,
            widget: data[i].widget,
            point: data[i].point,
            pointdes: data[i].pointdes,
            model: data[i].model,
            stationcn: data[i].stationcn,
          };
          that.tableData.data.push(obj);
        }
        that.requestDetailData(
          [data[0].point],
          [data[0].pointdes],
          [
            Date.parse(new Date(that.time[0])),
            Date.parse(new Date(that.time[1])),
          ],
          that.selectValue
        );
      }
    },
    switchChange(interval, status) {
      if (status === "interval") {
        this.chooseStatus = false;
        this.selectValue = "60";
      } else if (status === "original") {
        this.chooseStatus = true;
      }
    },
    requestDetailData(point, pointdes, time, interval) {
      let that = this;
      let Powertrend = [];
      let dataPoint = "";
      pointdes.forEach((ele, index) => {
        Powertrend.push({
          title: ele,
          smooth: true,
          value: [],
        });
      });
      point.forEach((ele, index) => {
        dataPoint += ele + ",";
      });
      dataPoint = dataPoint.slice(0, dataPoint.length - 1);
      that.API.requestData({
        showLoading: true,
        method: "GET",
        baseURL: "http://192.168.1.18:9002/",
        subUrl: "point/item",
        data: {
          point: dataPoint,
          startTs: time[0],
          endTs: time[1],
          interval: interval,
        },
        success(res) {
          if (res.data) {
            res.data.forEach((ele, index) => {
              ele.list.forEach((cEle) => {
                Powertrend[index].value.push({
                  text: new Date(cEle.ts).formatDate("yyyy-MM-dd hh:mm"),
                  value: cEle.doubleValue,
                });
              });
            });
            that.Powertrend = Powertrend;
          }
        },
      });
    },
    dbfx() {
      var that = this;
      if (that.point.length <= 5 && that.point.length != 0) {
        that.Powertrend = [];
        that.requestDetailData(
          that.point,
          that.pointdes,
          [
            Date.parse(new Date(that.time[0])),
            Date.parse(new Date(that.time[1])),
          ],
          that.selectValue
        );
      } else {
        this.BASE.showMsg({
          type: "warning",
          msg: "请选择测点后再对标",
        });
        return;
      }
    },
    clearDb() {
      //清空对标状态
      this.$refs.curRef.clearCheckBox();
      this.point = [];
      this.pointdes = [];
      this.checkLength = 0;
    },
  },
  created() {
    this.list(this.data);
  },
  watch: {
    selectValue() {
      this.requestDetailData(
        this.point,
        this.pointdes,
        [
          Date.parse(new Date(this.time[0])),
          Date.parse(new Date(this.time[1])),
        ],
        this.selectValue
      );
    },
    time(e) {
      let st = Date.parse(new Date(e[0])),
        et = Date.parse(new Date(e[1]));
      if (et - st > 86400000 * 7) {
        //判断选择日期区间大于一周则重新选择
        this.BASE.showMsg({
          type: "warning",
          msg: "请选择小于7天的日期区间",
        });
        return;
      }
      this.requestDetailData(
        this.point,
        this.pointdes,
        [
          Date.parse(new Date(this.time[0])),
          Date.parse(new Date(this.time[1])),
        ],
        this.selectValue
      );
    },
  },
};
</script>

<style lang="less" scoped>
.mb10 {
  margin-bottom: 10px;
}

.el-select.w {
  width: 100%;
}
</style>
