<template>
    <hc-new-card class="hc-query-file-roll-card">
        <template #header>
            <div class="file-roll-title">卷内文件</div>
            <div class="file-roll-text">
                <span>共</span>
                <span class="num">{{ tableData.length }}</span>
                <span>份卷内文件</span>
            </div>
        </template>
        <template #extra>
            <div class="file-roll-close" @click="drawerCloseClick">
                <i class="i-iconoir-xmark-circle" />
            </div>
        </template>
        <template #search>
            <div class="hc-flex flex-1">
                <div class="input-search flex-1">
                    <el-input v-model="searchForm.title" clearable block placeholder="可按文件题名关键字模糊搜索" @keyup="queryEvent">
                        <template #prefix>
                            <i class="i-iconoir-search" />
                        </template>
                        <template #append>
                            <el-button @click="getTableData">搜索</el-button>
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="relative ml-10">
                <el-button v-if="tableCheckedKeys.length <= 0" hc-btn type="info" :disabled="tableCheckedKeys.length <= 0">元数据</el-button>
                <el-button v-else hc-btn type="primary" @click="metaDataClick">元数据</el-button>
            </div>
        </template>
        <hc-table
            :column="tableColumn" :datas="tableData" :loading="tableLoading" :is-index="false"
            is-new is-check :check-style="{ width: 29 }" @selection-change="tableSelectionChange"
        >
            <template #title="{ row }">
                <el-link type="primary" :underline="false" @click="tableRowTitle(row)">{{ row?.title }}</el-link>
            </template>
        </hc-table>
        <!-- 元数据 -->
        <QueryMetaData v-model="isFileMetaData" :ids="metaDataId" :title="metaDataTitle" @close="fileMetaDataClose" />
        <!-- 预览PDF -->
        <hc-new-drawer v-model="isFilePdfDrawer" to-id="hc-layout-main" direction="btt">
            <QueryFilePdf :datas="tableData" :rows="fileRollRow" @close="filePdfDrawerClose" />
        </hc-new-drawer>
    </hc-new-card>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import { getArrValue, isNullES } from 'js-fast-way'
import { sql_table } from '../../utils/dbConnect'
import QueryFilePdf from './file-pdf.vue'
import QueryMetaData from './meta-data.vue'

const props = defineProps({
    datas: {
        type: Object,
        default: () => ({}),
    },
})

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

defineOptions({
    name: 'QueryFileRoll',
})

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

//渲染完成
onMounted(() => {
    setRowData()
})

//设置数据
const setRowData = () => {
    const row = rows.value
    if (isNullES(row.id)) return
    searchForm.value.parentId = row.id
    getTableData()
}

//搜索表单
const searchForm = ref({ parentId: null, title:'' })

//回车搜索
const queryEvent = ({ key }) => {
    if (key !== 'Enter') {
        return
    }
    getTableData()
}

//表格数据
const tableColumn = ref([
    { key: 'title', name: '文件题名' },
    { key: 'dutyUser', name: '责任人' },
    { key: 'startime', name: '创建日期' },
])
const tableData = ref([])

//获取表格数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableData.value = []
    tableLoading.value = true
    const form = searchForm.value
    const title = isNullES(form.title) ? '%' : `%${form.title}%`
    //查询表格数据
    const sql = `select id,file_number as number,file_name as title,pdf_file_url as url,file_time as startime,duty_user as dutyUser from u_archive_file where archive_id = '${form.parentId}' and file_name like '${title}'`
    const { code, data } = await sql_table(sql)
    tableData.value = code === 200 ? getArrValue(data) : []
    tableLoading.value = false
}

//表格多选
const tableCheckedKeys = ref([])
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
}

//元数据
const isFileMetaData = ref(false)
const metaDataId = ref('')
const metaDataTitle = ref('')
const metaDataClick = () => {
    const rows = tableCheckedKeys.value
    if (rows.length <= 0) {
        window.$message?.warning('请先选择文件')
        return
    }
    if (rows.length > 1) {
        window.$message?.warning('只能选择一条数据')
        return
    }
    //设置元数据参数
    metaDataId.value = rows[0].id
    metaDataTitle.value = rows[0].title
    nextTick(() => {
        isFileMetaData.value = true
    })
}

//元数据关闭
const fileMetaDataClose = () => {
    isFileMetaData.value = false
    metaDataId.value = ''
    metaDataTitle.value = ''
}

//表格行点击
const isFilePdfDrawer = ref(false)
const fileRollRow = ref({})
const tableRowTitle = (row) => {
    fileRollRow.value = row
    isFilePdfDrawer.value = true
}

//关闭预览PDF
const filePdfDrawerClose = () => {
    isFilePdfDrawer.value = false
}

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