<template>
    <div class="pageBackground">
        <div class="breadHeader">文件管理/列表</div>
        <div class="filecontent">
            <a-layout>
                <a-layout-sider>
                    <div class="siderHeader">文件目录</div>
                    <div class="flodContent">
                        <a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys"
                            v-model:selectedKeys="selectedKeys">
                            <a-tree-node v-for="itemNode in treeData" :key="itemNode.id"
                                :title="itemNode.title"></a-tree-node>
                        </a-directory-tree>
                    </div>
                </a-layout-sider>
                <a-layout-content>
                    <div class="main">
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">598</div>
                                    <div>文件总数</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">20</div>
                                    <div>图片</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">45</div>
                                    <div>音频</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">98</div>
                                    <div>数据库文件</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">112</div>
                                    <div>视频</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">36</div>
                                    <div>文档</div>
                                </a-col>
                            </a-row>
                        </div>
                    </div>
                    <div style="margin-top: 20px;">
                        <a-row>
                            <a-col :span="12">
                                <a-form layout="inline">
                                    <a-form-item>
                                        <a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
                                    </a-form-item>
                                    <a-form-item>
                                        <a-button type="primary" icon="search" style="margin-left: 21px">查询</a-button>
                                        <a-button type="primary" icon="reload" style="margin-left: 8px">重置</a-button>
                                    </a-form-item>
                                </a-form>
                            </a-col>
                            <a-col :span="12" style="text-align: right;">
                                <a-button type="primary" icon="search" style="margin-left: 21px">文件移动</a-button>
                                <a-button type="primary" icon="reload" style="margin-left: 8px">删除</a-button>
                                <a-button type="primary" icon="search" style="margin-left: 21px">批量执行</a-button>
                                <a-button type="primary" icon="reload" style="margin-left: 8px">数据导入</a-button>
                            </a-col>
                        </a-row>
                    </div>
                    <div style="margin-top: 15px">
                        <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns"
                            :dataSource="dataSource" :pagination="ipagination" :loading="loading"
                            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                            @change="handleTableChange">
                            <span slot="action" slot-scope="text, record">
                                <a>下载</a>
                            </span>
                        </a-table>
                    </div>
                </a-layout-content>
            </a-layout>
        </div>
    </div>
</template>
<script>
import guaz from '@assets/guaz.png'
export default {
    name: "fileManage",
    data() {
        return {
            guaz,
            expandedKeys: [],
            selectedKeys: [],
            treeData: [],
            queryParam: {
                keyWord: ''
            },
            columns: [
                {
                    title: "序号",
                    width: 70,
                    customRender: (text, record, index) => `${index + 1}`,
                },
                {
                    title: '名称',
                    align: "center",
                    dataIndex: 'username',
                    width: 120,
                    sorter: true
                },
                {
                    title: '类型',
                    align: "center",
                    width: 100,
                    dataIndex: 'realname',
                },
                {
                    title: '大小',
                    align: "center",
                    width: 120,
                    dataIndex: 'avatar',
                    scopedSlots: { customRender: "avatarslot" }
                },

                {
                    title: '所属模型',
                    align: "center",
                    width: 80,
                    dataIndex: 'sex_dictText',
                    sorter: true
                },
                {
                    title: '标签',
                    align: "center",
                    width: 100,
                    dataIndex: 'birthday'
                },
                {
                    title: '导入用户',
                    align: "center",
                    width: 100,
                    dataIndex: 'phone'
                },
                {
                    title: '部门',
                    align: "center",
                    width: 180,
                    dataIndex: 'orgCodeTxt'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' },
                    align: "center",
                    width: 170
                }

            ],
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 5,
                pageSizeOptions: ['5', '10', '20'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            dataSource: [],
            loading: false,
            selectedRowKeys: []
        }
    },
    created() {

    },
    methods: {
        onSelectChange() {

        },
        handleTableChange() {

        }
    }
}
</script>

<style scoped>
.pageBackground {
    background: #dee3ee;
    height: 100vh;
    font-size: 23px;
}

.breadHeader {
    height: 40px;
    background: #FFFFFF;
    line-height: 40px;
    font-size: 18px;
    color: #a3a8bb;
    padding: 0 100px;
    margin-bottom: 8px;
}

.filecontent {
    height: calc(100vh - 48px);
    padding: 20px 30px;
    background: #FFFFFF;
}

.siderHeader {
    height: 50px;
    color: #212224;
    line-height: 50px;
    font-size: 20px;
    background: #ebf0ff;
    text-align: center;
}

.flodContent {
    height: calc(100vh - 230px);
    overflow-y: auto;
}

.main {
    width: 100%;
    height: 100px;
    /* position: absolute; */
}

.quarter-div {
    width: 15%;
    height: 100px;
    float: left;
    margin-right: 26px;
    background: #edf2ff;
    border: 1px solid #d3e5fd;
    border-radius: 10px;
}

/deep/ .ant-layout-sider {
    background: #f6f8ff !important;
    border: 1px solid #dfe4f3;
    border-radius: 10px;
    height: calc(100vh - 180px);
    min-width: 200px !important;
    margin-left: 0px;
    margin-right: 50px;
}
</style>