<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> Manuscript reviewer list </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <div>
                        <span>ID:{{ articleBaseInfo.accept_sn }} </span>
                    </div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <div>
                    <el-button type="primary" icon="el-icon-plus" @click="openAddRev">Reviewer Bank</el-button>

                    <el-button
                        :type="tableSuggest.length > 0 ? 'primary' : 'info'"
                        :plain="tableSuggest.length == 0"
                        :disabled="tableSuggest.length == 0"
                        icon="el-icon-plus"
                        @click="tableSuggest.length > 0 ? openSuggRev() : ''"
                        >Reviewers Suggested By Author ({{ tableSuggest.length }})</el-button
                    >
                </div>

                <!-- <el-button type="primary" icon="el-icon-circle-plus-outline" @click="editVisible1 = true">Supplement</el-button> -->
            </div>
            <el-table
                :data="tableData"
                stripe
                size="mini"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                empty-text="New messages (0)"
            >
                <el-table-column type="index" label="No." align="center" width="50"></el-table-column>
                <el-table-column label="Base Information" width="280px">
                    <template slot-scope="scope">
                        <p class="tab_tie_col">
                            <span>Name: </span>
                            <el-badge is-dot :hidden="scope.row.reviewer_act == 1 ? false : true" class="item">
                                <b style="font-size: 15px; letter-spacing: -0.5px">{{ scope.row.reviewer }}</b>
                            </el-badge>
                        </p>
                        <p class="tab_tie_col">
                            <span>Realname: </span>
                            {{ scope.row.realname }}
                        </p>

                        <p class="tab_tie_col"><span>Country: </span>{{ scope.row.country }}</p>
                        <p class="tab_tie_col"><span>Email: </span>{{ scope.row.email }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="Other Information">
                    <template slot-scope="scope">
                        <p class="tab_tie_col">
                            <span>Field: </span>
                            {{ scope.row.field }}
                        </p>

                        <p class="tab_tie_col">
                            <span>Company: </span>
                            {{ scope.row.company }}
                        </p>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="art_rev_id" label="ID" align="center" width="60"></el-table-column> -->
                <!-- <el-table-column label="Reviewer" align="center" width="130">
                    <template slot-scope="scope">
                        <el-badge is-dot :hidden="scope.row.reviewer_act == 1 ? false : true" class="item">
                            {{ scope.row.reviewer }}
                        </el-badge>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column prop="country" label="Country" align="center" width="100"></el-table-column> -->
                <!-- <el-table-column prop="email" label="Email" align="center"></el-table-column> -->
                <!-- <el-table-column prop="company" label="Company" align="center"></el-table-column> -->
                <!-- <el-table-column prop="major_str" label="Major"></el-table-column> -->
                <el-table-column label="Research areas" width="300">
                    <template slot-scope="scope">
                        <commonMajorTableList
                            :user_id="scope.row.reviewer_id"
                            :baseInfo="scope.row"
                            :key="scope.row.reviewer_id"
                            :disabled="true"
                        ></commonMajorTableList>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="field" label="Field"></el-table-column> -->
                <el-table-column label="State" align="center" width="120">
                    <template slot-scope="scope">
                        <span style="font-size: 16px;"v-html="revstate(scope.row)"></span>
                       
                        <font
                            style="color: #aaa; display: block; line-height: 18px; font-size: 13px; "
                            v-html="formatDate(scope.row.ctime)"
                        >
                        </font>
                    </template>
                </el-table-column>
                <el-table-column label="" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button v-show="scope.row.state!=4"ize="mini" type="primary" plain icon="el-icon-tickets" @click="showdetail(scope.row)">Detail</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="Total"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog title="Add Suggest Reviewer" :visible.sync="AddSuggest" width="800px">
            <el-table
                :data="tableSuggest"
                border
                stripe
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                empty-text="New messages (0)"
            >
                <el-table-column prop="account" label="Email"></el-table-column>
                <el-table-column prop="realname" label="Realname"></el-table-column>
                <el-table-column prop="cmajor" label="Major"></el-table-column>
                <el-table-column label="" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain icon="el-icon-check" @click="selSuggest(scope.row)"> Select</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="AddSuggest = false">Cancel</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="add reviewer"
            :closeOnClickModal="false"
            :visible.sync="editVisible"
            width="80%"
            v-loading="loading"
            element-loading-text="Loading..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-form ref="editform" :model="editform" label-width="100px">
                <el-form-item label="state">
                    <el-select v-model="editform.uid" filterable @change="changereviewer()" placeholder="Please select">
                        <el-option :key="0" label="please select" :value="0"></el-option>
                        <el-option v-for="item in reviewerList" :key="item.user_id" :label="item.account" :value="item.user_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Country" v-if="editform.uid != 0">
                    <span>{{ reviewer_data.country }}</span>
                </el-form-item>
                <el-form-item label="Company" v-if="editform.uid != 0">
                    <span>{{ reviewer_data.company }}</span>
                </el-form-item>
                <el-form-item label="Major" v-if="editform.uid != 0">
                    <span>{{ reviewer_data.major_title }}</span>
                </el-form-item>
                <el-form-item label="Field" v-if="editform.uid != 0">
                    <span>{{ reviewer_data.field }}</span>
                </el-form-item>
                <el-form-item label="Introduction" v-if="editform.uid != 0">
                    <span>{{ reviewer_data.introduction }}</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editVisible = false">canel</el-button>
                <el-button type="primary" @click="saveEdit">save</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="Supplement"
            :visible.sync="editVisible1"
            width="40%"
            v-loading="loading"
            element-loading-text="Loading..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-form :model="questionform" ref="question" label-width="300px" label-position="top">
                <el-divider content-position="center">REFEREE'S ASSESSMENT</el-divider>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="1.Originality of the topic">
                            <el-radio-group v-model="questionform.qu1">
                                <el-radio :label="1">Excellent</el-radio>
                                <el-radio :label="2">Good</el-radio>
                                <el-radio :label="3">Fair</el-radio>
                                <el-radio :label="4">Poor</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="2.Importance in its Field">
                            <el-radio-group v-model="questionform.qu3">
                                <el-radio :label="1">Excellent</el-radio>
                                <el-radio :label="2">Good</el-radio>
                                <el-radio :label="3">Fair</el-radio>
                                <el-radio :label="4">Poor</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="3.Does the manuscript fall within the aim and scope of the journal?">
                            <el-radio-group v-model="questionform.qu6">
                                <el-radio :label="1">Excellent</el-radio>
                                <el-radio :label="2">Good</el-radio>
                                <el-radio :label="3">Fair</el-radio>
                                <el-radio :label="4">Poor</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="4.English language">
                            <el-radio-group v-model="questionform.qu8">
                                <el-radio :label="1">Excellent</el-radio>
                                <el-radio :label="2">Good</el-radio>
                                <el-radio :label="3">Fair</el-radio>
                                <el-radio :label="4">Poor</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="5.Readily Understandable">
                            <el-radio-group v-model="questionform.qu5">
                                <el-radio :label="1">Excellent</el-radio>
                                <el-radio :label="2">Good</el-radio>
                                <el-radio :label="3">Fair</el-radio>
                                <el-radio :label="4">Poor</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-collapse>
                            <el-form-item label="6.Does the title represent manuscript's contents?">
                                <el-col :span="8">
                                    <el-radio-group v-model="questionform.qu9">
                                        <el-radio :label="true">Yes</el-radio>
                                        <el-radio :label="false">No</el-radio>
                                    </el-radio-group>
                                </el-col>
                                <el-col :span="12">
                                    <el-collapse-item name="1" style="margin-top: -10px">
                                        <template slot="title"> <i class="el-icon-edit"></i>Comments/ Suggestions </template>
                                        <el-input
                                            type="textarea"
                                            placeholder="please input content"
                                            v-model="questionform.qu9contents"
                                            :rows="4"
                                        ></el-input>
                                    </el-collapse-item>
                                </el-col>
                            </el-form-item>
                        </el-collapse>
                    </el-col>
                </el-row>

                <el-collapse>
                    <el-form-item label="7.Is the Abstract accurate and concise?">
                        <el-col :span="4">
                            <el-radio-group v-model="questionform.qu10">
                                <el-radio :label="true">Yes</el-radio>
                                <el-radio :label="false">No</el-radio>
                            </el-radio-group>
                        </el-col>
                        <el-col :span="20">
                            <el-collapse-item name="2" style="margin-top: -10px">
                                <template slot="title"> <i class="el-icon-edit"></i>Comments/ Suggestions </template>
                                <el-input
                                    type="textarea"
                                    placeholder="please input content"
                                    v-model="questionform.qu10contents"
                                    :rows="4"
                                ></el-input>
                            </el-collapse-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="8.Are the approach/ methods properly described?">
                        <el-col :span="4">
                            <el-radio-group v-model="questionform.qu11">
                                <el-radio :label="true">Yes</el-radio>
                                <el-radio :label="false">No</el-radio>
                            </el-radio-group>
                        </el-col>
                        <el-col :span="20">
                            <el-collapse-item name="3" style="margin-top: -10px">
                                <template slot="title"> <i class="el-icon-edit"></i>Comments/ Suggestions </template>
                                <el-input
                                    type="textarea"
                                    placeholder="please input content"
                                    v-model="questionform.qu11contents"
                                    :rows="4"
                                ></el-input>
                            </el-collapse-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="9.Are the conclusions and interpretations sound?">
                        <el-col :span="4">
                            <el-radio-group v-model="questionform.qu12">
                                <el-radio :label="true">Yes</el-radio>
                                <el-radio :label="false">No</el-radio>
                            </el-radio-group>
                        </el-col>
                        <el-col :span="20">
                            <el-collapse-item name="4" style="margin-top: -10px">
                                <template slot="title"> <i class="el-icon-edit"></i>Comments/ Suggestions </template>
                                <el-input
                                    type="textarea"
                                    placeholder="please input content"
                                    v-model="questionform.qu12contents"
                                    :rows="4"
                                ></el-input>
                            </el-collapse-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="10.Are the references properly cited?">
                        <el-col :span="4">
                            <el-radio-group v-model="questionform.qu13">
                                <el-radio :label="true">Yes</el-radio>
                                <el-radio :label="false">No</el-radio>
                            </el-radio-group>
                        </el-col>
                        <el-col :span="20">
                            <el-collapse-item name="5" style="margin-top: -10px">
                                <template slot="title"> <i class="el-icon-edit"></i>Comments/ Suggestions </template>
                                <el-input
                                    type="textarea"
                                    placeholder="please input content"
                                    v-model="questionform.qu13contents"
                                    :rows="4"
                                ></el-input>
                            </el-collapse-item>
                        </el-col>
                    </el-form-item>

                    <el-divider content-position="center">REFEREE'S RECOMMENDATIONS</el-divider>
                    <el-form-item label="Overall the Paper is Rated">
                        (Poor------------------------Excellent)
                        <br />
                        <el-radio-group v-model="questionform.rated" size="small">
                            <el-radio-button label="1"></el-radio-button>
                            <el-radio-button label="2"></el-radio-button>
                            <el-radio-button label="3"></el-radio-button>
                            <el-radio-button label="4"></el-radio-button>
                            <el-radio-button label="5"></el-radio-button>
                            <el-radio-button label="6"></el-radio-button>
                            <el-radio-button label="7"></el-radio-button>
                            <el-radio-button label="8"></el-radio-button>
                            <el-radio-button label="9"></el-radio-button>
                            <el-radio-button label="10"></el-radio-button>
                        </el-radio-group>
                        <span style="margin-left: 20px">>Your score:{{ questionform.rated }}</span>
                    </el-form-item>
                    <el-form-item label="REFEREE'S RECOMMENDATIONS" prop="recommend">
                        <el-radio-group v-model="questionform.recommend" style="line-height: 30px">
                            <el-radio :label="1">Accept with minor revision</el-radio>
                            <br />
                            <el-radio :label="2">Accept with major revision</el-radio>
                            <br />
                            <el-radio :label="3">Reject in current form, but may be resubmitted</el-radio>
                            <br />
                            <el-radio :label="4">Reject, with no resubmission</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="OTHER SPECIFIC CRITICISMS">
                        <el-radio-group v-model="questionform.other" style="line-height: 30px">
                            <el-radio :label="1">Imperfect style</el-radio>
                            <br />
                            <el-radio :label="2">Too long</el-radio>
                            <br />
                            <el-radio :label="3">References incorrectly presented</el-radio>
                            <br />
                            <el-radio :label="4">Typographical and Grammatical errors</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="Comments for the Authors">
                        <el-input type="textarea" placeholder="please input content" v-model="questionform.comment" :rows="8"></el-input>
                    </el-form-item>
                    <el-form-item label="Confidential Comments to the Editor">
                        <el-input type="textarea" placeholder="please input content" v-model="questionform.confident" :rows="8"></el-input>
                    </el-form-item>
                    <el-form-item label="Please choose disclose your name or remain anonymous.">
                        <el-radio-group v-model="questionform.is_anonymous" style="line-height: 30px">
                            <el-radio :label="0">Disclose name</el-radio>
                            <br />
                            <el-radio :label="1">Remain anonymous</el-radio>
                        </el-radio-group>
                        <p style="line-height: 20px; color: #aaa; font-size: 13px; margin: 12px 0 0 0">
                            If you agree to disclose your name, we will acknowledge you by name in the published PDF. However, if you prefer
                            to remain anonymous, we will still express our gratitude by thanking you as an anonymous reviewer.
                            <br />For example, {{ txt_mess.title }} would like to thank AAAAAAAA, BBBBBBBB, and other anonymous reviewers
                            for their invaluable contributions to the peer review process of this paper.
                        </p>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addArtRev">submit</el-button>
                    </el-form-item>
                </el-collapse>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import commonMajorTableList from '../page/components/major/tableList.vue';
export default {
    components: {
        commonMajorTableList
    },
    data() {
        return {
            majorData: [],
            baseUrl: this.Common.baseUrl,
            articleBaseInfo: {},
            questionform: {
                uid: 0,
                articleId: this.$route.query.id,
                qu1: '',
                qu2: '',
                qu3: '',
                qu4: '',
                qu5: '',
                qu6: '',
                qu7: '',
                qu8: '',
                qu9: '',
                qu9contents: '',
                qu10: '',
                qu10contents: '',
                qu11: '',
                qu11contents: '',
                qu12: '',
                qu12contents: '',
                qu13: '',
                qu13contents: '',
                qu14: '',
                qu14contents: '',
                qu15: '',
                qu15contents: '',
                rated: '',
                recommend: '',
                other: '',
                confident: '',
                comment: ''
            },
            txt_mess: {},
            query: {
                articleId: this.$route.query.id,
                article_id: this.$route.query.id,
                pageIndex: 1,
                pageSize: 10
            },
            editform: {
                uid: 0,
                articleId: this.$route.query.id
            },
            reviewer_data: {
                introduction: '',
                country: '',
                company: '',
                major_title: '',
                field: ''
            },
            reviewer_data1: {
                introduction: '',
                country: '',
                company: '',
                major_title: '',
                field: ''
            },
            editVisible: false,
            editVisible1: false,
            AddSuggest: false,
            tableData: [],
            reviewerList: [],
            tableSuggest: [],
            loading: false,
            Total: 0
        };
    },
    created() {
        this.initArticle();
        this.getdate();
        this.initreviewerList();
    },
    computed: {
        upload_url: function () {
            return this.baseUrl + 'api/Reviewer/up_file';
        }
    },
    methods: {
        initArticle() {
            this.$api
                .post('api/Article/getArticleDetail', {
                    articleId: this.query.article_id,
                    human: 'editor'
                })
                .then((res) => {
                    this.articleBaseInfo = res.article;
                });
        },

        // 获取编辑列表数据
        getdate() {
            this.$api
                .post('api/Article/getReviewerList', this.query)
                .then((res) => {
                    this.Total = res.totle;
                    this.tableData = res.data;
                })
                .catch((err) => {
                    console.log(err);
                });
            this.$api
                .post('api/Reviewer/getRecommendReviewer', this.query)
                .then((res) => {
                    this.tableSuggest = res.data.reviewers;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getdate();
        },
        addReviewer() {
            alert('sssss');
        },
        // 添加跳页面
        openAddRev() {
            this.$router.push({
                path: 'articleReviewerAdd',
                query: {
                    id: this.$route.query.id
                }
            });
        },

        //初始化审查员列表
        initreviewerList() {
            this.$api
                .post('api/Article/getArticleReviewerList', {
                    articleId: this.query.articleId
                })
                .then((res) => {
                    this.reviewerList = res.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //保存添加操作
        saveEdit() {
            if (this.editform.uid == 0) {
                this.$message.error('please select a reviewer');
            } else {
                this.loading = true;
                this.$api
                    .post('api/Article/addArticleReviewer', this.editform)
                    .then((res) => {
                        this.loading = false;
                        if (res.code == 0) {
                            this.$message.success('add success');
                            this.$router.go(0);
                        } else {
                            this.$message.error('add error');
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        addArtRev() {
            if (this.questionform.uid == 0) {
                this.$message.error('Please select a reviewer');
            } else if (this.questionform.is_anonymous == '' && this.questionform.is_anonymous != '0') {
                this.$message.error('Please choose disclose your name or remain anonymous.');
            } else {
                this.loading = true;
                this.$api
                    .post('api/Article/addArtRev', this.questionform)
                    .then((res) => {
                        this.loading = false;
                        if (res.code == 0) {
                            this.$message.success('add success');
                            this.$router.go(0);
                        } else {
                            this.$message.error('add error');
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        // 添加推荐审稿人
        openSuggRev() {
            this.AddSuggest = true;
        },
        selSuggest(e) {
            this.loading = true;
            this.$api
                .post('api/Article/addArticleReviewer', {
                    uid: e.user_id,
                    articleId: this.$route.query.id
                })
                .then((res) => {
                    this.loading = false;
                    if (res.code == 0) {
                        this.$message.success('Add Success');
                        this.AddSuggest = false;
                        this.getdate();
                    } else {
                        this.$message.error('Add Error');
                    }
                })
                .catch((err) => {
                    this.loading = false;
                    console.log(err);
                });
        },
        showdetail(row) {
            if (row.state == 4) {
                this.$message.error('Review expired!');
            } else {
                this.$router.push({
                    path: 'articleReviewerDetail',
                    query: {
                        id: row.art_rev_id
                    }
                });
            }
        },
        changereviewer() {
            if (this.editform.uid !== 0) {
                this.$api
                    .post('api/Article/getReviewerdetail', {
                        uid: this.editform.uid
                    })
                    .then((res) => {
                        this.reviewer_data.introduction = res.data.introduction;
                        this.reviewer_data.country = res.data.country;
                        this.reviewer_data.company = res.data.company;
                        this.reviewer_data.major_title = res.data.major_title;
                        this.reviewer_data.field = res.data.field;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        changereviewer1() {
            if (this.questionform.uid !== 0) {
                this.$api
                    .post('api/Article/getReviewerdetail', {
                        uid: this.questionform.uid
                    })
                    .then((res) => {
                        this.reviewer_data1.introduction = res.data.introduction;
                        this.reviewer_data1.country = res.data.country;
                        this.reviewer_data1.company = res.data.company;
                        this.reviewer_data1.major_title = res.data.major_title;
                        this.reviewer_data1.field = res.data.field;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        revstate(row, column, cellValue, index) {
            let frag = '';
            if (row.state == 0) {
                frag = 'With reviewer';
            } else if (row.state == 1) {
                frag = 'Revision';
            } else if (row.state == 2) {
                frag = 'Reject';
            } else if (row.state == 3) {
                frag = 'Accept';
            } else if (row.state == 4) {
                frag = '<text style="color:#aaa">invalid</text>';
            } else if (row.state == 5) {
                frag = 'invitation';
            }

            return frag;
        },

        // 时间
        formatDate(timestamp) {
            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return Y + M + D + '<br/>' + h + ':' + m + ':' + s;
        }
    }
};
</script>

<style scoped>
.container {
    padding: 10px;
}
.reviewerListBox {
    color: rgba(0, 119, 184, 1);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.reviewerListBox .labelTitle {
    color: rgba(0, 119, 184, 1);
}
.handle-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.el-table .warning-row {
    background: #f3ca7f;
}

.el-table .success-row {
    background: #bcfc9a;
}

.el-table .normol-row {
    background: #d8f1c7;
}

.el-table .red-row {
    background: #f05555;
}
.tab_tie_col {
    /* margin-bottom: 5px; */
    color: #333;
    word-wrap: break-word;
    word-break: normal;
}

.tab_tie_col > span {
    color: #888;
    margin: 0 5px 0 0;
    font-size: 13px;
}
</style>
