<style>
.page_VisaSummary .query-box ul li {
  margin-right: 0px;
}
.page_VisaSummary ._VisaS_list {
  padding: 20px 0;
}
.page_VisaSummary ._VisaS_list ._vsl_item {
  float: left;
  margin-right: 40px;
  width: 300px;
  height: 270px;
  border-radius: 4px;
  overflow: hidden;
}
.page_VisaSummary ._vsl_item_top {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.page_VisaSummary ._vsl_item_top img.no_grayscale {
  width: 100%;
  height: 100%;
  filter: blur(15px);
}
.page_VisaSummary ._content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page_VisaSummary ._content p {
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  padding-top: 10px;
}
.page_VisaSummary ._content p span {
  text-decoration: underline;
  cursor: pointer;
}
.page_VisaSummary ._content ._content_radius {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.4);
  background-color: #ffffff;
  margin: 16px auto;
}
.page_VisaSummary ._content ._content_radius p {
  color: #e95252 !important;
  padding-top: 5px;
  font-size: 12px;
}
.page_VisaSummary ._content ._content_radius p._content_radius_n {
  font-size: 36px;
  font-weight: bold;
  padding: 0;
}
.page_VisaSummary ._content_info {
  width: 94%;
  padding: 0 3%;
  height: 36px;
  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;
}
.page_VisaSummary ._content_info > li {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}
.page_VisaSummary ._content_info > li ._content_info_radius_b {
  display: inline-block;
  height: 4px;
  width: 4px;
  background-color: #ffffff;
  border-radius: 50%;
  margin-right: 4px;
}
.page_VisaSummary ._VisaS_list ._vsl_item:hover {
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}
._vsl_item_bt {
  text-align: center;
  padding-top: 25px;
}
._vsl_item_bt button.normalBtn {
  font-size: 12px;
}
.scenicSpotTeamPlan_info .hl_flight {
  padding-top: 20px;
}
.scenicSpotTeamPlan_info .hl_flight li {
  display: flex;
  align-items: center;
}
.scenicSpotTeamPlan_info ._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;
}
.scenicSpotTeamPlan_info ._textB14 {
  color: #333333;
  font-size: 14px;
}
.scenicSpotTeamPlan_info ._timeCity {
  margin: 15px 49px;
}
.scenicSpotTeamPlan_info ._time {
  color: #666666;
  font-size: 18px;
  font-weight: 700;
}
.scenicSpotTeamPlan_info ._city {
  color: #ff7862;
  font-size: 14px;
  text-align: center;
}
.scenicSpotTeamPlan_info ._line {
  display: flex;
  align-items: center;
}
.scenicSpotTeamPlan_info ._line span {
  display: inline-block;
  width: 50px;
  height: 2px;
  background-color: #ff7862;
}
.scenicSpotTeamPlan_info ._line span._lr {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: solid 2px #ff7862;
  background-color: white;
}
.scenicSpotTeamPlan_info ._flight_num,
._flight_name {
  color: #999999;
  font-size: 14px;
  font-weight: 700;
  margin-left: 15px;
}
.scenicSpotTeamPlan_info ._flight_name {
  font-weight: lighter;
}
.scenicSpotTeamPlan_info ._margintop30 {
  margin-top: 30px;
}
.scenicSpotTeamPlan_info ._details {
  margin-left: 20px;
  padding-top: 20px;
}
.scenicSpotTeamPlan_info ._details > li {
  border-left: 1px solid #e9e9e9;
  position: relative;
  padding-bottom: 15px;
  padding-left: 40px;
  padding-top: 15px;
}
.scenicSpotTeamPlan_info ._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;
}
.scenicSpotTeamPlan_info ._Itinerary {
  color: #333333;
  font-size: 18px;
  display: flex;
  align-items: center;
}
.scenicSpotTeamPlan_info ._Itinerary .iconfont {
  color: #666666;
}
.scenicSpotTeamPlan_info ._d_city,
._d_time {
  display: inline-block;
  padding: 0 20px;
}
.scenicSpotTeamPlan_info ._d_time {
  padding: 0 10px 0 0;
}
.scenicSpotTeamPlan_info ._d_info {
  color: #666666;
  font-size: 14px;
  line-height: 22px;
  padding-top: 16px;
}
.scenicSpotTeamPlan_info ._food_hotel {
  padding-top: 25px;
}
.scenicSpotTeamPlan_info ._food_hotel ._food,
._hotel {
  float: left;
  width: 50%;
}
.scenicSpotTeamPlan_info ._food_hotel .iconfont::before {
  font-size: 18px;
  color: #07a767;
}
.scenicSpotTeamPlan_info ._food_hotel ._hotel .iconfont::before {
  color: #2595ee;
}
.scenicSpotTeamPlan_info ._fh_tit {
  font-size: 16px;
}
.scenicSpotTeamPlan_info ._fist {
  padding-bottom: 10px;
}
.scenicSpotTeamPlan_info ._meidonfxi {
  text-align: center;
  padding: 25px 0;
}
.scenicSpotTeamPlan_info ._meidonfxi .iconfont {
  display: block;
  font-size: 50px;
  color: #d6d6d6;
}
.scenicSpotTeamPlan_info ._meidonfxi p {
  color: #999999;
  font-size: 14px;
}
.scenicSpotTeamPlan_info .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;
}
.scenicSpotTeamPlan_info .leaderName {
  position: relative;
  top: -10px;
  left: 5px;
}
.scenicSpotTeamPlan_info .headerImg {
  width: 34px;
  height: 34px;
  border-radius: 34px;
  display: inline-block;
}
.scenicSpotTeamPlan_info .headerImg img {
  width: 100%;
}
.scenicSpotTeamPlan_info .grayLi img {
  -webkit-filter: grayscale(1) blur(10px) !important;
}
.scenicSpotTeamPlan_info .flightTitle {
  padding: 3px 10px;
  background-color: #e3e3e3;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  margin: 30px 0 10px 20px;
  font-size: 14px;
  color: #333333;
  line-height: 44px;
  text-align: center;
}
.scenicSpotTeamPlan_info .cityName {
  font-size: 20px;
  font-family: PingFangSC-Semibold, sans-serif;
}
.scenicSpotTeamPlan_info .icon-img_plane {
  font-size: 12px;
  color: #2aaef2;
  position: absolute;
  left: 158px;
  top: -8px;
  -webkit-transform: scale(0.8);
}
.scenicSpotTeamPlan_info .flightLine {
  color: #b7b7b7;
  display: inline-block;
  padding: 0 10px;
}
.scenicSpotTeamPlan_info .fLine {
  float: left;
}
.scenicSpotTeamPlan_info .planeTwo {
  left: 85px;
}
.scenicSpotTeamPlan_info .stName {
  display: inline-block;
  width: 60px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  float: left;
}
.page_VisaSummary .query-box ul .el-input {
  width: 150px;
}
.page_VisaSummary ._vsl_item_top img.no_grayscale._grayscale {
  filter: grayscale(100%) blur(15px);
}
</style>
<template>
    <div class="flexOne page_VisaSummary">
        <div class="query-box">
            <ul>
                <li>
                    <span>
                        <em>{{$t('scen.sc_cp')}}</em>
                        <el-select v-model="msg.RB_Branch_Id" clearable  class="w150" filterable  :placeholder="$t('pub.pleaseSel')">
                            <el-option key="-1" :label="$t('pub.unlimitedSel')" value="-1"></el-option>
                            <el-option v-for='item in companyList'
                                :key="item.Id" 
                                :label="item.BName"
                                :value="item.Id">
                            </el-option>
                        </el-select>
                    </span>
                </li>
                <li>
                    <span class="hotel_name">
                        <em>{{$t('scen.sc_temID')}}</em><el-input maxlength="50" v-model="msg.TCNUM" class="w150"></el-input>
                    </span>
                </li>
                <li>
                    <span>
                        <em>{{$t('scen.sc_temStatu')}}</em>
                        <el-select v-model="msg.TCState" clearable  class="w150" filterable  :placeholder="$t('pub.pleaseSel')">
                            <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('scen.sc_ftTime')}}</em>
                        <el-date-picker clearable class="w150"
                                @change="dataDui()"
                                v-model="msg.StartDate"
                                type="date"
                                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.EndDate"
                                type="date"
                                @change="dataDui()"
                                value-format="yyyy-MM-dd"
                                :placeholder="$t('admin.admin_choDate')">
                        </el-date-picker>
                    </span>
                </li>
                <li>
                    <span>
                        <em>{{$t('visa.v_qianzhengst')}}</em>
                        <el-select v-model="msg.Status" clearable  class="w150" filterable  :placeholder="$t('pub.pleaseSel')">
                            <el-option v-for='item in StatusList' 
                                :key="item.Id" 
                                :label="item.Name"
                                :value="item.Id">
                            </el-option>
                        </el-select>
                    </span>
                </li>
                <li class="_btn_group">
                    <button class="normalBtn" type="button" @click="getData()">{{$t('pub.searchBtn')}}</button>
                </li>
            </ul>
        </div>
        <ul class="_VisaS_list clearfix">
            <li class="_vsl_item" v-for="(item,index) in dataList">
                <div class="_vsl_item_top">
                    <img class="no_grayscale" :class="item.TotalNumber==item.FinishedNumber?'_grayscale':''" src="../../assets/img/shoppingstore.jpg" alt="">
                    <div class="_content">
                        <p class="_content_text"><span @click="getJourney(item.TCID)">{{item.TCNUM}}</span></p>
                        <div class="_content_radius">
                            <p>{{$t('hotel.hotel_haveSignUp')}}</p>
                            <p class="_content_radius_n PingFangSC">{{item.FinishedNumber}}</p>
                        </div>
                        <ul class="_content_info">
                            <li> <span class="_content_info_radius_b"></span> {{item.TCStateStr}}</li>
                            <li> <span class="_content_info_radius_b"></span> {{$t('hotel.hotel_expect')}}{{item.TotalNumber}}人</li>
                            <li> <span class="_content_info_radius_b"></span> {{item.StartDate}}{{$t('hotel.hotel_StartTeam')}}</li>
                        </ul>
                    </div>                    
                </div>
                <div class="_vsl_item_bt">
                    <button class="normalBtn" type="button" v-if="item.Status==1" @click="goUrl('VisaApplicationDetails',item.TCID,item.TCNUM)">{{$t('visa.v_banliqianzheng')}}</button>
                    <button class="normalBtn" type="button" v-if="item.Status==2" @click="goUrl('VisaApplicationDetails',item.TCID,item.TCNUM)">{{$t('visa.v_chakanjindu')}}</button>
                    <button class="normalBtn" type="button" v-if="item.Status==3" @click="goUrl('VisaApplicationDetails',item.TCID,item.TCNUM)">{{$t('visa.v_chakanjieguo')}}</button>
                </div>
            </li>
            <!-- <li class="_vsl_item" >
                <div class="_vsl_item_top">
                    <img class="no_grayscale _grayscale" src="../../assets/img/shoppingstore.jpg" alt="">
                    <div class="_content">
                        <p class="_content_text"><span @click="getJourney()">.TCNUM}}</span></p>
                        <div class="_content_radius">
                            <p>已报名</p>
                            <p class="_content_radius_n PingFangSC">.FinishedNumber}}</p>
                        </div>
                        <ul class="_content_info">
                            <li> <span class="_content_info_radius_b"></span> .TCStateStr}}</li>
                            <li> <span class="_content_info_radius_b"></span> 预计.TotalNumber}}人</li>
                            <li> <span class="_content_info_radius_b"></span> .StartDate}}发团</li>
                        </ul>
                    </div>                    
                </div>
                <div class="_vsl_item_bt">
                    <button class="normalBtn" type="button"  @click="goUrl('')">办理签证</button>
                </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='scenicSpotTeamPlan_info_box w780' :title="tripTitle" :visible.sync="outerVisible" center >
            <div class="scenicSpotTeamPlan_info">
                <p class="hl_info">{{$t('visaT.finformation')}} &nbsp;&nbsp;&nbsp;&nbsp;<span></span></p>
                <ul class="hl_flight">
                    <li v-for="(item,index) in TripList.FlightList">
                        <span class="_go">{{$t('visaT.go')}}</span>
                        <span class="_textB14">{{$t('tips.di')}}{{item.JourneyDay}}{{$t('hotel.hotel_day')}}（{{item.startTime}}）</span>
                        <div class="_timeCity">
                            <p class="_time">{{item.sStartDate}}</p>
                            <p class="_city">{{item.sStartAddress}}</p>
                        </div>
                        <div class="_line">
                            <span class="_lr"> </span>
                            <span></span>
                            <span class="_lr"> </span>
                        </div>
                        <div class="_timeCity">
                            <p class="_time">{{item.sEndDate}}</p>
                            <p class="_city">{{item.sEndAddress}}</p>
                        </div>
                        <p class="_flight_num">{{item.FlightNum}}</p>
                        <p class="_flight_name">{{item.FlightName}}</p>
                    </li>
                </ul>
                <p class="hl_info _margintop30">{{$t('visaT.Scheduling')}}</p>
                <ul class="_details">
                    <li v-for="(item,index) in TripList.JourneyList">
                        <span class="_d_radius">{{index+1}}</span>
                        <div class="_Itinerary">
                            <span class="_d_time">{{item.sJourneyDate}}</span>
                            <span class="_d_city">{{item.sStartAddress}}</span>
                            <span class="iconfont icon-hangkonggongsi"></span>
                            <span  class="_d_city">{{item.sEndAddress}}</span>
                        </div>
                        <p class="_d_info">
                            {{item.sDescribe}}
                        </p>
                        <div class="_food_hotel clearfix">
                            <ul class="_food">
                                <li class="_fist">
                                    <span class="iconfont icon-jingqu"></span><span class="_fh_tit"> {{$t('visaT.jdname')}}</span>
                                </li>
                                <li>{{item.CouponsName}}</li>
                            </ul>
                            <ul class="_hotel">
                                <li class="_fist">
                                    <span class="iconfont icon-ticket"></span><span class="_fh_tit"> {{$t('visaT.doorname')}}</span>
                                </li>
                                <li>{{item.TicketName}}</li>
                            </ul>
                        </div>
                    </li>                   
                </ul>
            </div>
		</el-dialog>
    </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 10,
        RB_Branch_Id: "-1",
        Status: "-1",
        TCState: 3,
        TCNUM: "",
        StartDate: "",
        EndDate: ""
      },
      getCompanyMsg: {
        RB_Group_Id: "",
        Status: 0,
        is_show: 0
      },
      dataList: [],
      companyList: [],
      TeamSaleStateList: [],
      TripList: [],
      StatusList: [
        {
          Id: "-1",
          Name: this.$t('pub.unlimitedSel')
        },
        {
          Id: "1",
          Name: this.$t('visaT.Nothandled')
        },
        {
          Id: "2",
          Name: this.$t('visaT.Inhandling')
        },
        {
          Id: "3",
          Name: this.$t('visaT.Alreadyprocessed')
        }
      ],
      total: 0,
      currentPage: 1,
      noData: false,
      outerVisible: false,
      tripTitle: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    getJourney(id, title) {
      //根据ID 获取行程内容
      this.tripTitle = title;
      //根据ID 获取行程内容
      this.apipost(
        "travel_get_GetTrip",
        { ID: id },
        res => {
          if (res.data.data.FlightList.length > 0) {
            res.data.data.FlightList.forEach((x, index) => {
              x.startTime = new Date(x.sStartDate).Format("yyyy-MM-dd");
              x.sStartDate = new Date(x.sStartDate).Format("hh:mm");
              x.sEndDate = new Date(x.sEndDate).Format("hh:mm");
            });
          }
          this.TripList = res.data.data;
          this.tripTitle = this.TripList.Title;
        },
        err => {}
      );
      this.outerVisible = true;
    },
    getTeamSaleStateList() {
      //获取销售状态列表
      this.apipost(
        "travel_get_GetTeamSaleStateList",
        {},
        res => {
          this.TeamSaleStateList = res.data.data;
        },
        err => {}
      );
    },
    getCompany() {
      // 获取公司
      this.apipost(
        "admin_get_BranchGetList",
        this.getCompanyMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.companyList = res.data.data;
          } else {
          }
        },
        err => {}
      );
    },
    getData() {
      // 查询数据
      this.apipost(
        "dmc_get_GetTravelControlPageList",
        this.msg,
        res => {
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            if (res.data.data.pageData.length == 0) {
              this.noData = true;
              this.dataList = [];
            } else {
              this.dataList = res.data.data.pageData;
              this.noData = false;
            }
          } else {
          }
        },
        err => {}
      );
    },
    dataDui() {
      // 日期
      if (this.msg.StartDate > this.msg.EndDate && this.msg.EndDate!== '') {
        this.$message.error(this.$t('visaT.titleT'));
        this.msg.EndDate = "";
      }
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getData();
    },
    goUrl(path, id, num) {
      this.$router.push({ name: path, query: { id: id, num: num } });
    }
  },
  mounted() {
    let userInfo = this.getLocalStorage();
    this.getCompanyMsg.RB_Group_Id = userInfo.RB_Group_id;
    this.getCompany();
    this.getTeamSaleStateList();
    this.getData();
  }
};
</script>
