<style>
/* .flightPlan .fmain{width:90%;height:auto;margin:auto;margin-top:20px;float:left; min-width: 1000px;} */
.flightPlan .fmain {
  width: 90%;
  height: auto;
  margin: auto;
  margin-top: 20px;
  float: left;
  min-width: 1200px;
  height: 110px;
  overflow: hidden;
}

.flightPlan .fList {
  float: left;
  width: 78px;
  text-align: center;
  font-size: 14px;
  margin-right: 40px;
  cursor: pointer;
  color: #333333;
}
.flightPlan .fList span {
  display: inline-block;
}
.flightPlan .circleList {
  display: inline-block;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  margin-bottom: 12px;
  border: 4px solid #fff;
  line-height: 70px;
  font-family: PingFangSC-Semibold, sans-serif;
}
.flightPlan .forecast {
  font-size: 14px;
  color: #333333;
  background-color: #e3e3e3;
  width: 180px;
  text-align: center;
  line-height: 30px;
  height: 30px;
  border-radius: 4px;
  margin: 30px 0;
  font-family: PingFangSC-Semibold, sans-serif;
}
.flightPlan .listDiv {
  background-color: #fff;
  font-size: 14px;
  border: 1px solid #ededed;
  margin-bottom: 20px;
  border-radius: 4px;
  padding: 20px;
  min-width: 1400px;
}
.flightPlan .StartCityName {
  color: #47bf8c;
  font-family: PingFangSC-Semibold, sans-serif;
}
.flightPlan .icon-img_dizhi_small {
  color: #999999;
  margin-right: 12px;
}
.flightPlan .feiwang {
  color: #666666;
  width: 100%;
  border-bottom: 1px dashed #dcdfe6;
  display: inline-block;
  padding-bottom: 20px;
}
.flightPlan .Orange {
  border-color: #fe9365;
  background-color: #fff2ec;
  color: #fe9365;
}
.flightPlan .green {
  border-color: #69d5a7;
  background-color: #f2fff9;
  color: #69d5a7;
}
.flightPlan .yellow {
  border-color: #ffc74a;
  background-color: #fff8e9;
  color: #ffc74a;
}
.flightPlan .red {
  border-color: #e85252;
  background-color: #ffefef;
  color: #e85252;
}
.flightPlan .leftArrow {
  float: left;
  width: 30px;
  height: 30px;
  margin: 50px 40px 0 0;
}
.flightPlan .leftArrow i,
.rightArrow i {
  cursor: pointer;
  font-size:28px;
}
.flightPlan .rightArrow {
  float: right;
  width: 30px;
  height: 30px;
  margin: 50px 0 0 10px;
}
.uu {
  height: 109px;
  overflow: hidden;
  position: relative;
  left: 0;
}
.uu li {
  float: left;
}
.disNone {
  color:#CCCCCC;
}
/* 机票计划 */
</style>
<template>
        <div class="flexOne flightPlan">   
            <div class="forecast">{{$t("Airticket.Air_AirTicketPredict")}}</div>
            <div class="listDiv" v-for="(item,index) in dataList" :key="item.subCode">
                <span class="feiwang"><i class="iconfont icon-img_dizhi_small"></i><span class="StartCityName">{{item.StartCityName}}</span><span>{{$t('Airticket.Air_flightTo')}}</span></span>
               <div class="clearfix">
                   <div class="leftArrow">
                        <i class="iconfont icon-previewleft" @click="leftMove(index)" v-if="item.PTotalCount>10" :class="{'disNone':item.PageIndex==1}"></i>
                   </div>
                   <div class="fmain">
                        <ul class="uu clearfix">
                                <li v-for="st in item.SubList" @click="goUrl('TicketPlanInfo',item.StartCityID,st.ArriveCityId)" :key="st.subCode">
                                    <div class="fList">
                                        <span class="circleList" :class="{'Orange':st.Value>=21&&st.Value<40,'green':st.Value<=10,'yellow':st.Value>=11&&st.Value<=20,'red':st.Value>=40}">{{st.Value}}</span>
                                        <span>{{st.ArriveCityName}}</span>
                                    </div>
                                </li>
                        </ul>
                   </div>
                    <div class="rightArrow">
                        <i class="iconfont icon-arrow-right" @click="rightMove(index)" v-if="item.PTotalCount>10" :class="{'disNone':item.PageIndex==item.PageCount}"></i>
                    </div>
                </div>
            </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>
        </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 3
      },
      dataList: "",
      total: 0,
      planeArray: [],
      tempArray: [],
      currentPage: 1,
      ChildCurrentIndex: 1,
      ChildPageCount: 10
    };
  },
  methods: {
    getList() {
      this.tempArray = [];
      this.planeArray = [];
      this.dataList = "";
      this.apipost(
        "AirTicketOrder_Get_GetAirTicketPlanPageList",
        this.msg,
        res => {
          if (res.data.resultCode == 1) {
            var dataArray = [];
            this.total = res.data.data.count;
            this.tempArray = res.data.data.pageData;
            res.data.data.pageData.forEach((x, index) => {
              var page = 0;
              if (x.SubList.length % this.ChildPageCount == 0) {
                page = x.SubList.length / this.ChildPageCount;
              } else {
                page = parseInt(x.SubList.length / this.ChildPageCount) + 1;
              }
              this.planeArray.push({
                ChildTotalCount: x.SubList.length,
                PCurrentIndex: this.ChildCurrentIndex,
                PageCount: page
              });
            });
            this.getNewData();
          }
        },
        null
      );
    },
    //组装函数
    getNewData() {
      var dataArray = [];
      if (
        this.tempArray != null &&
        this.tempArray.length > 0 &&
        this.planeArray != null &&
        this.planeArray.length > 0
      ) {
        this.planeArray.forEach((x, index) => {
          if (x.PageCount > 1) {
            var obj = {
              StartCityID: this.tempArray[index].StartCityID,
              StartCityName: this.tempArray[index].StartCityName,
              SubList: [],
              PageIndex: 1,
              PageCount: x.PageCount,
              PTotalCount: this.tempArray[index].SubList.length
            };
            for (var i = 0; i < this.ChildPageCount; i++) {
              obj.SubList.push(this.tempArray[index].SubList[i]);
            }
            dataArray.push(obj);
          } else {
            dataArray.push({
              StartCityID: this.tempArray[index].StartCityID,
              StartCityName: this.tempArray[index].StartCityName,
              SubList: this.tempArray[index].SubList,
              PageIndex: 1,
              PageCount: x.PageCount,
              PTotalCount: this.tempArray[index].SubList.length
            });
          }
        });
      }
      this.dataList = dataArray;
    },

    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    goUrl(path, StartCityID, ArriveCityId) {
      this.$router.push({
        path: path,
        query: { StartCityID: StartCityID, ArriveCityId: ArriveCityId }
      });
    },
    priceLeftMove(index) {
      this.dataList[index].PageIndex = this.dataList[index].PageIndex - 1;
      if (this.dataList[index].PageIndex <= 0) {
        this.dataList[index].PageIndex = 1;
      }
      this.SubPageData(index);
    },
    rightMove(index) {
      this.dataList[index].PageIndex = this.dataList[index].PageIndex + 1;
      if (this.dataList[index].PageIndex >= this.dataList[index].PageCount) {
        this.dataList[index].PageIndex = this.dataList[index].PageCount;
      }
      this.SubPageData(index);
    },
    SubPageData(index) {
      this.dataList[index].SubList = [];
      var start = (this.dataList[index].PageIndex - 1) * this.ChildPageCount;
      var end = start + this.ChildPageCount;
      if (end > this.dataList[index].PTotalCount) {
        end = this.dataList[index].PTotalCount;
      }
      for (var i = start; i < end; i++) {
        this.dataList[index].SubList.push(this.tempArray[index].SubList[i]);
      }
    }
  },
  mounted() {
    this.getList();
  }
};
</script>