<template>
    <div>
        <div class="headers">
            <div class="headers-left">
                <div class="imgs">

                </div>
                <div class="img-right">
                    <div class="name-title">微育科技</div>
                    <div class="right-name">数智科创 · 通达未来 </div>
                </div>
            </div>
            <div class="headers-right">
                <div class="rights">
                    <div class="rights-names" >
                        专家抽取设置
                       
                    </div>

                </div>
            </div>
        </div>
        <div class="contents">
            <div class="content-left">
                <div class="content-lefts">
                    <div class="leftss">
                        <div class="leftss-header">
                            <div>抽取专家设置</div>
                            <div > <el-button size="small"
                                @click="btnLiji"
                                    style="background-color: #5165f7;color:white;">立即抽取</el-button>
                                    <el-button size="small"
                                    style="width: 82px;"
                                    @click="btnFan"
                                   >取消</el-button>
                            </div>
                           
                        </div>
                        <div class="table-area">
                            <div class="table-header">
                                <div>
                                    <span class="times"> 评审项目信息｜ </span>  
                                </div>
                               
                            </div>
                        </div>
                    </div>
                    <div class="content-table">
                       <div class="tables">
                         <div class="table-left">项目名称</div>
                         <div class="table-right" >
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                         </div>
                       </div>
                       <div class="tables">
                         <div class="table-left">评审时间</div>
                         <div class="table-right">
                            <el-date-picker
                            style="width: 100%;"
                            v-model="value1"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                         </div>
                       </div>
                       <div class="tables">
                         <div class="table-left">评审地点</div>
                         <div class="table-right">
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                         </div>
                       </div>
                     
                       <div class="tables">
                         <div class="table-left">评审内容</div>
                         <div class="table-right">
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                         </div>
                       </div>
                    </div>
                    <div class="leftss">
                        
                        <div class="table-area">
                            <div class="table-header">
                                <div>
                                    <span class="times"> 专家邀请信息｜  </span>  
                                </div>
                               
                            </div>
                        </div>
                    </div>
                    <div class="content-table2">
                        <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                            <el-table-column
                            type="index"
                             label="序号"
                            width="60"
                            align="center"
                            >
                            <template #default="{ $index }">
                            {{ $index+1  }}
                          
                        </template>
                            </el-table-column>
                 
                            <el-table-column
                            prop="date"
                            label="专家来源"
                          
                             align="center"
                            >
                            <el-select v-model="value" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="研究领域"
                             align="center"
                          >
                          <el-cascader
                            v-model="value"
                            :options="options"
                            @change="handleChange"></el-cascader>
                            </el-table-column>                           
                            <el-table-column
                            prop="address"
                            label="抽取人数"
                             align="center"
                              
                            >
                            <el-input v-model="input" placeholder="请输入内容"></el-input>

                            </el-table-column>
                            <el-table-column
                        fixed="right"
                        label="操作"
                        width="80"
                        align="center"
                        >
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small" style="color: #F56C6C;">删除</el-button>
                            
                        </template>
                        </el-table-column>
                        </el-table>
                        <div class="add-area">
                            <i class="el-icon-plus" style="color: #5065F6;"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-right">

<div class="leftss-header right-header">
    <div>邀请函模板</div>
    <div> <el-button size="small" style="color:#5165f7;">
            <i class="el-icon-download"></i>导出邀请函</el-button>
    </div>
</div>
<div class="right-area">
    <div class="invitation-container">
<div class="company-name">贵州数通达科技有限公司</div>
<div class="invitation-title">专家邀请函</div>

<div class="salutation">
尊敬的 
<span class="underline">{{ expertInfo.title || '______' }}</span>

先生/女士:
</div>

<div class="content">
<p>您好!</p>
<p>我们诚挚地邀请您担任本次项目的评审专家。您的专业知识和经验将为我们提供宝贵的指导和建议。</p>
<p>评审项目信息如下:</p>

<table class="project-info">
    <tr>
        <td>项目名称</td>
        <td>
            <span v-if="!isEditing">{{ expertInfo.projectName || '这是一个项目名称' }}</span>
            <input v-else v-model="expertInfo.projectName" class="input-field" placeholder="请输入项目名称">
        </td>
    </tr>
    <tr>
        <td>评审时间</td>
        <td>
            <span v-if="!isEditing">{{ expertInfo.reviewTime || '2023-11-14 14:30' }}</span>
            <input v-else v-model="expertInfo.reviewTime" class="input-field" placeholder="请输入评审时间">
        </td>
    </tr>
    <tr>
        <td>评审地点</td>
        <td>
            <span v-if="!isEditing">{{ expertInfo.reviewLocation || '评审地点描述' }}</span>
            <input v-else v-model="expertInfo.reviewLocation" class="input-field" placeholder="请输入评审地点">
        </td>
    </tr>
    <tr>
        <td>评审内容</td>
        <td>
            <span v-if="!isEditing">{{ expertInfo.reviewContent || '评审内容描述' }}</span>
            <input v-else v-model="expertInfo.reviewContent" class="input-field" placeholder="请输入评审内容">
        </td>
    </tr>
</table>

<p>为确保评审工作的顺利进行，请您在收到邀请函后尽快确认是否能够参加评审，并告知我们您的行程安排，以便我们为您做好相应的接待工作。</p>
</div>




</div>
</div>

</div>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            isEditing: false,
                expertInfo: {
                    title: '',
                    name: '',
                    projectName: '',
                    reviewTime: '',
                    reviewLocation: '',
                    reviewContent: ''
                },
                currentDate: '',


            value1:"",
            yuanright: 0,
            listDate:[
                {
                    value1:"",
                    value2:"",
                    value3:"",
                },
                {
                    value1:"",
                    value2:"",
                    value3:"",
                }
            ],
            tables: [
                {
                    name: '有效'
                },
                {
                    name: '无效'
                },
            ],
            shu: 0,
            active: 0,
            lastActiveKey: 'headerActiveIndex',
            tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },]

 
        }
    },

    created() {

    },

    watch: {

    },

    methods: {
        //立即抽取
        btnLiji(){
            //this.$router.push('/extractdetail')
             window.open('#/extractdetail', '_blank');
        },
        //切换时效性
        btnYuan(e) {
            this.yuanright = e
        },
        //编辑跳转
        btnFan() {
            this.$router.push('/technology')
        },
       

    }
}
</script>
<style>
.el-input__inner{
    border: none !important;
}
.el-tooltip__popper.is-dark {
    color: #F04B4B !important;
    background: #FCF1EB !important;
}

.el-tooltip__popper .popper__arrow {
    border-top-color: #FCF1EB !important;
    /* 上方箭头 */
}

.el-tooltip__popper .popper__arrow::after {
    border-top-color: #FCF1EB !important;
}

/* 其他方向的箭头（按需添加） */
.el-tooltip__popper[x-placement^='bottom'] .popper__arrow {
    border-bottom-color: #FCF1EB !important;
}

.el-tooltip__popper[x-placement^='left'] .popper__arrow {
    border-left-color: #FCF1EB !important;
}

.el-tooltip__popper[x-placement^='right'] .popper__arrow {
    border-right-color: #FCF1EB !important;
}
</style>


<style scoped>

.invitation-container {
            background-color: white;
            width: 100%;
            max-width: 800px;
            position: relative;
            margin-top: 30px;
        }
        
        .company-name {
            text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    letter-spacing: 5px;
    border-bottom: 1px solid;
    width: 63%;
    line-height: 46px;
   
    margin: 0 auto
        }
        
        .invitation-title {
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 40px;
            letter-spacing: 8px;
            margin-top: 14px;
        }
        
        .salutation {
            margin-bottom: 20px;
        }
        
        .content {
            line-height: 2;
            margin-bottom: 30px;
            text-align: justify;
        }
        
        .project-info {
            width: 100%;
            border-collapse: collapse;
            margin: 30px 0;
        }
        
        .project-info td {
            padding: 12px 10px;
            border: 1px solid #ddd;
        }
        
        .project-info td:first-child {
            width: 20%;
            background-color: #f9f9f9;
            font-weight: bold;
        }
        
        .input-field {
            width: 100%;
            border: none;
            outline: none;
            padding: 5px;
            font-size: 16px;
        }
        
        .underline {
            display: inline-block;
            border-bottom: 1px solid #000;
            min-width: 100px;
            margin: 0 5px;
        }
        
        .footer {
            margin-top: 40px;
            line-height: 2;
        }
        
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        
        .btn {
            padding: 10px 25px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 4px;
            transition: all 0.3s;
        }
        
        .btn-confirm {
            background-color: #2c3e50;
            color: white;
        }
        
        .btn-confirm:hover {
            background-color: #34495e;
        }
        
        .btn-edit {
            background-color: #ecf0f1;
            color: #2c3e50;
        }
        
        .btn-edit:hover {
            background-color: #dde4e6;
        }
        
        .signature {
            text-align: right;
            margin-top: 40px;
        }
        
        .date {
            text-align: right;
            margin-top: 10px;
        }
        
        @media (max-width: 600px) {
            .invitation-container {
                padding: 20px;
            }
            
            .company-name {
                font-size: 20px;
            }
            
            .invitation-title {
                font-size: 22px;
            }
            
            .project-info td:first-child {
                width: 30%;
            }

        }






.jian{
    width: 20px;
    height: 50px;
    background: #FCF1EB;
}
.add-area{
    width: 42px;
    height: 26px;
    background: #EDEFFE;
    position: relative;
    left: 10px;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
}
.table-right{
    width: 68%;
 height: 40px;
 border: 1px solid #EDEFFE;
}
.table-left{
 width: 24%;
 height: 40px;
 border: 1px solid #DCE0FD;
 border-right: none;
 background: #EDEFFE;
 font-size: 14px;
 line-height: 40px;
 text-align: center;
}
.tables{
    display: flex;
    margin-top: -1px;
}
:deep .el-tooltip__popper.is-dark {
    color: #F04B4B !important;
}

.right-area {
    width: 90%;
    margin: 0 auto;
    height: 80vh;
    background: #f8f8f8;
}

.right-header {
    width: 90%;
    margin: 0 auto;
}

.ths {
    text-align: center;
    background: #DCE0FD !important;
    color: #363636;
}

.tou {
    height: 30px;
    line-height: 30px;
    color: #606266;
    text-align: center;
}

.financial-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.financial-table th,
.financial-table td {
    border: 1px solid #ddd;
    padding: 8px 7px;
    text-align: center;
}

.financial-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.financial-table .nested-label {
   
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}





.content-table {
   
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
}
.content-table2 {
    width: 84%;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
    left: -28px;
}

/* 默认情况（有效）左边圆角 */
.left-radius {
    border-bottom-left-radius: 16px !important;
    border-top-left-radius: 16px !important;
}

/* 无效情况右边圆角 */
.right-radius {
    border-bottom-right-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.yuan-left {
    flex: 1;
    text-align: center;
    line-height: 30px;
    background: #f8f8f8;
    /* border-bottom-left-radius: 16px;
    border-top-left-radius: 16px; */
    cursor: pointer;
}

.yuanright {
    flex: 1;
    background: #5165f7;
    color: white;

    /* border-bottom-right-radius: 16px;
    border-top-right-radius: 16px;  */
    text-align: center;
    line-height: 30px;
    cursor: pointer;

}

.youxiaos {
    position: relative;
    top: 6px;
    left: -12px;
    cursor: pointer;
}

/* 修改.yuan的样式，移除外层圆角 */
.yuan {
    width: 100px;
    height: 30px;
    background: white;
    display: flex;
    font-size: 14px;
    overflow: hidden;
    /* 关键：确保内部div的圆角效果不被截断 */
}

/* 默认状态下两个按钮的外侧圆角 */
.yuan-left:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.yuan-left:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* 选中状态样式 */
.yuanright {
    background: #5165f7;
    color: white;
}

/* 选中"有效"时的样式 */
.yuan-left.left-radius {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 选中"无效"时的样式 */
.yuan-left.right-radius {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}


.times {
    position: relative;
    top: 3px;
    font-size: 12px;
    color: #606266;
}
.times2 {
    padding-left: 5%;
    font-size: 12px;
    color: #606266;
}
.youxiao {
    color: #5B5D76;
    font-size: 13px;
}

.table-header {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}
.table-header2 {

    margin-top: 14px;
}
.table-area {
    margin-top: 12px;
    font-size: 15px;
}

.leftss-header {
    display: flex;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #3333;
    font-weight: bold;
    justify-content: space-between;
}

.leftss {
    width: 90%;
    margin: 0 auto;
}

.content-lefts {
    background: white;
    height: 100%;
    width: 100%;
}

.content-left {
    flex: 1;
    padding-right: 12px;
    height: 100%;
}

.content-right {
    width: 600px;
    height: 100%;
    background: white;
}

.contents {
    width: 100%;
    height: 92vh;
    background: #f8f8f8;
    display: flex;
    margin-top: 6px;
    /* flex-wrap: wrap */
}


.shu {
    width: 3px;
    height: 18px;
    background: #5165f7;
    position: relative;
    display: inline-block;
    top: 7px;
}

::v-deep .el-table thead {
    background-color: #DCE0FD !important;
    color: #363636 !important;
    font-weight: bold;
}

::v-deep .el-table__header th {
    background-color: #DCE0FD !important;
    color: #363636 !important;
    font-weight: bold;
}

.shu{
  width: 10px;
    height: 20px;
    background: #5165f7;
    position: relative;
    top: -24px;
    left: 40%;
}
.active{
    color: #5165f7 !important;
}
.rights-names{
    margin-left: 32px;
    cursor: pointer;
}
.rights{
    width: 96%;
    height: 100%;
    margin: 0 auto;
    line-height: 94px;
    display: flex;
    position: relative;
    left: -27px;
}
.name-title{
    position: relative;
    top: -6px;
    font-weight: bold;
}
.right-name{
    font-size: 12px;
}
.img-right{
    font-size: 14px;
    position: relative;
    top: 40px;
    height: 40px;
    margin-left: 12px;
}
.imgs{
    width: 45px;
    height: 46px;
    background: #5165f7;
    border-radius: 6px;
    position: relative;
    top: 26px;
    margin-left: 24px
}
.headers-right{
    flex: 1;
    background: white;
  
}
.headers-left{
    width: 222px;
    height: 100%;
    display: flex;
    background: white;
    border-right: 1px solid #EDEFFE;
}
.headers{
  width: 100%;
    height: 90px;
    display: flex
;
    border-bottom: 1px solid #EDEFFE;
}

.adds{
    width: 30px;
    height: 20px;
    background: #DCE0FD;
    color: #5065F6;
    position: relative;
    left: 54px;
    font-size: 14px;
    text-align: center;
    line-height: 18px;
    cursor: pointer;
}
.lies:hover .closes {
    opacity: 1;; /* 鼠标滑过 .lies 时才显示 */
}
.closes{
    background: #FCF1EB;
    width: 20px;
    height: 30px;
    position: relative;
    top: 5px;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    color: #F04B4B;
    font-size: 20px;
    opacity: 0;
}
.liee{
    background-color: #DCE0FD;
    color: #17192C;
    text-align:center
}
.lie{
    border: 1px solid #3333;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-right: none;
    border: none;
    border-bottom: 1px solid #EDEFFE
}
.lies{
display: flex;
/* border-bottom: 1px solid #EDEFFE */
}
.zhuyi{
   color: #5165f7;
    font-size: 14px;
    text-align: center;
    position: relative;
    top: -12px;
}
</style>