<style>
    .HotelTeamPlan .el-input--prefix .el-input__inner{padding-left: 30px;}
    .HotelTeamPlan .query-box ul .el-input{width: 150px;}
    .HotelTeamPlan .HotelTeamPlan_list{padding: 20px 0;min-height: 500px}
    .HotelTeamPlan .HotelTeamPlan_list>li{float: left;height: 360px;width: 300px;margin: 0 15px;margin-bottom:20px;overflow: hidden;background: rgba(255,255,255,1);-webkit-box-shadow: 0px 0px 20px rgba(191,191,191,1);box-shadow: 0px 0px 20px rgba(191,191,191,1);}
    .HotelTeamPlan .HotelTeamPlan_list>li>div{height: 180px;position: relative;}
    .HotelTeamPlan .HotelTeamPlan_list>li .hl_img{width: 100%;height: 100%;filter: blur(3px);position: absolute}
    .hl_img_gray{width: 100%;height: 100%;filter: blur(3px);background-color: rgba(51, 51, 51, 0.77);position: absolute;z-index: 2}
    .HotelTeamPlan .HotelTeamPlan_list>li .hl_img.hl_img_g{filter: grayscale(100%) blur(3px);}
    .HotelTeamPlan .hl_top{color: #FFFFFF;}
    .HotelTeamPlan .hl_tit{width: 230px;font-size: 14px;position: absolute;left:10px;top: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-decoration: underline;cursor: pointer;}
    .HotelTeamPlan .hl_top .iconfont{position: absolute;right:10px;top: 14px;font-size: 14px;cursor: pointer;}
    .HotelTeamPlan .hl_radius{width: 80px;height: 80px;background-color: #FFFFFF;border:solid 4px rgba(193, 193, 193, 0.46);border-radius: 50%;position: absolute;left: 50%;top: 50%; transform: translate(-50%, -50%);color: #E95252;text-align: center;font-size: 12px;}
    .HotelTeamPlan .hl_radius .hlt_tit{padding-top: 7px;}
    .HotelTeamPlan .hl_radius .hlt_num{font-size: 36px}
    .HotelTeamPlan .hl_row{width:80%;height: 30px;background:rgba(23,21,26,0.2);position: absolute;bottom: 0;left: 0;display: flex;font-size: 12px;align-items: center;justify-content: space-between;padding: 0 10%}
    .HotelTeamPlan .hl_row>li{list-style:disc;}
    .HotelTeamPlan .hl_bt{overflow-y: auto;}
    .HotelTeamPlan .hl_bt ul li{padding: 10px 9px;border-bottom:1px solid rgba(220,223,230,1);}
    .HotelTeamPlan .hl_bt ul li p{font-size: 14px;}
    .HotelTeamPlan .hl_bt ul li .iconfont{color: #999999;font-size:12px;}
    .HotelTeamPlan .hl_bt ul li span{color:#333333;font-size:12px;display: inline-block;padding-left: 5px; }
    .HotelTeamPlan .hlb_item{display: flex;justify-content: space-between;align-items: center;padding-top: 5px;}
    .HotelTeamPlan .max-w55,.max-w120,.max-w20{max-width: 55px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .HotelTeamPlan .max-w120{max-width: 120px;}
    .HotelTeamPlan .max-w20{max-width: 50px;}
    .HotelTeamPlan .icon-img_bianji_small::before{color: #E95252}
    .HotelTeamPlan .hlb_item .iconfont::before{position: relative;top: -3px;}
    .HotelTeamPlan .hl_bt::-webkit-scrollbar,.flexParent::-webkit-scrollbar{width: 4px;height: 1px;}
    .HotelTeamPlan .hl_bt::-webkit-scrollbar-thumb,.flexParent::-webkit-scrollbar-thumb {border-radius: 4px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}  
    .HotelTeamPlan .hl_bt::-webkit-scrollbar-thumb,.flexParent::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
    .HotelTeamPlan .HotelTeamPlan_info{padding: 0 65px;}
    .HotelTeamPlan .HotelTeamPlan_info .hl_info{color: #333333;color: 16px}
    .HotelTeamPlan .HotelTeamPlan_info .hl_info span{color:#666666;}
    .HotelTeamPlan .hl_flight{padding-top: 20px;}
    .HotelTeamPlan .hl_flight li{display: flex;align-items: center;}
    .HotelTeamPlan ._go{display: inline-block; height: 20px;width: 20px;background-color: #FF7862;color: white;font-size: 14px;text-align: center;line-height: 20px;border-radius: 4px;margin-right: 10px;}
    .HotelTeamPlan ._textB14{color: #333333;font-size: 14px;}
    .HotelTeamPlan ._timeCity{margin: 15px 49px;}
    .HotelTeamPlan ._time{color: #666666;font-size: 18px;font-weight: 700}
    .HotelTeamPlan ._city{color: #FF7862;font-size: 14px;text-align: center}
    .HotelTeamPlan ._line{display: flex;align-items: center;}
    .HotelTeamPlan ._line span{display: inline-block;width: 50px;height: 2px;background-color: #FF7862}
    .HotelTeamPlan ._line span._lr{width: 8px;height: 8px;border-radius: 50%;border: solid 2px #FF7862;background-color:white;}
    .HotelTeamPlan ._flight_num,._flight_name{color: #999999;font-size: 14px;font-weight: 700;margin-left: 15px;}
    .HotelTeamPlan ._flight_name{font-weight: lighter}
    .HotelTeamPlan ._margintop30{margin-top: 30px;}
    .HotelTeamPlan ._details{margin-left: 20px;padding-top: 20px;}
    .HotelTeamPlan ._details>li{border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 15px;padding-left: 40px;padding-top: 15px;}
    .HotelTeamPlan ._d_radius{width: 40px;height:40px;border-radius: 50%;display: inline-block;position: absolute;left: -20px;top: 0px;background-color:#E95252;text-align: center;line-height: 40px;font-size: 18px;color: white;font-weight: 700}
    .HotelTeamPlan ._Itinerary{color:#333333;font-size: 18px;display: flex;align-items: center;}
    .HotelTeamPlan ._Itinerary .iconfont{color: #666666}    
    .HotelTeamPlan ._d_city,._d_time{display: inline-block;padding:0 20px;}
    .HotelTeamPlan ._d_time{padding:0 10px 0 0;}
    .HotelTeamPlan ._d_info{color: #666666;font-size: 14px;line-height: 22px;padding-top: 16px;}
    .HotelTeamPlan ._food_hotel{padding-top: 25px;}
    .HotelTeamPlan ._food_hotel ._food,._hotel{float: left;width: 50%}
    .HotelTeamPlan ._food_hotel .iconfont::before{font-size: 18px;color: #07A767}
    .HotelTeamPlan ._food_hotel ._hotel .iconfont::before{color: #2595ee}
    .HotelTeamPlan ._fh_tit{font-size: 16px}
    .HotelTeamPlan ._fist{padding-bottom: 10px;}
    .max-w250{max-width: 250px;}
    .HotelTeamPlan .hl_bt ul li .iconfont.icon-yiqueren{color: #4bca81}
    .HotelTeamPlan .hl_bt ul li .iconfont.icon-yiquxiao{color: #e95252}
    .HotelTeamPlan ._meidonfxi{text-align: center;padding: 25px 0;}
    .HotelTeamPlan ._meidonfxi .iconfont{display: block;font-size: 50px;color: #d6d6d6;}
    .HotelTeamPlan ._meidonfxi p{color: #999999;font-size: 14px;}
    .hlt_tit_canc{margin-top: 20px;color: #999999}
    .hl_tit,.iconfont,.hl_radius,.hl_row{z-index: 3}
    .HotelTeamPlan .el-dialog__header .el-dialog__title{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;max-width: 80%;margin: 0 auto;}
    .smallTitle{margin:-3px 0 0 10px;}
</style>
<template>
     <div class="flexOne HotelTeamPlan">
       <div class="query-box">
           <ul>
                <li>
                   <span>
                        <em>{{$t('scen.sc_cp')}}</em>
                        <el-select v-model="msg.OutBranchId"  filterable :placeholder="$t('system.table_country')" class="w150">
                            <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
                            <el-option v-for='item in companyList' 
                                :label='item.BName'
                                :value='item.Id'
                                :key='item.Id'>
                            </el-option>
                        </el-select>
                   </span>
                </li>
                <li>
                    <span>
                        <em>{{$t('scen.sc_temName')}}</em>
                        <el-input v-model="msg.Title"  :placeholder="$t('system.ph_in')" class="w150"></el-input>
                    </span>
                </li>  
                <li>
                    <span>
                        <em>{{$t('scen.sc_temID')}}</em>
                        <el-input v-model="msg.TCID" @keyup.native.enter="getList" :placeholder="$t('system.ph_in')" class="w150"></el-input>
                    </span>
                </li>     
                <li>
                    <span>
                        <em>{{$t('scen.sc_op')}}</em>
                        <el-select v-model="msg.CreateBy"  filterable :placeholder="$t('system.ph_in')" class="w150">
                            <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
                            <el-option v-for='item in auditorList' 
                                :label='item.EmName'
                                :value='item.EmployeeId'
                                :key='item.EmployeeId'>
                            </el-option>
                        </el-select>
                    </span>
                </li>  
                <li>
                    <span>
                        <em>{{$t('hotel.hotel_GroupStates')}}</em>
                        <el-select v-model="msg.TCState"  filterable :placeholder="$t('system.table_country')" class="w150">
                            <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
                            <el-option v-for='item in TeamSaleStateList'
                                :key="item.Id" 
                                :label="item.Name"
                                :value="item.Id">
                            </el-option>
                        </el-select>
                    </span>
                </li>  
                 <li>
                    <span>
                        <em>{{$t('hotel.hotel_OrderStates')}}</em>
                        <el-select v-model="msg.State"  filterable :placeholder="$t('pub.unlimitedSel')" class="w150">
                            <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
                            <el-option v-for='item in StatusList'
                                :key="item.ID" 
                                :label="item.Name"
                                :value="item.ID">
                            </el-option>
                        </el-select>
                    </span>
                </li>  
                <li>
                    <span>  
                        <em>{{$t('hotel.hotel_StarDate')}}</em>
                        <el-date-picker clearable class="w150"
                                v-model="msg.QStartDate"
                                type="date"
                                :picker-options="pickerOptions1"
                                value-format="yyyy-MM-dd"
                                :placeholder="$t('admin.admin_choDate')">
                        </el-date-picker>
                        <el-date-picker clearable class="w150"
                                v-model="msg.QEndDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                :picker-options="pickerOptions2"
                                :placeholder="$t('admin.admin_choDate')">
                        </el-date-picker>
                    </span>
                </li>  
                <li>
                     <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList()"/>
                </li>
           </ul>           
       </div>
       <ul class="HotelTeamPlan_list clearfix">
            <li v-for="(item,index) in dataList"  @click="getJourney(item.TCID,item.Title)" :key="index">
                <div class="hl_top">
                    <img class="hl_img" :src="item.PicPath" :class="item.TCState==6?'hl_img_g':''" alt="">
                    <div class="hl_img_gray" v-if="item.TCState==6"></div>
                    <el-tooltip class="item" effect="dark" :content="item.Title" placement="bottom-start" popper-class="max-w250">
                         <p class="hl_tit">{{item.Title}}</p>
                    </el-tooltip>
                    <i class="iconfont icon-img_download" @click.stop="exportExcel(item.TCID)"></i>
                    <div class="hl_radius" v-if="item.TCState!==6">
                        <p class="hlt_tit">{{$t('hotel.hotel_haveSignUp')}}</p>
                        <p class="hlt_num">{{item.FinishedNumber}}</p>
                    </div>
                    <div class="hl_radius" v-else>
                        <p class="hlt_tit hlt_tit_canc">{{$t('hotel.hotel_HasBeenCancelled')}}</p>
                    </div>
                    <ul class="hl_row" v-if="item.TCState!==6">
                        <li>{{item.TCStateStr}}{{$t('hotel.hotel_Inthe')}}</li>
                        <li>{{$t('hotel.hotel_expect')}}{{item.TotalNumber}}{{$t('hotel.hotel_people')}}</li>
                        <li>{{item.StartDateStr}}{{$t('hotel.hotel_StartTeam')}}</li>
                    </ul>
                </div>
                <div class="hl_bt">
                    <ul v-if="item.HotelOrderList">
                        <li v-for="(son,sIndex) in item.HotelOrderList" :key="sIndex">
                            <p>{{son.CheckInDate}}<i class="iconfont icon-img_bianji_small smallTitle"></i></p>
                            <div class="hlb_item">
                                <div>
                                    <i class="iconfont icon-img-canying-shixin"></i>
                                    <el-tooltip class="item" effect="dark" :content="son.ProductName" placement="bottom-end">
                                        <span class="max-w55">{{son.ProductName}}</span>
                                    </el-tooltip>
                                </div>
                                <div>
                                    <i class="iconfont icon-gongsi "></i>
                                    <el-tooltip class="item" effect="dark" :content="son.HotelName" placement="bottom-end">
                                        <span class="max-w120">{{son.HotelName}}</span>
                                    </el-tooltip>
                                </div>
                                <div>
                                   <p v-if="son.State==0"><i  class="iconfont icon-img_shijian"></i><span class="max-w20">{{$t('hotel.hotel_tobeConfirmed')}}</span></p> 
                                   <p v-if="son.State==1"><i  class="iconfont icon-yiqueren"></i><span class="max-w20">{{$t('hotel.hotel_haveBeenConfirmed')}}</span></p> 
                                   <p v-if="son.State==2"><i  class="iconfont icon-yiquxiao"></i><span class="max-w20">{{$t('hotel.hotel_HasBeenCancelled')}}</span></p> 
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div v-else class="_meidonfxi">
                        <span class="iconfont icon-zanwudingdan-copy"></span>
                        <p>{{$t('pub.noMsg')}}</p>
                    </div>
                </div>
            </li>
       </ul>
        <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>
        <el-dialog custom-class='ComTeamPlan_info_box' :title="tripTitle" :visible.sync="outerVisible" center >
            <commonTeamInfo ref="comTeam"></commonTeamInfo>
		</el-dialog>
    </div>
   
</template>
<script>
import commonTeamInfo from "../commonPage/commonTeamInfo.vue";
export default {
    data(){
        return{
            msg:{
                pageIndex:1,
                pageSize:5,
                OutBranchId:'-1',
                Title:'',
                TCID:0,
                CreateBy:'',
                TCState:'-1',
                QStartDate:'',
                QEndDate:'',
                State:'-1'
            },
            companyMsg: {
                Status: '0',
                is_show: '0',
                RB_Group_Id:parseInt(this.$cookie.get("RB_Group_Id")),
            },
            TripList:'',
            dataList:'',
            companyList:'',
            TeamSaleStateList:'',
            StatusList:'',
            auditorList:'',
            total:0,
            currentPage: 1,
            loading:true,
            noData:false,
            outerVisible:false,
            tripTitle:'',
            pickerOptions1:{
                disabledDate: (time) => {
                    let endTime = new Date(this.msg.QEndDate);
                    return endTime.getTime()<time.getTime()||time.getTime() < Date.now()-100000000;
                }
            },
            pickerOptions2:{
                disabledDate: (time) => {
                    let startTime = new Date(this.msg.QStartDate);
                    return startTime.getTime()>=time.getTime()
                }
            },
            cpList:[],
        }
    },
    components: {
        commonTeamInfo: commonTeamInfo
    },
    methods:{
        getList(){//获取列表数据
            this.msg.OutBranchId = parseInt(this.msg.OutBranchId);
            this.msg.TCState = parseInt(this.msg.TCState);
            this.msg.State = parseInt(this.msg.State);
            if(this.msg.CreateBy==''){
                this.msg.CreateBy=0;
            }
            if(this.msg.TCID==''){
                this.msg.TCID=0;
            }
            this.apipost('travel_get_GetHotelPlanPageList',this.msg,res=>{
                if(res.data.resultCode==1){
                    if(res.data.data.count>0){
                        this.total = res.data.data.count;
                        res.data.data.pageData.forEach(x => {
                            if(x.FinishedNumber==null||x.FinishedNumber==''){
                                x.FinishedNumber="0"
                            }
                            if(x.TotalNumber==null||x.TotalNumber==''){
                                x.TotalNumber="0"
                            }
                        });
                        this.dataList=res.data.data.pageData
                        this.noData =false;   
                    }else{
                        this.noData =true; 
                        this.dataList = [];    
                    }
                }else{
                    this.Error(res.data.message);
                }
                if(this.msg.OutBranchId==-1){
                    this.msg.OutBranchId = this.msg.OutBranchId.toString()
                }
                if(this.msg.TCState==-1){
                    this.msg.TCState = this.msg.TCState.toString()
                }
                if(this.msg.State==-1){
                    this.msg.State = this.msg.State.toString()
                }
                if(this.msg.CreateBy==0){
                    this.msg.CreateBy='';
                }
                if(this.msg.TCID==0){
                    this.msg.TCID='';
                }
            },err=>{})
        },
        getCompany(){ //获取公司           
            this.apipost('admin_get_BranchGetList', this.companyMsg, res => {
                if(res.data.resultCode == 1) {
                    this.companyList = res.data.data;
                }
            }, err => {})
        },
        getJourney(id,title) {
            //根据ID 获取行程内容
            var that = this;
            this.tripTitle = title;
            this.$nextTick(() => {
                that.$refs.comTeam.GetTrip(id);
            });
            that.outerVisible = true;
        },
        GetTeamSaleStateList(){//获取销售状态列表
            this.apipost('travel_get_GetTeamSaleStateList',{},res=>{
                this.TeamSaleStateList = res.data.data
            },err=>{})
        },
        getState(){          //获取订单状态啊
            this.apipost('order_post_GetState',{},res=>{
                this.StatusList = res.data.data
            },err=>{})
        },
        handleCurrentChange(val) {//翻页功能按钮
            this.msg.pageIndex = val;
            this.getList();
        },
        getAuditorList(){ //获取全部员工
            let msg = {
                GroupId:"",
                BranchId:"",
                DepartmentId:"",
                PostId:"",
                IsLeave:"0"
            };
            this.apipost('admin_get_EmployeeGetList', msg, res => {
                this.auditorList=res.data.data;
		    }, err => {})
        },
      exportExcel(tcid){//导出报表
        let msg = {
          TCID:tcid
        };
        this.GetLocalFile("travel_get_GetTravelGuestExport", msg, '旅客名单'+ this.$commonUtils.getCurrentDate() + ".xls");
      },
    },
    
    mounted(){
        this.getState();
        this.getCompany();
        this.getAuditorList();
        this.getList();
        this.GetTeamSaleStateList();
    }
}
</script>


