<style>
@import "../../assets/css/comSummary.css";

.CityNameList {
  width: 80px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.UseType {
  text-align: center !important;
}

.busHotelName {
  width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.popClass[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #444444 !important;
}

.popClass[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #444444 !important;
}

.popClass {
  background-color: #444444 !important;
  color: #fff !important;
  font-size: 12px !important;
}

.noneCir {
  cursor: Default !important;
}

.isbusList {
  width: 100%;
  border-bottom: 1px solid #666666;
  height: 30px;
  line-height: 30px;
}

.OpStrBtn {
  float: right;
  width: 50px;
  height: 20px;
  margin-top: 5px;
}

.mainSummary .listName,
.busCodeList {
  cursor: pointer;
}

.busCodeList:hover {
  color: #e95252;
}

.dayListTable td {
  vertical-align: top !important;
}
</style>
<template>
  <div class="flexOne comSummary busSummary">
    <div class="mainSummary">
      <table class="summaryTable" cellspacing="0">
        <thead>
          <th>
            <div class="leftDay">
              <div class="leftDayTop">
                <span class="yearCircle"></span>{{nowYear}}<span class="yearCircle"></span>
                <div class="rili LI1"></div>
                <div class="rili LI2"></div>
              </div>
              <span class="monthNum">{{nowMonth}}</span>
              <span class="monthLis">{{$t('pub.month')}}</span>
            </div>
          </th>
          <th>
            <div class="Arrow" @click="leftClick()">
              <i class="iconfont icon-previewleft"></i>
            </div>
          </th>
          <th v-for="(k,index) in Calendar" :key="k.subCode" :class="{'redType':k.Week=='日'||k.Week=='六','ckedTd':index==columnLine&&dataList!=''}"
            @click="getDayInfo(k.CurrentYear,k.CurrentMonth,k.CurrentDay)" @mouseover="columnsMouseOver(index)">
            <el-popover placement="bottom" width="500" trigger="click">
              <div class="_topInfo"><span class="_leftTy"></span>{{k.CurrentYear+"-"+k.CurrentMonth+"-"+k.CurrentDay}}<span
                  class="TJtitle">{{$t('commonPickUp.Pick_Data')}}</span></div>
              <div class="comdayListDiv">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="dayListTable">
                  <tr>
                    <th width="100">{{$t('system.table_city')}}</th>
                    <th>团队</th>
                    <th>酒店</th>
                    <th width="50">用车</th>
                    <th>车配号</th>
                  </tr>
                  <tr v-for="dList in dayList" :key="dList.subCode">
                    <td>
                      <el-tooltip class="item" effect="dark" :content="dList.CityName" placement="top-start"
                        popper-class="max-w250">
                        <div>
                          <span class="CityNameList"><i class="iconfont icon-img_dizhi_small"></i>{{dList.CityName}}</span>
                        </div>
                      </el-tooltip>
                    </td>
                    <td>
                      <div v-for="dl in dList.SubList" class="htName" :key="dl.subCode">
                        {{dl.TCNUM}}
                      </div>
                    </td>
                    <td>
                      <div v-for="dl in dList.SubList" :key="dl.subCode">
                        <el-tooltip class="item" effect="dark" :content="dl.HotelName" placement="top-start"
                          popper-class="max-w250">
                          <div class="busHotelName">
                            <i class="iconfont icon-jiudian"></i>{{dl.HotelName}}
                          </div>
                        </el-tooltip>
                      </div>
                    </td>
                    <td>
                      <div v-for="dl in dList.SubList" :key="dl.subCode">
                        {{dl.UseTypeStr}}
                      </div>
                    </td>
                    <td>
                      <div v-for="(dl,index) in dList.SubList" :key="index">
                        <el-popover placement="bottom" width="250" popper-class='popClass' trigger="click">
                          <div v-if="infoList.length==0">无数据</div>
                          <div v-else v-for="info in infoList" :key="info.subCode">
                            <div class="isbusList">
                              <span>{{info.BusCode}}</span>
                              <button class="normalBtn OpStrBtn" @click="setCarInfo(info.Id,dl.OrderID)">{{info.OpStr}}</button>
                            </div>
                          </div>
                          <span slot="reference" class="busCodeList" @click.stop="getCurrentUserBus(k.CurrentDate,dList.CityId,dl.BusId,dl.TCID,dl.PeopleNum)">{{dl.BusCode}}</span>
                        </el-popover>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
              <div slot="reference">
                <div class="_week">{{k.Week}}</div>
                <div class="_monthDay" v-if="k.CurrentDay==1">
                  <span>{{k.CurrentMonthCn}}<br />{{$t('pub.month')}}</span>
                </div>
                <div class="_day" v-else>{{k.CurrentDay}}</div>
                <div class="_longli">{{k.LunarDayCn}}</div>
              </div>
            </el-popover>
          </th>
          <th>
            <div class="Arrow" @click="rightClick()">
              <i class="iconfont icon-arrow-right"></i>
            </div>
          </th>
        </thead>
        <tbody>
          <tr v-for="st in dataList" :key="st.subCode">
            <td colspan="2">
              <div>
                <span class="tType">{{$t('commonPickUp.Pick_Team')}}</span>
                <span class="TeamNum">{{st.TCNUM}}</span>
              </div>
              <div class="teamChild">
                <i class="iconfont icon-img-ren"></i><span>{{st.FinishedNumber}}<span v-if="st.LeaderNumber>0">+{{st.LeaderNumber}}</span></span>
              </div>
            </td>
            <td v-for="(k,index) in Calendar" :key="k.subCode" height="80px;" @mouseover="columnsMouseOver(index)">
              <div v-for="(ss,index) in st.SubList" :key="ss.subCode">
                <div v-if="ss.DayStr==k.CurrentDay">
                  <div class="cir noneCir" slot="reference" :class="{'stateOne':ss.OrderState==0,'stateTwo':ss.OrderState==1,'stateThree':ss.OrderState==-1,'stateFour':ss.OrderState==2,'disNoneCir':ss.OrderState==-100}"></div>
                  <div class="circleDiv" v-if="ss.OrderState==-100">
                    <div class="lineLeftList"></div>
                    <div class="lineRightList"></div>
                  </div>
                  <div class="circleDiv" v-else>
                    <div class="lineleft" :class="{'disNone':index==0}"></div>
                    <div class="lineright" :class="{'disNone':index==st.SubList.length-1}"></div>
                  </div>
                  <el-tooltip class="item" effect="dark" :content="ss.CityName" placement="top-start" popper-class="max-w250">
                    <div class="AddressIn">{{ss.CityName}}</div>
                  </el-tooltip>
                  <el-popover placement="bottom" width="250" popper-class='popClass' v-model="ss.visible" trigger="click">
                    <div v-if="infoList.length==0">无数据</div>
                    <div v-else v-for="info in infoList" :key="info.subCode">
                      <div class="isbusList">
                        <span>{{info.BusCode}}</span>
                        <button class="normalBtn OpStrBtn" @click="setCarInfo(info.Id,ss.OrderID)">{{info.OpStr}}</button>
                      </div>
                    </div>
                    <div class="listName busCodeList" @click="getCurrentUserBus(ss.JourneyDateStr,ss.CityId,ss.BusId,ss.TCID,ss.PeopleNum)"
                      slot="reference">{{ss.BusCode}}</div>
                  </el-popover>
                </div>
                <div v-else>
                </div>
              </div>
              <div class="leftLine" v-if="index==columnLine"></div>
              <div class="rightLine" v-if="index==columnLine"></div>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {
        StartDate: new Date().Format("yyyy-MM-dd"),
        EndDate: ""
      },
      loading: true,
      dataList: "",
      tempDataList: [],
      Calendar: "", //绑定数据的日历
      CalendarDataArray: [], //存放数据的日历
      infoList: "",
      dayList: "",
      nowYear: "",
      nowMonth: "",
      QStartDate: "",
      QEndDate: "",
      dayNum: 25, //默认加载天数
      columnLine: -1
    };
  },
  methods: {
    //初始化日历数据
    initData() {
      let startYear = this.msg.StartDate.split("-")[0];
      let startMonth = this.msg.StartDate.split("-")[1];
      var data = this.$lunarCalendar.initLunar(
        startYear,
        startMonth,
        this.dayNum
      );
      this.CalendarDataArray = data;
      this.QStartDate = data[0].CurrentDate;
      this.QEndDate = data[data.length - 1].CurrentDate;
      this.Calendar = this.CalendarDataArray;
    },
    getList() {
      this.apipost(
        "bus_order_get_GetBusSummary",
        this.msg,
        res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
            this.tempDataList = res.data.data;
          }
        },
        null
      );
    },
    //左侧点击
    leftClick() {
      var tempStartDate = this.$lunarCalendar.changeLunar(this.QStartDate, -1);
      this.CalendarDataArray.unshift(tempStartDate);
      this.nowYear = tempStartDate.CurrentYear;
      this.nowMonth = tempStartDate.CurrentMonth;
      this.CalendarDataArray.pop(); //删除最后一个元素
      this.Calendar = this.CalendarDataArray;
      this.QStartDate = tempStartDate.CurrentDate;
      this.QEndDate = this.CalendarDataArray[
        this.CalendarDataArray.length - 1
      ].CurrentDate;
      this.msg.StartDate = tempStartDate.CurrentDate;
      this.msg.EndDate = this.CalendarDataArray[
        this.CalendarDataArray.length - 1
      ].CurrentDate;
      this.getList();
    },
    //右侧点击事件
    rightClick() {
      var tempEndDate = this.$lunarCalendar.changeLunar(this.QEndDate, 1);
      this.CalendarDataArray.push(tempEndDate);
      this.nowYear = tempEndDate.CurrentYear;
      this.nowMonth = tempEndDate.CurrentMonth;
      this.CalendarDataArray.shift(); //删除第一个元素
      this.Calendar = this.CalendarDataArray;
      this.QStartDate = this.CalendarDataArray[0].CurrentDate;
      this.QEndDate = tempEndDate.CurrentDate;
      this.msg.StartDate = this.CalendarDataArray[0].CurrentDate;
      this.msg.EndDate = tempEndDate.CurrentDate;

      this.getList();
    },
    getCurrentUserBus(PlanDate, CityId, BusId, TCID, UseNum) {
      let msg = {
        PlanDate: PlanDate,
        CityId: CityId,
        BusId: BusId,
        UseNum: UseNum,
        TCID: TCID
      };
      this.apipost(
        "bus_order_get_GetCurrentDayCanUseList",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.infoList = res.data.data;
          }
        },
        null
      );
    },
    columnsMouseOver(obj) {
      this.columnLine = obj;
    },
    getEndDay() {
      var date1 = this.msg.StartDate;
      var date2 = new Date(date1);
      var c = date2.getDate();
      var d = new Date(date2.setDate(c + 24));
      this.msg.EndDate = d.Format("yyyy-MM-dd");
    },
    //点击获取每日详情
    getDayInfo(Y, M, D) {
      let StartDate = Y + "-" + M + "-" + D;
      let msg = {
        StartDate: StartDate
      };
      this.apipost(
        "bus_order_get_GetBusSummaryDay",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.dayList = res.data.data;
          }
        },
        null
      );
    },
    setCarInfo(BusId, ID) {
      let msg = {
        BusId: BusId,
        ID: ID
      };
      this.apipost(
        "bus_order_get_ModifyBusTravelConfig",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.Success("设置成功！");
            this.getList();
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    }
  },
  mounted() {
    this.initData();
    this.getEndDay();
    this.getList();
    let nowDate = new Date().Format("yyyy-MM-dd");
    this.nowYear = nowDate.split("-")[0];
    this.nowMonth = parseInt(nowDate.split("-")[1]);
  }
};
</script>