<template>
  <div>
    <div class="text-card">
      <div
        v-for="(item, index) in displayItems"
        :key="index"
        class="text-item"
        @click="handleItemClick(index, item.id)"
        @contextmenu.prevent="handleContextMenu(index, item.id)">
        <div class="text-content" :class="{ 'is-empty': !item.content }">
          {{ item.content || '+' }}
        </div>
      </div>
      <!-- 编辑弹出框 -->
      <div
        v-if="showEdit"
        class="edit-overlay"
        @click.self="handleOverlayClick">
        <div class="edit-card">
          <a-textarea
            v-model="editingContent"
            :autoSize="{ minRows: 3 }"
            @keyup.enter="handleSave"
            ref="textarea"/>
        </div>
      </div>
      <!-- 删除确认弹框 -->
      <a-modal
        v-model="showDeleteModal"
        title="确认删除"
        okText="确认"
        cancelText="取消"
        @ok="handleDeleteConfirm">
        <p>确定要删除这条内容吗？</p>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { runLogic } from '@vue2-client/services/api/common'

export default {
  name: 'XTextCard',
  props: {
    // logic配置名,要求返回一个数组[{ id: , content: }]
    queryParamsName: {
      type: String,
      default: 'memorandumLOGIC'
    },
    queryParams: {
      type: Object,
      default: () => { return {} }
    },
    // 请求参数
    parameter: {
      type: Object,
      default: () => { return {} }
    }
  },
  data () {
    return {
      localItems: [], // 本地数据
      showEdit: false, // 是否显示编辑框
      editingIndex: -1, // 当前编辑的索引
      editingContent: '', // 编辑框的内容
      showDeleteModal: false, // 是否显示删除确认框
      deleteIndex: -1, // 要删除的项目索引
      ID: 0
    }
  },
  computed: {
    // 显示的列表，始终保持一个空行
    displayItems () {
      const items = [...this.localItems]
      // 如果最后一项不是空的，添加一个空项
      if (!items.length || items[items.length - 1].content) {
        items.push({ content: '' })
      }
      return items
    }
  },
  methods: {
    // 点击项目
    handleItemClick (index, id) {
      this.ID = id
      this.editingIndex = index
      this.editingContent = this.displayItems[index].content
      this.showEdit = true
      this.$nextTick(() => {
        this.$refs.textarea?.focus()
      })
    },
    // 点击遮罩层保存
    handleOverlayClick () {
      this.handleSave()
    },
    // 保存内容
    handleSave () {
      if (this.editingContent.trim()) {
        if (this.editingIndex === this.localItems.length) {
          // 如果是在最后一个空行添加，push新内容
          this.localItems.push({ content: this.editingContent.trim() })
        } else {
          // 否则更新现有内容
          this.localItems[this.editingIndex].content = this.editingContent.trim()
        }
        const addData = { data: this.editingContent.trim(), ID: this.ID }
        // 触发更新事件
        this.$emit('add', addData)
      }
      this.showEdit = false
      this.editingIndex = -1
      this.editingContent = ''
    },
    // 初始化数据
    async initData (data, parameter) {
      // 从配置中获取数据
      const resData = await runLogic(data, parameter, 'af-his')
      this.localItems = resData
      return resData
    },
    // 处理右键菜单
    handleContextMenu (index, id) {
      // 如果是最后一个空行，不显示删除框
      if (index === this.localItems.length) {
        return
      }
      this.ID = id
      this.deleteIndex = index
      this.showDeleteModal = true
    },
    // 确认删除
    handleDeleteConfirm () {
      if (this.deleteIndex > -1) {
        this.localItems.splice(this.deleteIndex, 1)
        const deleteData = { data: [...this.localItems][this.deleteIndex], ID: this.ID }
        this.$emit('deleteData', deleteData)
        this.deleteIndex = -1
      }
      this.showDeleteModal = false
    }
  },
  watch: {
    queryParamsName: {
      immediate: true,
      handler (newVal) {
        this.initData(newVal, this.parameter)
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="less">
.text-card {
  position: relative;
  width: 100%;
  .text-item {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;

    &:hover {
      background-color: #f5f5f5;
    }

    .text-content {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.5;

      &.is-empty {
        color: #5D5C5C;
        font-weight: 400;
      }
    }
  }
  .edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    .edit-card {
      background: white;
      padding: 16px;
      border-radius: 8px;
      width: 90%;
      max-width: 500px;
      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12);
      .ant-input {
        width: 100%;
      }
    }
  }
}
</style>
