<script setup lang="ts">
import { createResourceBatch, getInfoPriceBook } from '#/api/database/info';
import { DbHst } from '#/components/db-hst';
import { DbTree } from '#/components/db-tree';
import { useUpload } from '#/components/upload/use-upload';
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { useAccessStore } from '@vben/stores';
import { useElementSize } from '@vueuse/core';
import type { UploadProps } from 'element-plus';
import { ElButton, ElCard, ElDialog, ElImage, ElInput, ElMessage, ElSplitter, ElSplitterPanel, ElText, ElUpload } from 'element-plus';
import { computed, nextTick, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { HistoryDialog } from '../components/history-dialog';
import { MorePriceDialog } from '../components/more-price-dialog';
import { useDbHst } from './dbHst';
import { useDbTree } from './dbTree';

const route = useRoute();
const accessStore = useAccessStore();

const { uploadUrl, httpRequest } = useUpload('info-price');

const bookId = ref<any>(null);
const currentCategoryTreeId = ref<any>(null);
const bookTitle = ref<string>('');
const bookInfo = ref<any>(null);

const containerRef = ref<HTMLElement | null>(null);
const { height: containerHeight } = useElementSize(containerRef);

const isCcompleted = computed(() => accessStore.tenantId != 1 && bookInfo.value?.publishStatus === 'completed');

const dbTreeRef = ref();
const hstRef = ref();

const previewImageUrl = ref<string>('');
const previewVisible = ref(false);
const uploadDialogVisible = ref(false);
const currentUploadRow = ref<number>(0);
const currentUploadCol = ref<number>(0);
const uploadImageUrl = ref<string>('');
const uploading = ref(false);

const morePriceDialogVisible = ref(false);
const currentPriceRow = ref<number>(0);
const selectRowPrice = ref<any>(null);

const historyDialogVisible = ref(false);
const categorySource = ref<{ label: string; value: any }[]>([]);
const search = ref();

const handlePhotoPreview = (value: string) => {
  previewImageUrl.value = value;
  previewVisible.value = true;
};

const handlePhotoUpload = (row: number, col: number, value: string) => {
  currentUploadRow.value = row;
  currentUploadCol.value = col;
  uploadImageUrl.value = value;
  uploadDialogVisible.value = true;
};

const handleShowMorePrice = (row: number, col: number, value: any) => {
  currentPriceRow.value = row;
  morePriceDialogVisible.value = true;
  selectRowPrice.value = hstRef.value.hotInstance.getSourceDataAtRow(row);
  console.log('查看更多单价:', { row, col, value }, selectRowPrice.value);
};

const callbacks = {
  onPhotoPreview: handlePhotoPreview,
  onPhotoUpload: handlePhotoUpload,
  onShowMorePrice: handleShowMorePrice,
};

const {
  columns,
  contextMenuItems,
  dbSettings,
  loadResourcePage,
  loadCategorySource,
  updateCategoryColumnSource,
} = useDbHst(hstRef, bookId, currentCategoryTreeId, isCcompleted, callbacks);

const {
  treeData,
  rootMenus,
  nodeMenus,
  loadCategoryTree,
  handleTreeNodeSelect,
  handleTreeNodeEdit,
} = useDbTree(dbTreeRef, bookId, isCcompleted, currentCategoryTreeId, loadResourcePage);

const loadBookInfo = async () => {
  if (!bookId.value) return;

  try {
    const res = await getInfoPriceBook(bookId.value);
    if (res) {
      bookInfo.value = res;
      bookTitle.value = `${res.name} (${res.startTime} ~ ${res.endTime})`;
    }
  } catch (error) {
    console.error('加载信息价册失败:', error);
  }
};

const handleSelectPrice = async (row: any) => {
  if (hstRef.value?.hotInstance && selectRowPrice.value) {
    const sendData = {
      ...selectRowPrice.value,
      priceTaxExcl: row.priceTaxExcl,
      taxRate: row.taxRate,
      priceTaxIncl: row.priceTaxIncl,
    };

    try {
      await createResourceBatch([sendData]);
      ElMessage.success('更新成功');
      loadResourcePage();
    } catch (error) {
      console.error('更新失败:', error);
      ElMessage.error('更新失败');
    }
  }
};

const handleHistoryConfirm = async (nodes: any[]) => {
  if (!nodes || nodes.length === 0) {
    ElMessage.warning('请选择要导入的数据');
    return;
  }

  const updatedNodes = nodes.map(node => ({
    ...node,
    categoryTreeId: currentCategoryTreeId.value,
    resourceItemId: node.id,
    id: null,
  }));

  const res = await createResourceBatch(updatedNodes);
  if (hstRef.value?.hotInstance && res) {
    loadResourcePage();
    ElMessage.success(`成功导入 ${updatedNodes.length} 条数据`);
  }
};

const handleBeforeUpload: UploadProps['beforeUpload'] = rawFile => {
  if (!rawFile.type.startsWith('image/')) {
    ElMessage.error('只能上传图片文件!');
    return false;
  }
  if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('图片大小不能超过 5MB!');
    return false;
  }
  return true;
};

const handleHttpRequest = (options: any) => {
  uploading.value = true;
  return httpRequest(options.file);
};

const handleUploadSuccess: UploadProps['onSuccess'] = (response: any) => {
  uploading.value = false;
  const imageUrl = response?.url || response;
  uploadImageUrl.value = imageUrl;

  if (hstRef.value?.hotInstance) {
    hstRef.value.hotInstance.setDataAtCell(currentUploadRow.value, currentUploadCol.value, imageUrl);
  }
  ElMessage.success('上传成功');
  handleDialogClose();
};

const handleUploadError: UploadProps['onError'] = () => {
  uploading.value = false;
  ElMessage.error('上传失败，请重试');
};

const handleUploadChange: UploadProps['onChange'] = uploadFile => {
  if (uploadFile.raw) {
    uploadImageUrl.value = URL.createObjectURL(uploadFile.raw);
  }
};

const handleDialogClose = () => {
  uploadDialogVisible.value = false;
};

const handlePreviewClose = () => {
  previewVisible.value = false;
  previewImageUrl.value = '';
};

const handleQuery = () => {
  console.log('handleQuery');
};

const handleOpenHistoryDialog = () => {
  if (!currentCategoryTreeId.value) {
    ElMessage.warning('请先选择左侧分类节点');
    return;
  }
  historyDialogVisible.value = true;
};

onMounted(async () => {
  bookId.value = route.params.id || route.query.id;
  await loadBookInfo();
  await loadCategoryTree();
  categorySource.value = await loadCategorySource();
  updateCategoryColumnSource(categorySource.value);

  nextTick(() => {
    if (hstRef.value?.hotInstance) {
      if (accessStore.tenantId != 1) {
        const editableColumns = ['priceTaxExcl', 'taxRate', 'priceTaxIncl'];
        const updatedColumns = columns.map(col => ({
          ...col,
          editor: editableColumns.includes(col.data) ? col.editor : false,
        }));
        hstRef.value.hotInstance.updateSettings({
          columns: updatedColumns,
        });
      }
    }
  });
});
</script>

<template>
  <Page auto-content-height>
    <ElCard class="h-full w-full border-radius-0" body-class="!p-0 h-full w-full flex flex-col" header-class="!p-1">
      <div class="!p-1">
        <ElText class="mx-1">信息价名称: {{ bookTitle }}</ElText>
        <ElInput
          v-model="search"
          style="width: 300px"
          placeholder="请输入"
          class="input-with-select"
          size="small"
        >
          <template #append>
            <ElButton @click="handleQuery" size="small"><IconifyIcon icon="ep:search" /></ElButton>
          </template>
        </ElInput>
        <ElButton
          @click="handleOpenHistoryDialog"
          type="primary"
          size="small"
          style="float: right"
          :disabled="isCcompleted"
        >
          调用历史信息
        </ElButton>
      </div>
      <div class="h-full w-full" ref="containerRef">
        <ElSplitter :style="{ height: containerHeight + 'px' }">
          <ElSplitterPanel size="15%" :min="200">
            <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full w-full flex flex-col">
              <DbTree
                ref="dbTreeRef"
                :tree-data="treeData"
                :root-menus="rootMenus"
                :node-menus="nodeMenus"
                @node-edit="handleTreeNodeEdit"
                @node-click="handleTreeNodeSelect"
                :defaultExpandedLevel="4"
              />
            </ElCard>
          </ElSplitterPanel>
          <ElSplitterPanel :min="200">
            <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full w-full flex flex-col">
              <DbHst ref="hstRef" :settings="dbSettings" :contextMenuItems="contextMenuItems" />
            </ElCard>
          </ElSplitterPanel>
        </ElSplitter>
      </div>
    </ElCard>

    <HistoryDialog
      v-model:visible="historyDialogVisible"
      :bookInfo="bookInfo"
      :categorySource="categorySource"
      @confirm="handleHistoryConfirm"
    />

    <ElDialog v-model="uploadDialogVisible" title="上传图片" width="500px" @close="handleDialogClose">
      <div class="upload-container">
        <ElUpload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :http-request="handleHttpRequest"
          :show-file-list="false"
          :before-upload="handleBeforeUpload"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :on-change="handleUploadChange"
          accept="image/*"
          :disabled="uploading"
        >
          <div class="flex min-h-[200px] flex-col items-center justify-center py-8">
            <span class="icon-[mdi--cloud-upload-outline] mb-4 text-6xl text-gray-400"></span>
            <div class="text-base text-gray-600">点击或拖拽文件到此区域上传</div>
            <div class="mt-2 text-sm text-gray-400">支持 .jpg、.png、.gif、.webp 格式图片文件</div>
          </div>
        </ElUpload>
      </div>

      <template #footer>
        <ElButton @click="handleDialogClose" :disabled="uploading">关闭</ElButton>
      </template>
    </ElDialog>

    <ElDialog v-model="previewVisible" title="图片预览" width="800px" @close="handlePreviewClose">
      <div class="preview-image-container">
        <ElImage
          :src="previewImageUrl"
          fit="contain"
          :preview-src-list="[previewImageUrl]"
          :initial-index="0"
          style="width: 100%; max-height: 600px"
        />
      </div>

      <template #footer>
        <ElButton @click="handlePreviewClose">关闭</ElButton>
      </template>
    </ElDialog>

    <MorePriceDialog
      v-model:visible="morePriceDialogVisible"
      :bookInfo="bookInfo"
      :selectRowPrice="selectRowPrice"
      @select="handleSelectPrice"
    />
  </Page>
</template>

<style lang="css"></style>
