<template>
  <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <Timeinterval :interval="3" ref="interval"></Timeinterval>
      </el-form-item>

      <el-form-item style="margin-bottom: 10px">
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>

        <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="text" @click="closeHandle"
          >条件筛选<i
            :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
          ></i
        ></el-button>
      </el-form-item>
    </el-form>

    <div class="container" id="container">
      <i @click="closeHandle" class="el-icon-circle-close coles"></i>
      <el-form :inline="true" label-width="110px">
        <el-form-item label="监测点等级:">
          <el-select
            v-model="formData.lineGrade"
            clearable
            placeholder="请选择监测点等级"
          >
            <el-option
              v-for="item in devLevel"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通讯状态:">
          <el-select v-model="formData.comFlag" clearable placeholder="请选择通讯状态">
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运行状态:">
          <el-select v-model="formData.runFlag" clearable placeholder="请选择运行状态">
            <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 label="筛选数据:" style="margin-bottom: 10px">
          <el-input
            v-model.trim="formData.searchValue"
            clearable
            placeholder="请输入筛选数据"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>

    <vxe-table class="xiaoshou"
      stripe
      header-cell-class-name="table_header"
      :data="tableData"
      border
      ref="monthreport"
      :row-config="{ isCurrent: true, isHover: true }"
      highlight-current-row
      default-expand-all
      :height="vh"
    
    >
      <vxe-table-column title="序号" min-width="70" type="seq" align="center">
        <template v-slot="row">
          <span>{{
            (formData.pageNum - 1) * formData.pageSize + row.seq
          }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="areaName"
        title="省公司"
      ></vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        field="gdName"
        title="供电公司"
        show-overflow
      >
      <template slot-scope="scope">
        {{ scope.row.gdName == null ? '/' : scope.row.gdName }}
      </template>
    </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="subName"
        title="所属变电站"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="lineName"
        title="监测点名称"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="lineGrade"
        :formatter="formFilter"
        title="重要等级"
      ></vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="businessType"
        :formatter="formFilter1"
        title="行业类型"
      ></vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="runFlag"
        title="运行状态"
      >
        <template slot-scope="scope">
          <span type="primary" v-if="scope.row.runFlag === '0'">投运</span>
          <span type="primary" v-if="scope.row.runFlag === '1'">热备用</span>
          <span type="primary" v-if="scope.row.runFlag === '2'">停运</span>
        </template>
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="160"
        show-overflow
        field="comFlag"
        title="监测点通讯状态"
      >
        <template slot-scope="scope">
          <el-tag
            type="primary"
            v-if="scope.row.comFlag === '0'"
            style="color: #fff; background: #cc0000"
            size="small"
            >中断</el-tag
          >
          <el-tag
            type="primary"
            v-if="scope.row.comFlag === '1'"
            style="color: #fff; background: #2e8b57"
            size="small"
            >正常</el-tag
          >
        </template>
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="loginTime"
        title="投运时间"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="140"
        show-overflow
        field="updateTime"
        title="数据更新时间"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="onlineRate"
        title="在线率(%)"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="integrityData"
        title="完整性(%)"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="devName"
        title="装置名称"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="devSeries"
        :formatter="formFilter2"
        title="装置系列"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="160"
        show-overflow
        field="ip"
        title="MAC地址"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="flowMeal"
        title="总流量(M)"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="140"
        show-overflow
        field="statisValue"
        title="使用流量(M)"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="140"
        field="residualFlow"
        title="剩余流量(M)"
      >
      <template slot-scope="scope">
        {{ (scope.row.flowMeal) - (scope.row.statisValue)  }}
      </template>
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        field="usageRate"
        title="使用率(%)"
      >
      <template slot-scope="scope">
        {{ (((scope.row.statisValue) / (scope.row.flowMeal)) * 100).toFixed(2) }}
      </template>
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="sim"
        title="ICICD"
      >
      <template slot-scope="scope">
        {{ scope.row.sim == null ? '/' : scope.row.sim }}
      </template>
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        show-overflow
        field="remark"
        title="备注"
      >
      <template slot-scope="scope">
        {{ scope.row.remark == null ? '/' : scope.row.remark }}
      </template>
      </vxe-table-column>
    </vxe-table>
    <el-pagination
      background
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formData.pageNum"
      :page-sizes="[20, 30, 40, 50, 100]"
      :page-size="formData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="mt10"
    >
    </el-pagination>
  </div>
</template>
<script>
import Timeinterval from "@/views/components/Timeinterval.vue";
import api from "@/api/BusinessAdministrator/monthreport/monthreport.js";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  components: { Timeinterval },
  props: {},
  data() {
    return {
      view: false,
      loading: false,
      form: {},
      options: [
        {
          id: 0,
          name: "投运",
        },
        {
          id: 2,
          name: "停运",
        },
        {
          id: 1,
          name: "热备用",
        },
      ],
      options1: [
        {
          id: 0,
          name: "中断",
        },
        {
          id: 1,
          name: "正常",
        },
      ],
      value: "",
      formData: {
        lineGrade: "", //终端等级
        runFlag: "",
        comFlag: "",
        searchValue: "",
        searchBeginTime: "", //开始
        searchEndTime: "", //结束
        pageNum: 1,
        pageSize: 20,
      },
      tableData: [],
      devLevel: [],
      BusinessType: [],
      DevSeries: [],
      total: 0,

      vh: null,
    };
  },
  created() {
    this.getclassificationData();
  },
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    this.onSubmit();
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 95;
          
        },
    //获取类型
    getclassificationData() {
      //监测点等级
      this.devLevel = dicData("Dev_Level", []);
      //行业类型
      this.BusinessType = dicData("Business_Type", []);
      //装置系列
      this.DevSeries = dicData("Dev_Series", []);
    },

    //查询
    onSubmit() {
      this.loading = true;
      this.formData.pageNum = 1;
      this.$refs.interval.timeOptions = [
        // { label: "年份", value: 1 },
        // { label: "季度", value: 2 },
        { label: "月份", value: 3 },
        // { label: "周", value: 4 },
        // // { label: "自定义", value: 5 },
      ]
      this.formData.searchBeginTime = this.$refs.interval.timeValue[0];
      this.formData.searchEndTime = this.$refs.interval.timeValue[1];
      api.getHalfReport(this.formData).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    onSubmit1() {
      this.loading = true;
      this.$refs.interval.timeOptions = [
        // { label: "年份", value: 1 },
        // { label: "季度", value: 2 },
        { label: "月份", value: 3 },
        // { label: "周", value: 4 },
        // // { label: "自定义", value: 5 },
      ]
      this.formData.searchBeginTime = this.$refs.interval.timeValue[0];
      this.formData.searchEndTime = this.$refs.interval.timeValue[1];
      api.getHalfReport(this.formData).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    // 数据过滤
    formFilter(row, column) {
      if (row.column.property == "lineGrade") {
        let title = "";
        this.devLevel.forEach((item) => {
          if (item.id == row.row.lineGrade) {
            title = item.name;
          }else if(row.row.lineGrade == null || row.row.lineGrade == ''){
            title = '/';
          }
        });
        return title;
      } else {
        return row.row[row.column.property];
      }
    },
    // 数据过滤
    formFilter1(row, column) {
      if (row.column.property == "businessType") {
        let title = "";
        this.BusinessType.forEach((item) => {
          if (item.id == row.row.businessType) {
            title = item.name;
          }else if(row.row.businessType == null || row.row.businessType == ''){
            title = '/';
          }
        });
        return title;
      } else {
        return row.row[row.column.property];
      }
    },
    // 数据过滤
    formFilter2(row, column) {
      if (row.column.property == "devSeries") {
        let title = "";
        this.DevSeries.forEach((item) => {
          if (item.id == row.row.devSeries) {
            title = item.name;
          }else if(row.row.devSeries == null || row.row.devSeries == ''){
            title = '/';
          }
        });
        return title;
      } else {
        return row.row[row.column.property];
      }
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.formData.pageSize = val;
      this.onSubmit1();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.formData.pageNum = val;
      this.onSubmit1();
    },
    //导出
    exportEvent() {
      api
        .getHalfReport({
          lineGrade: this.formData.lineGrade,
          comFlag: this.formData.comFlag,
          runFlag: this.formData.runFlag,
          searchBeginTime: this.formData.searchBeginTime,
          searchEndTime: this.formData.searchEndTime,
          searchValue: this.formData.searchValue,
          pageNum: 1,
          pageSize: this.total,
        })
        .then((res) => {
          res.data.records.forEach(item=>{
            if(item.gdName == null){
              item.gdName = '/'
            }
            if(item.sim == null){
              item.sim = '/'
            }
            if(item.remark == null){
              item.remark = '/'
            }
            if(item.runFlag == '0'){
              item.runFlag = '投运'
            }else if(item.runFlag == '1'){
              item.runFlag = '热备用'
            }else if(item.runFlag == '2'){
              item.runFlag = '停运'
            }
            if(item.comFlag == '0'){
              item.comFlag = '中断'
            }else if(item.comFlag == '1'){
              item.comFlag = '正常'
            }
            item.residualFlow = (item.flowMeal) - (item.statisValue) 
            item.usageRate = (((item.statisValue) / (item.flowMeal)) * 100).toFixed(2)
          })
          this.$refs.monthreport.exportData({
            filename: "export", // 文件名字
            sheetName: "Sheet1",
            type: "xlsx", //导出文件类型 xlsx 和 csv
            useStyle: true,
            data: res.data.records, // 数据源 // 过滤那个字段导出
            columnFilterMethod: function (column, $columnIndex) {
              return !(column.$columnIndex === 0);
            },
          });
        });
    },
    closeHandle() {
      if (this.view) {
        this.view = false;
      } else {
        this.view = true;
      }
      //console.log('关闭和展开');
      const dom = document.getElementById("container");
      const closeDom = document.getElementsByClassName("close")[0];
      if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
        dom.className = "container expend";
      } else {
        dom.className = "container close-container";
      }
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
.container {
  /* margin: auto; */
  top: 0px;
  right: 0;
  width: 40%;
  height: 0px;
  z-index: 2000;
  position: absolute;
  background-color: #e4e7ebb9;
  overflow: auto;
  scroll-behavior: smooth;
  -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: block;
}
.expend {
  animation: expend ease 5s forwards;
}
.close-container {
  animation: no-expend ease 1s forwards;
}
@keyframes expend {
  from {
    top: 0px;
    height: auto;
  }
  to {
    height: auto;
    top: 0px;
  }
}
@keyframes no-expend {
  from {
    height: 20%;
    top: 0px;
  }
  to {
    top: 0px;
    height: 0px;
  }
}
.coles {
  position: absolute;
  right: 0;
  font-size: 20px;
  cursor: pointer;
}
.xiaoshou{
  cursor: pointer;
}
</style>
