<style>
  .RegistrationStatistic .Rs_LtName {
    text-align: left;
    padding-left: 20px;
  }

  .RegistrationStatistic .RS_Nameover {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    cursor: pointer;
    text-align: left;
  }

  .RegistrationStatistic .singeRowTable {
    border-collapse: collapse;
  }

  .RegistrationStatistic .singeRowTable tr td {
    border: 1px solid #e5e5e5;
  }

  .RegistrationStatistic .Rs_Start1 {
    background-color: #ff6670;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start2 {
    background-color: #16e09d;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start3 {
    background-color: #ff8547;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start4 {
    background-color: #ff528b;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start5 {
    background-color: #ffab1e;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start6 {
    background-color: #7ccc4e;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start7 {
    background-color: #b47df0;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start8 {
    background-color: #00c8f5;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start9 {
    background-color: #7598ff;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start10 {
    background-color: #dbc500;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start11 {
    background-color: #7598ff;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start12 {
    background-color: #00d9c3;
    color: #fff;
  }

  .RegistrationStatistic .Rs_Start13 {
    background-color: #40afff;
    color: #fff;
  }

  .RegistrationStatistic .RS_RedType {
    color: #ff0000;
  }

  .RegistrationStatistic .Order_RS {
    text-decoration: underline;
    cursor: pointer;
  }

</style>
<template>
  <div class="flexOne RegistrationStatistic">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('system.table_company')}}</em>
            <el-select filterable :placeholder="$t('sm.company')" v-model="queryMsg.OutBranchId">
              <el-option :label="$t('pub.unlimitedSel')" :value='queryCommonData.SelectDefaultValue2'></el-option>
              <el-option v-for='item in queryCommonData.BranchList' :key="item.Id" :label="item.BName" :value="item.Id">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>团队类型</em>
            <el-select filterable :placeholder="$t('sm.company')" v-model="queryMsg.TeamType">
              <el-option v-for='item in teamTypeList' :key="item.Id" :label="item.Name" :value="item.Id">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('system.table_ssLine')}}</em>
            <el-select v-model="queryMsg.LineId" filterable :placeholder="$t('pub.pleaseSel')"
              @change="getLinePlaceList()">
              <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
              <el-option v-for="item in queryCommonData.LineList" :label="item.LineName" :value="item.LineID"
                :key="item.LineID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('Operation.Op_Country')}}/{{$t('system.query_dest')}}</em>
            <el-select v-model="queryMsg.PlaceID" filterable :placeholder="$t('pub.pleaseSel')"
              @change="getLineTeamList()">
              <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
              <el-option v-for="item in queryCommonData.PlaceList" :label="item.PlaceName" :value="item.PlaceID"
                :key="item.LtID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('active.ad_xlmc')}}</em>
            <el-select v-model="queryMsg.ltID" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
              <el-option v-for="item in queryCommonData.LineTeamList" :label="item.LtName" :value="item.LtID"
                :key="item.LtID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('fnc.tuanqi')}}</em>
            <el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder=""
              v-model="queryMsg.QStartDate">
            </el-date-picker>
            <el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder=""
              v-model="queryMsg.QEndDate">
            </el-date-picker>
          </span>
        </li>
        <li>
          <span>
            <em>机位占比</em>
            <el-input class="w100" type="text" placeholder="" v-model="queryMsg.TicketStartNum"
              @keyup.native="checkPrice(queryMsg,'TicketStartNum')" maxlength="3">
            </el-input> —
            <el-input class="w100" type="text" placeholder="" v-model="queryMsg.TicketEndNum"
              @keyup.native="checkPrice(queryMsg,'TicketEndNum')" maxlength="3">
            </el-input>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" /> &nbsp;
          <button class="hollowFixedBtn" @click="DownLoadFile()">{{$t('adm.adm_download')}}</button>
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading='queryCommonData.loading'>
      <tr>
        <th width="50">{{$t('active.ad_xuhao')}}</th>
        <th width="100">{{$t('Operation.Op_chutuan')}}</th>
        <th width='120'>系列</th>
        <th width="80">{{$t('fnc.tuanqi')}}</th>
        <th width="80">{{$t('op.TQBH')}}</th>
        <th width="80">{{$t('Operation.Op_jinchudian')}}</th>
        <th width="100">{{$t('Operation.Op_ArriveTime')}}</th>
        <th width="50">{{$t('Operation.Op_price')}}</th>
        <th width="100">{{$t('Airticket.Air_reservation')}}</th>
        <th width="80">{{$t('Operation.Op_signUp')}}</th>
        <th width="80">{{$t('Operation.Op_orderNum')}}</th>
        <th width="80">机位占比</th>
        <th width="80">机票状态</th>
        <th width="100">{{$t('leader.leader_Leader')}}</th>
        <th width="100">{{$t('leader.leader_Guide')}}</th>
      </tr>
      <tbody v-for="(item,index) in DataList" :key="index">
        <tr>
          <td rowspan="2" :data-TCID="item.TCID" :data-AirTicketId="item.AirTicketId">{{item.Num}}
          </td>
          <td
            :class="{'Rs_Start1':item.StartCityNum==1,'Rs_Start2':item.StartCityNum==2,'Rs_Start3':item.StartCityNum==3,
          'Rs_Start4':item.StartCityNum==4,'Rs_Start5':item.StartCityNum==5,'Rs_Start6':item.StartCityNum==6,
          'Rs_Start7':item.StartCityNum==7,'Rs_Start8':item.StartCityNum==8,'Rs_Start9':item.StartCityNum==9,
          'Rs_Start10':item.StartCityNum==10,'Rs_Start11':item.StartCityNum==11,'Rs_Start12':item.StartCityNum==12,'Rs_Start13':item.StartCityNum==13}">
            {{item.StartCityName}} ({{item.OutBranchName}})</td>
          <td>{{item.LtName}}</td>
          <td>{{item.StartDateStr}} {{item.AlCode}}</td>
          <td>
            <span title="点击跳转到团控列表" :class="item.TCID>0?'RS_RedType PingFangSC Order_RS':'Order_RS'"
              @click="goUrlTCList(item)">{{item.TCID}}</span>
            <br />
            <template v-if="item.PriceTeamTypeName&&item.PriceTeamTypeName!=''">
              <span style="font-weight:blod;">{{item.PriceTeamTypeName}}(<template v-if="item.OrderLeaderGuestNum>0">
                  <el-tooltip class="item" effect="dark" content="需要领队" placement="top">
                    <font>V</font>
                  </el-tooltip>
                </template><template v-else>
                  <el-tooltip class="item" effect="dark" content="不需要领队" placement="top">
                    <font>S</font>
                  </el-tooltip>
                </template>)</span>
            </template>
            <template v-else>
              <span style="font-weight:blod;">{{item.TeamTypeName}}(<template v-if="item.OrderLeaderGuestNum>0">
                  <el-tooltip class="item" effect="dark" content="需要领队" placement="top">
                    <font>V</font>
                  </el-tooltip>
                </template>
                <template v-else>
                  <el-tooltip class="item" effect="dark" content="不需要领队" placement="top">
                    <font>S</font>
                  </el-tooltip>
                </template>)
              </span>
            </template>
          </td>
          <td>{{item.InOut}}</td>
          <td>{{item.InOutTime}}</td>
          <td>{{item.B2BMemberPrice}}</td>
          <td>{{item.TotalSeat}}</td>
          <td>
            <span title="点击跳转到报名清单" class="Order_RS" :class="{'RS_RedType':item.OrderTotalNum>0}"
              @click="goUrl('RegistrationList',item.TCID,'设置领队')">{{item.OrderTotalNum-item.OrderLeaderGuestNum}}
              <span v-if="item.OrderLeaderGuestNum>0">+{{item.OrderLeaderGuestNum}}</span>
            </span>
          </td>
          <td>
            <span class="Order_RS" @click="goUrl('RegistrationList',item.TCID,'设置领队')">{{item.OrderPaymentNum}}</span>
          </td>
          <td>
            {{item.AirticketPer}}%
          </td>
          <td>
            {{item.AirTicketStatusStr}}
          </td>
          <td>
            <span title="点击跳转到报名清单" :class="item.LeaderName!=''&&item.LeaderName!=null?'PingFangSC Order_RS':'Order_RS'"
              @click="goUrl('RegistrationList',item.TCID,'报名清单')">{{item.LeaderName!=""&&item.LeaderName!=null ?item.LeaderName:"设置领队"}}</span>
          </td>
          <td>
            <span title="点击跳转到设置导游页面"
              :class="item.GuideName!=''&&item.GuideName!=null?'RS_RedType PingFangSC Order_RS':'Order_RS'"
              @click="goUrl('leaderArrangement',item.TCID,'设置导游')">{{item.GuideName!=""&&item.GuideName!=null?item.GuideName:"设置导游"}}</span>
          </td>
        </tr>
        <tr>
          <td>
            团名
          </td>
          <td colspan="6">
            <span class="RS_Nameover"> {{item.Title}}</span>
          </td>
          <td>
            备注
          </td>
          <td colspan="6">
            <span class="RS_Nameover">{{item.OPRemark}}</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="noDataNotice" v-if="DataList.length<1">
      <i class="iconfont icon-kong"></i>
      <p>{{$t('active.ld_noData')}}</p>
    </div>
    <div v-if="DataList.length>0">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper" :page-size='queryMsg.pageSize' :total='total'>
      </el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        queryCommonData: {
          //线路列表
          LineList: [],
          //系列列表
          LineTeamList: [],
          PlaceList: [], //目的地
          //公司数据
          BranchList: [],
          //公用下拉默认
          SelectDefaultValue: 0,
          //公用下拉默认
          SelectDefaultValue2: -1,
          //loading
          loading: false
        },
        queryMsg: {
          pageIndex: 1,
          pageSize: 50,
          LineId: 0,
          ltID: 0,
          PlaceID: 0,
          OutBranchId: -1,
          QStartDate: "",
          QEndDate: "",
          TicketStartNum: "",
          TicketEndNum: "",
          uid: "0",
          TeamType: -1, //0-常规团，1-小包团，2-当地游
        },
        teamTypeList: [{
            Id: -1,
            Name: "全部"
          },
          {
            Id: 0,
            Name: "散拼"
          },
          {
            Id: 1,
            Name: "小包团"
          },
          {
            Id: 2,
            Name: "当地游"
          },
        ],
        //数据列表
        DataList: [],
        currentPage: 0,
        total: 0
      };
    },
    methods: {
      goUrlTCList(item) {
        var title = "";
        var path = "";
        if (item.TeamType == 0) {
          title = "团控列表";
          path = "TravelControlList";
        } else if (item.TeamType == 1) {
          title = "小包团列表";
          path = "TravelControlListSale";
        } else if (item.TeamType == 2) {
          title = "当地游列表";
          path = "oneDayTrip";
        }
        this.$router.push({
          name: path,
          query: {
            tcmun: item.TCNUM,
            blank: "y",
            tab: title
          }
        });
      },
      //初始化公司
      getCompanyList() {
        let userInfo = this.getLocalStorage();
        var RB_Group_id = userInfo.RB_Group_id;
        let msg = {
          Status: 0,
          is_show: 0,
          RB_Group_Id: RB_Group_id
        };
        this.apipost(
          "admin_get_BranchGetList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.queryCommonData.BranchList = res.data.data;
            }
          },
          err => {}
        );
      },
      //获取线路列表
      getLineList() {
        this.apipost(
          "line_post_GetList", {
            LineDirection: 0
          },
          res => {
            if (res.data.resultCode == 1) {
              this.queryCommonData.LineList = res.data.data;
              this.queryCommonData.PlaceList = [];
              this.queryCommonData.LineTeamList = [];
            }
          }
        );
      },
      //获取目的地列表
      getLinePlaceList() {
        this.queryMsg.PlaceID = 0;
        this.queryMsg.LineteamId = 0;
        let msg = {
          lineID: this.queryMsg.LineId
        };

        this.apipost("team_post_GetLinePlace", msg, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.PlaceList = res.data.data;
            this.queryCommonData.LineTeamList = [];
          }
        });
      },
      //获取系列列表
      getLineTeamList() {
        this.queryMsg.LineteamId = 0;
        let msg = {
          lineID: this.queryMsg.LineId,
          placeID: this.queryMsg.PlaceID,
          isTOOP: 1
        };
        this.apipost("team_post_GetList", msg, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.LineTeamList = res.data.data;
          }
        });
      },
      getList() {
        this.queryCommonData.loading = true;
        if (this.queryMsg.TicketStartNum == "") {
          this.queryMsg.TicketStartNum = 0;
        }
        if (this.queryMsg.TicketEndNum == "") {
          this.queryMsg.TicketEndNum = 0;
        }
        this.apipost(
          "travel_get_TravelPriceOrderStatistics",
          this.queryMsg,
          res => {
            this.queryCommonData.loading = false;
            if (res.data.resultCode == 1) {
              if (this.queryMsg.TicketStartNum == 0) {
                this.queryMsg.TicketStartNum = "";
              }
              if (this.queryMsg.TicketEndNum == 0) {
                this.queryMsg.TicketEndNum = "";
              }
              this.total = res.data.data.count;
              this.DataList = res.data.data.pageData;
              this.DataList.forEach(item => {
                var NStartCityName = "";
                if (item.OutBranchName && item.OutBranchName != '') {
                  NStartCityName = item.OutBranchName.replace("印象", "");
                }
                switch (NStartCityName) {
                  case "成都":
                    item.StartCityNum = 1;
                    break;
                  case "昆明":
                    item.StartCityNum = 2;
                    break;
                  case "重庆":
                    item.StartCityNum = 3;
                    break;
                  case "西安":
                    item.StartCityNum = 4;
                    break;
                  case "武汉":
                    item.StartCityNum = 5;
                    break;
                  case "郑州":
                    item.StartCityNum = 6;
                    break;
                  case "上海":
                    item.StartCityNum = 7;
                    break;
                  case "南宁":
                    item.StartCityNum = 8;
                    break;
                  case "票务":
                    item.StartCityNum = 9;
                    break;
                  case "欧洲":
                    item.StartCityNum = 10;
                    break;
                  case "微途":
                    item.StartCityNum = 11;
                    break;
                  case "长沙":
                    item.StartCityNum = 12;
                    break;
                  case "南京":
                    item.StartCityNum = 13;
                    break;
                }
              });
            }
          }
        );
      },
      DownLoadFile() {
        this.Info("正在下载文件...");
        if (this.queryMsg.TicketStartNum == "") {
          this.queryMsg.TicketStartNum = 0;
        }
        if (this.queryMsg.TicketEndNum == "") {
          this.queryMsg.TicketEndNum = 0;
        }
        this.queryCommonData.loading = true;
        this.queryMsg.uid = this.getLocalStorage().EmployeeId;
        this.GetLocalFile(
          "travel_get_DownTravelPriceOrderStatistics",
          this.queryMsg,
          "报名统计.xls",
          res => {
            if (this.queryMsg.TicketStartNum == 0) {
              this.queryMsg.TicketStartNum = "";
            }
            if (this.queryMsg.TicketEndNum == 0) {
              this.queryMsg.TicketEndNum = "";
            }
            this.queryCommonData.loading = false;
          }
        );
      },
      goUrl(path, id, NameStr) {
        if (id > 0) {
          this.$router.push({
            name: path,
            query: {
              id: id,
              blank: "y",
              tab: NameStr
            }
          });
        } else {
          this.$router.push({
            name: path
          });
        }
      },
      goUrlTM(path, TCNUM) {
        this.$router.push({
          name: path,
          query: {
            id: TCNUM
          }
        });
      },
      addMoth(d, m) {
        let ds = d.split("-"),
          _d = ds[2] - 0;
        let nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
        let max = nextM.getDate();
        d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
        return d
          .toLocaleDateString()
          .match(/\d+/g)
          .join("-");
      },
      handleCurrentChange: function (val) {
        //翻页
        this.queryMsg.pageIndex = val;
        this.getList();
      },
      resetPageIndex: function () {
        // 重置页码
        this.queryMsg.pageIndex = 1;
        this.currentPage = 1;
      }
    },
    mounted() {
      let myDate = new Date();
      let nowDate =
        myDate.getFullYear() +
        "-" +
        parseInt(myDate.getMonth() + 1) +
        "-" +
        myDate.getDate();

      this.queryMsg.QStartDate = nowDate;
      this.queryMsg.QEndDate = this.addMoth(nowDate, 1);
      this.getCompanyList();
      this.getLineList();
      this.getList();
    }
  };

</script>
