<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="填报"
      :visible.sync="effectivenessAnalysis"
      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 :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="effectivenessAnalysisData"
            :rules="rules"
            ref="form"
            class="box1"
          >
            <el-form-item
              label="成效分析概述:"
              style="margin-top: 10px"
              prop="descriptionZlxg"
            >
              <el-input
                type="textarea"
                style="width: 80%"
                :rows="1"
                placeholder="请输入内容"
                v-model="effectivenessAnalysisData.descriptionZlxg"
              ></el-input>
            </el-form-item>

            <el-divider></el-divider>

            <el-form-item
              class="item"
              label="成效分析报告:"
              prop="fileNameZlxg"
            >
              <File ref="File" />
            </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="Submit"
          >提交审核</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 { effectAnalysis } 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 {
      effectivenessAnalysis: false,
      effectivenessAnalysisData: {
        descriptionZlxg: "",
        fileNameZlxg: "", //实际采取措施报告文件名称
        filePathZlxg: "", //实际采取措施报告文件路径
      },
      OnlineList: [],
      rules: {
        descriptionZlxg: [
          { required: true, message: "请填写", trigger: "blur" },
        ],
        fileNameZlxg: [
          { required: true, message: "请上传文件", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.OnlineList = dicData("Problem_Sources", []);
  },
  methods: {
    handleClose() {
      this.$emit("handleClose");
    },
    //提交
    Submit() {
      this.effectivenessAnalysisData.fileNameZlxg =
        this.$refs.File.fileList.minFileName;
      this.effectivenessAnalysisData.filePathZlxg =
        this.$refs.File.fileList.minFileUrl;

      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.effectivenessAnalysisData.powerQualityProblemNo =
            this.addData.powerQualityProblemNo;
          effectAnalysis(this.effectivenessAnalysisData).then((res) => {
            if (res.code == "A0000") {
              this.$message({
                message: "填报成功!",
                type: "success",
              });
              this.$emit("handleClose");
              this.$emit("onSubmit");
            }
          });
        }
      });
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
::v-deep .el-card__body,
.el-main {
  padding: 10px;
}
</style>
