<template>
  <div>
    <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
      <!-- <el-form-item label="单位:">
        <el-select v-model="ruleForm.company" placeholder="请选择">
          <el-option :value="treeDataValue" style="height: auto">
            <el-tree
              ref="tree"
              :data="CompanyList"
              default-expand-all
              node-key="id"
              highlight-current
              :props="defaultProps"
              @node-click="handleNodeClick"
            />
          </el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="单位名称:">
        <el-select v-model.trim="form.company" placeholder="请选择" clearable>
          <el-option
            v-for="item in options"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item label="线路名称:">
        <el-select
          v-model.trim="ruleForm.valueLine"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in line"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="台区名称:">
        <el-select
          v-model.trim="ruleForm.valueArea"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in area"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item label="低压用户:">
        <el-input
          v-model.trim="ruleForm.searchValue"
          placeholder="请输入"
          clearable
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-download"
          class="pms"
          @click="PMSobtainFn"
          >PMS获取数据</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-upload2"
          class="ml10"
          @click="upload"
          >PMS数据上传</el-button
        >
        <el-button
          type="primary"
          class="ml10"
          icon="el-icon-search"
          @click="lowVoltageUserAccount"
          >查询</el-button
        >
        <el-button type="primary" icon="el-icon-refresh-right" @click="Reset"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <template>
      <span>
        <el-button type="primary" size="mini" class="ml10" icon="el-icon-plus"
          >新增</el-button
        >
        <el-button
          type="primary"
          size="mini"
          class="ml10"
          icon="el-icon-edit"
          @click="modifyFn"
          >修改</el-button
        >
        <el-button
          type="primary"
          size="mini"
          class="ml10"
          icon="el-icon-delete"
          @click="deleteFn"
          >删除</el-button
        >
      </span>
      <el-table
        stripe
        :data="lowVoltageUserAccountData"
        :height="height"
        border
        style="width: 100%"
        v-loading="isLoading"
        header-cell-class-name="table_header"
        @selection-change="handleSelectionChange"
        class="mt10"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column
          v-for="(item, index) in tableHeaderLowVoltageUserAccount"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
          :key="index"
        >
          <template slot-scope="scope">
            <span v-if="item.prop == 'complain'">{{
              scope.row[item.prop] == "1" ? "是" : "否"
            }}</span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>

          <!-- complain -->
        </el-table-column>
      </el-table>
      <el-pagination
        background
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ruleForm.pageNum"
        :page-sizes="[20, 30, 40, 50, 100]"
        :page-size="ruleForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </template>

    <PMS_Data
      :PMSobtain="PMSobtain"
      :title="title"
      @Close="Close"
      :Data="lowVoltageUserAccountData"
      :Name="tableHeaderLowVoltageUserAccount"
    ></PMS_Data>

    <el-dialog
      :close-on-click-modal="false"
      title="低压用户信息"
      :visible.sync="information"
      width="40%"
      height="80%"
    >
      <el-form :inline="true" :model="form" label-width="140px" class="form">
        <el-form-item label="省份:">
          <el-input
            v-model="form.province"
            placeholder="台区"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="地市:">
          <el-input
            v-model="form.city"
            placeholder="石家庄"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="低压用户编号:">
          <el-input
            v-model="form.userCode"
            placeholder="变电站一"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="低压用户名称:">
          <el-input v-model="form.name" placeholder="123" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户协议容量(kVA):">
          <el-input
            v-model="form.userCapacity"
            placeholder="台区一"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="是否发生过投诉">
          <el-radio-group v-model="form.complain" @change="changeFn">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="投诉内容:">
          <el-input
            v-model="form.complainPart"
            placeholder="请输入内容"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="整改措施:">
          <el-input
            v-model="form.corrective"
            placeholder="请输入内容"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否有治理装置">
          <el-radio-group v-model="form.devGovern" @change="changeFn1">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="治理装置类型:">
          <el-input
            v-model="form.governType"
            placeholder="请输入内容"
            :disabled="disabled1"
          ></el-input>
        </el-form-item>
        <el-form-item label="治理装置电压等级:">
          <el-select
            :disabled="disabled1"
            v-model.trim="form.scale"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in voltageList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="治理装置容量:">
          <el-input
            v-model="form.governCapacity"
            installedCapacity="请输入内容"
            :disabled="disabled1"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="information = false">取 消</el-button>
        <el-button type="primary" @click="determineFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPvLvUserList,
  updateLvUser,
  delPvLvUser,
} from "@/api/LowVoltageUserAccount";
import { getAreaTree, getDicDataByTypeName } from "@/api/admin/dept";
import PMS_Data from "@/views/components/Accountinformation/PMS_Data";

import { dictypeData } from "@/api/user";
export default {
  components: { PMS_Data },
  data() {
    return {
      vh: "",
      title: "",

      // 查询数据
      ruleForm: {
        searchValue: "",
        pageNum: 1,
        pageSize: 20,
      },
      total: 0,
      form: {
        userCode: "", //低压用户编号
        name: "", //低压用户名称
        userCapacity: "", //用户协议容量
        complain: "", //是否发生过投诉
        complainPart: "", //投诉内容
        corrective: "", //整改措施
        devGovern: "", //是否有治理装置
        governType: "", //治理装置类型
        scale: "", //治理装置电压等级
        governCapacity: "", //治理装置容量
      },
      voltageList: [], //电压等级数组
      treeDataValue: "",
      CompanyList: [], //单位树组
      defaultProps: {
        children: "children",
        label: "name",
      },
      height: null,
      height1: null,
      isLoading: false,
      disabled: true,
      disabled1: true,
      multipleSelection: [],
      //单位名称数据
      options: [],
      //台区名称数据
      area: [
        {
          value: "选项1",
          label: "线路一",
        },
        {
          value: "选项2",
          label: "线路二",
        },
        {
          value: "选项3",
          label: "线路三",
        },
      ],
      //线路名称数据
      line: [
        {
          value: "选项1",
          label: "1",
        },
        {
          value: "选项2",
          label: "2",
        },
        {
          value: "选项3",
          label: "3",
        },
      ],
      //台区台账表头
      tableHeaderLowVoltageUserAccount: [
        // { prop: "province", label: "省份" },
        // { prop: "city", label: "地市" },
        { prop: "userCode", label: "低压用户编号", width: 110 },
        { prop: "name", label: "低压用户名称", width: 150 },
        { prop: "userCapacity", label: "用户协议容量(kVA)", width: 150 },
        { prop: "complain", label: "是否发生过投诉", width: 150 },
        { prop: "complainPart", label: "投诉内容" },
        { prop: "corrective", label: "整改措施" },
        { prop: "devGovern", label: "是否有治理装置", width: 120 },
        { prop: "governType", label: "治理装置类型", width: 110 },
        { prop: "scaleName", label: "治理装置电压等级(kV)", width: 160 },
        { prop: "governCapacity", label: "治理装置容量(kVA)", width: 150 },
      ],
      lowVoltageUserAccountData: [],
      device: "",
      PMSobtain: false,
      information: false,
    };
  },
  created() {
    this.lowVoltageUserAccount();
    this.queryTreeData();
    this.dictionaries();
  },

  mounted() {
    this.device = window.devicePixelRatio;
   
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.height = window.sessionStorage.getItem("appheight") - 205;
    this.height1 = window.sessionStorage.getItem("appheight") - 285;
          
        },
    // 字典表
    dictionaries() {
      dictypeData().then((res) => {
        res.data.forEach((item) => {
          if (item.name == "单位") {
            this.options = item.children;
          }
        });
      });
    },

    //获取最全区域树
    queryTreeData() {
      const data = { id: "", type: 0 };
      getAreaTree(data).then((response) => {
        if (response.code == "A0000") {
          this.CompanyList = response.data;
          //   this.treeData.forEach(m=>{
          //     this.idArr.push(m.id)
          //  })
        }
      });
      getDicDataByTypeName({ dictTypeName: "电压等级" }).then((res) => {
        this.voltageList = res.data;
      });
    },
    // 点击
    handleNodeClick(data, node, nodeData) {
      this.treeDataValue = data;
      this.ruleForm.company = data.name;
    },
    //PMS获取数据
    PMSobtainFn() {
      this.PMSobtain = true;
      this.title = "PMS_低压用户台账信息";
    },
    //方法调用获取低压用户台账数据接口
    lowVoltageUserAccount() {
      this.isLoading = true;
      //低压用户台账
      getPvLvUserList(this.ruleForm).then((res) => {
        this.isLoading = false;
        this.lowVoltageUserAccountData = res.data.records;
        this.total = res.data.total;
      });
    },

    //数据上传
    upload() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择台账!!!",
          type: "warning",
        });
        return;
      }
      this.$message({
        showClose: true,
        message: "上传成功！！！",
        type: "success",
      });
    },
    // 重置
    Reset() {
      // 查询数据
      this.ruleForm.searchValue = "";
      // pageNum: 1,
      // pageSize: 20
      // }
    },
    //修改数据
    modifyFn() {
      if (this.multipleSelection.length != 1) {
        this.$message({
          showClose: true,
          message: "请选择台账!!!",
          type: "warning",
        });
        return;
      }

      this.information = true;
      this.form = this.multipleSelection[0];
    },
    //是否由分布式光伏接入(是就可以修改数据，否就禁止修改)
    changeFn() {
      if (this.form.complain == "0") {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    changeFn1() {
      if (this.form.devGovern == "0") {
        this.disabled1 = true;
      } else {
        this.disabled1 = false;
      }
    },

    //确定
    determineFn() {
      updateLvUser(this.form).then((res) => {
        if (res.code == "A0000") {
          this.$message({
            message: res.message,
            type: "success",
          });
        }
      });
      this.information = false;
      this.lowVoltageUserAccount();
    },
    // 删除
    deleteFn() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择台账!!!",
          type: "warning",
        });
        return;
      }
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let id = [];
          this.multipleSelection.forEach((item) => {
            id.push(item.id);
          });

          delPvLvUser(id).then((res) => {
            if ((res.code == "A0000")) {
              this.$message({
                type: "success",
                message: res.success,
              });
            }

            this.lowVoltageUserAccount();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //关闭PMS数据弹框
    Close() {
      this.PMSobtain = false;
    },

    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },

    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.ruleForm.pageSize = val;
      this.lowVoltageUserAccount();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.ruleForm.pageNum = val;
      this.lowVoltageUserAccount();
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}

::v-deep .form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-form-item {
    display: flex;
    width: 48%;
    .el-form-item__content {
      flex: 1 !important;
      .el-select {
        width: 100%;
      }
      .el-input__inner {
        width: 100% !important;
      }
      .el-date-editor {
        width: 100%;
      }
    }
  }
}
.pms {
  margin-left: 10px;
}
.obtain {
  margin-left: 1220px;
}
</style>
