<template>
  <!-- 时长分析录入原因 -->
  <el-dialog
    :title="title"
    :visible.sync="dialog"
    width="600px"
    append-to-body
    @close="cancelForm"
  >
    <div class="demo-drawer__content" style="padding: 0 20px">
      <el-form :model="form" label-position="left" label-width="70px">
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="事件序号">
              <el-input v-model="form.eventSn" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="停电原因">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入停电原因"
                v-model="form.stopReason"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelForm">取 消 </el-button>
      <el-button type="primary" @click="handleClose" :loading="loading">{{
        loading ? "提交中 ..." : "确 定"
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { stopRecordUpdate } from "@/api/powerdistribution/power-outage-control";
export default {
  data() {
    return {
      title: "录入原因",
      form: {
        stopReason: "",
      },
      loading: false,
      dialog: false,
    };
  },
  methods: {
    openModel(data) {
      this.form = { ...data };
      this.dialog = true;
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.loading = true;
      stopRecordUpdate(this.form).then((response) => {
        this.$modal.msgSuccess("修改成功");
        this.loading = false;
        this.dialog = false;
        this.$emit("refresh");
      });
    },
    cancelForm() {
      this.form = {
        stopReason: "",
        eventSn: null,
      };
      this.loading = false;
      this.dialog = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-drawer.ttb,
  .el-drawer.btt {
    height: 90% !important;
  }
}
</style>
