<template>
<!-- 预案文档目录管理 -->
    <div class="APDocumentDirectory">
        <div class="box">
            <div class="box-row">
                <div class="col-left">
                    <div style="position:absolute;right:0;top:0;padding: 7px 0;width:100%;height: 45px;line-height: 30px;border-bottom: 1px solid #ccc;">
                        <span style="font-size: 16px;">文档目录</span>
                        <div style="position: absolute;top: 8px;right: 12px;width: 230px;">
                            <el-button
                                type="primary"
                                size="mini"
                                @click="elTreeAdd({itemcode: '', path: '文档目录'})"
                            >新增顶级目录</el-button>
                            <el-button
                                @click="setCheckedKeys"
                                size="mini"
                            >收起</el-button>
                            <el-button
                                size="mini"
                                @click="setCheckedNodes"
                            >展开</el-button>
                        </div>
                    </div>
                    <el-tree
                        ref="menuTree"
                        class="messageService-tree"
                        style="margin: 7px 7px 0 0;height:100%;overflow: auto;"
                        :data="listTopicTree.data"
                        :props="listTopicTree.defaultProps"
                        node-key="id"
                        v-loading="listTopicTree.loading"
                    >
                        <span
                            class="custom-tree-node"
                            :class="{'tree-row-on': dataForm.data.itemcode === data.itemcode}"
                            style="width:100%; padding-right:60px;padding-left: 24px; font-size:12px;"
                            slot-scope="{ node, data }"
                        >
                            <p
                                style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"
                                :title="node.label"
                                @click="selectByTopicId(data)"
                            >{{ node.label }}</p>
                            <span
                                style="position:absolute;right:0;top:0;"
                                @click.stop
                            >
                                <span
                                    class="el-icon-plus xl-icon-size"
                                    style="margin-right: 7px;"
                                    title="添加"
                                    @click="elTreeAdd(data)"
                                ></span>
                                <span
                                    class="el-icon-delete xl-icon-size"
                                    style="margin-right: 7px;"
                                    title="删除"
                                    @click="elTreeDel(data)"
                                ></span>
                            </span>
                        </span>
                    </el-tree>
                </div>
                <div
                    class="col-right"
                >
                    <div class="cx-box">
                        <span style="font-size: 16px;">编辑区</span>
                    </div>
                    <div class="nr-box">
                         <el-form
                            ref="dialog_form"
                            :model="dataForm.data"
                            :rules="dataForm.rules"
                            size="mini"
                            label-width="70px"
                        >
                            <el-form-item label="路径">
                                <el-input clearable
                                    :value="dataForm.data.path ? dataForm.data.path + (dataForm.type === 'add' ? '/' + dataForm.data.newcode : '') : ''"
                                    placeholder=""
                                    style="width: 100%;"
                                    disabled
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="目录名" prop="newcode">
                                <el-input clearable
                                    v-model="dataForm.data.newcode"
                                    placeholder=""
                                    style="width: 100%;"
                                    :disabled="dataForm.data.parentcode !== ''"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="目录描述" prop="note">
                                <el-input clearable
                                    type="textarea"
                                    v-model="dataForm.data.note"
                                    placeholder=""
                                    style="width: 100%;"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                        <div style="text-align: right;">
                            <el-button
                                v-show="dataForm.type !== ''"
                                type="primary"
                                @click="dataSave()"
                                :loading="dataForm.loading"
                            >{{ dataForm.type === 'add' ? '添 加' : '修 改' }}</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'APDocumentDirectory',
    data () {
        // const topicName = (rule, value, callback) => {
        //     let that = this;
        //     for (let i = 0; i < that.dialog_elTree.node.data.children.length; i++) {
        //         if (value === that.dialog_elTree.node.data.children[i].topicName) {
        //             return callback(new Error('同级目录中名称已存在'));
        //         }
        //     }
        //     callback();
        // };
        return {
            activeMenu: '',
            listTopicTree: {
                loading: false,
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'itemcode'
                }
            },
            dataForm: {
                type: '',
                loading: false,
                data: {
                    newcode: '',
                    itemcode: '',
                    parentcode: '',
                    path: '',
                    note: ''
                },
                rules: {
                    newcode: [
                        { required: true, message: '该项不能为空', trigger: 'change' }
                    ]
                }
            }
        };
    },
    created () {
        this.activeMenu = window.localStorage.getItem('activeMenu');
    },
    mounted () {
        let that = this;
        that.getListTopicTree();
    },
    methods: {
        // 获取节点树
        getListTopicTree () {
            let that = this
            let url = 'pass/ems/v1/tmcdocdirectorys/gettree/';
            that.listTopicTree.loading = true;
            that.axios.get(url)
                .then(function (res) {
                    if (res.code === '0') {
                        that.listTopicTree.data = res.data;
                        // let data = [{
                        //     itemcode: '节点名称',
                        //     parentcode: '父节点名称',
                        //     path: '路径',
                        //     note: '描述'
                        // }];
                    } else {
                        that.$message.error(res.message);
                    }
                    that.listTopicTree.loading = false;
                });
        },
        // 根据节点ID查询该节点下的信息
        selectByTopicId (data) {
            let that = this;
            that.dataForm.data.newcode = data.itemcode;
            that.dataForm.data.itemcode = data.itemcode;
            that.dataForm.data.parentcode = data.parentcode;
            that.dataForm.data.path = data.path;
            that.dataForm.data.note = data.note;
            that.dataForm.type = 'edit';
            // if (data.depth !== 0 && data.id !== that.dataForm.data.id) {
            //     that.dataForm.data.id = data.id;
            //     // 获取详细信息
            // }
        },
        elTreeAdd (data) {
            let that = this;
            that.dataForm.data.newcode = '';
            that.dataForm.data.itemcode = '';
            that.dataForm.data.parentcode = data.itemcode;
            that.dataForm.data.path = data.path;
            that.dataForm.data.note = '';
            that.dataForm.type = 'add';
            setTimeout(() => {
                that.$refs['dialog_form'].clearValidate();
            }, 100);
        },
        elTreeDel (data) {
            let that = this;
            that.$confirm('此操作将删除该目录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                state: 'warning'
            }).then(() => {
                that.axios.delete('pass/ems/v1/tmcdocdirectorys/' + data.itemcode)
                    .then(function (res) {
                        if (res.code === '0') {
                            that.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            that.getListTopicTree();
                        } else {
                            that.$message.error(res.message);
                        }
                    }).catch(function () {
                    });
            }).catch(() => {
            });
        },
        dataSave () {
            let that = this;
            let SubmitData = {
                parentcode: that.dataForm.data.parentcode,
                path: that.dataForm.data.path,
                itemcode: that.dataForm.data.newcode,
                note: that.dataForm.data.note
            };
            that.$refs['dialog_form'].validate((valid) => {
                if (valid) {
                    if (that.dataForm.type === 'add') {
                        let foorData = new FormData();
                        for (let key in SubmitData) {
                            foorData.append(key, SubmitData[key]);
                        }
                        that.dataForm.loading = true;
                        that.axios.post('pass/ems/v1/tmcdocdirectorys/', foorData, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        })
                            .then(function (res) {
                                if (res.code === '0') {
                                    that.$message({
                                        message: '新增成功',
                                        type: 'success'
                                    });
                                    that.getListTopicTree();
                                    that.dataForm.type = '';
                                } else {
                                    that.$message.error(res.message);
                                }
                                that.dataForm.loading = false;
                            }).catch(function () {
                                that.dataForm.loading = false;
                            });
                    } else {
                        that.dataForm.loading = true;
                        let params = {
                            parentcode: that.dataForm.data.parentcode,
                            path: that.dataForm.data.path,
                            itemcode: that.dataForm.data.itemcode,
                            newcode: that.dataForm.data.newcode,
                            note: that.dataForm.data.note
                        };
                        let paramsTxt = '';
                        for (let key in params) {
                            if (paramsTxt === '') {
                                paramsTxt += '?';
                            } else {
                                paramsTxt += '&';
                            }
                            console.log('key: ' + key);
                            paramsTxt += (key + '=' + (params[key] ? params[key] : ''));
                        }
                        console.log(paramsTxt)
                        that.axios.put('pass/ems/v1/tmcdocdirectorys/' + paramsTxt)
                            .then(function (res) {
                                if (res.code === '0') {
                                    that.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                    that.getListTopicTree();
                                    that.dataForm.type = '';
                                } else {
                                    that.$message.error(res.message);
                                }
                                that.dataForm.loading = false;
                            }).catch(function () {
                                that.dataForm.loading = false;
                            });
                    }
                }
            });
        },
        setCheckedKeys () {
            for (var i = 0; i < this.$refs.menuTree.store._getAllNodes().length; i++) {
                this.$refs.menuTree.store._getAllNodes()[i].expanded = false;
            }
        },
        setCheckedNodes () {
            for (var i = 0; i < this.$refs.menuTree.store._getAllNodes().length; i++) {
                this.$refs.menuTree.store._getAllNodes()[i].expanded = true;
            }
        }
    }
}
</script>

<style lang="less">
.APDocumentDirectory {
    min-width: 700px;
    height: 100%;
    padding: 15px;
    .box {
        height: 100%;
    }
    .box-row {
        height: 100%;
        overflow: hidden;
        .col-left {
            width: 30%;
            height: 100%;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
            float: left;
            position: relative;
            padding-top: 45px;
            .tree-row-on {
                color: #3279e8;
                font-weight: 600;
            }
        }
        .col-right {
            width: 70%;
            height: 100%;
            padding-top: 45px;
            float: left;
            position: relative;
            .cx-box {
                width: 100%;
                height: 45px;
                border-bottom: 1px solid #ccc;
                padding: 7px 0 0 12px;
                position: absolute;
                top: 0;
                left: 0;
            }
            .nr-box {
                height: 100%;
                margin-left: 7px;
                position: relative;
                padding-bottom: 37px;
                padding-top:7px;
                overflow: auto;
            }
        }
    }
    .red {
        color: red;
    }
    .blue {
        color: blue;
    }
    .chartreuse {
        color: #1a9f17;
    }
    .el-tree-node__label {
        border: none;
    }
    .messageService-tree {
        .el-tree-node__expand-icon {
            margin-right: -24px;
        }
    }
}
</style>
