<template>
  <div>
    <!-- 填报弹窗(原因分析(在线监测和普测超标)) -->
    <el-dialog
      :close-on-click-modal="false"
      title="填报"
      :visible.sync="causeAnalysis"
      width="70%"
      :before-close="handleClose"
    >
      <el-divider
        content-position="left"
        style="font-size: 18px; font-weight: bolder"
        >问题基本信息</el-divider
      >
      <el-form :inline="true">
        <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 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="causeAnalysisData"
            :rules="rules"
            ref="form"
            label-width="140px"
            class="form"
          >
            <el-form-item label="电网侧原因:" prop="reportProcessContentYyfx">
              <el-checkbox-group
                v-model="causeAnalysisData.reportProcessContentYyfx"
              >
                <el-checkbox
                  v-for="(item, ind) in reportProcessContentYyfxList"
                  :key="ind"
                  :label="item.code"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>

            <el-divider></el-divider>

            <el-form-item
              label="用户侧原因:"
              prop="userReportProcessContentYyfx"
            >
              <el-checkbox-group
                v-model="causeAnalysisData.userReportProcessContentYyfx"
              >
                <el-checkbox
                  v-for="(item, ind) in userReportProcessContentYyfxList"
                  :key="ind"
                  :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="电网侧受影响设备:" prop="powerGridAffectDev">
                <el-checkbox-group
                  v-model="causeAnalysisData.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="用户侧受影响设备:" prop="userAffectDev">
                <el-checkbox-group v-model="causeAnalysisData.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="事件描述:" prop="eventDescriptionYyfx">
              <el-input
                style="width: 90%"
                type="textarea"
                :rows="1"
                placeholder="请输入内容"
                v-model="causeAnalysisData.eventDescriptionYyfx"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="item"
              label="原因分析报告:"
              style="margin-top: 10px"
              prop="fileNameYyfx"
            >
              <File ref="File" />
              <!-- <el-button size="small" type="primary"
                >上传本地评估报告</el-button
              > -->
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div style="display: flex; justify-content: center; margin-top: 10px">
        <el-button type="primary" class="ml20" @click="onSubmit"
          >提交审核</el-button
        >
        <el-button type="primary" class="ml20" @click="handleClose"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import { reasonAnalysis } from "@/api/Process-supervision/electricitymanagement/electricitymanagement";
import File from "./File.vue";
export default {
  components: { File },
  props: {
    addData: {
      type: [Object, Array],
      default: {
        orgName: "",
        problemSources: "",
        problemName: "",
        powerQualityProblemNo: "",
      },
    },
  },
  data() {
    return {
      causeAnalysis: false,
      OnlineList: [],
      causeAnalysisData: {
        reportProcessContentYyfx: [],
        userReportProcessContentYyfx: [],
        eventDescriptionYyfx: "",
        fileNameYyfx: "", //原因分析报告文件名称
        filePathYyfx: "", //原因分析报告文件路径
        powerGridAffectDev: [],
        userAffectDev: [],
      },
      rules: {
        reportProcessContentYyfx: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        userReportProcessContentYyfx: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        eventDescriptionYyfx: [
          { required: true, message: "请填写", trigger: "blur" },
        ],
        powerGridAffectDev: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        userAffectDev: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        fileNameYyfx: [
          { required: true, message: "请上传文件", trigger: "blur" },
        ],
      },
      reportProcessContentYyfxList: [],
      userReportProcessContentYyfxList: [],
      powerGridAffectDevList: [],
      userAffectDevList: [],
    };
  },
  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.OnlineList = dicData("Problem_Sources", []);
    },
    //  提交
    onSubmit() {
      this.causeAnalysisData.fileNameYyfx =
        this.$refs.File.fileList.minFileName;
      this.causeAnalysisData.filePathYyfx = this.$refs.File.fileList.minFileUrl;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.causeAnalysisData.powerQualityProblemNo =
            this.addData.powerQualityProblemNo;
          reasonAnalysis(this.causeAnalysisData).then((res) => {
            if (res.code == "A0000") {
              this.$message({
                message: "填报成功!",
                type: "success",
              });
              this.$emit("handleClose");
              this.$emit("onSubmit");
            }
          });
        }
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },

  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;
}
</style>
