<template>
    <div class="table-container">
        <div class="flex justify-between table-header">
            <div class="flex-center">
                <el-button @click="addFolderRule()">增加</el-button>
                <el-button @click="save()">保存</el-button>
                <el-button @click="deleteFolderRule()">删除</el-button>
            </div>
        </div>
        <div class="list-content">
            <el-row class="header-row">
                <el-col :span="1">
                    <el-checkbox v-model="allSelected" @change="selectAll"></el-checkbox>
                </el-col>
                <el-col :span="5">类型</el-col>
                <el-col :span="10">内容</el-col>
                <el-col :span="4">文件夹</el-col>
                <el-col :span="4">拖动</el-col>
            </el-row>
            <draggable
                :list="dragList"
                :force-fallback="true"
                animation="300"
                class="drag-area"
                itemKey="prop"
                :delay="150"
            >
                <template #item="{ element }">
                    <el-row>
                        <el-col :span="1">
                            <el-checkbox v-model="element.selected" @change="selectCheckbox"></el-checkbox>
                        </el-col>
                        <el-col :span="5">
                            <el-select v-model="element.folderRuleCode">
                                <el-option v-for="item in typeData" :label="item.desc" :value="item.code"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="10">
                            <el-input v-model="element.compareContent"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-select v-model="element.folderId">
                                <el-option v-for="item in folderData" :label="item.folderName" :value="item.id"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4"><i-ep-expand class="sort-icon" /></el-col>
                    </el-row>
                </template>
            </draggable>
        </div>
    </div>
</template>

<script setup lang="ts">
    import draggable from "vuedraggable";
    import { getEmailFolderRuleList, getFolderRule, getEmailFolder, setEmailFolderRule, delEmailFolderRule } from '@/api/emails';

    const dragList = ref([])
    const getData = () => {
        getEmailFolderRuleList().then(res => {
            if(res.success) {
                dragList.value = res.result
            }
        })
    }

    const typeData = ref([])
    const getRule = () => {
        getFolderRule().then(res => {
            if(res.success) {
                typeData.value = res.result
            }
        })
    }

    const folderData = ref([])
    const getFolder = () => {
        getEmailFolder().then(res => {
            if(res.success) {
                folderData.value = res.result
            }
        })
    }

    const allSelected = ref(false)
    const selectAll = () => {
        dragList.value.map(item => {
            item.selected = allSelected.value
        })
    }
    const selectCheckbox = () => {
        let flag = dragList.value.every(item => {
            return item.selected
        })
        if(flag) {
            allSelected.value = true
        } else {
            allSelected.value = false
        }
    }

    const addFolderRule = () => {
        dragList.value.push({
            selected: false,
            folderRuleCode: '',
            folderId: '',
            compareContent: ''
        })
    }

    const save = () => {
        let copyData = []
        for(let i = 0; i < dragList.value.length; i++) {
            let data = dragList.value[i]
            if(!data.folderRuleCode || !data.compareContent || !data.folderId) {
                ElMessage.error('请输入完整')
                return false
            }
            if(copyData.indexOf(data.folderRuleCode + data.compareContent) != -1) {
                ElMessage.error('请勿重复设置')
                return false
            }else {
                copyData.push(data.folderRuleCode + data.compareContent)
            }
        }
        setEmailFolderRule({ folderRules: dragList.value }).then(res => {
            if(res.success) {
                ElMessage.success('保存成功')
            }
        })
    }

    const deleteFolderRule = () => {
        let selectedData = dragList.value.filter(item => item.selected)
        if(selectedData.length == 0) {
            ElMessage.error('请选择要删除的数据')
            return false
        }
        let ids = []
        for(let i = 0; i < selectedData.length; i++) {
            dragList.value.splice(dragList.value.findIndex(item => item == selectedData[i]), 1)
            if(selectedData[i].id) {
                ids.push(selectedData[i].id)
            }
        }
        ElMessage.success('删除成功')
        if(ids.length != 0) {
            delEmailFolderRule(ids)
        }
    }

    onMounted(() => {
        getRule()
        getFolder()
        getData()
    })
</script>

<style scoped lang="scss">
    .table-container{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .list-content{
        border: 1px solid #DCDEE2;
        flex: 1;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        .drag-area{
            flex: 1;
            overflow: auto;
            .el-col{
                height: 48px;
                line-height: 48px;
            }
        }
        .header-row{
            background: #F8FAFC;
            .el-col{
                font-weight: bold;
                color: #333;
            }
        }
        .el-row{
            border-bottom: 1px solid #DCDEE2;
        }
        .el-col{
            height: 42px;
            line-height: 42px;
            padding: 0 15px;
            display: flex;
            align-items: center;
            .sort-icon{
                margin-left: 4px;
            }
        }
        p{
            color: #333
        }
    }
</style>