<template>
  <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label="监测点等级:">
        <el-select
          v-model="formData.lineGrade"
          placeholder="请选择监测点等级"
          clearable
        >
          <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.runFlag"
          placeholder="请选择装置运行状态"
          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 label="筛选数据:" style="margin-bottom: 10px">
        <el-input
          style="width: 204px"
          v-model.trim="formData.searchValue"
          clearable
          placeholder="请输入筛选数据"
        ></el-input>
      </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-button
          type="primary"
          icon="el-icon-download"
          @click="TemplateExport"
          >模版导出</el-button
        >
        <el-button type="primary" icon="el-icon-download" @click="batchImport"
          >批量导出监测点评分权重</el-button
        >
      </el-form-item>
    </el-form>

    <vxe-table class="xiaoshou"
      size="mini"
      ref="powerweight"
      :row-config="{ isCurrent: true, isHover: true }"
      header-cell-class-name="table_header"
      :data="tableData"
      border
      highlight-current-row
      default-expand-all
      :height="vh"
      stripe
    >
      <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="80px"
        field="areaName"
        title="省份"
      ></vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="100px"
        field="gbName"
        title="供电公司"
      ></vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        field="subName"
        show-overflow
        title="所属变电站"
      ></vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        field="devName"
        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="100px"
        field="runFlag"
        title="装置状态"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.runFlag == 0" style="color: green">投运</span>
          <span v-if="scope.row.runFlag == 2" style="color: red">停运</span>
          <span v-if="scope.row.runFlag == 1" style="color: orange"
            >热备用</span
          >
          <span v-if="scope.row.runFlag == null">/</span>
        </template>
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120"
        field="lineGrade"
        :formatter="formFilter"
        title="监测点评级"
      ></vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="140"
        field="communFeeMark"
        title="通讯费用评分"
      ></vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="140"
        field="assetBelong"
        title="资产归属评分"
      ></vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="140"
        field="serviceMark"
        title="服务条款评分"
      ></vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="160"
        field="agentMark"
        title="中间户数据需求"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="140"
        field="companyMark"
        title="公司数据需求"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="100px"
        field="userMark"
        title="用户需求"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120"
        field="lineTypeMark"
        title="坚测点类型"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120"
        field="businessMark"
        title="行业重要度"
      >
      </vxe-table-column>
      <vxe-table-column
        align="center"
        min-width="120px"
        field="flowProportion"
        title="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-circle-check"
            @click="score(scope.row)"
            >评分</el-button
          >
        </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>

    <el-dialog title="权重评分" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="scoreForm" label-width="120px">
        <el-form-item label="通讯费用评分:">
          <el-input
            v-model.number="scoreForm.communFeeMark"
            placeholder="0 ～ 100"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          ></el-input>
        </el-form-item>
        <el-form-item label="资产归属评分:" class="top">
          <el-input
            v-model.number="scoreForm.assetBelong"
            placeholder="0 ～ 100"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务条款评分:" class="top">
          <el-input
            v-model.number="scoreForm.serviceMark"
            placeholder="0 ～ 100"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          ></el-input>
        </el-form-item>
        <el-form-item label="中间户数据需求:" class="top">
          <el-input
            v-model.number="scoreForm.agentMark"
            placeholder="0 ～ 100"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司数据需求:" class="top">
          <el-input
            v-model.number="scoreForm.companyMark"
            placeholder="0 ～ 100"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户需求:" class="top">
          <el-input
            v-model.number="scoreForm.userMark"
            placeholder="0 ～ 100"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          ></el-input>
        </el-form-item>
        <el-form-item label="坚测点类型:" class="top">
          <el-input
            v-model.number="scoreForm.lineTypeMark"
            placeholder="0 ～ 100"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          ></el-input>
        </el-form-item>
        <el-form-item label="行业重要度:" class="top">
          <el-input
            v-model.number="scoreForm.businessMark"
            placeholder="0 ～ 100"
            oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
            :maxlength="3"
            :minlength="1"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="queryFn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 上传文件 -->
    <el-dialog
      :close-on-click-modal="false"
      title="批量导入监测点评分权重"
      :visible.sync="uploadInformation"
      width="25%"
      class="dialog"
      height="210px"
    >
    <el-form ref="form" :model="scoreForm" label-width="120px">
      <el-form-item label="文件上传:">
      <el-upload
        ref="upload"
        class="upload-files"
        action=""
        :headers="headers"
        name="file"
        multiple
        :auto-upload="false"
        :file-list="fileList"
        :on-change="handleChange"
        :limit="1"
        accept=".doc,.docx,.xls,.xlsx,.pdf,.txt"
        :on-exceed="handleExceed"
      >
        <el-button slot="trigger" size="mini" type="primary"
          >选取文件</el-button
        >
      </el-upload>
    </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="uploadInformation = fasle"
          >取 消</el-button
        >
        <el-button type="primary" @click="uploadFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Timeinterval from "@/views/components/Timeinterval.vue";
import api from "@/api/BusinessAdministrator/powerweight/powerweight.js";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  components: { Timeinterval },
  props: {},
  data() {
    return {
      loading: false,
      view: false,
      form: {},
      jcname: "",
      options: [
        {
          id: 0,
          name: "投运",
        },
        {
          id: 2,
          name: "停运",
        },
        {
          id: 1,
          name: "热备用",
        },
      ],
      uploadInformation: false,
      dialogVisible: false,
      headers: {
        Authorization: window.sessionStorage.getItem("cntoken"),
      },
      fileList: [],
      value: "",
      formData: {
        lineGrade: "", //终端等级
        comFlag: "",
        searchValue: "",
        pageNum: 1,
        pageSize: 20,
      },
      scoreForm: {
        communFeeMark: "",
        serviceMark: "",
        agentMark: "",
        companyMark: "",
        userMark: "",
        lineTypeMark: "",
        businessMark: "",
        assetBelong: "",
      },
      tableData: [{}],
      devLevel: [],
      total: undefined,
      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", []);
    },
    //查询
    onSubmit() {
      this.loading = true;
      this.formData.pageNum = 1;
      api.LineWeightList(this.formData).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    onSubmit1() {
      this.loading = true;
      api.LineWeightList(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;
          }
        });
        return title;
      } else {
        return row.row[row.column.property];
      }
    },
    // 评分
    score(val) {
      this.dialogVisible = true;
      this.scoreForm = val;
      this.scoreForm.lineIndex = val.lineIndex;
    },
    //评分确定
    queryFn() {
      this.$confirm("是否确认修改?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.addLineWeight(this.scoreForm).then((res) => {
            if (res.code == "A0000") {
              this.$message({
                message: res.message,
                type: "success",
              });
            }
            this.dialogVisible = false;
            this.onSubmit();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    //批量导出监测点评分权重
    batchImport() {
      this.uploadInformation = true;
    },
    //导入确定
    uploadFn() {
        let fileName = this.fileList[0].name
        let pos = fileName.lastIndexOf('.')
        let includes = fileName.substring(pos, fileName.length)
        console.log(includes)
        let fileLastArr = [".doc",".docx",".xls",".xlsx",".pdf",".txt"]
        if (!fileLastArr.includes(includes)) {
            this.$message.error('当前不支持该格式文件')
            return false;
        }

      this.$confirm("是否确认导入?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const formData = new FormData();
          this.fileList.forEach((item) => {
            // console.log(item);
            if (item.raw == "") {
            } else {
              formData.append("file", item.raw);
            }
          });
          api.batchWeight(formData).then((res) => {
            if (res.code == "A0000") {
              this.$message({
                message: res.message,
                type: "success",
              });
              this.uploadInformation = false;
              this.$refs.upload.clearFiles();
              this.onSubmit();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导入",
          });
        });
    },
    handleChange(file, fileList) {
      // console.log(file, fileList);
      this.fileList = fileList;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1个文件,本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.formData.pageSize = val;
      this.onSubmit1();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.formData.pageNum = val;
      this.onSubmit1();
    },
    //模板导出
    TemplateExport() {
      api.export().then((res) => {
        let blob = new Blob([res], {
          type: "application/vnd.ms-excel",
        });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a"); // 创建a标签
        link.href = url; // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
        link.download = "监测点评分权重模板.csv"; // 设置下载的文件名
        document.body.appendChild(link);
        link.click(); //执行下载
        document.body.removeChild(link);
      });
    },
    //导出
    exportEvent() {
      api
        .LineWeightList({
          lineGrade: this.formData.lineGrade,
          comFlag: this.formData.comFlag,
          searchValue: this.formData.searchValue,
          pageNum: 1,
          pageSize: this.total,
        })
        .then((res) => {
          res.data.records.forEach(item=>{
            if(item.runFlag == '0'){
              item.runFlag = '投运'
            }else if(item.runFlag == '1'){
              item.runFlag = '热备用'
            }else if(item.runFlag == '2'){
              item.runFlag = '停运'
            }
          })
          this.$refs.powerweight.exportData({
            filename: "监测点权重信息", // 文件名字
            sheetName: "Sheet1",
            type: "xlsx", //导出文件类型 xlsx 和 csv
            useStyle: true,
            data: res.data.records, // 数据源 // 过滤那个字段导出
            columnFilterMethod: function (column, $columnIndex) {
              return !(column.$columnIndex === 0 || column.$columnIndex === 16 );
            },
          });
        });
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
.xiaoshou {
  cursor: pointer;
}
</style>
