<template>
    <div>
        <div class="flex flex-center flex-justify-between">
            <div class="flex flex-center flex-justify-start padding">
                <div class="flex flex-center">
                    <div>搜索文件：</div>
                    <a-input
                        style="width: 420px"
                        placeholder="请输入文件关键词"
                        v-model="name"
                        @press-enter="fetchList"
                        allow-clear
                        @clear="fetchList"
                    ></a-input>
                </div>
                <a-button class="ml-20" type="primary" @click="fetchList"
                    >搜索
                </a-button>
            </div>
            <div class="flex flex-center flex-justify-start">
                <a-button-group>
                    <a-button type="outline" size="small" @click="goHome">
                        <template #icon>
                            <icon-home />
                        </template>
                        <template #default> 首页</template>
                    </a-button>
                    <a-button type="outline" size="small" @click="goBack">
                        <template #icon>
                            <icon-nav />
                        </template>
                        <template #default> 上一级</template>
                    </a-button>
                    <upload @ok="upload" v-if="pid !== '0'" />
                    <add-folder
                        :project-id="this.projectId"
                        :query-id="queryId"
                        :type="type"
                        :pid="this.pid"
                        @ok="fetchList"
                    />
                </a-button-group>
            </div>
        </div>
        <a-table
            :columns="columns"
            :data="list"
            :loading="loading"
            :pagination="page"
            size="small"
            @page-change="pageChange"
        >
            <template #fileName="{ record }">
                <div class="flex flex-center flex-justify-start">
                    <img
                        v-if="record.isFolder === 1"
                        src="https://res.wutongshucloud.com/res/2024/12/04/202412041635423.svg"
                        style="width: 30px; height: 30px"
                    />
                    <img
                        v-else
                        src="https://res.wutongshucloud.com/res/2024/12/04/202412041641902.svg"
                        style="width: 20px; height: 20px; padding-left: 5px"
                    />
                    <div class="ml-10">{{ record.name }}</div>
                </div>
            </template>
            <template #user="{record}">
              <div>
                {{record.user.name}}
              </div>
            </template>
            <template #menu="{ record }">
                <div class="flex flex-center">

                    <a-button
                        v-if="record.isFolder === 1"
                        type="text"
                        size="small"
                        @click="fetchFolder(record.id)"
                        >查看
                    </a-button>
                  <preview
                      v-else
                      :file-id="record.fileId"
                      :attach-id="record.id"
                  />

                    <file-rename :id="record.id" :name="record.name" @ok="fetchList"></file-rename>
                    <a-button type="text" size="small" @click="remove(record)"
                        >删除
                    </a-button>
                </div>
            </template>
        </a-table>
    </div>
</template>

<script>
import upload from '@/components/upload/index.vue'
import preview from '@/components/preview/index.vue'
import addFolder from '@/views/project/components/attach/add-folder.vue'
import fileRename from "@/views/project/components/attach/file-rename.vue";

export default {
    props: {
        projectId: {
          required: true,
            type: String,
            default: ''
        },
        queryId:{
          required: true,
          type: String,
          default: ''
        },
        type :{
          required:true,
          type:Number,
          default: 0
        },
        folder:{
          required:true,
          type:String,
          default:''
        }

    },
    components: {
        upload,
        preview,
        addFolder,
        fileRename
    },
    data() {
        return {
            name: '',
            loading: true,
            history: ['0'],
            page: {
                page: 0,
                pageSize: 10,
                total: 0
            },
            list: [],
            pid: '0',
            columns: [
                {
                    title: '名称',
                    slotName: 'fileName'
                },
                {
                    title: '创建时间',
                    dataIndex: 'createdAt'
                },
                {
                    title: '创建人',
                    slotName: 'user'
                },
                {
                    title: '操作',
                    slotName: 'menu'
                }
            ]
        }
    },
    mounted() {
        this.fetchInit()
    },
    methods: {
        goHome() {
            this.history = ['0']
            this.pid = '0'
            this.fetchList()
        },
        goBack() {
            var size = this.history.length
            if (size > 1) {
                this.history = this.history.slice(0, size - 1)
                this.pid = this.history[this.history.length - 1]
                this.fetchList()
            } else {
                this.$notification.info('已经回到首页')
            }
        },
        fetchFolder(id) {
            this.pid = id
            this.history.push(id)
            this.fetchList()
        },
        pageChange(page) {
            this.page.page = page
            this.fetchList()
        },
        fetchInit() {
            this.$api.sys.dict({ code: this.folder }).then(res => {
                if (res.code === 200) {
                    var folder = res.data.map(e => e.label)
                    this.$api.projectFile
                        .initFolder({
                            projectId: this.projectId,
                            folders: folder.join(','),
                            type: this.type,
                            queryId: this.queryId
                        })
                        .then(() => {
                            this.fetchList()
                            this.loading = false
                        })
                }
            })
        },
        fetchList() {
            const data = {
                name: this.name,
                projectId: this.projectId,
                pid: this.pid,
                type: this.type,
                queryId:  this.queryId,
                ...this.page
            }
            this.$api.projectFile.page(data).then(res => {
                if (res.code === 200) {
                    this.list = res.data.records
                    this.page.total = res.data.total
                }
            })
        },
        upload(file) {
            const data = { projectId: this.projectId, pid: this.pid, name: file.fileName, type: this.type, fileId: file.id,queryId:  this.queryId }
            this.$api.projectFile.submit(data).then(res => {
                if (res.code === 200) {
                    this.fetchList()
                    this.$notification.success(res.msg)
                } else {
                    this.$notification.error(res.msg)
                }
            })
        },
        remove(file) {
            if (file.pid === '0') {
                this.$notification.error('当前内容不支持删除')
                return
            }
            this.$api.projectFile.remove({ id: file.id }).then(res => {
                if (res.code === 200) {
                    this.$notification.success(res.msg)
                    this.fetchList()
                } else {
                    this.$notification.error(res.msg)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
