<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;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* text-decoration: underline; */
    cursor: pointer;
    /* autoprefixer: on */
    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 class="w150" filterable :placeholder="$t('system.table_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>{{$t('advmanager.v_line')}}</em>
            <el-select class='w150' v-model="queryMsg.LineID" 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.LineList" :label='item.LineName' :value='item.LineID'
                :key='item.LineID'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('advmanager.v_xilie')}}</em>
            <el-select class='w150' 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>
          <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('salesModule.Xu')}}</th>
        <th width="80">{{$t('Operation.Op_chutuan')}}</th>
        <th width='200'>{{$t('Operation.Op_TeamName')}}</th>
        <th width="80">{{$t('fnc.tuanqi')}}</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="100">{{$t('leader.leader_Leader')}}</th>
        <th width="100">{{$t('leader.leader_Guide')}}</th>
        <th>{{$t('pub.pubRemark')}}</th>
      </tr>
      <tbody v-for="item in DataList">
        <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}}</td>
          <td>{{item.InOut}}</td>
          <td>{{item.InOutTime}}</td>
          <td>{{item.B2CMemberPrice}}</td>
          <td>{{item.TotalSeat}}</td>
          <td>
            <span 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><span :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 :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>
          <td><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: [],
          //公司数据
          BranchList: [],
          //公用下拉默认
          SelectDefaultValue: 0,
          //公用下拉默认
          SelectDefaultValue2: -1,
          //loading
          loading: false
        },
        queryMsg: {
          pageIndex: 1,
          pageSize: 50,
          LineID: 0,
          ltID: 0,
          OutBranchId: -1,
          QStartDate: "",
          QEndDate: "",
          uid: "0"
        },
        //数据列表
        DataList: [],
        currentPage: 0,
        total: 0,
      };
    },
    methods: {
      //初始化公司
      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_GetAllList", {}, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.LineList = res.data.data;
          }
        });
      },
      //获取系列列表
      getLineTeamList() {
        this.queryMsg.ltID = 0;
        let msg = {
          lineID: this.queryMsg.LineID,
          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;
        this.apipost(
          "travel_get_TravelPriceOrderStatistics",
          this.queryMsg,
          res => {
            this.queryCommonData.loading = false;
            if (res.data.resultCode == 1) {
              this.total = res.data.data.count
              this.DataList = res.data.data.pageData;
              this.DataList.forEach(item => {
                switch (item.StartCityName) {
                  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("正在下载文件...")
        this.queryMsg.uid = this.getLocalStorage().EmployeeId;
        this.GetLocalFile(
          "travel_get_DownTravelPriceOrderStatistics",
          this.queryMsg,
          "报名统计.xls"
        );
      },
      goUrl(path, id, title) {
        if (id > 0) {
          this.$router.push({
            name: path,
            query: {
              id: id,
              blank: 'y',
              tab: title
            }
          });
        } else {
          this.$router.push({
            name: path
          });
        }
      },
      goUrlTM(path, TCNUM) {
        this.$router.push({
          name: path,
          query: {
            id: TCNUM
          }
        });
      },
      handleCurrentChange: function (val) { //翻页
        this.queryMsg.pageIndex = val;
        this.getList();
      },
      resetPageIndex: function () { // 重置页码
        this.queryMsg.pageIndex = 1;
        this.currentPage = 1;
      },
    },
    mounted() {
      this.getCompanyList();
      this.getLineList();
      this.getList();
    }
  };

</script>