<style>
/* 日期样式开始 */
.visitMonthStatistics .month ul {
  border-radius: 4px 4px 0 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #e95252;
  margin: 0;
  padding: 0;
  text-align: center;
}
.visitMonthStatistics .year-month {
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.visitMonthStatistics .year-month > input {
  width: 100px;
  float: left;
}
.visitMonthStatistics .arrow {
  padding: 10px;
  font-style: normal;
  cursor: pointer;
}
.visitMonthStatistics .monthminus {
  position: absolute;
  left: 0px;
  top: 15px;
}
.visitMonthStatistics .monthadd {
  position: absolute;
  right: 21px;
  top: 15px;
}
.visitMonthStatistics .month ul li {
  font-size: 18px;
  color: #fff;
  position: relative;
  display: inline-block;
  letter-spacing: 3px;
}
.visitMonthStatistics .month ul li i {
  font-size: 22px;
  color: #ff7e7e;
  cursor: pointer;
}
.visitMonthStatistics .month ul li > input {
  text-align: center;
}
.visitMonthStatistics .weekdays {
  margin: 0;
  padding: 3px 0;
  background-color: #3fa783;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  color: #fff;
  justify-content: space-around;
}
.visitMonthStatistics .weekdays li {
  display: inline-block;
  width: 14.2857%;
  text-align: center;
}
.visitMonthStatistics .days li:nth-child(7n-1) p {
  color: #e95252 !important;
}
.visitMonthStatistics .days li:nth-child(7n) p {
  color: #e95252 !important;
}
.visitMonthStatistics .days {
  width: 100%;
  padding: 0;
  margin: 0;
  border-left: 1px solid #dddddd;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: space-around;
}
.visitMonthStatistics .days > li {
  list-style-type: none;
  width: 14.2857%;
  height: 140px;
  text-align: center;
  position: relative;
  font-size: 12px;
  float: left;
  color: #000;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.visitMonthStatistics .days li > div {
  height: 112px;
  width: 100%;
  overflow-y: auto;
  text-align: left;
}
.visitMonthStatistics .days li > div > p {
  border-bottom: 1px dashed #ccc;
  line-height: 20px;
  padding: 3px 0  3px 10px;
  width: 100%;
  background: #fff;
}
.visitMonthStatistics .days li > div > p:nth-child(2n) {
  background: #f5f5f5;
}
.visitMonthStatistics .currentInput {
  width: 120px;
  height: 30px;
  border-radius: 17px;
  outline: none;
  border: none;
  color: #fff;
  background: transparent;
  font-size: 18px;
}
.visitMonthStatistics .days li .other-month {
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 17px;
  font-size: 12px;
  line-height: 17px;
  background-color: #cccccc;
  color: #fff;
}
.visitMonthStatistics .addCompany {
  width: 700px;
}
.visitMonthStatistics .ckStyle {
  width: 100%;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  background: #ccc;
  color: #000;
}
.visitMonthStatistics .ckStyleOther {
  background: #dddddd !important;
  font-weight: normal !important;
  color: #999;
}
.visitMonthStatistics .el-dialog--center .el-dialog__body {
  padding-top: 0;
}
.HB_Inventor {
  display: block;
  text-align: left;
  padding-top: 8px;
}
.HB_Inventor > span {
  display: block;
  padding-left: 10px;
  font-size: 12px;
  height: 18px;
  margin-bottom: 3px;
}
.visitMonthStatistics .Owe_Room {
  color: #e95252;
}
.visitMonthStatistics .Used_room {
  color: #13b0ae;
}
.visitMonthStatistics .otherMoth {
  background: #f2f2f2;
}
.visitMonthStatistics .weekendDay {
  color: #e95252;
}
.visitMonthStatistics .title {
  height: 14px;
  line-height: 14px;
  border-left: 3px solid #e95252;
  font-size: 14px;
  color: #333;
  text-indent: 10px;
  margin: 20px 0;
}
.visitMonthStatistics .title em{margin-right: 10px;}
.visitMonthStatistics .metaLink{
	background: #E3E3E3;
	border-radius: 4px;
	height: 28px;
	line-height: 28px;
	font-size: 14px;
	font-weight: bold;
	display: inline-block;
	padding: 0 15px;
}
.visitMonthStatistics .metaLink>span{
	margin-right: 5px;
}
/* 日期样式结束*/
</style>
<template>
  <div class="flexOne visitMonthStatistics">
    <div class="query-box Plan_Query" style="border-bottom: none;">
      <ul style="overflow: initial!important">
        	<li><span class="fl mt10"><em>部门</em></span>
						<treeselect class='w200 fl'
					  :options="departmentList"
					  @select='getEmployeeList'
					   v-model="DepartmentId"
					   :disabled="!isPrincipal"
					   placeholder="不限"
					  :normalizer="normalizer"
					  />
					</li>
				<li><span><em>员工</em><el-select  :disabled="!isPrincipal" filterable  v-model='msg.CreateBy' @change='getName();GetHoltelInventory()'>
							        <el-option label='不限' value='-1'></el-option>
									<el-option v-for='item in employeeList' 
										:label='item.name'
										:value='item.empId'
										:key='item.empId'>
									</el-option>
								  </el-select>
					</span></li>
        <li style="margin-right:50px;">
          <button
            class="normalBtn"
            type="button"
            @click="GetHoltelInventory()"
          >{{$t('pub.searchBtn')}}</button>
        </li>
      </ul>
    </div>
    <div class="metaLink mt5">
    	<span>{{currentYear}}年{{currentMonth}}月</span>
    	<span>{{DepartmentName}}</span>
    	<span>{{employeeName}}</span>
    	<span>拜访记录</span>
    </div>
    <div class="title">
    	 <template v-for="item in SalesProcessList">
    	 	  <em>
    	 		{{item.Name}}
    	 		<span class="colorE95252">{{item.VisitCount}}</span>次
    	 		</em>
    	 </template>
     
    </div>
    <div class="month">
      <ul>
        <li>
          <i
            class="el-icon-caret-left monthminus"
            @click="currentYear-=1,getDateString(),initCalendar(dateString)"
          ></i>
          <input
            type="text"
            disabled="disabled"
            v-model="currentYear"
            class="currentInput"
            @input="getDateString(),initCalendar(dateString)"
          >年
          <i
            class="el-icon-caret-right monthadd"
            @click="currentYear+=1,getDateString(),initCalendar(dateString)"
          ></i>
        </li>
        <li>
          <i class="el-icon-caret-left monthminus" @click="pickPre(currentYear,currentMonth)"></i>
          <input
            type="text"
            disabled="disabled"
            v-model="currentMonth"
            class="currentInput"
            @input="getDateString(),initCalendar(dateString)"
          >月
          <i class="el-icon-caret-right monthadd" @click="pickNext(currentYear,currentMonth)"></i>
        </li>
      </ul>
    </div>
    
    <ul class="weekdays">
      <li>{{$t('hotel.hotel_Monday')}}</li>
      <li>{{$t('hotel.hotel_Tuesday')}}</li>
      <li>{{$t('hotel.hotel_Wednesday')}}</li>
      <li>{{$t('hotel.hotel_Thursday')}}</li>
      <li>{{$t('hotel.hotel_Friday')}}</li>
      <li class="weekendDay">{{$t('hotel.hotel_Saturday')}}</li>
      <li class="weekendDay">{{$t('hotel.hotel_Sunday')}}</li>
    </ul>
    <ul class="days clearfix">
      <li v-for="(dayobject,index) in days" :key="dayobject.index">
        <p
          class="ckStyle"
          :class="{ckStyleOther:dayobject.day.getMonth()+1 != currentMonth}"
        >{{dayobject.day.getDate()}} <span v-if="dayobject.day.getMonth()+1 == currentMonth">({{dayobject.TotalCount}})</span>
        </p>
        <div class="ownScrollbarStyle">
          <p  v-for="item in dayobject.listArr">
          	<span style="color: #0F0FCD;" v-if='item.CreateBy!=msg.CreateBy&&isPrincipal==true'>{{item.CreateByName}}</span>
          	<span class="color333" v-if='item.CreateBy!=msg.CreateBy'>拜访</span>
          	<span class="color333">{{item.CustomerName}}</span>
          	<span v-if="item.VisitStateStr=='未拜访'" style="color: #E95252;">{{item.VisitStateStr}}</span>
          	<span  v-else style="color: #3FA783;">{{item.VisitStateStr}}</span>
         	 <!--{{item}}
         	-->
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
	   import Treeselect from '@riophae/vue-treeselect'
     import '@riophae/vue-treeselect/dist/vue-treeselect.css'	
	
export default {
		components: { Treeselect },
  data() {
    return {
    	
    	normalizer(node) {
            return {
                id: node.DepartmentId,
                label: node.DepartmentName,
                children: node.ChildList,
            }
        },
    	DepartmentId:null,
    	DepartmentName:"",
    	employeeName:"",
      msg: {
        Year: new Date().Format("yyyy"),
        Month: new Date().Format("MM"),
        //操作人
        CreateBy: "",
        DepartmentId: "",
        ExpectVisitDateTime:""
      },
			departmentMsg: {
					RB_Group_Id: '0',
					RB_Branch_Id:'-1',
					Status:'0',
					ParentId:'-1',
					Tier:'0',
				},
				employeeMsg: {
					RB_Group_id:'0',
					RB_Branch_id:'-1',
	        departmentId:'0',
	        IsLeave:'-1',
				},      
      departmentList:[],
      employeeList:[],
      SalesProcessList:[],
      //线路列表
      LineList: [],
      defaultSelectValue: 0,
      //城市列表
      cityList: [],
      currentDay: 1,
      currentMonth: 1,
      currentYear: 1970,
      currentWeek: 1,
      days: [],
      //每天的机位库存
      DayData: [],
      //员工列表
      TotalCount: 0,
      TotalSeat: 0,
      isPrincipal:true,
    };
  },
  methods: {
  	
  	getIsPrincipal(){
  		this.apipost('app_customer_GetIsPrincipal', {}, res => {
					if(res.data.resultCode == 1) {
						this.isPrincipal = res.data.data.IsPrincipal
						if(res.data.data.IsPrincipal!=true){
							this.employeeName=this.getLocalStorage().emName
							this.DepartmentName=this.getLocalStorage().DepartmentName
						}
					}
				}, err => {})		
  	},
  	getDepartment() {
				this.apipost('Advertising_get_GetNowDepartmentAndSubordinate',{}, res => {
					if(res.data.resultCode == 1) {
						this.departmentList = res.data.data;
					}
				}, err => {})				
			},
  	linkageEmployeeMsg(){
				this.employeeMsg.departmentId=this.msg.DepartmentId
				this.msg.CreateBy='-1'
				this.employeeName=''
				this.getEmployee()
				let obj=this.departmentList.find(item=>item.DepartmentID===this.msg.DepartmentId)
				if(obj)
				{
					this.DepartmentName=obj.DepartmentName
				}else{
					this.DepartmentName=''
				}
			},			
			getEmployeeList(node,id){
				this.DepartmentName=node.DepartmentName
				this.employeeName=''
				this.msg.CreateBy='-1'
				this.msg.DepartmentId=this.employeeMsg.departmentId=node.DepartmentId
				this.getEmployee()
				this.GetHoltelInventory()
			},
			getName(){
				let obj=this.employeeList.find(item=>item.empId===this.msg.CreateBy)
					if(obj)
					{
						this.employeeName=obj.name
					}else{
						this.employeeName=''
					}				
			},
			getEmployee() {
				this.apipost('app_get_company_employee', this.employeeMsg, res => {
					if(res.data.resultCode == 1) {
						this.employeeList = res.data.data;
					}
				}, err => {})				
			},
    goUrl(path, obj, name) {
      this.$router.push({
        path: path,
        query: {
          id: obj.AirLineTicketId,
          blank: "y",
          tab: name
        }
      });
    },
    //格式化日期
    getDateString: function() {
      this.dateString = this.$calendarUtils.formatDate(
        this.currentYear,
        this.currentMonth,
        1
      );
      this.GetHoltelInventory();
    },
    initCalendar: function(cur) {
      var newDays = this.$calendarUtils.createCalendar(cur);
      this.currentDay = newDays.CurrentDay;
      this.currentYear = newDays.CurrentYear;
      this.currentMonth = newDays.CurrentMonth;
      this.currentWeek = newDays.CurrentWeek;
      this.days.length = 0;
      var dateArray = newDays.DayArray;
      for (var i = 0; i < dateArray.length; i++) {
        var d = dateArray[i].day;
        var dayobject = {};
        dayobject.day = d;
        this.days.push(dayobject);
      }
    },
    //点击左箭头切换年月
    pickPre: function(year, month) {
      var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
      d.setDate(0);
      this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
      this.initCalendar(
        this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
      );
      this.GetHoltelInventory();
    },
    //点击右箭头切换年月
    pickNext: function(year, month) {
      var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
      d.setDate(35);
      this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
      this.initCalendar(
        this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
      );
      this.GetHoltelInventory();
    },
    //点击获取酒店库存数据
    GetHoltelInventory() {
      this.msg.ExpectVisitDateTime = this.currentYear + "-" + this.currentMonth + "-01";
      this.apipost(
        "app_customer_GetMonthVisit",
        this.msg,
        res => {
        	this.SalesProcessList=res.data.data.SalesProcessList
          this.DayData = res.data.data.VisitList;
          this.TotalCount = 0;
          this.TotalSeat = 0;
          this.days.forEach(dayItem => {
            let d = dayItem.day;
            let myDate = this.$calendarUtils.formatDate(
              d.getFullYear(),
              d.getMonth() + 1,
              d.getDate()
            );
            for (var j = 0; j < this.DayData.length; j++) {
              if (this.DayData[j].DayStr == myDate) {
                dayItem.listArr = this.DayData[j].SubList;
                dayItem.TotalCount = dayItem.listArr.length;
                dayItem.listArr.forEach(subItem => {
                  this.TotalSeat += subItem.TicketNum;
                });
                this.TotalCount += dayItem.TotalCount;
              }
            }
          });
          this.$forceUpdate();
        },
        err => {}
      );
    },
    //获取中国下面的城市列表
    getCityList() {
      this.apipost(
        "Destination_get_GetCityListByCountryId",
        {
          Id: 2
        },
        res => {
          this.cityList = res.data.data;
        },
        err => {}
      );
    },
  },
  mounted() {
  		let userInfo = this.getLocalStorage();
		//	this.departmentMsg.RB_Group_Id=this.employeeMsg.RB_Group_id=this.companyMsg.RB_Group_Id = userInfo.RB_Group_id; //集团
			
    //初始化日历
    let myDate = new Date();
    this.currentYear = myDate.getFullYear();
    this.currentMonth = myDate.getMonth() + 1;
    this.getCityList();
    this.initCalendar();
    this.GetHoltelInventory();
    this.getDepartment()
		this.getEmployee()	
		this.getIsPrincipal()
  }
};
</script>
