<template>
  <div v-if="enabled" class="section-container">
    <div class="section-title">
      <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 {
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  color: #1d2129;
  margin: 20px 0 12px 0;
  padding: 0 0 10px 0;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, #c0c4cc, transparent) 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title:first-child {
  margin-top: 0;
}
.empty-data {
  color: #909399;
  font-size: 13px;
  padding: 8px 0;
}
.plan-content {
  padding: 8px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
}
</style>
