<template>
  <el-dialog
    :visible.sync="show"
    class="home-list"
    title="解除报警"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <div class="warning-view" style="padding: 0px 40px">
      <div>
        <el-radio-group v-model="releasedType">
          <el-radio v-model="releasedType" :label="1">实报</el-radio>
          <el-radio v-model="releasedType" :label="2">误报</el-radio>
        </el-radio-group>
      </div>
      <div style="display: flex; width: 100%; margin-top: 15px">
        <div>解除说明:</div>
        <div style="flex: 1; margin-left: 10px">
          <el-input
            v-on:input="change"
            type="textarea"
            :autosize="{ minRows: 8, maxRows: 8 }"
            maxlength="200"
            show-word-limit="true"
            placeholder="请输入内容"
            v-model="releasedReason"
          ></el-input>
          <div v-if="textMessage" style="color: red; margin-top: 5px">
            您的文字输入已达到字数限制
          </div>
        </div>
      </div>
    </div>
    <span
      slot="footer"
      class="dialog-footer"
      style="display: flex; align-items: center; justify-content: center"
    >
      <el-button type="primary" @click="submit">确定解除</el-button>
      <el-button @click="close">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateIsLock } from "@/api/alarmList";

/**
 * 处理警报
 */
export default {
  name: "warningDispose",
  textMessage: false,
  props: {
    id: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      show: true,
      releasedType: "", // 解除报警类型1真实报警2误报警
      releasedReason: "", // 解除原因
    };
  },
  methods: {
    submit() {
      updateIsLock({
        id: this.id,
        releasedType: this.releasedType,
        releasedReason: this.releasedReason,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "解除成功!",
          });

          this.success();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    close() {
      this.$emit("close");
    },
    success() {
      this.$emit("success");
    },
    change: function () {
      // if (event.target.value.length >= 10) {
      //   // this.text = true;
      //   alert("超出长度");
      // }
      this.text1 = this.releasedReason.length;
      if (this.text1 >= 200) {
        this.textMessage = true;
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
