<template>
    <!-- 技术方案列表 -->
    <div class="right-table-card">
        <TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="technicalTableRef"
            :columnsList="columnsList" :request-api="listAPI" :sendParams="sendParams" :autoLoad="false">
            <template slot="tableTitle">
                <h3>数据列表</h3>
            </template>
            <template slot="technicalName" slot-scope="{ data }">
                <span style="color: #1F72EA;cursor: pointer;" @click="viewFile(data)">{{ data.technicalName }}</span>
            </template>
            <template slot="tableActions">
                <el-button @click="handleAdd" :disabled="disabled" v-hasPermi="['enterpriseLibrary:technical:add']"
                    class="add-btn"><i class="el-icon-plus"></i> 新增</el-button>
            </template>
            <template slot="technicalSolutionState">
                <span>可引用</span>
            </template>
            <template slot="handle" slot-scope="{ data }">
                <el-button type="text" v-hasPermi="['enterpriseLibrary:technical:detail']" class="action-btn"
                    @click="handleDetail(data)">
                    查看
                </el-button>
                <el-button type="text" v-hasPermi="['enterpriseLibrary:technical:edit']" class="action-btn"
                    style="color: #EAA819;" @click="handleUpdate(data)">
                    编辑
                </el-button>
                <el-button type="text" v-hasPermi="['enterpriseLibrary:technical:del']" class="action-btn"
                    style="color: #DB3E29;" @click="handleDelete(data)">
                    删除
                </el-button>
            </template>
        </TableModel>
        <!-- <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" width="50%" class="preview-dialog" title="文件预览">
            <OnlyOfficeViewer :document-url="documentUrl" :document-title="documentTitle" :document-key="documentKey"
                :mode="mode" :type="type" @document-ready="handleDocumentReady" @app-ready="handleAppReady"
                @error="handleError" @initialized="handleInitialized" :force-save="true" :save-timeout="15000" />
        </el-dialog> -->
        <ViewFile v-if="dialogVisible" :file="fileData" @closeDialog="handleCloseDialog" />
    </div>
</template>

<script>
import TableModel from '@/components/TableModel2'
import { columnsList, formLabel } from './config'
import { listAPI, delDataAPI } from '@/api/enterpriseLibrary/technical/technical'
import { encryptWithSM4 } from '@/utils/sm'
import ViewFile from '@/views/common/ViewFile'

export default {
    name: 'RightTableTechnical',
    components: {
        TableModel,
        ViewFile
    },
    dicts: ['construction_nature', 'structural_form', 'basic_form'],
    props: {
        enterpriseId: {
            type: String,
            default: '0'
        },
        value: {
            type: [String, Number],
            default: null
        },
    },
    data() {
        return {
            formLabel,
            columnsList,
            listAPI,
            dialogVisible: false,
            fileData: {},
        }
    },
    watch: {
        value: {
            handler(newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        this.handleQuery();
                    })
                }
            },
            immediate: true
        }
    },
    computed: {
        disabled() {
            return !this.value;
        },
        sendParams() {
            return {
                technicalSolutionTypeId: this.value
            }
        }
    },
    created() {
        // 将字典数据填充到表单配置的下拉选项中
        if (Array.isArray(this.formLabel)) {
            this.formLabel.forEach((item) => {
                if (item.f_dict && this.dict && this.dict.type && this.dict.type[item.f_dict]) {
                    this.$set(item, 'f_selList', this.dict.type[item.f_dict])
                }
            })
        }
    },

    methods: {

        /** 新增按钮操作 */
        handleAdd() {
            this.$router.push({
                name: 'TechnicalAdd',
                query: {
                    enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
                    technicalSolutionTypeId: encryptWithSM4(this.value + '' || '0'),
                    technicalSolutionId: encryptWithSM4('0'),
                    type: encryptWithSM4('add')
                }
            })
        },

        /** 修改操作 */
        handleUpdate(row) {
            
            this.$router.push({
                name: 'TechnicalEdit',
                query: {
                    enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
                    technicalSolutionTypeId: encryptWithSM4(this.value + '' || '0'),
                    type: encryptWithSM4('edit'),
                    technicalSolutionId: encryptWithSM4(row.technicalSolutionId + '' || '0'),
                }
            })
        },
        /** 查看操作 */
        handleDetail(row) {

            this.$router.push({
                name: 'TechnicalDetail',
                query: {
                    enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
                    technicalSolutionTypeId: encryptWithSM4(row.technicalSolutionTypeId + '' || '0'),
                    type: encryptWithSM4('detail'),
                    technicalSolutionId: encryptWithSM4(row.technicalSolutionId + '' || '0'),
                }
            })
        },
        /* 搜索操作 */
        handleQuery() {
            this.$refs.technicalTableRef.getTableList()
        },
        /** 查看文件 */
        viewFile(row) {
            console.log(row);
            this.fileData = {
                fileName: row.technicalName,
                id: row.resourceFileVoList?.[0]?.sourceId + ''
            }
            this.dialogVisible = true
        },
        handleCloseDialog() {
            this.dialogVisible = false
            this.fileData = {}
        },

        /** 删除操作 */
        handleDelete(raw) {
            this.$confirm(`确定要删除方案名称"${raw.technicalName}"吗？删除后将无法恢复！`, '操作提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
                customClass: 'delete-confirm-dialog'
            }).then(() => {
                delDataAPI(
                    {
                        technicalSolutionTypeId: raw.technicalSolutionTypeId,
                        technicalSolutionId: raw.technicalSolutionId
                    }
                ).then(res => {
                    if (res.code === 200) {
                        this.$message.success('删除成功');
                        this.activeCategory = null;
                        this.handleQuery();
                    } else {
                        this.$message.error(res.msg || '删除失败');
                    }
                }).catch(error => {
                    console.error('删除失败:', error);
                });
            })
        },
    },
}
</script>
<style scoped lang="scss">
.app-container {
    padding: 20px 20px 20px 0;
}

.right-table-card {
    height: calc(100vh - 175px);
    overflow-y: hidden;
    transition: overflow-y 0.3s ease;

    &:hover {
        overflow-y: auto;
    }
}

.add-btn {
    width: 121px;
    height: 36px;
    background: #1F72EA;
    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
    border-radius: 4px 4px 4px 4px;
    color: #fff;
    border: none;
    font-size: 14px;
    transition: all 0.3s;

    &:hover {
        background: #4A8BFF;
        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
    }
}

.action-btn {
    margin-right: 8px;

    &:last-child {
        margin-right: 0;
    }
}
</style>
