<template>
    <hc-new-card title="pdf文件预览" class="hc-query-file-pdf-card">
        <template #extra>
            <div class="file-pdf-close" @click="drawerCloseClick">
                <i class="i-iconoir-xmark-circle" />
            </div>
        </template>
        <div class="hc-flex relative h-full">
            <div class="relative h-full flex-1">
                <webview :src="pdfFileUrl" class="h-full w-full" />
            </div>
            <div class="ml-1 h-full w-[200px]">
                <hc-table ref="tableRef" :column="tableColumn" :datas="tableData" :is-index="false" is-new is-current-row>
                    <template #title="{ row }">
                        <el-link type="primary" :underline="false" @click="tableRowTitle(row)">{{ row?.title }}</el-link>
                    </template>
                </hc-table>
            </div>
        </div>
    </hc-new-card>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { isNullES } from 'js-fast-way'
import { exists_file } from '../../utils/tools'

const props = defineProps({
    datas: {
        type: Array,
        default: () => ([]),
    },
    rows: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['close'])

defineOptions({
    name: 'QueryFilePdf',
})

const tableRef = ref(null)

//项目信息
const store = useAppStore()
const projectInfo = ref(store.projectInfo)
const dataPath = ref(store.dataPath)
const projectId = ref('')

//渲染完成
onMounted(() => {
    projectInfo.value = store.projectInfo
    projectId.value = store.projectInfo?.key ?? ''
    dataPath.value = store.dataPath
    setRowData()
})

//监听数据
const tableData = ref(props.datas)
const tableRows = ref(props.rows)
watch(() => [
    props.datas,
    props.rows,
], (data, row) => {
    tableData.value = data
    tableRows.value = row
    setRowData()
}, { deep: true })

//设置数据
const isPdfState = ref(0)
const pdfFileUrl = ref('')
const setRowData = () => {
    //初始化数据
    isPdfState.value = 0
    pdfFileUrl.value = ''
    //检测传递参数
    const row = tableRows.value, data = tableData.value
    if (isNullES(row.id) || isNullES(row.url) || data.length <= 0) {
        isPdfState.value = 1 //没有数据
        return
    }
    setPdfPath(row)
}

//设置PDF路径
const setPdfPath = (row) => {
    //检测核心数据
    const data_path = dataPath.value, pid = projectId.value
    if (isNullES(data_path) || isNullES(pid)) {
        isPdfState.value = 2 //数据异常
        return
    }
    //处理pdf文件路径
    const pdfPath = `${dataPath.value}/${projectId.value}/pdf/${row.url}`
    //判断pdf文件是否存在
    if (!exists_file(pdfPath)) {
        isPdfState.value = 3 //pdf文件不存在
        return
    }
    //pdf文件存在
    isPdfState.value = 99 //数据正常
    pdfFileUrl.value = 'file://' + pdfPath
    //设置当前行
    tableRef.value?.tableRef?.setCurrentRow(row)
}

//表格数据
const tableColumn = ref([{ key: 'title', name: '卷内文件名称' }])

//表格行被点击
const tableRowTitle = (row) => {
    if (row.id === tableRows.value.id) return
    isPdfState.value = 0
    pdfFileUrl.value = ''
    tableRows.value = row
    setPdfPath(row)
}

//关闭抽屉
const drawerCloseClick = () => {
    emit('close')
}
</script>
