<template>
    <div class="generateBriefing">
        <div class="generateBriefing-title">
            <span style="color:red">*</span>
            <el-input placeholder="请输入简报名称" v-model="briefing.title"></el-input>
        </div>
        <div class="generateBriefing-condition">
            <div class="condition-mechanism">
                <el-input placeholder="请输入单位名称" v-model="briefing.company"></el-input>
            </div>
            <div class="condition-date">
                <el-date-picker v-model="briefing.date" type="date" placeholder="选择日期" format="M月dd日" value-format="M月dd日">
                </el-date-picker>
            </div>
        </div>
        <div class="generateBriefing-content" v-for="(item, index) in briefing.content">
            <div class="contentList-title">
                <el-input v-model="item.title"></el-input>
            </div>
            <div class="contentList-explain">
                <el-input type="textarea" autosize v-model="item.explain"></el-input>
            </div>
            <div class="contentList-text" v-for="(item1, index1) in item.text">
                <div class="text-title">
                    <span>{{ returnChinese(index1) + '、' }}</span>
                    <el-input v-model="item1.title" label="123"></el-input>
                </div>
                <div class="text-condition">
                    <el-input v-model="item1.tag" placeholder="请输入信息标签"></el-input>
                    <div class="button-condition" @click="selectParagraph(index, index1)">选择段落</div>
                    <div class="button-addCondition" @click="addCondition(index, index1)">增加段落</div>
                </div>
                <div class="text-text">
                    <div class="text-area" v-for="(item2, index2) in item1.text1" v-if="item1.text1.length > 0">
                        <div class="left-text">
                            <el-input v-model="item2.title" placeholder="段落标题"></el-input>
                            <el-input class="area-txt" type="textarea" autosize placeholder="请输入内容"
                                v-model="item2.description"> </el-input>
                        </div>
                        <div class="right-text">
                            <span class="el-icon-delete" @click="removeText(item2, index, index1, index2)"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-condition" @click="addText(index)">增加</div>
        </div>
        <div class="generateBriefing-new">
            <div class="button-condition" @click="addContent()">新增模块</div>
        </div>
        <div class="generateBriefing-form">
            <el-form ref="form" label-width="100px">
                <el-form-item label="报送：">
                    <el-input placeholder="报送部门" v-model="briefing.sendTo.submittedCompany"></el-input>
                    <br>
                    <el-input placeholder="报送人" v-model="briefing.sendTo.submittedPeople"
                        style="margin-top:10px;"></el-input>
                </el-form-item>
                <el-form-item label="抄送：">
                    <el-input placeholder="抄送" v-model="briefing.sendTo.ccPerson"></el-input>
                </el-form-item>
                <el-form-item label="承办人：">
                    <el-input placeholder="承办人" v-model="briefing.sendTo.undertaker"></el-input>
                </el-form-item>
                <el-form-item label="联系电话：">
                    <el-input placeholder="联系电话" v-model="briefing.sendTo.contactNumber"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="generateBriefing-button">
            <div class="button-condition" @click="generateBriefing">生成简报</div>
        </div>

        <!-- 抽屉 -->
        <el-drawer title="选择段落" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
            <div class="search">
                <el-select v-model="value" placeholder="请选择" clearable>
                    <el-option v-for="item in collectionFolder" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <el-input v-model="input"></el-input>
                <div class="button-search" @click="search()">搜索</div>
                <div class="button-import" v-if="multipleSelection.length > 0" @click="addBriefing()">加入简报</div>
            </div>
            <div class="searchResult">
                <div class="resultList">
                    <el-table class="myTable" ref="multipleTable" :data="collectionFolderNews" style="width: 100%;"
                        height="calc(100% - 60px)" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column label="收藏内容" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <h5 v-text="scope.row.title"></h5>
                                <div v-text="scope.row.description"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" width="200" label="收藏时间" align="center"></el-table-column>
                    </el-table>
                </div>
            </div>
        </el-drawer>

    </div>
</template>

<script>
import { get } from '@/util/http_util';
import exportWord from "@/util/export_doc_util_zzjb";

export default {
    inject: ['reload'],
    data() {
        return {
            briefing: {
                title: '',
                company: '',
                date: '',
                content: [
                    {
                        title: '',
                        explain: '',
                        text: [
                            {
                                title: '',
                                tag: '',
                                text1: [{ title: '', description: '' }]
                            }
                        ]
                    }
                ],
                sendTo: {
                    submittedCompany: '',
                    submittedPeople: '',
                    ccPerson: '',
                    undertaker: '',
                    contactNumber: ''

                }
            },
            drawer: false,
            direction: 'rtl',
            value: '',
            input: '',
            checked: [],
            multipleSelection: [],
            collectionFolder: [],//收藏夹
            collectionFolderNews: [],//每个收藏夹下的收藏内容
            selectIndex: 0,
            selectIndex1: 0,

        }
    },
    methods: {
        //阿拉伯字母变中文大写
        returnChinese(val) {
            switch (val) {
                case 0:
                    return '一';
                    break;
                case 1:
                    return '二';
                    break;
                case 2:
                    return '三';
                    break;
                case 3:
                    return '四';
                    break;
                case 4:
                    return '五';
                    break;
                case 5:
                    return '六';
                    break;
                case 6:
                    return '七';
                    break;
                case 7:
                    return '八';
                    break;
                case 8:
                    return '九';
                    break;
                case 9:
                    return '十';
                    break;
                case 10:
                    return '一';
                    break;
            }
        },
        //选择段落
        selectParagraph(index, index1) {
            this.selectIndex = index;
            this.selectIndex1 = index1;
            this.drawer = true;
        },
        //新增分段
        addText(index) {
            let obj = {
                title: '',
                tag: '',
                text1: [
                    {
                        title: '',
                        description: ''
                    }
                ]
            };
            this.briefing.content[index].text.push(obj);
        },
        //新增内容
        addContent() {
            let obj = {
                title: '',
                explain: '',
                text: [
                    {
                        title: '',
                        tag: '',
                        text1: [{ title: '', description: '' }]
                    }
                ]
            };
            this.briefing.content.push(obj);
        },
        //在线预览
        onlinePreview() { },
        //生成简报
        generateBriefing() {
            let data = JSON.parse(JSON.stringify(this.briefing));
            data.content.forEach(item => {
                item.text.forEach((res, i) => {
                    res.title = this.returnChinese(i) + '、' + res.title;
                });
            });
            exportWord(
                "static/word/generateBriefing.docx",
                data,
                data.title,
                1,
                this.userInfo.account
            ).catch(err => {
                this.$message.error(err);
            });
            this.reload();
        },
        handleClose(done) {
            done();
        },
        //查询每个收藏夹下内容
        queryCollectionFolderNews(id) {
            get('api/rest/3z/resource/queryCollection?folderId=' + id).then(res => {
                this.collectionFolderNews = res;
            }).catch((err) => {
                this.$message.warning(err.msg);
            });
        },
        search() {
            this.queryCollectionFolderNews(this.value);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        addBriefing() {
            if (this.multipleSelection.length > 0) {
                this.briefing.content[this.selectIndex].text[this.selectIndex1].text1 = this.briefing.content[this.selectIndex].text[this.selectIndex1].text1.concat(this.multipleSelection);
                this.drawer = false;
            }
        },
        //删除段落
        removeText(item, index, index1, index2) {
            if (this.briefing.content[index].text[index1].text1.length > 1) {
                this.briefing.content[index].text[index1].text1.splice(index2, 1);
            } else {
                this.$message.warning('最后一个段落不能删除！');
            }

        },
        //增加段落
        addCondition(index, index1) {
            let obj = {
                title: '',
                description: ''
            }
            this.briefing.content[index].text[index1].text1.push(obj);
        },



    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { username: "" };
            }
        }
    },
    activated() {
        get('api/rest/3z/resource/queryCollectionFolder?collector=' + this.userInfo.account).then(res => {
            this.collectionFolder = res;
            res.length > 0 && (this.value = res[0].id);
            res.length > 0 && this.queryCollectionFolderNews(res[0].id);
        }).catch((err) => {
            this.$message.warning(err.msg);
        });
    }
}
</script>

<style lang="scss">
.generateBriefing {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    overflow-y: auto;

    &::-webkit-scrollbar {
        display: none;
    }

    .generateBriefing-title {
        width: 100%;
        height: 50px;
        margin-top: 20px;
        text-align: center;

        .el-input {
            width: 20%;

            input {
                height: 30px;
                color: white !important;
                background: none !important;
                border: 1px solid #3a5f94c9 !important;

                &::-webkit-input-placeholder {
                    text-align: center;
                }
            }
        }
    }

    .generateBriefing-condition {
        width: 100%;
        height: 50px;
        border-bottom: 2px solid #3a5f94c9;

        .condition-mechanism {
            width: 200px;
            height: 100%;
            float: left;

            .el-input {
                width: 100%;

                input {
                    height: 30px;
                    color: white !important;
                    background: none !important;
                    border: 1px solid #3a5f94c9 !important;
                }
            }
        }

        .condition-date {
            width: 200px;
            height: 100%;
            float: right;

            .el-input {
                width: 100%;

                input {
                    height: 30px;
                    color: white !important;
                    background: none !important;
                    border: 1px solid #3a5f94c9 !important;
                }

                .el-input__icon {
                    line-height: 30px;
                }
            }
        }
    }

    .generateBriefing-content {
        width: 100%;
        margin-top: 30px;
        border-bottom: 2px solid #3a5f94c9;

        &::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        min-height: 350px;

        .contentList-title {
            width: 100%;
            height: 50px;
            margin-top: 10px;
            text-align: center;

            .el-input {
                width: 20%;

                input {
                    height: 30px;
                    color: white !important;
                    background: none !important;
                    border: 1px solid #3a5f94c9 !important;

                    &::-webkit-input-placeholder {
                        text-align: center;
                    }
                }
            }
        }

        .contentList-explain {
            width: 100%;
            height: 50px;
            margin-top: 10px;
            text-align: center;

            .el-textarea {
                width: 100%;

                textarea {
                    height: 60px;
                    color: white !important;
                    background: none !important;
                    border: 1px solid #3a5f94c9 !important;
                }
            }
        }

        .contentList-text {
            width: 100%;
            float: left;
            margin-top: 30px;

            .text-title {
                width: 100%;
                height: 40px;
                margin-top: 10px;

                .el-input {
                    width: 20%;

                    input {
                        height: 30px;
                        color: white !important;
                        background: none !important;
                        border: 1px solid #3a5f94c9 !important;
                    }
                }
            }

            .text-condition {
                width: 100%;
                height: 40px;
                margin-top: 10px;

                .el-input {
                    width: 20%;
                    float: left;

                    input {
                        height: 30px;
                        color: white !important;
                        background: none !important;
                        border: 1px solid #3a5f94c9 !important;
                    }
                }

                .button-condition {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 13px;
                    border-radius: 5px;
                    float: left;
                    margin-left: 10px;
                    text-align: center;
                    cursor: pointer;
                    border: 1px solid #3a5f94c9 !important;
                }

                .button-addCondition {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 13px;
                    border-radius: 5px;
                    float: left;
                    margin-left: 10px;
                    text-align: center;
                    cursor: pointer;
                    border: 1px solid #3a5f94c9 !important;
                }
            }

            .text-text {
                width: 100%;
                min-height: 80px;
                float: left;
                margin-top: 10px;
                padding: 10px;
                border: 1px solid #3a5f94c9;
                box-sizing: border-box;
                overflow-y: auto;

                .text-area {
                    width: 100%;
                    float: left;
                    margin-top: 10px;

                    .left-text {
                        width: calc(100% - 80px);
                        float: left;

                        .el-input {
                            width: 20%;
                            float: left;

                            input {
                                height: 30px;
                                color: white !important;
                                background: none !important;
                                border: 1px solid #3a5f94c9 !important;
                            }
                        }

                        .area-txt {
                            width: calc(100% - 80px);
                            float: left;
                            margin-top: 10px;

                            .el-textarea__inner {
                                color: white !important;
                                background: none !important;
                                border: 1px solid #3a5f94c9 !important;
                            }
                        }
                    }

                    .right-text {
                        width: 80px;
                        float: left;

                        .el-icon-delete {
                            float: left;
                            margin-top: 25px;
                            margin-left: 17px;
                            cursor: pointer;

                            &:hover {
                                color: red;
                            }
                        }
                    }
                }
            }
        }

        &>.button-condition {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            border-radius: 5px;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            text-align: center;
            cursor: pointer;
            border: 1px solid #3a5f94c9 !important;
        }
    }

    .generateBriefing-new {
        width: 100%;
        height: 50px;
        margin-top: 30px;

        .button-condition {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            border-radius: 5px;
            float: left;
            margin-left: 10px;
            text-align: center;
            cursor: pointer;
            border: 1px solid #3a5f94c9 !important;
        }
    }

    .generateBriefing-form {
        width: 100%;
        margin-top: 20px;

        .el-form {
            .el-form-item__label {
                line-height: 30px;
                color: white;
            }

            .el-form-item__content {
                .el-input {
                    width: 20%;

                    input {
                        height: 30px;
                        color: white !important;
                        background: none !important;
                        border: 1px solid #3a5f94c9 !important;
                    }
                }
            }
        }
    }

    .generateBriefing-button {
        width: 100%;
        height: 50px;
        margin-top: 20px;
        text-align: center;

        .button-condition {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            border-radius: 5px;
            float: left;
            margin-left: 10px;
            text-align: center;
            cursor: pointer;
            border: 1px solid #3a5f94c9 !important;

            &:first-child {
                margin-left: calc(50% - 35px);
            }
        }
    }
}

.el-drawer {
    width: 40% !important;
    color: white;
    background-color: #00132c;

    .el-drawer__header {
        padding-bottom: 5px;
        color: white;
        text-align: center;
        border-bottom: none;
    }

    .el-drawer__body {
        width: 100%;
        height: calc(100% - 50px);
        text-align: right;

        .search {
            width: 100%;
            height: 50px;
            text-align: left;

            .el-select {
                float: left;
            }

            .el-input {
                width: 200px;
                float: left;
                margin-left: 15px;

                input {
                    height: 30px;
                    color: white;
                    background: none !important;
                    border: 1px solid #3a5f94c9 !important;
                }

                .el-input__icon {
                    line-height: 30px;
                }
            }

            .button-search,
            .button-import {
                width: 100px;
                height: 30px;
                line-height: 30px;
                font-size: 13px;
                border-radius: 5px;
                float: left;
                margin-left: 10px;
                text-align: center;
                cursor: pointer;
                border: 1px solid #3a5f94c9 !important;
            }
        }

        .searchResult {
            width: 100%;
            height: calc(100% - 50px);
            overflow-y: auto;

            .resultList {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 10px;
                box-sizing: border-box;

                .myTable {
                    background-color: transparent !important;



                    .el-table__body tr:hover>td {
                        background-color: #18213a !important;
                    }

                    &::before {
                        display: none !important;
                    }

                    thead {
                        color: white;
                        background: url(@/assets/img/setting/tr1.png) no-repeat;
                    }

                    th {
                        background-color: transparent !important;
                    }

                    th.is-leaf {
                        border-bottom: none !important;
                    }

                    tr {
                        background-color: transparent !important;
                    }

                    td {
                        color: white;
                        border-bottom: none !important;

                        .el-switch__label {
                            color: white;
                        }

                        .el-switch__label.is-active {
                            color: #409EFF;
                        }

                        .el-icon-edit {
                            font-size: 20px;
                            color: #409eff;
                            cursor: pointer;
                        }

                        .el-icon-delete-solid {
                            font-size: 20px;
                            color: red;
                            cursor: pointer;
                        }

                        .el-icon-refresh-left {
                            font-size: 20px;
                            color: #12dc12;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
</style>