<template>
  <div class="pd10">
    <!-- 评分管理 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="监测点:">
        <el-select
          v-model="formInline.lineGrade"
          placeholder="请选择监测点等级"
        >
          <el-option
            v-for="item in lineGradeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通讯状态:">
        <el-select v-model="formInline.comFlag" placeholder="请选择通讯状态">
          <el-option
            v-for="item in statusList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据筛选:">
        <el-input
          v-model="formInline.searchValue"
          placeholder="请选择筛选数据"
          :clearable="true"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="query" icon="el-icon-search"
          >查询</el-button
        >
        <el-button type="primary" @click="exportCsv" icon="el-icon-download"
          >导出模板</el-button
        >

        <el-button type="primary" @click="exportData" icon="el-icon-download"
          >导出</el-button
        >
        <!-- <el-button type="primary" @click="importData"
       icon="el-icon-top"   >批量导入监测点评级</el-button
        > -->
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-demo"
          ref="upload"
          action="#"
          :http-request="upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="1"
          accept=".xlsx,.xls"
          :on-exceed="handleExceed"
        >
          <el-button size="small" icon="el-icon-top" type="primary"
            >批量导入监测点评级</el-button
          >
        </el-upload>
      </el-form-item>
    </el-form>
    <el-row>
      <el-table
        stripe
        v-loading="loading"
        :data="tableData"
        border
        :height="vh"
        style="width: 100%"
        header-cell-class-name="table_header"
        highlight-current-row
      >
        <el-table-column
          align="center"
          prop="index"
          type="index"
          label="序号"
          width="70"
        >
          <template scope="scope">
            <span>{{
              (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="province"
          label="省份"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="gdName"
          label="供电公司"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="subName"
          label="所属变电站"
          :show-overflow-tooltip="true"
          width="350"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="devName"
          label="装置名称"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="lineName"
          label="监测点名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="comFlag"
          label="通讯状态"
          width="100"
        >
          <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>
        </el-table-column>
        <el-table-column
          align="center"
          prop="runFlag"
          label="运行状态"
          width="100"
        >
          <template slot-scope="scope">
            <el-tag
              type="primary"
              v-if="scope.row.runFlag === 0"
              style="color: #fff; background: #0099cc"
              size="small"
              >投运</el-tag
            >
            <el-tag
              type="primary"
              v-if="scope.row.runFlag === 1"
              style="color: #fff; background: #996600"
              size="small"
              >热备用</el-tag
            >
            <el-tag
              type="primary"
              v-if="scope.row.runFlag === 2"
              style="color: #fff; background: #cc0000"
              size="small"
              >停运</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="updateTime"
          label="数据更新时间"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="lineGrade"
          label="监测点评级"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="deilallData(scope.row)"
              size="mini"
              class="el-icon-edit"
              >修改评级</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="mt10"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pageNum"
        :page-sizes="[20, 30, 40, 50, 100]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <el-dialog
        :close-on-click-modal="false"
        title="修改评级"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
       <el-form label-width="110px">
        <el-form-item label="监测点评级:">
          <el-select
          v-model="lineGradeChoose"
          style="width: 100%"
          placeholder="请选择监测点评级"
        >
          <el-option
            v-for="item in lineGradeListNoOne"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        </el-form-item>
       </el-form>
      

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        :close-on-click-modal="false"
        title="导入文件"
        :visible.sync="dialogVisibleUpload"
        width="30%"
        :before-close="handleClose"
      >
        <el-upload
          class="upload-demo"
          ref="upload"
          action="#"
          :http-request="upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="1"
          accept=".xlsx,.xls"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传csv文件，且不超过500kb
          </div>
        </el-upload>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
import lineMark from "@/api/device/lineMark.js";
import { dicData } from "@/assets/commjs/dictypeData";

export default {
  name: "scoringmage",
  components: {
    // timepicker
  },
  data() {
    return {
      formInline: {
        lineGrade: "",
        comFlag: "",
        searchValue: "",
        pageNum: 1,
        pageSize: 20,
      },
      total: 0,
      loading: false,
      searchValue: "", //模糊检索
      height: "",
      fileList: [],
      dialogVisible: false,
      dialogVisibleUpload: false,
      lineGradeList: [],
      lineGradeListNoOne: [],
      statusList: [
        { id: "", name: "全部" },
        { id: 1, name: "正常" },
        { id: 0, name: "中断" },
      ],
      tableData: [],
      lineGrade: "",
      comFlag: "",
      lineGradeChoose: "",
      lineId: "",
      vh: undefined,
    };
  },
  created() {
    this.getLineGradeList();
    this.getList();
  },
  mounted() {
    
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 95;
          
        },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getList1();
    },
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.getList1();
    },
    //修改监测点评级
    deilallData(row) {
      this.dialogVisible = true;
      this.lineId = row.lineIndex;
      this.lineGradeChoose = row.lineGradeId;
    },
    //关闭
    handleClose() {
      this.dialogVisible = false;
      this.dialogVisibleUpload = false;
    },
    //导入
    importData() {
      this.dialogVisibleUpload = true;
    },
    //导出监测点台账
    exportData() {
      // npm;
      lineMark
        .exportLineMark({})
        .then(function (response) {
          const blob = new Blob([response]);
          const fileName = "监测点评分台账.xls";
          const linkNode = document.createElement("a");

          linkNode.download = fileName; //a标签的download属性规定下载文件的名称
          linkNode.style.display = "none";
          linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
          document.body.appendChild(linkNode);
          linkNode.click(); //模拟在按钮上的一次鼠标单击

          URL.revokeObjectURL(linkNode.href); // 释放URL 对象
          document.body.removeChild(linkNode);
        })
        .catch(function (error) {
          // console.log(error);
        });
    },

    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    //主列表
    getList() {
      if (
        this.formInline.lineGrade !== "" ||
        this.formInline.searchValue !== "" ||
        this.formInline.comFlag !== ""
      ) {
        this.formInline.pageNum = 1;
      }
      this.loading = true;
      lineMark.getList(this.formInline).then((response) => {
        if (response.code === "A0000") {
          var data = response.data;
          this.tableData = data.records;
          this.loading = false;
          // this.formInline.pageNum = data.current;
          // this.formInline.pageSize = data.size;
          this.total = data.total;
        }
      });
      this.loading = false;
    },
    //分页查询用
    getList1() {
      this.loading = true;
      lineMark.getList(this.formInline).then((response) => {
        if (response.code === "A0000") {
          var data = response.data;
          this.tableData = data.records;
          this.loading = false;
          // this.formInline.pageNum = data.current;
          // this.formInline.pageSize = data.size;
          this.fortotal = data.total;
        }
      });
      this.loading = false;
    },
    /**
     * 获取终端等级
     */
    getLineGradeList() {
      var code = "Dev_Level";
      this.lineGradeList = dicData(code, [], 1);
      this.lineGradeListNoOne = dicData(code, []);
    },

    query() {
      this.getList();
    },

    //单个修改监测点评分
    singleOperate(id, lineGrade) {
      let data = {
        id: id,
        lineGrade: lineGrade,
      };
      lineMark.singleOperate(data).then((response) => {
        if (response.code === "A0000") {
          this.$message.success("监测点等级成功");
          this.dialogVisible = false;
          this.getList();
        }
      });
    },

    //提交按钮
    submit() {
      this.$confirm("是否确认操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.singleOperate(this.lineId, this.lineGradeChoose);
      });
    },

    //导出模板
    exportCsv() {
      lineMark
        .heardExport()
        .then(function (response) {
          const blob = new Blob([response]);
          const fileName = "监测点评分模板.xls";
          const linkNode = document.createElement("a");

          linkNode.download = fileName; //a标签的download属性规定下载文件的名称
          linkNode.style.display = "none";
          linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
          document.body.appendChild(linkNode);
          linkNode.click(); //模拟在按钮上的一次鼠标单击

          URL.revokeObjectURL(linkNode.href); // 释放URL 对象
          document.body.removeChild(linkNode);
        })
        .catch(function (error) {
          // console.log(error);
        });
    },

    //文件上传

    upload(option) {
      let formData = new FormData();
      formData.set("file", option.file);
      lineMark.upload(formData).then((response) => {
        // console.log(response);
        if (response.type === "application/json") {
          const fileReader = new FileReader();
          fileReader.onloadend = () => {
            try {
              const jsonData = JSON.parse(fileReader.result);
              if (jsonData.code === "A0000") {
                this.$message.success("批量修改监测点评分成功");
                this.dialogVisibleUpload = false;
                this.getList();
              } else {
                this.$message.error(jsonData.data);
              }
            } catch (err) {
              // console.log(err);
            }
          };
          fileReader.readAsText(response);
        } else {
          const link = document.createElement("a"); // 创建a标签
          let blob = new Blob([response], {
            type: "application/vnd.ms-excel;charset=UTF-8",
          }); // 设置文件类型
          link.style.display = "none";
          link.href = URL.createObjectURL(blob); // 创建URL
          link.setAttribute("download", "监测点评分错误信息.xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }

        this.$refs.upload.clearFiles();
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");

// ::v-deep .table_header {
//   height: 35px !important;
// }
</style>
