<style>
@import "../../assets/css/comSummary.css";
.leader .cir {
  cursor: auto !important;
}
.leader .AddressIn {
  text-align: center;
}
._DepartureCityName {
  width: 130px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cenTD {
  text-align: center !important;
}
</style>
<template>
            <div class="flexOne comSummary leader">
                <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==$t('pub.day')||k.Week==$t('groun.liu'),'ckedTd':index==columnLine&&dataList!=''}" @click="getDayInfo(k.CurrentYear,k.CurrentMonth,k.CurrentDay)"  @mouseover="columnsMouseOver(index)">
                                    <el-popover
                                        placement="bottom"
                                        width="360"
                                        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="130">{{$t('system.table_city')}}</th>
                                                    <th width="100">{{$t('commonPickUp.Pick_LeaderNum')}}</th>
                                                    <th>{{$t('commonPickUp.Pick_TeamInfo')}}</th>
                                                </tr>
                                                <tr v-for="dList in dayList" :key="dList.subCode">
                                                <el-tooltip class="item" effect="dark" :content="dList.DepartureCityName" placement="bottom-start" popper-class="max-w250">
                                                    <td>
                                                        <div class="_DepartureCityName">
                                                            <i class="iconfont icon-img_dizhi_small"></i>
                                                            {{dList.DepartureCityName}}
                                                        </div>
                                                    </td>
                                                </el-tooltip>
                                                    <td class="cenTD">
                                                            {{dList.LeaderCount}}
                                                    </td>
                                                    <td class="cenTD">
                                                            <i class="iconfont icon-img-ren"></i>
                                                            {{dList.FinishedNumber}}{{$t('commonPickUp.Pick_Pnum')}}({{dList.Count}}{{$t('commonPickUp.Pick_Team')}})
                                                    </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>
                                    <div class="_lineSummary" v-if="index==columnLine&&dataList!=''"></div>
                                </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 v-if="st.LeaderName">{{st.LeaderName}}</span>
                                        <span v-else>{{$t('ground.wuxinxi')}}</span>
                                    </div>
                                </td>
                                <td v-for="(k,lineindex) in Calendar" :key="k.subCode" min-height="80px;"  @mouseover="columnsMouseOver(lineindex)">
                                        <div v-for="(ss,index) in st.SubList" :key="ss.subCode" v-if="ss.DayStr==k.CurrentDay">
                                            <!-- <div v-if="ss.DayStr==k.CurrentDay"> -->
                                                <div class="cir" 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="bottom-start" popper-class="max-w250">
                                                    <div class="AddressIn">{{ss.CityName}}</div>
                                                </el-tooltip>
                                            <!-- </div> -->
                                        </div>
                                        <div class="leftLine" v-if="lineindex==columnLine"></div>
                                        <div class="rightLine" v-if="lineindex==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(
        "LeaderSchedule_get_GetLeaderSummary",
        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();
    },
    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(
        "LeaderSchedule_get_GetLeaderSummaryDay",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.dayList = res.data.data;
          }
        },
        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>