<template>
  <div v-if="enabled" class="section-container">
    <div class="section-title">
      <span>处理方案 <span class="en-sub">· Handling Scheme</span></span>
      <el-button v-if="editable && !editing" size="mini" type="text" icon="el-icon-edit" @click="startEdit">编辑</el-button>
      <template v-if="editing">
        <el-button size="mini" type="text" icon="el-icon-check" @click="handleSave">保存</el-button>
        <el-button size="mini" type="text" icon="el-icon-close" @click="cancelEdit">取消</el-button>
      </template>
    </div>
    <div v-if="editing">
      <editor v-model="editContent" :min-height="200" />
    </div>
    <div v-else>
      <div v-if="content" class="plan-content" v-html="content"></div>
      <div v-else class="empty-data">暂无处理方案</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HandlingSchemeSection',
  props: {
    enabled: {
      type: Boolean,
      default: true
    },
    editable: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editing: false,
      editContent: ''
    };
  },
  watch: {
    content(val) {
      if (!this.editing) {
        this.editContent = val || '';
      }
    }
  },
  methods: {
    startEdit() {
      this.editContent = this.content || '';
      this.editing = true;
    },
    cancelEdit() {
      this.editing = false;
      this.editContent = '';
    },
    handleSave() {
      if (!this.editContent) {
        this.$modal.msgWarning('请输入处理方案');
        return;
      }
      this.$emit('save', this.editContent);
      this.editing = false;
    }
  }
}
</script>

<style scoped>
.section-title {
  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 32px 0 16px 0;
  padding: 0 0 10px 0;
  border-bottom: 1px solid #d4d0c8;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.3px;
}
.section-title:first-child {
  margin-top: 0;
}
.section-title .en-sub {
  font-size: 11px;
  font-weight: 400;
  color: #8c8c8c;
  letter-spacing: 0.5px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
}
.section-title i {
  font-size: 16px;
  color: #1a3c6e;
}
.empty-data {
  color: #8c8c8c;
  font-size: 13px;
  padding: 8px 0;
  font-style: italic;
}
.plan-content {
  padding: 12px 16px;
  background: #faf8f5;
  border: 1px solid #e8e4de;
  border-radius: 2px;
  font-size: 13px;
  line-height: 1.8;
  color: #1a1a1a;
}
</style>
