<template>
  <div style="width: 100%" class="pd10">
    <el-form :inline="true">
      <el-form-item>
        <Area
          @click="handleNodeClick"
          ref="area"
          style="margin-bottom: 0px; width: 100%"
        ></Area>
      </el-form-item>

      <el-form-item label="报告类型:">
        <el-select v-model="waveType" placeholder="请选择" clearable>
          <el-option
            v-for="item in waveTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" 模板策略:">
        <el-select v-model="value" placeholder="请选择" @change="changeFn" clearable>
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <Timeinterval ref="Timeinterval" :interval="3" />
      </el-form-item>

      <el-form-item
        ><el-button type="primary" icon="el-icon-circle-plus" @click="generate"
          >报告生成</el-button
        >
      </el-form-item>
    </el-form>
    <div class="box" :style="`height: ${vh - 10}px;`">
      <el-row>
        <el-col :span="12"
          ><div class="grid-content">
            <div class="divBox">监测网分布</div>
          </div></el-col
        >
        <el-col :span="12">
          <el-checkbox v-model="formInline.monitorDistributeChart"
            >图形</el-checkbox
          >
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content">
            <div class="divBox">暂降事件统计</div>
          </div></el-col
        >
        <el-col :span="12">
          <el-checkbox v-model="formInline.eventCountTable">表格</el-checkbox>
          <el-checkbox v-model="formInline.eventCountChart">图形</el-checkbox>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content">
            <div class="divBox">暂降密度</div>
          </div></el-col
        >
        <el-col :span="12">
          <el-checkbox v-model="formInline.densityTable">表格</el-checkbox>
          <el-checkbox v-model="formInline.densityChart">图形</el-checkbox>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content">
            <div class="divBox">暂降事件点</div>
          </div></el-col
        >
        <el-col :span="12">
          <el-checkbox v-model="formInline.itic">ITIC</el-checkbox>
          <el-checkbox v-model="formInline.f47">F47</el-checkbox>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content">
            <div class="divBox">概率分布</div>
          </div></el-col
        >
        <el-col :span="12">
          <el-checkbox v-model="formInline.sagAmplitude">暂降幅值</el-checkbox>
          <el-checkbox v-model="formInline.duration">持续时间</el-checkbox>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content">
            <div class="divBox">事件关联统计</div>
          </div></el-col
        >
        <el-col :span="12">
          <el-checkbox v-model="formInline.eventRelevanceCountTable"
            >表格</el-checkbox
          >
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content">
            <div class="divBox">暂降原因</div>
          </div></el-col
        >
        <el-col :span="12">
          <el-checkbox v-model="formInline.eventReasonTable">表格</el-checkbox>
          <el-checkbox v-model="formInline.eventReasonChart">图形</el-checkbox>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content">
            <div class="divBox">暂降类型</div>
          </div></el-col
        >
        <el-col :span="12">
          <el-checkbox v-model="formInline.eventTypeTable">表格</el-checkbox>
          <el-checkbox v-model="formInline.eventTypeChart">图形</el-checkbox>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content">
            <div class="divBox">暂降热力图</div>
          </div></el-col
        >
        <el-col :span="12">
          <el-checkbox v-model="formInline.thermodynamicChart"
            >图形</el-checkbox
          >
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
  </div>
</template>
<script>
import Timeinterval from "@/views/components/TimePicker/index4";

import { dicData } from "@/assets/commjs/dictypeData";
import { getAreaReport, getList, selectReleation } from "@/api/regionReport";
import Area from "@/views/components/Area/Area.vue";
export default {
  components: { Timeinterval, Area },
  props: {},
  data() {
    return {
      value: "",
      checkList: [],
      formInline: {
        monitorDistributeChart: false,
        eventCountTable: false,
        eventCountChart: false,
        densityTable: false,
        densityChart: false,
        itic: false,
        f47: false,
        sagAmplitude: false,
        duration: false,
        eventRelevanceCountTable: false,
        eventReasonTable: false,
        eventReasonChart: false,
        eventTypeTable: false,
        eventTypeChart: false,
        thermodynamicChart: false,
      },
      waveType: 0,
      waveTypeList: [
        {
          value: 0,
          label: "暂态",
        },
        {
          value: 1,
          label: "暂降",
        },
      ],
      vh: undefined,

      item: ["", ""],
      options: [],
    };
  },
  created() {
    this.dictionaries();
  },
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)

    this.item = this.$refs.Timeinterval.timeValue;
     this.$refs.Timeinterval.timeOptions= [
          { label: "年份", value: 1 }, 
          { label: "季度", value: 2 }, 
          { label: "月份", value: 3 },
          // { label: "周", value: 4 },
          // // { label: "自定义", value: 5 },
        ]
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 80;
          
        },
    //报告生成
    generate() {
      var code = "Statistical_Type";
      this.formInline.statisticalType = dicData(code, ["Report_Type"])[0];
      this.formInline.searchBeginTime = this.$refs.Timeinterval.timeValue[0];
      this.formInline.searchEndTime = this.$refs.Timeinterval.timeValue[1];
      this.formInline.deptIndex = JSON.parse(window.sessionStorage.getItem("Info")).deptId,
      this.formInline.monitorFlag = 2;
      this.formInline.powerFlag = 2;
      this.formInline.waveType = this.waveType;
      this.formInline.interval = this.$refs.Timeinterval.timeFlag;
      getAreaReport(this.formInline).then((res) => {
        let blob = new Blob([res], {
          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
        });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a"); // 创建a标签
        link.href = url;
        // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
        link.download = "区域报告"; // 设置下载的文件名
        document.body.appendChild(link);
        link.click(); //执行下载
        document.body.removeChild(link);
      });
    },
    //查询模板策略
    dictionaries() {
      let data = {
        pageNum: 1,
        pageSize: 100,
        type: 1,
      };
      getList(data).then((res) => {
        this.options = res.data.records;
      });
    },
    handleNodeClick(data, node, nodeData) {
      this.formInline.deptIndex = data.id;
    },
    changeFn(val) {
      this.formInline = {
        monitorDistributeChart: false,
        eventCountTable: false,
        eventCountChart: false,
        densityTable: false,
        densityChart: false,
        itic: false,
        f47: false,
        sagAmplitude: false,
        duration: false,
        eventRelevanceCountTable: false,
        eventReasonTable: false,
        eventReasonChart: false,
        eventTypeTable: false,
        eventTypeChart: false,
        thermodynamicChart: false,
      };
      let data = {
        id: val,
      };

      selectReleation(data).then((res) => {
        res.data.forEach((item) => {
          for (let k in this.formInline) {
            if (item.name == k) {
              this.formInline[k] = true;
              return
            }
          }
        });
      });
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="scss" scoped>
.el-select-dropdown__item.selected {
  font-weight: normal;
}
.grid-content {
  text-align: center;
}
.divBox {
  width: 250px;
  height: 31px;
  margin: auto;
  line-height: 32px;
  border: 1px solid #c9c9c9;
  &:hover {
    border: 1px solid $themeColor;
  }
}
.box {
  // border: 1px solid $themeColor;
  padding: 10px;
  margin-top: 10px;
  overflow-y: auto;
  font-size: 15px;
}
.el-divider--horizontal {
  margin: 10px 0;
}
</style>
