<template>
    <div class="hc-layout-box">
        <HcCard :scrollbar="false" actionSize="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>
            <el-scrollbar>
                <div class="hc-table-ref-box">
                    <el-table :data="tableListData" :loading="tableLoading" hc row-key="id" stripe>
                        <el-table-column label="序号" prop="index" width="80">
                            <template #default="scope">
                                {{ scope.$index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column label="分类名称" prop="classfName"/>
                        <el-table-column label="数量" prop="count"/>
                        <el-table-column label="所属阶段" prop="projectStage"/>
                        <el-table-column label="文件类型" prop="fileType">
                            <template #default="scope">
                                {{ scope.row.fileType == 1 ? '视频文件' : '图片文件' }}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="130">
                            <template #default="scope">
                                <el-button size="small" text type="primary" @click="viewClick(scope.row)">查看
                                </el-button>
                                <HcTooltip keys="image-data-upload">
                                    <el-button size="small" text type="primary" @click="uploadClick(scope.row)">上传
                                    </el-button>
                                </HcTooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-scrollbar>
        </HcCard>
        <!--分类管理 弹框-->
        <el-dialog v-model="showSortModal" class="hc-modal-border" title="分类管理" width="62rem">
            <el-alert :closable="false" title="隐藏分类之后，在主页面不会显示该分类入口" type="warning"/>
            <div class="modal-dialog">
                <el-scrollbar>
                    <div class="hc-table-ref-box">
                        <el-table :data="classTableData" :loading="classTableLoading" hc row-key="id" stripe>
                            <el-table-column label="序号" prop="index" width="80">
                                <template #default="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column label="分类名称" prop="classfName"/>
                            <el-table-column label="所属阶段" prop="projectStage"/>
                            <el-table-column label="资料类型" prop="fileType">
                                <template #default="scope">
                                    {{ scope.row.fileType == 1 ? '视频文件' : '图片文件' }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="操作" width="130">
                                <template #default="scope">
                                    <el-button v-if="scope.row.isShow" size="small" type="info"
                                               @click="saveConfig(scope.row)">隐藏分类
                                    </el-button>
                                    <el-button v-else size="small" type="primary" @click="saveConfig(scope.row)">
                                        显示分类
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-scrollbar>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useAppStore} from "~src/store";
import {useRouter, useRoute} from 'vue-router'
import imageApi from '~api/other-file/imageData';
import {delStoreData} from '~src/utils/storage'
import {getArrValue} from "vue-utils-plus"

//变量
const router = useRouter()
const useRoutes = useRoute()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);

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

//获取数据
const tableLoading = ref(false)
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 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>
