<template>
  <div>
    <el-divider
      content-position="left"
      style="font-size: 18px; font-weight: bolder"
      >问题基本信息</el-divider
    >
    <el-form :inline="true" class="form">
      <el-form-item label="所属单位:">
        <el-input
          v-model="addData.orgName"
          clearable
          placeholder="请填写"
          disabled
        >
        </el-input>
      </el-form-item>

      <el-form-item label="问题来源:">
        <el-select
          disabled
          v-model="addData.problemSources"
          placeholder="请选择"
        >
          <el-option
            v-for="item in OnlineList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <!-- <el-input
          v-model="addData.problemSources"
          clearable
          placeholder="请填写"
          disabled
        >
        </el-input> -->
      </el-form-item>

      <el-form-item label="问题名称:">
        <el-input
          v-model="addData.problemName"
          clearable
          placeholder="请填写"
          disabled
        >
        </el-input>
      </el-form-item>

      <el-form-item label="问题编号:">
        <el-input
          v-model="addData.powerQualityProblemNo"
          disabled
          clearable
          placeholder="请填写"
        >
        </el-input>
      </el-form-item>
    </el-form>

    <el-divider
      content-position="left"
      style="font-size: 18px; font-weight: bolder"
      >填报流程</el-divider
    >
    <!--原因分析  -->
    <el-row
      v-if="addData.reportProcess == 'Cause_Analysis'"
      type="flex"
      justify="space-between"
    >
      <el-col :span="4">
        <el-steps
          style="height: 250px"
          direction="vertical"
          :active="0"
          finish-status="success"
        >
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:#037272bc"
            >
              <p style="color: white">原因分析</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">计划整改措施</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">实际采取措施</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">成效分析</p>
            </el-card>
          </el-step>
        </el-steps>
      </el-col>
      <el-col :span="20">
        <el-form :model="onlineDetailsData" ref="form" class="form">
          <el-form-item label="电网侧原因:">
            <el-checkbox-group
              disabled
              v-model="onlineDetailsData.reportProcessContentYyfx"
            >
              <el-checkbox
                v-for="item in reportProcessContentYyfxList"
                :key="item.code"
                :label="item.code"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>

          <el-divider></el-divider>

          <el-form-item label="用户侧原因:">
            <el-checkbox-group
              disabled
              v-model="onlineDetailsData.userReportProcessContentYyfx"
            >
              <el-checkbox
                v-for="item in userReportProcessContentYyfxList"
                :key="item.code"
                :label="item.code"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-row
            v-if="
              addData.problemSources == '用户投诉' ||
              addData.problemSources == '设备异常'
            "
          >
            <el-divider></el-divider>

            <el-form-item label="电网侧受影响设备:">
              <el-checkbox-group
                disabled
                v-model="onlineDetailsData.powerGridAffectDev"
              >
                <el-checkbox
                  v-for="(item, ind) in powerGridAffectDevList"
                  :key="ind"
                  :label="item.code"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-divider></el-divider>

            <el-form-item label="用户侧受影响设备:">
              <el-checkbox-group
                disabled
                v-model="onlineDetailsData.userAffectDev"
              >
                <el-checkbox
                  v-for="(item, ind) in userAffectDevList"
                  :key="ind"
                  :label="item.code"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-row>

          <el-divider></el-divider>

          <el-form-item label="事件描述:">
            <el-input
              disabled
              style="width: 90%"
              type="textarea"
              :rows="1"
              placeholder="请输入内容"
              v-model="onlineDetailsData.eventDescriptionYyfx"
            ></el-input>
          </el-form-item>
          <el-form-item
            class="item"
            label="原因分析报告:"
            style="margin-top: 10px"
          >
            <div style="display: flex">
              <el-input
                style="width: 240px"
                v-model="onlineDetailsData.fileNameYyfx"
                placeholder="文件名称"
                disabled
              ></el-input>
              <a :href="onlineDetailsData.filePathYyfx"
                ><el-button
                  size="mini"
                  style="margin-left: 10px"
                  type="primary"
                  icon="el-icon-download"
                  >下载</el-button
                ></a
              >
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!--计划整改措施 -->
    <el-row
      v-if="addData.reportProcess == 'Plan_Measures'"
      type="flex"
      justify="space-between"
    >
      <el-col :span="4">
        <el-steps
          style="height: 250px"
          direction="vertical"
          :active="1"
          finish-status="success"
        >
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">原因分析</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:#037272bc"
            >
              <p style="color: white">计划整改措施</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">实际采取措施</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">成效分析</p>
            </el-card>
          </el-step>
        </el-steps>
      </el-col>
      <el-col :span="20">
        <el-form :model="onlineDetailsData" ref="form" class="form">
          <el-form-item label="电网侧整改治理措施:">
            <el-checkbox-group
              disabled
              v-model="onlineDetailsData.reportProcessContentJhzg"
            >
              <el-checkbox
                v-for="(item, ind) in List"
                :key="ind"
                :label="item.code"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>

          <el-divider></el-divider>

          <el-form-item label="用户侧整改治理措施:">
            <el-checkbox-group
              disabled
              v-model="onlineDetailsData.userReportProcessContentJhzg"
            >
              <el-checkbox
                v-for="(item, ind) in List"
                :key="ind"
                :label="item.code"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>

          <el-divider></el-divider>
          <el-form-item class="item" label="计划整改措施报告:">
            <div style="display: flex">
              <el-input
                style="width: 240px"
                v-model="onlineDetailsData.fileNameJhzg"
                placeholder="文件名称"
                disabled
              ></el-input>
              <a :href="onlineDetailsData.filePathJhzg">
                <el-button
                  size="mini"
                  style="margin-left: 10px"
                  type="primary"
                  icon="el-icon-download"
                  >下载</el-button
                >
              </a>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 实际采取措施 -->
    <el-row
      v-if="addData.reportProcess == 'Actual_Measures'"
      type="flex"
      justify="space-between"
    >
      <el-col :span="4">
        <el-steps
          style="height: 250px"
          direction="vertical"
          :active="2"
          finish-status="success"
        >
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">原因分析</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">计划整改措施</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:#037272bc"
            >
              <p style="color: white">实际采取措施</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">成效分析</p>
            </el-card>
          </el-step>
        </el-steps>
      </el-col>
      <el-col :span="20">
        <el-form :model="onlineDetailsData" ref="form" class="form">
          <el-form-item label="电网侧实际采取措施:">
            <el-checkbox-group
              disabled
              v-model="onlineDetailsData.reportProcessContentSjcq"
            >
              <el-checkbox
                v-for="(item, ind) in List"
                :key="ind"
                :label="item.code"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>

          <el-divider></el-divider>

          <el-form-item label="用户侧实际采取措施:">
            <el-checkbox-group
              disabled
              v-model="onlineDetailsData.userReportProcessContentSjcq"
            >
              <el-checkbox
                v-for="(item, ind) in List"
                :key="ind"
                :label="item.code"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>

          <el-divider></el-divider>

          <el-form-item class="item" label="实际采取措施报告:">
            <div style="display: flex">
              <el-input
                style="width: 240px"
                v-model="onlineDetailsData.fileNameSjcq"
                placeholder="文件名称"
                disabled
              ></el-input>
              <a :href="onlineDetailsData.filePathSjcq">
                <el-button
                  size="mini"
                  style="margin-left: 10px"
                  type="primary"
                  icon="el-icon-download"
                  >下载</el-button
                >
              </a>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 成效分析 -->
    <el-row v-if="addData.reportProcess == 'Insights'" :gutter="20">
      <el-col :span="4">
        <el-steps
          style="height: 250px"
          direction="vertical"
          :active="3"
          finish-status="success"
        >
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">原因分析</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">计划整改措施</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:gray"
            >
              <p style="color: white">实际采取措施</p>
            </el-card>
          </el-step>
          <el-step>
            <el-card
              slot="description"
              style="width: 160px"
              body-style="background:#037272bc"
            >
              <p style="color: white">成效分析</p>
            </el-card>
          </el-step>
        </el-steps>
      </el-col>
      <el-col :span="20">
        <el-form :model="onlineDetailsData" ref="form" class="box1">
          <el-form-item label="成效分析概述:" style="margin-top: 10px">
            <el-input
              type="textarea"
              disabled
              :rows="1"
              placeholder="请输入内容"
              v-model="onlineDetailsData.descriptionZlxg"
            ></el-input>
          </el-form-item>

          <el-divider></el-divider>

          <el-form-item class="item" label="成效分析报告:">
            <div style="display: flex">
              <el-input
                style="width: 240px"
                v-model="onlineDetailsData.fileNameZlxg"
                placeholder="文件名称"
                disabled
              ></el-input>
               <a :href="onlineDetailsData.filePathZlxg">
              <el-button
                size="mini"
                style="margin-left: 10px"
                type="primary"
                icon="el-icon-download"
               
                >下载</el-button
              >
              </a>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import { getfile } from "@/api/Process-supervision/electricitymanagement/electricitymanagement";
export default {
  components: {},

  props: {
    addData: {
      type: [Object, Array],
    },
    onlineDetailsData: {
      type: [Object, Array],
    },
  },
  data() {
    return {
      OnlineList: [],
      reportProcessContentYyfxList: [],
      userReportProcessContentYyfxList: [],
      powerGridAffectDevList: [],
      userAffectDevList: [],
      List: [],
    };
  },
  created() {},
  mounted() {
    this.Dictionaries();
  },
  methods: {
    // 字典表
    Dictionaries() {
      // 电网侧原因
      this.reportProcessContentYyfxList = dicData("Grid-side_Reasons", [
        "Load_Type",
      ]);
      // 用户侧原因
      this.userReportProcessContentYyfxList = dicData("User_Reasons", [
        "Load_Type",
      ]);
      // 电网侧受影响设备
      this.powerGridAffectDevList = dicData("Grid_Unit", ["Load_Type"]);
      // 用户侧受影响设备
      this.userAffectDevList = dicData("Customer_Unit", ["Load_Type"]);
      // 电网侧原因
      this.List = dicData("Actual_Measures", ["Load_Type"]);
      this.OnlineList = dicData("Problem_Sources", []);
    },

    //下载文件
    download(url, filename) {
      getBlob(url, function (blob) {
        saveAs(blob, filename);
      });

      function getBlob(url, cb) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        xhr.onload = function () {
          if (xhr.status === 200) {
            cb(xhr.response);
          }
        };
        xhr.send();
      }

      function saveAs(blob, filename) {
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, filename);
        } else {
          var link = document.createElement("a");
          var body = document.querySelector("body");
          link.href = window.URL.createObjectURL(blob);
          link.download = filename;
          link.style.display = "none";
          body.appendChild(link);
          link.click();
          body.removeChild(link);
          window.URL.revokeObjectURL(link.href);
        }
      }
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
::v-deep .el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 22px 0;
}
::v-deep .el-card__body,
.el-main {
  padding: 10px;
}
::v-deep .el-card__body,
.el-main {
  padding: 10px;
}
</style>
