<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('objFill.tuanduilx')}}</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('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>
            <DateLimit :clearable="false" :StartGroupDate="queryMsg.QStartDate" :EndGroupDate="queryMsg.QEndDate"
              @change="(date)=> queryMsg.QStartDate = date"></DateLimit>
            <el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')"
              v-model="queryMsg.QEndDate" :picker-options="pickerBeginDateAfter">
            </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('advmanager.v_xilie')}}</th>
        <th width="80">{{$t('fnc.tuanqi')}}</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>
      </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>
            <span>{{item.TCNUM}}({{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="$t('objFill.v101.xuyaolind')" placement="top">
                    <font>V</font>
                  </el-tooltip>
                </template><template v-else>
                  <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.buxuylind')" 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="$t('objFill.v101.xuyaolind')" placement="top">
                    <font>V</font>
                  </el-tooltip>
                </template>
                <template v-else>
                  <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.buxuylind')" placement="top">
                    <font>S</font>
                  </el-tooltip>
                </template>)
              </span>
            </template>
          </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:$t('ground.szlindui')}}</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:$t('objFill.v101.shezhidaoy')}}</span>
          </td>
        </tr>
        <tr>
          <td>
            {{$t('Operation.Op_TeamName')}}
          </td>
          <td colspan="6">
            <span class="RS_Nameover"> {{item.Title}}</span>
          </td>
          <td>
            {{$t('pub.pubRemark')}}
          </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>
  import DateLimit from '../../public/DateLimit.vue';
  export default {
    components: {
      DateLimit
    },
    data() {
      return {
        isQueryHistoryData: false,
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.queryMsg.QStartDate);
            return startTime.getTime() >= time.getTime();
          }
        },
        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",
          TeamType: -1, //0-常规团，1-小包团，2-当地游
        },
        teamTypeList: [{
            Id: -1,
            Name: this.$t('advmanager.v_all')
          },
          {
            Id: 0,
            Name: this.$t('objFill.v101.shanpin')
          },
          {
            Id: 1,
            Name: this.$t('objFill.xiaobaot')
          },
          {
            Id: 2,
            Name: this.$t('MarketingActi.local')
          },
          {
            Id: 5,
            Name: '切位团'
          },
        ],
        //数据列表
        DataList: [],
        currentPage: 0,
        total: 0,
      };
    },
    methods: {
      GetSupperOrderEditAuth() {
        var actionCode = this.$AuthCode.isQueryHistoryData;
        this.CheckUserAuth(actionCode, res => {
          if (res.data.resultCode == 1 && res.data.data == 1) {
            this.isQueryHistoryData = true;
          } else {
            let StartDate = this.getBeforeDate(0, new Date().Format("yyyy-MM-dd"))
            this.queryMsg.QStartDate = StartDate
          }
        });

      },
      //初始化公司
      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;
              let arrText = [
                this.$t('objFill.chengduo'),
                this.$t('objFill.kunming'),
                this.$t('objFill.chongqin'),
                this.$t('objFill.xian'),
                this.$t('objFill.wuhan'),
                this.$t('objFill.zhengzhou'),
                this.$t('objFill.shanghai'),
                this.$t('objFill.nanning'),
                this.$t('op.Tickets'),
                this.$t('objFill.v101.ouzhou'),
                this.$t('objFill.weitu'),
                this.$t('objFill.v101.FinancialModule.changsha'),
                this.$t('objFill.v101.FinancialModule.nanjing')
              ]
              this.DataList.forEach(item => {
                var NStartCityName = "";
                if (item.OutBranchName && item.OutBranchName != '') {
                  NStartCityName = item.OutBranchName.replace("印象", "");
                }
                switch (NStartCityName) {
                  case arrText[0]:
                    item.StartCityNum = 1;
                    break;
                  case arrText[1]:
                    item.StartCityNum = 2;
                    break;
                  case arrText[2]:
                    item.StartCityNum = 3;
                    break;
                  case arrText[3]:
                    item.StartCityNum = 4;
                    break;
                  case arrText[4]:
                    item.StartCityNum = 5;
                    break;
                  case arrText[5]:
                    item.StartCityNum = 6;
                    break;
                  case arrText[6]:
                    item.StartCityNum = 7;
                    break;
                  case arrText[7]:
                    item.StartCityNum = 8;
                    break;
                  case arrText[8]:
                    item.StartCityNum = 9;
                    break;
                  case arrText[9]:
                    item.StartCityNum = 10;
                    break;
                  case arrText[10]:
                    item.StartCityNum = 11;
                    break;
                  case arrText[11]:
                    item.StartCityNum = 12;
                    break;
                  case arrText[12]:
                    item.StartCityNum = 13;
                    break;
                }
              })
            }
          }
        );
      },
      DownLoadFile() {
        this.Info(this.$t('objFill.v101.Rest.zhengzaixzwj'))
        this.queryMsg.uid = this.getLocalStorage().EmployeeId;
        this.GetLocalFile(
          "travel_get_DownTravelPriceOrderStatistics",
          this.queryMsg,
          this.$t('objFill.v101.Rest.baomintj') + ".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.GetSupperOrderEditAuth()
      this.getCompanyList();
      this.getLineList();
      this.getList();
    }
  };

</script>