<template>
    <div class="page">
        <div class="top adfac">
            <img src="@/assets/images/agent/arrow_left.png" @click="handleBack">
            <div class="spans">
                <span>项目管理</span>
                <span class="last">&nbsp;/&nbsp;{{ topname }}</span>
            </div>
        </div>
        <div class="content">
            <div class="c_query adfacjb">
                <div class="cq_l adfac">
                    <el-select v-model="queryParams.status" placeholder="全部状态" style="width: 200px;margin-right: 20px;"></el-select>
                    <el-select v-model="queryParams.category" placeholder="全部类目" style="width: 200px;margin-right: 20px;"></el-select>
                    <el-input placeholder="搜索文件名称" suffix-icon="el-icon-search" v-model="queryParams.name" style="width: 280px;"></el-input>                
                </div>
                <el-button type="primary">导入数据</el-button>
            </div>
            <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无文件" max-height="578px" style="margin-top: 20px;">
                <el-table-column label="文件名称" prop="aaa"></el-table-column>
                <el-table-column label="状态" prop="bbb">
                    <template #default="{ row }"></template>
                </el-table-column>
                <el-table-column label="数据来源" prop="aaa"></el-table-column>
                <el-table-column label="文件格式" prop="aaa"></el-table-column>
                <el-table-column label="所属类目" prop="aaa"></el-table-column>
                <el-table-column label="最近更新时间" prop="aaa"></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button link type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
                        <el-button link type="text" size="mini" @click="handleTag(scope.row)">标签</el-button>
                        <el-button link type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="display: flex;justify-content: center;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.page"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    v-show="total > 0">
                </el-pagination>
            </el-row>
        </div>
        <el-dialog width="30%" :visible.sync="tagShow" title="新增标签" @close="tagShow=false">
            <div class="ed_box">
                <div class="eb_title">已有标签</div>
                <div class="eb_list">
                    <div class="ebl_item adfacjb" v-for="(item, index) in tagList" :key="index">
                        <div class="el_l">
                            <el-input v-model="item.name" placeholder="请输入标签名称"></el-input>
                        </div>
                        <img src="@/assets/images/agent/delete_mini.png" class="el_r" @click="handleDeleteTag(item,index)">
                    </div>
                </div>
                <div class="eb_add" @click="handleAddTag">+添加标签</div>
            </div>
            <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 100px;">
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance } from 'vue'
    const { proxy } = getCurrentInstance();
    
    const topname = proxy.$route.query.title;
    const queryParams = ref({
        status: '',
        category: '',
        name: ''
    })
    const dataList = ref([1]);
    const loading = ref(false);
    const total = ref(0);
    const tagShow = ref(false);
    const tagList = ref([]);
    const buttonLoading = ref(false);

    const getList = () => {
        let query = {...queryParams.value};
        loading.value = true;
        // const res = await listOrder(query);
        // userList.value = res.data.list;
        // total.value = res.data.total;
        loading.value = false;
    }
    const handleSizeChange = (val) => {
        queryParams.page = val;
        getList();
    }
    const handleCurrentChange = (val) => {
        queryParams.page = val;
        getList();
    }


    const handleBack = () => {
        proxy.$router.go(-1);
    }

    const handleDetail = (item) => {

    }
    const handleTag = (item) => {
        tagShow.value = true;
    }
    const handleDelete = (item) => {
        proxy.$confirm('删除后无法恢复，确认删除吗？', '提示', {
            confirmButtonText: '确定',
            confirmButtonColor: '#761E6A',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            
        });
    }

    const handleDeleteTag = (item, index) => {
        tagList.value.splice(index, 1);
    }

    const handleAddTag = () => {
        tagList.value.push({name: ''});
    }

    const submitForm = () => {
        buttonLoading.value = true;
        setTimeout(() => {
            tagShow.value = false;
            buttonLoading.value = false;
        }, 1000)
    }
    const cancel = () => {
        tagShow.value = false;
    }
</script>

<style scoped lang="scss">
    :v-deep .el-dialog__wrapper{
        background: rgba(0,0,0,.3) !important;
    }
    ::v-deep .el-dialog__title{
        font-weight: bold !important;
    }
    ::v-deep .el-dialog{
        margin-top: 15vh !important;
    }

    .page{
        background: #FAFAFA;
        .top{
            width: 100%;
            height: 64px;
            background: #FFFFFF;
            border-bottom: 1px solid #F3F4F6;
            img{
                width: 36px;
                height: 36px;
                margin-left: 16px;
                cursor: pointer;
            }
            .spans{
                display: flex;
                align-items: center;
                margin-left: 23px;
                span{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #6B7280;
                    line-height: 14px;
                    &.last{
                        color: #111111;
                    }
                }
            }
        }
        
        .content{
            width: calc(100% - 24px);
            height: calc(100vh - 88px);
            padding: 20px;
            box-sizing: border-box;
            margin: 12px;
            background: #FFFFFF;
            border-radius: 6px 6px 0px 0px;
            border: 1px solid #F3F4F6;
        }

        .ed_box{
            .eb_title{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #252525;
                line-height: 20px;
            }
            .eb_list{
                margin-top: 3px;
                .ebl_item{
                    margin-top: 10px;
                    .el_l{
                        width: calc(100% - 44px);
                    }
                    .el_r{
                        width: 18px;
                        height: 18px;
                        cursor: pointer;
                    }
                }
            }
            .eb_add{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #761E6A;
                line-height: 20px;
                margin-top: 17px;
                cursor: pointer;
            }
        }
    }
</style>