<template>
    <div class="hc-layout-box">
        <HcNewCard :scrollbar="false" action-size="lg">
            <template #header>
                <HcTooltip keys="image-data-sort">
                    <el-button hc-btn type="primary" @click="showSortModalClick">
                        <HcIcon name="list-settings" />
                        <span>分类管理</span>
                    </el-button>
                </HcTooltip>
            </template>
            <HcTable :column="tableListColumn" :datas="tableListData" :loading="tableLoading" is-new :index-style="{ width: 60 }">
                <template #fileType="{ row }">
                    {{ row.fileType == 1 ? '视频文件' : '图片文件' }}
                </template>
                <template #action="{ row }">
                    <el-link type="primary" @click="viewClick(row)">查看</el-link>
                    <HcTooltip keys="image-data-upload">
                        <el-link type="success" @click="uploadClick(row)">上传</el-link>
                    </HcTooltip>
                </template>
            </HcTable>
        </HcNewCard>
        <!-- 分类管理 弹框 -->
        <hc-new-dialog v-model="showSortModal" is-table title="分类管理" widths="62rem">
            <el-alert :closable="false" title="隐藏分类之后，在主页面不会显示该分类入口" type="warning" />
            <div class="modal-dialog">
                <HcTable :column="classTableColumn" :datas="classTableData" :loading="classTableLoading" is-new :index-style="{ width: 60 }">
                    <template #fileType="{ row }">
                        {{ row.fileType == 1 ? '视频文件' : '图片文件' }}
                    </template>
                    <template #action="{ row }">
                        <el-link v-if="row.isShow" type="info" @click="saveConfig(row)">隐藏分类</el-link>
                        <el-link v-else type="primary" @click="saveConfig(row)">显示分类</el-link>
                    </template>
                </HcTable>
            </div>
        </hc-new-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useAppStore } from '~src/store'
import { useRouter } from 'vue-router'
import imageApi from '~api/other-file/imageData'
import { delStoreValue } from '~src/utils/storage'
import { getArrValue } from 'js-fast-way'
//变量
const router = useRouter()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)

//渲染完成
onMounted(() => {
    delStoreValue('TreeExpandKeys')
    delStoreValue('TreeExpandedKeys')
    delStoreValue('TreeCurrentNodeKey')
    getClassIfyList()
})

//获取数据
const tableLoading = ref(false)
const tableListColumn = ref([
    { key: 'classfName', name: '分类名称' },
    { key: 'count', name: '数量' },
    { key: 'projectStage', name: '所属阶段' },
    { key: 'fileType', name: '文件类型' },
    { key: 'action', name: '操作', width: 100 },
])
const tableListData = ref([])
const getClassIfyList = async () => {
    tableLoading.value = true
    const { error, code, data } = await imageApi.getClassIfyList({
        projectId: projectId.value,
        contractId: contractId.value,
    })
    //处理数据
    tableLoading.value = false
    if (!error && code === 200) {
        tableListData.value = getArrValue(data)
    } else {
        tableListData.value = []
    }
}

//查看影像资料
const viewClick = (item) => {
    router.push({
        path: '/other-file/image-view',
        query: {
            type: item['storageDirectoryFormat'],
            fileType: item['fileType'],
            id: item.id,

        },
    })
}

//上传图像资料
const uploadClick = (item) => {
    router.push({
        path: '/other-file/image-form',
        query: {
            dataType: item['storageDirectoryFormat'], //存储目录格式 1按部位存储，2按日期存储
            fileType: item['fileType'], //文件类型，1视频文件，2图片文件
            classifyId: item.id, //classifyId, 分类ID,

        },
    })
}

//展开分类管理弹窗
const showSortModal = ref(false)
const showSortModalClick = () => {
    showSortModal.value = true
    getClassifyShowConfigList()
}
//获取分类管理数据
const classTableLoading = ref(false)
const classTableColumn = ref([
    { key: 'classfName', name: '分类名称' },
    { key: 'projectStage', name: '所属阶段' },
    { key: 'fileType', name: '资料类型' },
    { key: 'action', name: '操作', width: 100 },
])
const classTableData = ref([])
const getClassifyShowConfigList = async () => {
    classTableLoading.value = true
    const { error, code, data } = await imageApi.getClassifyShowConfigList({
        projectId: projectId.value,
        contractId: contractId.value,
    })
    //处理数据
    classTableLoading.value = false
    if (!error && code === 200) {
        classTableData.value = getArrValue(data)
    } else {
        classTableData.value = []
    }
}

//保存客户端分类显隐记录
const saveConfig = async (row) => {
    const { error, code } = await imageApi.saveClassifyShowConfig({
        showList: [{
            projectId: projectId.value,
            contractId: contractId.value,
            classifyId: row.id,
            isShow: row.isShow ? 0 : 1,
            id: row['showId'],
        }],
    })
    //处理数据
    if (!error && code === 200) {
        row.isShow = !row.isShow
        getClassIfyList()
    }
}
</script>

<style lang="scss" scoped>
.hc-layout-box {
    position: relative;
    height: 100%;
}
.modal-dialog {
    position: relative;
    max-height: 550px;
}
</style>
