<template>
    <div style="height: 98%;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-document-copy"></i> Artcile Html </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" style="height: 97%; min-width: 1000px; background-color: #fafafa; padding: 10px 0 0 0">
          

            <common-word
            :readonly="true"
                v-if="htmlContent"
                ref="commonWord"
                :value="htmlContent"
                :wordStyle="wordStyle"
                style="width: calc(100%); height: calc(100%); "
                :style="`100%`"
            ></common-word>
        </div>
    </div>
</template>

<script>
import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑
export default {
    data() {
        return {
            wordStyle: `
            p {
            position: relative;
            padding: 8px 15px;
            min-height: 22px;
            border: 2px dashed #fff;
            border-radius: 5px;
            color: #606266;
            }
            p {
            font-size: 14px;
            line-height: 22px;
            }

            .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;
            }

            .MaxPicture {
            text-align: center;
            }

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

            .font {
            display: block;
            margin: 0 auto;
            font-size: 13px;
            }
            .tableTitle{
                text-align:center!important;
                font-weight: bold;
            }
            `,
            detailMes: {},
            baseUrl: this.Common.baseUrl,
            mediaUrl: 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: '',
            htmlContent: '',
            Main_List: [],
            exegesis: "The following contents'<b></b>,<i></i>'are necessary for the generation phase, please do not delete them!!!"
        };
    },

    created() {
        this.getInfo();
    },
    activated() {
        this.getInfo();
    },
    methods: {
        async getInfo() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            // 获取文章信息
            await this.$api
                .post('api/Production/getProductionDetail', { p_article_id: this.Art_Id })
                .then(async (res) => {
                    if (res.code == 0) {
                        this.detailTitle = res.data.production.title
                        this.detailMes = res.data.production;
                        await this.getDate(loading);

                        loading.close();
                    } else {
                        this.$message.error(res.msg);
                        loading.close();
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                    loading.close();
                });
        },
        getWord() {
            var htmlContent = `<h3 class="man_Title"  contenteditable="false">${this.detailTitle} </h3>`;
            htmlContent += this.Main_List.map((item) => {
                //批注
                let contentHtml = '';
                var isRemark = ``;
                // if (item.state == 2 && item.remark && item.remark != '') {
                //     // isRemark = `<img class="isRemark" main-id="${item.am_id}"  src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
                //     isRemark = `<span class="isRemark"  main-id="${item.am_id}"><img  class="isRemarkIcon"  main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width: 20px; height: 20px" />
                       
                //          <span class="isRemarkIcon"  main-id="${item.am_id}" > (${item.am_id})</span>
                // </span>
                    
                // `;
                // }
                // 判断是否是图片
                if (item.type == 1) {
                   

                    var extension = item.image.url.split('.').pop().toLowerCase();
                    if (extension == 'tif') {
                        contentHtml = `
                        <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
                            item.am_id
                        }">
            <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
            <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
        </p>
                            `;
                    } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
                        contentHtml = `
                                <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
                            item.ami_id
                        }" main-id="${item.am_id}">
                                    ${isRemark}
                                    <img src="${this.mediaUrl + item.image.url}" style="width: ${
                            item.width ? `${item.width}px` : '100%'
                        }"  />
                                   <font  class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
                            item.image.note ? item.image.note : ''
                        }</font>
                                </p>
                            `;
                    } else {
                        contentHtml = `
                                <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
                            item.ami_id
                        }" main-id="${item.am_id}">
                                   ${isRemark}
                                    <span
                                            style="
                                                text-align: center;
                                                font-size: 30px;
                                                display: flex;
                                                align-items: center;
                                                justify-content: center;
                                            "
                                        >
                                        Figures ( .${item.image.url.split('.').pop().toUpperCase()})
                                              </span>

                                   <font  class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
                            item.image.note ? item.image.note : ''
                        }</font>
                                </p>
                            `;
                    }
                } else if (item.type == 2) {
                    var tableList = JSON.parse(item.table.table_data);

                    contentHtml = `
    <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
                        item.am_id
                    }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
        ${isRemark}
        <font  class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
                    <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
            ${tableList
                .map((row) => {
                    return `
                    <tr>
                        ${row
                            .map((cell) => {
                                return `
                                <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
                                    <span>${cell.text || ''}</span>
                                </td>
                            `;
                            })
                            .join('')} <!-- join the cells in the row -->
                    </tr>
                `;
                })
                .join('')} <!-- join the rows -->
        </table>
        <font  class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
    </div>
`;
                } else {
                    contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
                }

                // 判断是否是表格类型

                return contentHtml;
            }).join('');
            this.htmlContent = htmlContent;
        },
        async getDate(loading) {
            let urlLInk = '';
            let urlTask = {};
            if (this.Art_Id != undefined) {
                urlLInk = 'api/Preaccept/getArticleMains';
                urlTask.article_id = this.detailMes.article_id;
            }

            // 获取文章信息
            await this.$api
                .post(urlLInk, urlTask)
                .then(async (res) => {
                    if (res.code == 0) {
                        this.Main_List = res.data.list;
                        // this.detailTitle = res.data.production.title
                        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;
                        }

                        // setTimeout(async () => {
                        this.$nextTick(async () => {
                            await this.getWord();
                            loading.close();
                        });
                        loading.close();
                    } else {
                        this.$message.error(res.msg);
                        loading.close();
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                    loading.close();
                });
        }
    }
};
</script>

<style scoped>
.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;
}
</style>
