<template>
    <div style="height: 98%">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-document-copy"></i> Generate Charts </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div
            class="container"
            style="height: 97%; min-width: calc(1000px - 300px); width: calc(100% - 300px); background-color: #fafafa; padding: 10px 0 0 0"
        >
            <h3 class="man_Title">
                {{ detailTitle }}
            </h3>
            <div class="type_MTxt" style="box-sizing: border-box">
                <div
                    v-for="(item, index) in Main_List"
                    @dragover.prevent
                    :class="item.p_main_img_id ? 'imgBox' : ''"
                    @drop="onDrop($event, index)"
                >
                    <p v-html="item.text" v-if="!item.p_main_img_id"></p>
                    <p v-if="item.p_main_img_id" class="MaxPicture">
                        <img :src="baseUrl + 'public/mainimg/' + item.content" :style="'width:' + item.width + 'px'" />
                        <font :style="'width:' + item.width + 'px'">{{ item.note }} </font>
                    </p>
                    <font v-if="item.getnum != 0" class="chNumer">{{ item.getnum }}</font>
                    <b
                        class="MaxBtn"
                        @click="MTxtEdit(item, index)"
                        style="background-color: #006699; right: 40px"
                        v-if="item.p_main_img_id"
                    >
                        <i class="el-icon-edit"></i>
                    </b>
                    <!-- <b class="MaxBtn" @click="MTxtPic(item, index)" style="background-color: #13bc20; right: 40px">
                        <svg
                            t="1684978324047"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="1967"
                            width="15"
                            height="15"
                        >
                            <path
                                d="M512 46.208a42.666667 42.666667 0 0 1 4.992 85.077333L512 131.541333H174.208a42.666667 42.666667 0 0 0-42.368 37.717334l-0.298667 4.949333v487.850667L307.2 501.12a88.874667 88.874667 0 0 1 112.042667-6.570667l5.845333 4.608 150.442667 128.896 101.973333-101.888a88.874667 88.874667 0 0 1 110.122667-12.373333l6.058666 4.138667 104.832 78.592V512a42.666667 42.666667 0 0 1 85.077334-4.992l0.298666 4.992v342.698667a128 128 0 0 1-120.490666 127.786666l-7.509334 0.213334H174.208a128 128 0 0 1-127.786667-120.490667l-0.213333-7.509333V174.208a128 128 0 0 1 120.490667-127.786667l7.509333-0.213333H512zM366.378667 563.2l-1.536 0.853333-233.301334 213.76v76.885334a42.666667 42.666667 0 0 0 37.717334 42.368l4.949333 0.298666H855.893333a42.666667 42.666667 0 0 0 42.368-37.717333l0.298667-4.949333v-151.808l-3.285333-2.090667-152.789334-114.602667a3.541333 3.541333 0 0 0-3.2-0.554666l-1.450666 0.853333-97.28 97.28 76.970666 66.048a42.666667 42.666667 0 0 1-51.2 68.010667l-4.309333-3.2-292.437333-250.666667a3.541333 3.541333 0 0 0-3.2-0.768z m415.829333-516.992a42.666667 42.666667 0 0 1 42.410667 37.717333l0.256 4.949334v96h96a42.666667 42.666667 0 0 1 4.992 85.077333l-4.992 0.256h-96v96a42.666667 42.666667 0 0 1-85.034667 4.992l-0.298667-4.992v-96h-96a42.666667 42.666667 0 0 1-4.949333-85.034667l4.949333-0.298666h96v-96a42.666667 42.666667 0 0 1 42.666667-42.666667z"
                                fill="#ffffff"
                                p-id="1968"
                            ></path>
                        </svg>
                    </b> -->
                    <!-- <b class="MaxBtn" @click="MTxtTable(item, index)" style="background-color: #e07404; right: 0px">
                        <i class="el-icon-document-add"></i>
                    </b> -->
                    <b
                        class="MaxBtn"
                        @click="MTxtDelet(item, index)"
                        style="background-color: #bc1a13; right: 0px"
                        v-if="item.p_main_img_id"
                    >
                        <i class="el-icon-delete"></i>
                    </b>
                </div>
            </div>

            <div style="height: 20px" v-if="Art_Doi == undefined"></div>
            <div style="margin: 20px 0 0 0; text-align: center; padding-bottom: 30px" v-if="Art_Doi != undefined">
                <el-button icon="el-icon-finished" type="primary" style="width: 350px" @click="pushOnline()"> Push Online </el-button>
            </div>
        </div>
        
        <div
            class="right-side"
            style="
                width: 300px;
                position: fixed;
                right: 20px;
                top: 17vh;
                bottom: 10px;
                background-color: #fff;
                box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
                border-radius: 4px;
            "
        >
            <p style="padding: 10px 10px; box-sizing: border-box; font-weight: bold">
                Unfettered area
                <b class="MaxBtn" @click="MTxtPic()" style="background-color: #13bc20; right: 40px; top: 5px">
                    <svg
                        t="1684978324047"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1967"
                        width="15"
                        height="15"
                    >
                        <path
                            d="M512 46.208a42.666667 42.666667 0 0 1 4.992 85.077333L512 131.541333H174.208a42.666667 42.666667 0 0 0-42.368 37.717334l-0.298667 4.949333v487.850667L307.2 501.12a88.874667 88.874667 0 0 1 112.042667-6.570667l5.845333 4.608 150.442667 128.896 101.973333-101.888a88.874667 88.874667 0 0 1 110.122667-12.373333l6.058666 4.138667 104.832 78.592V512a42.666667 42.666667 0 0 1 85.077334-4.992l0.298666 4.992v342.698667a128 128 0 0 1-120.490666 127.786666l-7.509334 0.213334H174.208a128 128 0 0 1-127.786667-120.490667l-0.213333-7.509333V174.208a128 128 0 0 1 120.490667-127.786667l7.509333-0.213333H512zM366.378667 563.2l-1.536 0.853333-233.301334 213.76v76.885334a42.666667 42.666667 0 0 0 37.717334 42.368l4.949333 0.298666H855.893333a42.666667 42.666667 0 0 0 42.368-37.717333l0.298667-4.949333v-151.808l-3.285333-2.090667-152.789334-114.602667a3.541333 3.541333 0 0 0-3.2-0.554666l-1.450666 0.853333-97.28 97.28 76.970666 66.048a42.666667 42.666667 0 0 1-51.2 68.010667l-4.309333-3.2-292.437333-250.666667a3.541333 3.541333 0 0 0-3.2-0.768z m415.829333-516.992a42.666667 42.666667 0 0 1 42.410667 37.717333l0.256 4.949334v96h96a42.666667 42.666667 0 0 1 4.992 85.077333l-4.992 0.256h-96v96a42.666667 42.666667 0 0 1-85.034667 4.992l-0.298667-4.992v-96h-96a42.666667 42.666667 0 0 1-4.949333-85.034667l4.949333-0.298666h96v-96a42.666667 42.666667 0 0 1 42.666667-42.666667z"
                            fill="#ffffff"
                            p-id="1968"
                        ></path>
                    </svg> </b
                ><b class="MaxBtn" @click="MTxtTable()" style="background-color: #e07404; right: 0px; top: 5px">
                    <i class="el-icon-document-add"></i>
                </b>
            </p>
            <div class="unfetteredBox">
                <div
                    :style="item.isHidden ? 'opacity:0.2' : 'opacity:1'"
                    v-for="(item, index) in images"
                    :key="index"
                    class="image"
                    draggable="true"
                    @dragstart="onDragStart($event, item, index)"
                >
                    <img :src="baseUrl + 'public/mainimg/' + item.content" style="width: 100%; height: 100%; object-fit: cover" />
                </div>
            </div>
        </div>
        <!--修改文本 -->
        <el-dialog title="Edit Text" :visible.sync="txtVisible" width="800px" :close-on-click-modal="false">
            <el-form ref="editMes" :model="txtStyle" label-width="1px">
                <p style="margin: 0 5px 15px 5px; line-height: 18px; font-size: 13px; color: #aaa">{{ exegesis }}</p>
                <el-form-item label="">
                    <el-input type="textarea" placeholder="Please enter the table content..." v-model="txtStyle.text" autosize> </el-input>
                </el-form-item>
            </el-form>
            <p class="type_Gbtn" @click="trsanGtp">
                <i class="el-icon-document-copy" style="margin-right: 5px" v-if="btnDisble"></i>
                <i class="el-icon-loading" style="margin-right: 5px" v-if="!btnDisble"></i>
                TMRGTP Proofreading
            </p>
            <div class="type_CHar" v-if="txtStyle.ChGtpTxt != ''">
                <p v-html="txtStyle.ChGtpTxt"></p>
                <font class="chReple" @click="replceChGpr(item)">Replace</font>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="txtVisible = false"> Cancel </el-button>
                <el-button type="primary" @click="saveTxt">
                    <i class="el-icon-finished" style="margin-right: 5px"></i>
                    Save
                </el-button>
            </span>
        </el-dialog>

        <!--添加/修改图片 -->
        <el-dialog :title="picStyle.visiTitle" :visible.sync="pictVisible" width="800px" :close-on-click-modal="false">
            <el-form ref="editMes" :model="picStyle" label-width="150px">
                <el-form-item>
                    <span slot="label">
                        <font style="color: #f56c6c; margin-right: 5px">*</font>
                        Picture :
                    </span>
                    <el-upload
                        class="avatar-uploader"
                        :action="'/api/api/Production/up_mainimg_file'"
                        :show-file-list="false"
                        name="mainimg"
                        :on-success="handleAvatarSuccess"
                        :on-error="handleAvatarError"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="picStyle.imageUrl" :src="picStyle.imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <!-- <el-form-item label="Bottom Title :">
					<el-input placeholder="Please enter the table title..." v-model="picStyle.titleBot">
					</el-input>
				</el-form-item> -->
                <el-form-item label="Picture Describe :">
                    <el-input placeholder="Please enter the table describe..." v-model="picStyle.note" type="textarea" :rows="3">
                    </el-input>
                </el-form-item>
            </el-form>
            <p style="margin: 20px 0; text-align: right">
                <el-button
                    type="warning"
                    plain
                    @click="
                        picStyle.picUrl = '';
                        picStyle.titleBot = '';
                        picStyle.note = '';
                        picStyle.imageUrl = '';
                    "
                >
                    <i class="el-icon-refresh" style="margin-right: 5px"></i>Empty
                </el-button>
            </p>
            <div class="lineStyle" v-if="picStyle.picUrl != ''">
                <div>
                    <span class="title" style="margin-left: 25px">Picture Width :</span>
                    <el-input v-model="picStyle.width" style="width: 120px">
                        <template slot="append">px</template>
                    </el-input>
                </div>
            </div>
            <div style="padding: 0 20px" v-if="picStyle.picUrl != ''">
                <div style="text-align: center">
                    <img :src="baseUrl + 'public/mainimg/' + picStyle.picUrl" :style="'width:' + picStyle.width + 'px'" />
                </div>
                <p style="text-align: center; margin: 10px 0 15px 0; font-size: 12px; color: #006699">
                    <b>{{ picStyle.titleBot }}</b>
                </p>
                <p
                    style="text-align: center; margin: 10px auto 0; font-size: 12px; line-height: 22px"
                    :style="'width:' + picStyle.width + 'px'"
                    v-html="picStyle.note"
                ></p>
            </div>
            <span slot="footer" class="dialog-footer" v-if="picStyle.picUrl != ''">
                <el-button @click="pictVisible = false"> Cancel </el-button>
                <el-button type="primary" @click="savePic">
                    <i class="el-icon-finished" style="margin-right: 5px"></i>
                    Save Picture
                </el-button>
            </span>
        </el-dialog>

        <!-- 添加表格 -->
        <el-dialog title="Insert Table" :visible.sync="threeVisible" width="1200px" :close-on-click-modal="false" >
            <el-form ref="editMes" :model="lineStyle" label-width="115px">
                <el-form-item label="Top Title :">
                    <el-input placeholder="Please enter the table title..." v-model="lineStyle.titleTop"> </el-input>
                </el-form-item>
                <el-form-item label="Word">
                    <span slot="label">
                        <font style="color: #f56c6c; margin-right: 5px">*</font>
                        Content :
                    </span>
                   
                    

                    <common-table ref="commonTable" style="margin-left: -115px;" :lineStyle="lineStyle"></common-table>
                </el-form-item>
                <el-form-item label="Bottom Title :">
                    <el-input placeholder="Please enter the table title..." v-model="lineStyle.titleBot"> </el-input>
                </el-form-item>
            </el-form>
            <p style="margin: 20px 0; text-align: right">
                <el-button
                    type="warning"
                    plain
                    @click="
                        lineStyle.textarea = '';
                        lineStyle.titleTop = '';
                        lineStyle.titleBot = '';
                        lineTable = [];
                    "
                >
                    <i class="el-icon-refresh" style="margin-right: 5px"></i>Empty
                </el-button>
                <el-button type="primary" plain @click="CopyExcelToTable">
                    <i class="el-icon-sort" style="margin-right: 5px"></i>Generate Table
                </el-button>
            </p>
            <div class="lineStyle" v-if="lineTable.length != 0">
                <div>
                    <span class="title">Table All Width :</span>
                    <el-input v-model="lineStyle.tabwith" style="width: 120px">
                        <template slot="append">%</template>
                    </el-input>
                </div>
                <div>
                    <div v-for="(item, index) in lineStyle.arrwith" class="styArry">
                        <span class="title"
                            >Column <b style="color: #006699">{{ index + 1 }}</b> :</span
                        >
                        <el-input v-model="lineStyle.arrwith[index]" style="width: 100px">
                            <template slot="append">%</template>
                        </el-input>
                    </div>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveLine" v-if="lineTable.length != 0">
                    <i class="el-icon-finished" style="margin-right: 5px"></i>
                    Save Table
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { del } from 'vue';

export default {
    data() {
        return {
            images: [
                {
                    p_main_img_id: 157,
                    p_article_id: 2141,
                    p_main_id: 101853,
                    pre_id: 0,
                    width: 500,
                    content: '20240906/7c4cfd8f431cddf05f33634d4ee2cdca.jpg',
                    note: 'Figure 1 Oracle bone inscriptions of YANG',
                    ctime: 0,
                    state: 0
                }
            ],
            baseUrl: this.Common.baseUrl,
            baseUrl: 'https://submission.tmrjournals.com/',
            mediaUrl: this.Common.mediaUrl,
            Art_Id: this.$route.query.id,
            Art_Doi: this.$route.query.doi,
            Art_web_Id: this.$route.query.artID,
            Art_P_Id: '',
            btnDisble: true,
            detailTitle: '',
            Main_List: [],
            txtStyle: {
                text: '',
                ChGtpTxt: ''
            },
            txtVisible: false,
            lineStyle: {
                titleTop: '',
                titleBot: '',
                textarea: '',
                tableData: [],
                tabwith: '100',
                arrwith: []
            },
            lineTable: [],
            threeVisible: false,
            picStyle: {
                titleBot: '',
                note: '',
                // picUrl: 'https://www.tmrjournals.cn/public/articleHTML/TMR/TMR20230213002/images/alternativeImage/TMR20230213002-F004.jpg',
                picUrl: '',
                imageUrl: '',
                width: '500'
            },
            pictVisible: false,
            typesettingType: 1,
            exegesis: "The following contents'<b></b>,<i></i>'are necessary for the generation phase, please do not delete them!!!"
        };
    },

    created() {
        this.getDate();
    },

    methods: {
        onDragStart(event, image, index) {
            event.dataTransfer.setData('image', JSON.stringify({ ...image, isNewReformat: true }));
            event.dataTransfer.setData('imageIndex', index);
        },
        onDrop(event, index) {
            console.log('index at line 297:', index);
            const draggedImage = JSON.parse(event.dataTransfer.getData('image'));
            const draggedImageIndex = JSON.parse(event.dataTransfer.getData('imageIndex'));
            console.log('draggedImage at line 298:', draggedImage);
            this.Main_List.splice(index, 0, draggedImage);
            this.images[draggedImageIndex].isHidden = true;
        },
        // 获取数据
        getDate() {
            let urlLInk = '';
            let urlTask = {};
            if (this.Art_Id != undefined) {
                urlLInk = 'api/Production/getProductionMains';
                urlTask.p_article_id = this.Art_Id;
            }
            // if (this.Art_Doi != undefined) {
            //     urlLInk = 'api/Production/getProductionMainsByDoi';
            //     urlTask.doi = this.Art_Doi;
            // }
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            // 获取文章信息
            this.$api
                .post(urlLInk, urlTask)
                .then((res) => {
                    if (res.code == 0) {
                        this.detailTitle = res.data.production.title;
                        this.Art_P_Id = res.data.production.p_article_id;
                        this.Main_List = res.data.mains;
                        for (let i = 0; i < this.Main_List.length; i++) {
                            this.Main_List[i].text = this.Main_List[i].content;
                            this.Main_List[i].getnum = 0;
                        }
                        loading.close();
                    } else {
                        this.$message.error(res.msg);
                        loading.close();
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                    loading.close();
                });
        },

        // 修改段落/图片
        MTxtEdit(val, num) {
            this.picStyle = JSON.parse(JSON.stringify(val));
            this.picStyle.picUrl = this.picStyle.content;
            this.picStyle.imageUrl = this.baseUrl + 'public/mainimg/' + this.picStyle.content;
            this.picStyle.visiTitle = 'Edit Picture';
            this.pictVisible = true;
        },

        // 转化为gpt标准格式
        trsanGtp() {
            if (this.btnDisble) {
                this.btnDisble = false;
                this.$api
                    .post('api/Production/mainGptcheck', {
                        p_main_id: this.txtStyle.p_main_id
                    })
                    .then((res) => {
                        if (res.code == 0) {
                            this.txtStyle.ChGtpTxt = res.data.content;
                            this.btnDisble = true;
                            // this.$forceUpdate()
                            this.$message.success('Converting success!');
                        } else {
                            this.btnDisble = true;
                            this.$message.error('Converting fail!');
                        }
                    })
                    .catch((err) => {
                        this.btnDisble = true;
                        this.$message.error('Converting fail!');
                    });
            } else {
                this.$message.warning('Converting, please wait!');
            }
        },

        // 替换Gtp生成的内容
        replceChGpr(val) {
            this.txtStyle.text = JSON.parse(JSON.stringify(this.txtStyle.ChGtpTxt));
        },

        // 确定保存段落修改
        saveTxt() {
            this.$api
                .post('api/Production/editProductionMain', {
                    p_main_id: this.txtStyle.p_main_id,
                    content: this.txtStyle.text
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.$message.success('Successfully edit text!');
                        this.txtVisible = false;
                        this.getDate();
                        // this.Main_List[this.txtStyle.index].text = JSON.parse(JSON.stringify(this.txtStyle.text))
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },

        // 图片段落
        MTxtPic(val, num) {
            this.picStyle.pre_type = 'img';
            // this.picStyle.body = val.p_main_img_id;

            this.picStyle.p_article_id = this.Art_P_Id;
            this.picStyle.titleBot = '';
            this.picStyle.note = '';
            this.picStyle.width = '500';
            this.picStyle.picUrl = '';
            this.picStyle.imageUrl = '';
            this.picStyle.visiTitle = 'Insert Picture Backward';
            this.pictVisible = true;
        },

        // 确定保存图片
        savePic() {
            this.picStyle.content = this.picStyle.picUrl;
            this.images.push(this.picStyle);
            this.pictVisible = false;
            return false;

            //要走接口
            if (this.picStyle.note == '') {
                this.$message.error('Please fill in the picture describe!');
                return;
            }

            this.picStyle.content = this.picStyle.picUrl;

            if (this.picStyle.visiTitle == 'Edit Picture') {
                this.$api
                    .post('api/Production/editProductionMainImg', this.picStyle)
                    .then((res) => {
                        if (res.code == 0) {
                            this.$message.success('Successfully edit image!');
                            this.pictVisible = false;
                            this.getDate();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err);
                    });
            } else {
                this.$api
                    .post('api/Production/addProductionMainImg', this.picStyle)
                    .then((res) => {
                        if (res.code == 0) {
                            this.$message.success('Successfully added image!');
                            this.pictVisible = false;
                            this.getDate();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err);
                    });
            }
        },
        async removeEvent(row) {
            //   const type = await VXETable.modal.confirm('您确定要删除该数据?')
            const $table = this.$refs.xTable;
            //   if (type === 'confirm') {
            $table.remove(row);
            //   }
        },
        async insertEvent(row) {
            const $table = this.$refs.xTable;
            const record = {};
            const { row: newRow } = await $table.insertAt(record, row);
            await $table.setEditCell(newRow, 'name');
        },
        // 表格段落
        MTxtTable(val, num) {
            // this.lineStyle.p_main_id = val.p_main_id;
            this.lineStyle.textarea = '';
            this.lineStyle.titleCon = '';
            this.lineTable = [];

            this.threeVisible = true;
            this.typesettingType = '1';
            this.$forceUpdate();
        },

        // 表格转化
        CopyExcelToTable() {
            if (this.lineStyle.textarea == '') {
                this.$message.error('Please fill in the table content!');
                return;
            }
            console.log(this.lineStyle.textarea);
            let txtRows = this.lineStyle.textarea.split('\n');
            let txtColum = [];
            for (let i = 0; i < txtRows.length; i++) {
                if (txtRows[i] != '') {
                    let columns = txtRows[i].split('\t');
                    let dataone = [];
                    for (let j = 0; j < columns.length; j++) {
                        dataone.push(columns[j]);
                    }
                    txtColum.push(dataone);
                }
            }
            let arrwithNumer = Math.floor(100 / txtColum[0].length) - 2;
            this.lineStyle.arrwith = [];
            for (let i = 0; i < txtColum[0].length; i++) {
                this.lineStyle.arrwith.push(arrwithNumer);
            }
            this.lineTable = txtColum;
        },

        // 确定保存表格
        saveLine() {
            let dataTable = '';
            for (let i = 0; i < this.lineTable.length; i++) {
                let ArryDr = '';
                let listHNem = '';
                for (let j = 0; j < this.lineTable[i].length; j++) {
                    let ArrHtml =
                        '<div style="width:' +
                        this.lineStyle.arrwith[j] +
                        '%;line-height: 22px;vertical-align: middle;display: inline-block;padding: 0 1%;font-size: 14px;color: #606266;word-wrap: break-word;word-break: normal;">' +
                        this.lineTable[i][j] +
                        '</div>';
                    ArryDr = ArryDr + ArrHtml;
                }
                if (i == 0) {
                    listHNem =
                        '<div style="display: flex;border-top: 2px solid #333333;border-bottom: 1px solid #333333;padding: 10px 0;font-weight: bold;margin-bottom: 20px;">' +
                        ArryDr +
                        '</div>';
                } else if (i == this.lineTable.length - 1) {
                    listHNem = '<div style="display: flex;border-bottom: 2px solid #333333;padding:0 0 20px 0;">' + ArryDr + '</div>';
                    ArryDr = ArryDr + listHNem;
                } else {
                    listHNem = '<div style="display: flex;padding:20px 0;">' + ArryDr + '</div>';
                }
                dataTable = dataTable + listHNem;
            }
            dataTable = '<div style="width:' + this.lineStyle.tabwith + '%">' + dataTable + '</div>';
            if (this.lineStyle.titleTop != '') {
                dataTable =
                    '<p style="text-align: center;margin: 0 0 10px 0;font-size: 12px;color: #006699;"><b>' +
                    this.lineStyle.titleTop +
                    '</b></p>' +
                    dataTable;
            }
            if (this.lineStyle.titleBot != '') {
                dataTable =
                    dataTable + '<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">' + this.lineStyle.titleBot + '</p>';
            }
            console.log(dataTable);
        },

        // 删除段落/图片
        MTxtDelet(val, index) {
            var imageIndex = this.images.findIndex((e) => e.p_main_img_id == val.p_main_img_id);
            if (imageIndex > -1) {
                delete this.images[imageIndex].isHidden;
            } else {
                this.images.push(val);
            }
            this.$forceUpdate();
            this.Main_List.splice(index, 1);
            console.log('this.images.push at line 654:', this.images);
            // this.$api
            //     .post('api/Production/delProductionMainImg', {
            //         p_main_img_id: val.p_main_img_id
            //     })
            //     .then((res) => {
            //         if (res.code == 0) {
            //             this.$message.success('Successfully deleted!');
            //             this.getDate();
            //             // this.Main_List.splice(num, 1);
            //         } else {
            //             this.$message.error(res.msg);
            //         }
            //     })
            //     .catch((err) => {
            //         this.$message.error(err);
            //     });
        },

        // 推送
        pushOnline() {
            // 二次确认
            this.$confirm('Are you sure you want to push it to the official website?', 'Tips', {
                type: 'warning'
            })
                .then(() => {
                    this.$api
                        .post('api/Production/pushMainToWeb', {
                            article_id: this.Art_web_Id,
                            p_article_id: this.Art_P_Id
                        })
                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success('Successfully push!');
                                this.getDate();
                                if (this.Art_Doi != undefined) {
                                    this.$router.push({
                                        path: 'comArtHtmlEdit',
                                        query: {
                                            artID: this.Art_web_Id
                                        }
                                    });
                                }
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {});
        },

        // 上传图片
        handleAvatarSuccess(res, file) {
            if (res.code == 0) {
                this.picStyle.picUrl = res.upurl;
                this.$forceUpdate();
            } else {
                this.$message.error(res.msg);
            }
            this.picStyle.imageUrl = URL.createObjectURL(file.raw);
        },
        handleAvatarError(res, file) {},
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 1;
            if (!isLt2M) {
                this.$message.error('Picture size cannot exceed 1M!');
            }
            return isLt2M;
        }
    }
};
</script>

<style scoped>
.lineStyle {
    border-top: 1px solid #0066994d;
    padding: 20px 20px 40px 20px;
}

.lineStyle > div {
}

.lineStyle > div span.title {
    font-size: 14px;
    color: #606266;
    margin: 0px 10px 0px 0px;
}

.lineStyle > div font.mark {
    font-size: 14px;
    color: #606266;
    margin: 0px 0px 0px 10px;
}

.lineStyle .styArry {
    display: inline-block;
    margin: 15px 40px 0 0;
}

.lineStyle .styArry:nth-last-child(1) {
    margin-right: 0;
}

.lineAll {
    margin: 0 auto;
}

.lineAll .lineTit {
    padding: 0 0 20px 0;
    font-size: 14px;
}

.lineAll .lineTit:nth-child(1) {
    border-top: 2px solid #333333;
    border-bottom: 1px solid #333333;
    padding: 10px 0;
    font-weight: bold;
}

.lineAll .lineTit:nth-child(2) {
    padding-top: 20px;
}

.lineAll .lineTit:nth-last-child(1) {
    border-bottom: 2px solid #333333;
}

.lineAll .lineTit > div {
    line-height: 22px;
    vertical-align: middle;
    display: inline-block;
    padding: 0 1%;
}

.man_Title {
    background-color: #fff;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #dde1eb;
    box-shadow: 0 5px 5px -2px rgb(134 134 134);
    padding: 12px 25px 8px 25px;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    position: relative;
}

.man_Title button {
    position: absolute;
    top: 10px;
    right: 10px;
}

.type_MTxt {
    background-color: #fff;
    padding: 0 10px 10px 10px;
    box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
    position: relative;
}

.type_MTxt > div {
    position: relative;
    padding: 8px 15px;
    min-height: 22px;
    border: 2px dashed #fff;
    border-radius: 5px;
    color: #606266;
}

.type_MTxt > .imgBox:hover {
    background-color: rgb(0 102 153 / 10%);
    border: 2px dashed rgb(0 102 153 / 50%);
}

.type_MTxt > div > p {
    font-size: 14px;
    line-height: 22px;
}

.type_MTxt > .imgBox .chNumer {
    position: absolute;
    top: -2px;
    right: -1px;
    border-radius: 3px;
    font-size: 10px;
    background-color: rgb(0 102 153 / 85%);
    color: #fff;
    padding: 0 6px;
}

.type_MTxt > div .MaxPicture {
    text-align: center;
}

.type_MTxt > div .MaxPicture > img {
    margin-bottom: 10px;
}

.type_MTxt > div .MaxPicture > font {
    display: block;
    margin: 0 auto;
    font-size: 13px;
}

.MaxBtn {
    position: absolute;
    right: 0;
    top: -1px;
    color: #fff;
    border-radius: 50px;
    font-size: 15.5px;
    padding: 6px 7px;
    display: none;
    opacity: 0.75;
}

.MaxBtn {
    display: block;
}

.MaxBtn:hover {
    opacity: 1;
    cursor: pointer;
}

.type_Gbtn {
    color: #fff;
    border-color: #006699;
    background: #006699;
    width: 30%;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    border-radius: 8px;
    font-weight: 500;
    margin: 0 auto;
}

.type_Gbtn:hover {
    box-shadow: 0 4px 14px rgb(0 102 153 / 30%);
    cursor: pointer;
}

.type_CHar {
    position: relative;
    border-left: 4px solid rgba(0 102 153 / 20%);
    border-radius: 5px;
    padding: 20px 25px 15px 20px;
    background-color: #fff;
    margin: 20px 0 0 0;
    font-size: 14px;
    line-height: 22px;
    box-shadow: 0 1px 10px rgb(0 102 153 / 20%);
}

.type_CHar .chReple {
    position: absolute;
    top: -1px;
    right: 1px;
    border-radius: 3px;
    font-size: 10px;
    background-color: rgb(223 109 11);
    opacity: 0.85;
    color: #fff;
    padding: 1px 10px;
}

.type_CHar .chReple:hover {
    opacity: 1;
    cursor: pointer;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
}

.avatar-uploader_small {
    height: 100px;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar-uploader_small .el-upload {
    width: 80px;
    height: 80px;
}

.avatar-uploader_small .avatar-uploader-icon {
    line-height: 80px;
    margin-left: -30px;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}
.unfetteredBox {
    display: flex;
    flex-wrap: wrap;

    padding: 0 10px;
    box-sizing: border-box;
}
.unfetteredBox .image {
    margin-top: 10px;
    box-shadow: rgba(16, 17, 19, 0.5) 0px 1px 3px;
    margin-right: 10px;
    height: 60px;
    width: 60px;
    border-radius: 4px;

    overflow: hidden;
}
</style>
