// 添加/修改配置
<template>
  <div>
    <div class="head">
      <span>{{ isEdit ? "编辑标题须知" : "添加标题须知" }}</span>
      <el-button size="small" style="margin-left: 20px" @click="back"
        >取消</el-button
      >
      <el-button
        type="primary"
        size="small"
        style="margin-left: 20px"
        @click="submit"
        :loading="submitLoading"
        >确定</el-button
      >
    </div>
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="60px"
    >
      <el-form-item label="标题" prop="handleProveTitle" required>
        <el-input
          v-model="form.handleProveTitle"
          placeholder="请输入标题内容"
        />
      </el-form-item>
      <el-form-item label="须知" prop="handleProveNotice" required>
        <!-- <div v-html="form.information"></div> -->
        <Editor @change="headelChange" :aaa="form.handleProveNotice"></Editor>
      </el-form-item>
    </el-form>
    <!-- <div v-html="form.information"></div> -->
  </div>
</template>
<script>
import Editor from "@/components/Editor/index.vue";
import { setTitleList } from "@/api/titlelib";
export default {
  props: {
    isShowUpdate: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Editor,
  },
  data() {
    return {
      form: {
        handleProveTitle: "",
        handleProveNotice: "",
      },
      rules: {
        handleProveTitle: [
          { required: true, message: "不能为空!", trigger: "blur" },
        ],
        handleProveNotice: [
          { required: true, message: "不能为空!", trigger: "blur" },
        ],
      },
      visible: false,
      submitLoading: false,
      isEdit: false,
    };
  },
  mounted() {},

  methods: {
    open(obj) {
      console.log(obj);

      this.$nextTick(() => {
        this.$refs.form.resetFields();
        if (obj && Object.keys(obj).length > 0) {
          console.log(obj);
          this.form = obj;
          console.log(this.form);
          this.isEdit = true;
        } else {
          this.isEdit = false;
        }
      });
    },
    headelChange(value) {
      this.form.handleProveNotice = value.html;
      // this.form.text = value.text;
    },
    submit(e) {
      e.preventDefault();
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          const res = {
            handleProveTitle: this.form.handleProveTitle,
            handleProveNotice: this.form.handleProveNotice,
            id: !this.Editor ? this.form.id : undefined,
          };
          setTitleList(res).then(() => {
            this.back();
            this.$emit("success");
            this.submitLoading = false;
          });
        }
      });
    },
    back() {
      this.$emit("back");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
.head {
  margin-bottom: 32px;
  span {
    color: #333;
    font-size: 18px;
    font-weight: 500;
  }
}
</style>
