<template>
  <el-card
    shadow="hover"
    class="paragraph-box cursor"
    :class="data.is_active ? '' : 'disabled'"
    @mouseenter="cardEnter()"
    @mouseleave="cardLeave()"
    @click.stop="handleClickCard(data)"
    v-loading="loading"
  >
    <div v-show="show" class="mk-sticky" v-if="!disabled">
      <el-card
        class="paragraph-box-operation mt-8 mr-8"
        shadow="always"
        style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px"
        @click.stop
        v-if="MoreFieldPermission(id)"
      >
        <el-switch
          :loading="changeStateloading"
          v-model="data.is_active"
          :before-change="() => changeState(data)"
          size="small"
          v-if="permissionPrecise.doc_edit(id)"
        />

        <el-divider direction="vertical" />
        <span class="mr-8">
          <el-button link @click.stop="editParagraph(data)" v-if="permissionPrecise.doc_edit(id)">
            <AppIcon iconName="app-edit" :size="16" :title="$t('common.edit')"></AppIcon>
          </el-button>
        </span>
        <span class="mr-8">
          <el-button link @click.stop="addParagraph(data)" v-if="permissionPrecise.doc_edit(id)">
            <el-icon :size="16" :title="$t('common.add')">
              <el-icon><CirclePlus /></el-icon>
            </el-icon>
          </el-button>
        </span>
        <el-dropdown trigger="click" :teleported="false" v-if="MoreFieldPermission(id)">
          <el-button text>
            <AppIcon iconName="app-more"></AppIcon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu style="min-width: 140px">
              <el-dropdown-item
                @click.stop="openGenerateDialog(data)"
                v-if="permissionPrecise.doc_generate(id)"
              >
                <el-icon><Connection /></el-icon>
                {{ $t('views.document.generateQuestion.title') }}</el-dropdown-item
              >
              <el-dropdown-item
                @click.stop="openSelectDocumentDialog(data)"
                v-if="permissionPrecise.doc_edit(id)"
              >
                <AppIcon iconName="app-migrate"></AppIcon>
                {{ $t('views.document.setting.migration') }}</el-dropdown-item
              >
              <el-dropdown-item v-if="permissionPrecise.doc_edit(id)">
                <el-dropdown
                  class="w-full"
                  trigger="hover"
                  :show-arrow="false"
                  placement="right-start"
                  popper-class="move-position-popper"
                >
                  <div class="w-full flex-between" style="line-height: 22px">
                    <div class="flex align-center">
                      <!-- TODO 更换icon -->
                      <AppIcon iconName="app-migrate"></AppIcon>
                      {{ $t('views.document.movePosition.title') }}
                    </div>
                    <el-icon class="color-input-placeholder" :size="16" style="margin-right: 0"
                      ><ArrowRight
                    /></el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item v-if="props.showMoveUp" @click.stop="emit('move', 'up')">
                        {{ $t('views.document.movePosition.moveUp') }}
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="props.showMoveDown"
                        @click.stop="emit('move', 'down')"
                      >
                        {{ $t('views.document.movePosition.moveDown') }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-dropdown-item>
              <el-dropdown-item
                @click.stop="deleteParagraph(data)"
                v-if="permissionPrecise.doc_edit(id)"
              >
                <AppIcon iconName="app-delete"></AppIcon>
                {{ $t('common.delete') }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-card>
    </div>
    <h2 class="mb-16">{{ data.title || '-' }}</h2>
    <MdPreview
      ref="editorRef"
      editorId="preview-only"
      :modelValue="data.content"
      class="maxkb-md"
      style="background: none"
      @clickPreview="handleClickCard(data)"
    />

    <ParagraphDialog
      ref="ParagraphDialogRef"
      :title="title"
      @refresh="refresh"
      :apiType="apiType"
    />
    <SelectDocumentDialog
      ref="SelectDocumentDialogRef"
      @refresh="refreshMigrateParagraph"
      :apiType="apiType"
    />
    <GenerateRelatedDialog ref="GenerateRelatedDialogRef" @refresh="refresh" :apiType="apiType" />
  </el-card>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import GenerateRelatedDialog from '@/components/generate-related-dialog/index.vue'
import ParagraphDialog from '@/views/paragraph/component/ParagraphDialog.vue'
import SelectDocumentDialog from '@/views/paragraph/component/SelectDocumentDialog.vue'
import { MsgSuccess, MsgConfirm } from '@/utils/message'
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
import permissionMap from '@/permission'
import { t } from '@/locales'
const props = defineProps<{
  data: any
  disabled?: boolean
  showMoveUp?: boolean
  showMoveDown?: boolean
}>()

const route = useRoute()
const {
  params: { id, documentId },
  query: { from },
} = route as any

const apiType = computed(() => {
  return from as 'systemShare' | 'workspace' | 'systemManage'
})

const permissionPrecise = computed(() => {
  return permissionMap['knowledge'][apiType.value]
})

const MoreFieldPermission = (id: any) => {
  return permissionPrecise.value.doc_generate(id) || permissionPrecise.value.doc_edit(id)
}

const emit = defineEmits([
  'dialogVisibleChange',
  'clickCard',
  'changeState',
  'deleteParagraph',
  'refresh',
  'refreshMigrateParagraph',
  'move',
])
const loading = ref(false)
const changeStateloading = ref(false)
const show = ref(false)
// card上面存在dropdown菜单
const subHovered = ref(false)
function cardEnter() {
  show.value = true
  subHovered.value = false
}

function cardLeave() {
  show.value = subHovered.value
}

async function changeState(row: any) {
  const obj = {
    is_active: !row.is_active,
  }
  await loadSharedApi({ type: 'paragraph', systemType: apiType.value })
    .putParagraph(id, documentId, row.id, obj, changeStateloading)
    .then(() => {
      emit('changeState', row.id)
      return true
    })
    .catch(() => {
      return false
    })
}

const GenerateRelatedDialogRef = ref<InstanceType<typeof GenerateRelatedDialog>>()
function openGenerateDialog(row: any) {
  if (GenerateRelatedDialogRef.value) {
    GenerateRelatedDialogRef.value.open([row.id], 'paragraph', row.id)
  }
}
function deleteParagraph(row: any) {
  MsgConfirm(
    `${t('views.paragraph.delete.confirmTitle')} ${row.title || '-'} ?`,
    t('views.paragraph.delete.confirmMessage'),
    {
      confirmButtonText: t('common.confirm'),
      confirmButtonClass: 'danger',
    },
  )
    .then(() => {
      loadSharedApi({ type: 'paragraph', systemType: apiType.value })
        .delParagraph(id, documentId, row.id, loading)
        .then(() => {
          emit('deleteParagraph', row.id)
          MsgSuccess(t('common.deleteSuccess'))
        })
    })
    .catch(() => {})
}

const ParagraphDialogRef = ref()
const title = ref('')
function editParagraph(row: any) {
  if (!props.disabled) {
    title.value = t('views.paragraph.paragraphDetail')
    ParagraphDialogRef.value.open(row)
  }
}

const cardClick = permissionPrecise.value.doc_edit(id)

function handleClickCard(row: any) {
  if (!cardClick || dialogVisible.value) {
    return
  }
  if (!props.disabled) {
    editParagraph(row)
  } else {
    emit('clickCard')
  }
}

function addParagraph(row: any) {
  title.value = t('views.paragraph.addParagraph')
  ParagraphDialogRef.value.open(row, 'add')
}

const SelectDocumentDialogRef = ref()
function openSelectDocumentDialog(row?: any) {
  SelectDocumentDialogRef.value.open([row.id])
}

function refresh(data?: any) {
  emit('refresh', data)
}

function refreshMigrateParagraph() {
  emit('refreshMigrateParagraph', props.data)
}

const dialogVisible = computed(
  () =>
    ParagraphDialogRef.value?.dialogVisible ||
    SelectDocumentDialogRef.value?.dialogVisible ||
    GenerateRelatedDialogRef.value?.dialogVisible,
)
watch(dialogVisible, (val: boolean) => {
  emit('dialogVisibleChange', val)
})
</script>
<style lang="scss" scoped>
.paragraph-box {
  background: var(--app-layout-bg-color);
  border: 1px solid #ffffff;
  box-shadow: none !important;
  position: relative;
  overflow: inherit;
  &:hover {
    background: rgba(31, 35, 41, 0.1);
    border: 1px solid #dee0e3;
  }
  &.disabled {
    color: var(--app-text-color-disable) !important;
    :deep(.md-editor-preview) {
      color: var(--app-text-color-disable) !important;
    }
    &:hover {
      background: var(--app-layout-bg-color);
      border: 1px solid #ffffff;
    }
  }
  .paragraph-box-operation {
    position: absolute;
    right: -10px;
    top: -10px;
    overflow: inherit;
    border: 1px solid #dee0e3;
    z-index: 10;
  }

  .mk-sticky {
    height: 0;
    position: sticky;
    right: 0;
    top: 0;
    overflow: inherit;
    z-index: 10;
  }
}
</style>

<style lang="scss">
.move-position-popper {
  .el-popper__arrow {
    display: none;
  }
}
</style>
