<style>
    .page_visaList ._vl_nav li{float: left;font-size: 12px;color: #333333;padding: 16px 20px;cursor: pointer;display: flex;align-items: center;border-bottom: 3px solid white}
    .page_visaList ._vl_nav li img{width: 40px;height: 40px;display: inline-block;margin-right: 10px}
    .page_visaList ._vl_nav li._active{border-color: #E95252}
    .page_visaList .normalBtn{width: auto;}
    .page_visaList .icon-bianji-smal{color: #FF9797}
    .page_visaList ._vl_content{width: 100%;padding: 30px 20px;overflow: auto}
    .page_visaList .query-box{border: none}
    .page_visaList ._vl_content ._vlc_list{height: 60px;margin-bottom: 10px;background-color: #FFFFFF;width: 100%;min-width: 1580px;}
    .page_visaList ._vl_content ._vlc_list:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
    .page_visaList ._vlc_list input[type="checkbox"]{margin: 0 30px}
    .page_visaList ._vlc_list>div{float: left;height: 100%;display: flex;align-items: center;text-align: center}
    .page_visaList ._radius {display: inline-block;width: 24px;height: 24px;background-color: #FF793E;color: #fff;border-radius: 50%;text-align: center;line-height: 22px;font-size: 12px;margin-right: 10px;}
    .page_visaList ._radius._tuan{background-color: #3EABFF}
    .page_visaList ._f_b3{font-size: 14px;color: #333333}
    .page_visaList ._cu{text-decoration: underline;}
    .page_visaList ._cu:hover{color: #E95252;cursor: pointer;text-decoration: underline}
    .page_visaList ._br{border-right: 1px dashed #D7D7D7;}
    .page_visaList ._pr30{padding-right: 30px}
    .page_visaList ._pl30{padding-left: 30px}
    .page_visaList ._square{height: 46px;width: 24px;background-color: #3FB9F8;border:2px solid #7FD3FF;border-radius:4px;display: inline-block;font-size: 12px;padding-top: 5px;margin-right: 15px;color: white}
    .page_visaList .ta_l{text-align: left !important;}
    .page_visaList ._ml20{margin-left: 20px}
    .page_visaList ._font12{font-size: 12px}
    .page_visaList ._mr_20{margin-right: 20px}
    .page_visaList ._vlc_info span{color: #666666;display: inline-block;width: 55px;text-align: right !important}
    .page_visaList .Operating{width: 250px;}
    .page_visaList .Operating i{width: 30px;height: 30px;display: inline-block;color: white !important;border-radius: 50%;text-align: center;line-height: 30px;margin-right: 10px;cursor: pointer;}
    .page_visaList .Operating i:nth-child(1){background-color: #00B1E4}
    .page_visaList .Operating i:nth-child(2){background-color: #28CACC}
    .page_visaList .Operating i:nth-child(3){background-color: #9E8DE3}
    .page_visaList .Operating i:nth-child(4){background-color: #63C76A}
    .page_visaList .Operating i:nth-child(5){background-color: rgb(255, 69, 0)}
    .page_visaList .Operating i:nth-child(6){background-color: rgb(0, 69, 0)}
    .page_visaList .Operating i:nth-child(1):hover{background-color: #00C6FF}
    .page_visaList .Operating i:nth-child(2):hover{background-color: #2EDEE0}
    .page_visaList .Operating i:nth-child(3):hover{background-color: #AD9AF6}
    .page_visaList .Operating i:nth-child(4):hover{background-color: #6DD875}
    .page_visaList .Operating i:nth-child(5):hover{background-color: rgb(253, 110, 56)}
    .page_visaList .Operating i:nth-child(1):active{background-color: #00B5E9}
    .page_visaList .Operating i:nth-child(2):active{background-color: #25C1C3}
    .page_visaList .Operating i:nth-child(3):active{background-color: #9887D9}
    .page_visaList .Operating i:nth-child(4):active{background-color: #5EBB64}
    .page_visaList .Operating i:nth-child(5):active{background-color: rgb(253, 110, 56)}
    .page_visaList .icon-img_gwgl{background-color: #9887D9}
    .Operating .icon-lists{background-color: #6DD875}
    .page_visaList .icon-img_kqmrtj{background-color: #FFA037}
    .page_visaList ._scrollbar::-webkit-scrollbar{width: 4px;height:8px;}
    .page_visaList ._scrollbar::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
    .page_visaList ._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
    .page_visaList .el-pagination{border:none}
    .visaList_tripDetails{padding: 0;box-shadow: 0px 1px 3px 0px #dedede;margin-left: 235px}
    .visaList_tripDetails .popper__arrow::after{border-bottom-color: #EDEDED !important;}
    .visaList_tripDetails table{padding: 10px 0 0 20px;background-color: #EDEDED;border-collapse: collapse;border: 1px solid #D2D2D2;font-size: 12px;}
    .visaList_tripDetails table th{background-color: #EDEDED;padding: 5px;}
    .visaList_tripDetails table td{background-color: #FFFFFF;padding: 9px 15px;color: #333333;border: 1px solid #D2D2D2}
    .visaList_tripDetails table ._color_666{color: #666666;}
    .visaList_tripDetails table tr._color_666 th{padding: 9px 15px;}
    .visaList_tripDetails ._form{text-decoration: underline;cursor: pointer;}
    .page_visaList ._OrderRemarks{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 97px;}
    .page_visaList ._OrderRemarks .iconfont.el-tooltip.item{font-size: 12px}
    .page_visaList ._btn_group button{margin-left: 10px}
</style>
<template>
    <div class="page_visaList" v-loading="loading2" :element-loading-text="$t('visaT.Download')" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.1)">
        <div class="query-box" style="padding:0px;">
            <ul>
                 <li>
                    <span>  
                        <em>{{$t('visa.v_creatDate')}}</em>
                        <el-date-picker clearable class="w150"
                                @change="dataDui()"
                                v-model="msg.StartTime"
                                type="date"
                                :picker-options="beforeCheck"
                                value-format="yyyy-MM-dd"
                                :placeholder="$t('admin.admin_choDate')">
                        </el-date-picker><span class="_ln">-</span><el-date-picker clearable class="w150"
                                v-model="msg.EndTime"
                                type="date"
                                @change="dataDui()"
                                :picker-options="afterCheck"
                                value-format="yyyy-MM-dd"
                                :placeholder="$t('admin.admin_choDate')">
                        </el-date-picker>
                    </span>
                </li>
                <li class="_btn_group">
                    <button class="hollowFixedBtn" @click="getList()">{{$t('pub.searchBtn')}}</button>
                    <button class="hollowFixedBtn" @click="downLoadAllIdentity()">{{$t('visa.v_daochu')}}</button>
                </li>
            </ul>
        </div>
        <div class="_vl_content _scrollbar" v-loading="loading">
            <div class="_vlc_list" v-for="(item,index) in DataList"  >
                <div>
                    <input type="checkbox" :disabled='item.SignStatus!=1' v-model="checkList" :value="item.Id">
                </div>
                <div class="_br _pr30 w160">
                    <span class="_radius" v-if="item.SignStatus==1">{{$t('visa.v_dan')}}</span>
                    <span class="_radius _tuan" v-if="item.SignStatus==2">{{$t('visa.v_tuan')}}</span>
                    <el-popover 
                        popper-class="visaList_tripDetails"                              
                        width="1200"
                        trigger="click">
                        <div class="">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="popTable">
                                <tr class="_color_666">
                                    <th>{{$t('visa.v_paihao')}}</th>
                                    <th>{{$t('system.query_name')}}</th>
                                    <th>{{$t('system.table_sex')}}</th>
                                    <th>{{$t('system.table_Passport')}}</th>
                                    <th>{{$t('visa.v_jtjzd')}}</th>
                                    <th>{{$t('visa.v_shenqingbiao')}}</th> 
                                    <th>{{$t('system.table_operation')}}</th>
                                </tr>
                                <tr v-for="(son,sIndex) in item.PeopleList">
                                    <td>{{son.Id}}</td>
                                    <td>{{son.Name}}</td>
                                    <td>{{son.Sex}}</td>
                                    <td>{{son.PassportNo}}</td>
                                    <td>{{son.Address}}</td>
                                    <td class="_form" @click="item.SignStatus==2?goUrl('VisaPersonalFormTuan',son.Id,'visaList'):goUrl('VisaPersonalForm',son.Id)">{{$t('visaT.rbqzsqb')}}</td>
                                    <td>
                                        <img src="../../assets/img/fail@2x.png" v-if="son.ApplyStatus==2" alt="">
                                        <img src="../../assets/img/pass@2x.png" v-if="son.ApplyStatus==1" alt="">
                                        <button class="normalBtn" type="button" @click="operationVisa($t('visa.v_jujue'),son.Id,2)" v-if="son.ApplyStatus==0">{{$t('visa.v_jujue')}}</button>
                                        <button class="normalBtn" type="button" @click="operationVisa($t('visa.v_tongguo'),son.Id,1)" v-if="son.ApplyStatus==0">{{$t('visa.v_tongguo')}}</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    <span slot="reference" class="_f_b3 _cu w95">{{item.NameRemark}}</span>
                    </el-popover>  
                    
                </div>
                <div class="_br _pr30 _pl30">
                    <span class="_square">{{$t('visa.v_rujing')}}</span>
                    <div class="ta_l w210">
                        <p class="_f_b3">{{item.EnterCountryTime}}</p>
                        <el-tooltip class="item" effect="dark" :content="item.DepartCity+'->'+item.ArriveAirName+'('+item.DepartFlight+')'" placement="top-start" popper-class="max-w250">
                            <p class="_f_b3 max_w250_over">{{item.DepartCity}} -> {{item.ArriveAirName}}({{item.DepartFlight}})</p>
                        </el-tooltip>
                    </div>
                    <span class="_square _ml20">{{$t('visa.v_chujing')}}</span>
                    <div class="ta_l w210">
                        <p class="_f_b3">{{item.LeaveCountryTime}}</p>
                        <el-tooltip class="item" effect="dark" :content="item.LeaveAirName+'->'+item.BackCity+'('+item.BackFilght+')'" placement="top-start" popper-class="max-w250">
                            <p class="_f_b3 max_w250_over">{{item.LeaveAirName}}->{{item.BackCity}}({{item.BackFilght}})</p>
                        </el-tooltip>
                    </div>
                </div>
                <div class="_br _pr30 _pl30 _font12 ta_l _vlc_info w305">
                    <div class="_mr_20">
                        <p class="_OrderRemarks" style="width: 130px;"><span>{{$t('visa.v_tuanhao')}}</span> 
                            <el-tooltip class="item" effect="dark" :content="`${item.OrderId}`" placement="top-start" popper-class="max-w250">
                                <i class="iconfont"> {{item.OrderId}}</i>
                            </el-tooltip> 
                        </p>
                        <p class="_OrderRemarks" style="width: 130px;"><span></span>
                            <el-tooltip class="item" effect="dark" :content="item.TCNUM" placement="top-start" popper-class="max-w250">
                                <i class="iconfont"> {{item.TCNUM}}</i>
                            </el-tooltip> 
                        </p>     
                    </div>
                    <div v-if="item.SignStatus==1">
                        <p class="_OrderRemarks"><span>{{$t('hotel.hotel_remark')}} </span> 
                            <el-tooltip class="item" effect="dark" :content="item.OrderRemarks" placement="top-start" popper-class="max-w250">
                                <i class="iconfont">{{item.OrderRemarks}}</i>
                            </el-tooltip>
                        </p>                           
                    </div>
                </div>
                <div class="_br _pr30 _pl30 _font12 ta_l Operating">
                    <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')"   placement="top-start" popper-class="max-w250">
                        <i class="iconfont icon-bianji-smal" @click="goUrlT('addVisaNew',CountryType,item.Id,'','visaList')"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('visaT.complete')" placement="top-start" popper-class="max-w250">
                        <i class="iconfont icon-wancheng" @click="completeVisa(index)"></i>
                    </el-tooltip>
                    <!-- <el-tooltip class="item" effect="dark" content="复制申请人信息" v-if="item.SignStatus==1" placement="top-start" popper-class="max-w250">
                        <i class="iconfont icon-img_tongshang" @click="goUrlT('addVisa',CountryType,item.Id,true)"></i>
                    </el-tooltip> -->
                    <el-tooltip class="item" effect="dark" :content="$t('visaT.qzzlxz')"  v-if="item.SignStatus==1" placement="top-start" popper-class="max-w250">
                        <i class="iconfont icon-img_download" @click="downLoadAllInfo(item.Id)"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('visaT.jbzlxz')"  v-if="item.SignStatus==2" placement="top-start" popper-class="max-w250">
                        <i class="iconfont icon-img_gwgl" @click="downLoadTuanAllInfo(item.Id,'dmc_get_DownLoadGroupSignInformation')"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('visaT.sqsxz')"  v-if="item.SignStatus==2" placement="top-start" popper-class="max-w250">
                        <i class="iconfont icon-img_kqmrtj" @click="downLoadTuanAllInfo(item.Id,'dmc_get_DownLoadGuestApplicationForm')"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('visaT.tqmdxz')"  v-if="item.SignStatus==2" placement="top-start" popper-class="max-w250">
                        <i class="iconfont icon-lists" @click="downLoadTuanAllInfo(item.Id,'dmc_get_DownLoadTravelGuestExcel')"></i>
                    </el-tooltip>
                    <!-- <el-tooltip class="item" effect="dark" content="下载航班信息" placement="top-start" popper-class="max-w250">
                        <i class="iconfont icon-feiji" @click="downLoadFlyInfo(item.Id)"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="下载申请人名单" placement="top-start" popper-class="max-w250">
                        <i class="iconfont icon-lists" @click="downLoadFlyPeople(item.Id)"></i>
                    </el-tooltip> -->
                </div>
                <div class="_pr30 _pl30 _font12 ta_l">
                    <div>
                        <p>{{item.CreateByName}}</p>
                        <p>{{item.CreateTime}}</p>
                    </div>
                </div>
            </div>
            <div class="noData" v-show="noData">
                {{$t('system.content_noData')}}
            </div>
            <el-pagination 
                background
                @current-change="handleCurrentChange" 
                :current-page.sync="currentPage"
                layout="total,prev, pager, next, jumper"
                :page-size=msg.pageSize 
                :total=total>
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:{
                VisaProductId: '0',
                TCID: '0',
                pageIndex:1,
                pageSize:7,
                StartTime:'',
                EndTime:'',
                orderId:'',
                IsSaveFile:'',
                search:'',
                CountryType:1,
                PlanStatus:0,
                SignStatus:0,
                VisaPlanId: '0'
            },
            actieID:-1,
            CountryType:1,
            DataList:[],
            checkList:[],
            VisaManagementList:[],
            total:0,
            currentPage: 1,
            noData:false,
            loading:true,
            loading2:false,
            beforeCheck:{
                // disabledDate: (time) => {
                //     let endTime = new Date(this.msg.EndTime);
                //     return endTime.getTime()<time.getTime();
                // }
            },
            afterCheck:{
                // disabledDate: (time) => {
                //     let startTime = new Date(this.msg.StartTime);
                //     return startTime.getTime()>time.getTime()
                // }
            },
        }
    },
    methods:{
        downLoadAllInfo(id){  // 下载全部资料
            this.loading2 = true
            this.apipost('dmc_get_VisaMergingDownload',{VisaPlanId:id},res=>{
                if(res.data.resultCode==1){
                    const link = document.createElement('a');
                    let _loadUrl=this.domainManager().DomainUrl
                    let str = window.location.href
                    link.href = _loadUrl+res.data.data
                    document.body.appendChild(link);
                    link.click();
                    this.$message.success(this.$t('visaT.dccg'))
                this.loading2 = false
                }else{
                    this.loading2 = false
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        downLoadTuanAllInfo(id,cmd){
            this.loading2 = true
            this.apipost(cmd,{VisaPlanId:id},res=>{
                if(res.data.resultCode==1){
                    const link = document.createElement('a');
                    let _loadUrl=this.domainManager().DomainUrl
                    let str = window.location.href
                    link.href = _loadUrl+res.data.data
                    document.body.appendChild(link);
                    link.click();
                    this.$message.success(this.$t('visaT.dccg'))
                this.loading2 = false
                }else{
                    this.loading2 = false
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        dataDui(){
            if(this.msg.StartTime>this.msg.EndTime){
                this.$message.error(this.$t('visaT.titleT'))
                this.msg.EndTime=''
            }
        },
        downLoadFlyPeople(id){
            this.loading2 = true
            this.apipost('dmc_post_DownLoadWordTravelPeople',{VisaPlanId:id},res=>{
                if(res.data.resultCode==1){
                    const link = document.createElement('a');
                    let _loadUrl=this.domainManager().DomainUrl
                    let str = window.location.href
                    link.href = _loadUrl+res.data.data
                    document.body.appendChild(link);
                    link.click();
                    this.$message.success(this.$t('visaT.dccg'))
                this.loading2 = false
                }else{
                    this.loading2 = false
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        downLoadFlyInfo(id){ // 下载航班信息
            this.loading2 = true
            this.apipost('dmc_post_GetWordFlightPlanList',{Id:id},res=>{
                if(res.data.resultCode==1){
                    const link = document.createElement('a');
                    let _loadUrl=this.domainManager().DomainUrl
                    let str = window.location.href
                    link.href = _loadUrl+res.data.data
                    document.body.appendChild(link);
                    link.click();
                    this.$message.success(this.$t('visaT.dccg'))
                this.loading2 = false
                }else{
                    this.loading2 = false
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        downLoadAllIdentity(){  // 批量下载身元信息
            this.loading2 = true
            if(this.checkList.length>0){
                let id  = this.checkList.join(",")
                this.apipost('dmc_post_BatchDownLoadWordTravelAndPeople',{VisaPlanIds:id},res=>{
                    if(res.data.resultCode==1){
                        const link = document.createElement('a');
                        let _loadUrl=this.domainManager().DomainUrl
                        let str = window.location.href
                        link.href = _loadUrl+res.data.data
                        document.body.appendChild(link);
                        link.click();
                        this.$message.success(this.$t('visaT.dccg'))
                    this.loading2 = false
                }else{
                    this.loading2 = false
                    this.$message.error(res.data.message)
                }
                },err=>{})
            }else{
                 this.loading2 = false
                this.$message.error(this.$t('visaT.titleTh'))
            }
        },
        downLoadIdentity(id){ // 下载身元信息
            this.loading2 = true
            this.apipost('dmc_post_DownLoadWordTravelAndPeople',{VisaPlanId:id},res=>{
                if(res.data.resultCode==1){
                    const link = document.createElement('a');
                    let _loadUrl=this.domainManager().DomainUrl
                    let str = window.location.href
                    link.href = _loadUrl+res.data.data
                    document.body.appendChild(link);
                    link.click();
                    this.$message.success(this.$t('visaT.dccg'))
                    this.loading2 = false
                }else{
                    this.loading2 = false
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        completeVisa(i){
            if(!this.DataList[i].IsDdispose){
                this.$message.error(this.$t('visaT.titlts'))
                return
            }
            this.$confirm(this.$t('visaT.qrcpomplete'), this.$t('tips.tips'), {
                confirmButtonText: this.$t('pub.sureBtn'),
                cancelButtonText: this.$t('pub.cancelBtn'),
                type: 'warning'
            }).then(() => {    
                let msg ={
                    Id:this.DataList[i].Id,
                    PlanStatus:1
                }
                this.apipost('dmc_post_visa_UpdateVisaPlanInfo',msg,res=>{
                    if(res.data.resultCode==1){
                        this.$message.success(res.data.message);   
                        this.getList()   
                    }else{
                        this.$message.error(res.data.message)
                    }
                },err=>{})
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('OrderList.orderStatus.cancel'),
                });
            });   
        },
        operationVisa(text,Id,ApplyStatus){  // 申请人签证审核
            this.$confirm(text+this.$t('visa.titleF'), this.$t('tips.tips'), {
                confirmButtonText: this.$t('pub.sureBtn'),
                cancelButtonText: this.$t('pub.cancelBtn'),
                type: 'warning'
            }).then(() => {    
                let msg ={
                    Id:Id,
                    ApplyStatus:ApplyStatus
                }
                this.apipost('dmc_post_visa_UpdateVisaApplyPeopleInfo',msg,res=>{
                    if(res.data.resultCode==1){
                        this.$message.success(res.data.message);   
                        this.getList()   
                    }else{
                        this.$message.error(res.data.message)
                        this.getList()
                    }
                },err=>{})
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('hotel.hotel_HasBeenCancelled')+text
                });
            });   
        },
        addVisa(path,CountryType,num,copy,url){
            if(this.actieID==1){
                this.goUrlT(path,CountryType,num,copy,url)
            }else{
                this.$message.info(this.$t('visaT.titlef'));      
            }
        },
       getList(){ // 获取列表数据
            this.loading = true;
            this.apipost('dmc_get_visa_GetPageList',this.msg,res=>{
                if(res.data.resultCode==1){
                    this.loading = false;
                    if(res.data.data.count>0){
                        this.total = res.data.data.count;
                        this.DataList = res.data.data.pageData
                        this.noData =false;   
                    }else{
                        this.total = res.data.data.count;
                        this.noData =true; 
                        this.DataList = [];    
                    }
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
       },
       getVisaManagementList(){  //  获取签证管理
            this.apipost('dmc_get_visa_GetVisaManagementList',{Status:0,BranchId:-1,SignStatus:0},res=>{
                if(res.data.resultCode==1){
                    this.VisaManagementList = res.data.data;
                    if(this.VisaManagementList.length>0){
                        this.actieID = this.VisaManagementList[0].Id;
                    }
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
       },
       handleCurrentChange(val){
            this.msg.pageIndex=val;
            this.getList()
        },
        resetPageIndex(){
            this.msg.pageIndex=1;
            this.currentPage = 1
        },
        goUrl(path,id,url){
            let routeData = this.$router.resolve({name: path, query: {data: id,url:url}});
            window.open(routeData.href, '_blank');
        },
        goUrlT(path,Cid,id,copy,url){
            this.$router.push({ name: path,query:{"id":id,"Cid":Cid,'copy':copy,'url':url} }) 
        }
    },mounted(){
        this.msg.VisaProductId = this.$route.query.id===undefined?'0':this.$route.query.id
        this.msg.TCID = this.$route.query.tcid===undefined?'0':this.$route.query.tcid
        this.msg.VisaPlanId = this.$route.query.visaPlanId===undefined?'0':this.$route.query.visaPlanId;
        this.msg.VisaPlanIdStr = this.$route.query.VisaPlanIdStr===undefined?'0':this.$route.query.VisaPlanIdStr;
        
        this.getList()
        this.getVisaManagementList()
    }
}
</script>
