<template>
    <div class="container" style="padding-top: 20px; padding-bottom: 20px">
        <p
            style="
                background-color: #f0f9eb;
                color: #67c23a;
                padding: 8px 16px;
                color: #67c23a;
                display: flex;
                align-items: center;
                justify-content: space-between;
            "
        >
            <i class="el-icon-success" style="margin-right: 10px"></i>
            <span
                >Dear {{ user_name }} , Congratulations! You manuscript has been pre-accepted for publication in
                <b>{{ journalInfo.title }}</b
                >. Please review and complete the necessary information of your manuscript. Kindly note that an article processing charge is
                required for final publication.</span
            >
        </p>

        <!-- <p
            style="
                margin-top: 10px;
                color: #409eff;
                background: #ecf5ff;
                border-color: #b3d8ff;
                color: #505050;
                font-size: 14px;
                padding: 10px;
                box-sizing: border-box;
            "
           
        >
            <i class="el-icon-warning" style="color: #517fd5; margin-right: 10px"></i>
            This manuscript does not require payment
        </p> -->
        <!-- <el-steps :active="active" finish-status="success" simple style="margin-top: 10px">
            <el-step :title="`${$t('PreAccept.step')} ${i + 1} ${v.title} `" v-for="(v, i) in stepList"> </el-step>
        </el-steps> -->
        <!-- 内容 -->

        <!-- <div class="content_box mt20 stepbox" v-if="active == 0">
            <div class="con">
                <h4 class="con-title">{{ this.$t('PreAccept.step1') }}</h4>
                <template v-if="articleInfo && articleInfo.is_buy == 0">
                    <OrderConfirmation
                        type="component"
                        @paySuccess="paySuccess"
                        ref="OrderConfirmation"
                        style="padding: 0 20px; box-sizing: border-box"
                    ></OrderConfirmation>
                </template>

                
            </div>
        </div> -->
        <div class="content_box mt20 stepbox">
            <!-- 文章引用 -->
            <div class="con">
                <h4 class="con-title">{{ this.$t('PreAccept.step1') }}</h4>
                <div style="padding: 20px; box-sizing: border-box" v-loading="tableData.length==0">
                    <p style="color: #505050; font-size: 14px; box-sizing: border-box; margin-bottom: 20px" v-if="tableData.length>0&&tableData[0].state==0">
                        <i class="el-icon-warning" style="color: #517fd5; margin-right: 8px"></i> How to apply for a discount? Please see
                        our discount policy here:
                        <a
                            style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
                            href="https://www.tmrjournals.com/apc/"
                            target="_blank"
                            >https://www.tmrjournals.com/apc/</a
                        >.
                    </p>
                    <el-card class="box-card" style="width: 100%"
                        ><el-table :data="tableData" style="width: 100%" align="center">
                            <el-table-column prop="fee" label="Price">
                                <template slot-scope="scope"> {{ scope.row.fee }} USD </template>
                            </el-table-column>
                            <el-table-column prop="name" label="Discounts">
                                <template slot-scope="scope"> 0 USD </template>
                            </el-table-column>
                            <el-table-column prop="address" label="Tax">
                                <template slot-scope="scope"> 0 USD </template>
                            </el-table-column>
                            <el-table-column prop="fee" label="Total Price"> 
                                <template slot-scope="scope"> {{ scope.row.fee }} USD </template>
                            </el-table-column>
                            <el-table-column prop="" label="Current Status">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.state==1" style='color:#67c23a'><b>Completed</b></span>
                                    <span v-if="scope.row.state==0" style='color:#f56c6c'><b>Incomplete</b></span>
                                    
                                
                                </template>
                            </el-table-column>
                        </el-table>
                        <p style="text-align: right; margin: 20px 0 0" v-if="tableData.length>0&&tableData[0].state==0">
                            <span
                                @click="goOrderConfirmation(articleInfo)"
                                style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
                                >Click here</span
                            >
                            to go to the payment page.
                        </p></el-card
                    >

                    <!-- <p style="text-align: right;">Click here to request an invoice.</p> -->
                </div>

                <!-- <div v-else style="padding: 20px; box-sizing: border-box"></div> -->
            </div>
        </div>
        <div class="content_box mt20 stepbox">
            <!-- 文章引用 -->
            <div class="con">
                <h4 class="con-title">{{ this.$t('PreAccept.step2') }}</h4>
                <p style="color: #505050; font-size: 14px; padding: 20px; box-sizing: border-box">
                    <el-button @click="goGenerateCharts(thisArtcleId)" icon="el-icon-edit" type="text">Edit</el-button>
                </p>
                <!-- <div v-else style="padding: 20px; box-sizing: border-box"></div> -->
            </div>
        </div>
        <div class="content_box mt20 stepbox">
            <!-- 文章引用 -->
            <div class="con">
                <h4 class="con-title" style="overflow: hidden">
                    {{ this.$t('PreAccept.step3') }}
                    <b> <span v-if="Ainfo.refer_state.state" style="float: right" class="el-icon-check pass status"> Complete</span>
                    <span v-else class="el-icon-pie-chart notPass status" style="float: right"> Pending</span></b>
                   
                </h4>
                <p style="color: #505050; font-size: 14px; padding: 20px; box-sizing: border-box">
                    <i class="el-icon-warning" style="color: #517fd5; margin-right: 8px"></i> A total of
                    <i class="tip">{{ Ainfo.refer_state.num }}</i> references in this manuscript is identified.
                </p>

                <p style="color: #505050; font-size: 14px; padding: 0 20px 20px; box-sizing: border-box">
                    <el-button @click="goAddReferences(thisArtcleId)" icon="el-icon-edit" type="text">Edit</el-button>
                </p>
                <!-- <div v-else style="padding: 20px; box-sizing: border-box"></div> -->
            </div>
        </div>

        <!-- 答疑 -->
        <div class="mt20 helpcontent">
            <div class="flexbox">
                <span class="el-icon-info help"></span>
                <div>
                    <h4>Any questions/Help</h4>
                    <p class="mt20">If you experience any problems, please contact us by {{ journalInfo.email }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import OrderConfirmation from '../page/components/pendingPayment/OrderConfirmation.vue';
export default {
    data() {
        return {
            tableData: [],
            articleInfo: {},
            journalInfo: {},
            urlList: {
                detail: 'api/Order/preOrderDetail',
                getPreacceptPayment: 'api/Preaccept/getPreacceptPayment'
            },
            active: 0,
            stepList: [
                {
                    title: this.$t('PreAccept.step1'),
                    value: 1
                },
                {
                    title: this.$t('PreAccept.Information'),
                    value: 2
                }
                // {
                //     title: this.$t('PreAccept.step3'),
                //     value: 3
                // }
            ],

            user_name: localStorage.getItem('U_relname'),
            thisArtcleId: this.$route.query.id,
            alertShow: true,
            dingshi: null,
            hideSec: 5,
            // 引用表单数据
            ReferenceList: [],
            Ainfo: {
                refer_state: {
                    state: null,
                    num: null
                }
            }
        };
    },
    created() {
        this.getInfoStatu();
        this.hideAlert();
        this.getDetail();
        this.getPreacceptPayment();
    },
    activated() {
        this.getInfoStatu();
        this.hideAlert();
        this.getDetail();
        this.getPreacceptPayment();
    },
    components: {
        OrderConfirmation
    },
    methods: {
        paySuccess() {
            this.active = 1;
        },
        goOrderConfirmation(data) {
            this.$router.push({
                path: '/OrderConfirmation',
                query: {
                    id: this.$route.query.id,
                   
                }
            });
        },
        getPreacceptPayment() {
            this.$api
                .post(this.urlList.getPreacceptPayment, {
                    article_id: this.$route.query.id
                })
                .then((res) => {
                    console.log('res at line 191:', res);
                    if (res.code == 0) {
                        this.tableData = [{ ...res.data }];
                    }
                });
        },
        getDetail() {
            this.$api
                .post(this.urlList.detail, {
                    article_id: this.$route.query.id
                })
                .then((res) => {
                    console.log('res at line 191:', res);
                    if (res.code == 0) {
                        this.articleInfo = res.data.article_detail;
                        this.journalInfo = res.data.journal_detail;

                        if (this.articleInfo.is_buy == 1 || (this.articleInfo.is_buy == 0 && this.journalInfo.fee == '0.00')) {
                            this.active = 1;
                        }
                    }
                });
        },
        handleClickStep(e) {
            console.log('e at line 127:', e);
            this.active = e.value;
            this.$forceUpdate();
        },
        // 跳转到引用编辑页面
        goAddReferences(id) {
            this.$router.push({
                path: 'ReferenceEditor',
                query: {
                    id: id
                }
            });
        },
        // 跳转到图表编辑页面
        goGenerateCharts(id) {
            this.$router.push({
                path: 'GenerateCharts',
                query: {
                    id: id
                }
            });
        },

        // 隐藏alert
        hideAlert() {
            this.dingshi = setInterval(() => {
                this.hideSec -= 1;
                // console.log(this.hideSec)
                if (this.hideSec == 0) {
                    this.alertShow = false;
                    clearInterval(this.dingshi);
                }
            }, 1000);
        },
        // 获取资料状态
        getInfoStatu() {
            this.$api
                .post('/api/Article/getPreacceptStatus', {
                    article_id: this.$route.query.id
                })
                .then((res) => {
                    if (res.code == 0) {
                        // console.log(res, 'res')
                        this.Ainfo = {
                            refer_state: {
                                state: res.data.refer_state.state,
                                num: res.data.refer_state.num
                            }
                        };
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>

<style scoped>
.tip {
    background: #e6effb;
    padding: 4px;
    font-style: normal;
    border-radius: 10px;
}
.passborder {
    border: 1px solid #f0f9eb;
}
.notPassborder {
    border: 1px solid #fdf6ec;
}
/* .con{padding: 20px;} */
.statusTop {
    height: 30px;
}
.borderBottom {
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 20px;
}
.help {
    font-size: 22px;
    margin-right: 10px;
}
.el-alert__title {
    font-size: 26px;
}
.mt20 {
    margin-top: 20px;
}
/* .content_box{padding:15px 10px; border:3px dashed  #eff6ff;  } */
.content_box .item {
    padding: 0 !important;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}
.passStatus {
    background: #f0f9eb;
}
.notPassStatus {
    background: #fdf6ec;
}
.content_box .item .status {
    font-size: 16px;
    padding: 0 10px;
    line-height: 30px;
}
.pass {
    color: #67c23a !important;
}
.notPass {
    color: #e6a23c !important;
}
.flexbox {
    display: flex;
}
p {
    color: #333;
}
.mt10 {
    margin-top: 10px;
}
.more {
    font-weight: bold;
}
.helpcontent {
    color: #888;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f1f1f1;
}
.helpcontent p {
    color: inherit;
    font-size: 12px;
}
.stepbox {
    border: 1px solid #006699;
}
.con-title {
    color: #fff;
    background-color: #006699;
    padding: 10px 20px;
    box-sizing: border-box;
}
::v-deep .el-table th {
    background-color: #f0f0f0 !important;
    /* border-top: 1px solid #b0b0b0 !important; */

    color: #333 !important;
}
::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #b0b0b0 !important;
}
</style>
