<!--客户统计 -->
<template>
    <div class="boxmain">
		 <div class="title">销售部门信息统计</div>
		<div class="box-search">
		<el-select
			 v-model="dateValue"
			 placeholder="请选择报表统计形式"
			 @change="setDateRange(dateValue)"
			 clearable
		>
			 <el-option
			 v-for="item in formallyData"
			:label="item.name"
			:value="item.value"
			 />
		 </el-select>
		<el-date-picker	
			 size="mini"
			 style="margin-left: 30px; height:32px;"
			 v-if="this.dateValue === 0 "
			 type="year"
			 placeholder="选择年"
			v-model="preYear"
			@change="yearChange" 
		></el-date-picker>
			<el-date-picker
			  size="mini"
			  style="margin-left: 30px; height:32px;"
			  v-if="this.dateValue === 1 "
			  v-model="preMonth"
			  type="month"
			  placeholder="选择月"
			  value-format="timestamp"
			  @change="monthChange"
			></el-date-picker>
			<div class="data_week" ref="data_week">
			  <el-date-picker
				 class="picker"
				 type="week"
				 :editable="false"
				 placeholder="请选择周"
				 v-if="this.dateValue === 2"
				 :picker-options="{'firstDayOfWeek': 1}"
				 v-model="seletWeekValue"
				 format="yyyy年第WW周"
				 :clearable="false"
				 @change="changeweek"
			  ></el-date-picker>
			 <div class="week-picker">
			    <el-input
				v-if="this.dateValue === 2"
				class="weekDataInput"
				v-model="weekTime"
				prefix-icon="el-icon-date"
				placeholder="请选择日期"
				:clearable="true"
			    ></el-input>
			  </div>
			</div>
		<el-select
			 style="margin-left: 30px;"
			 v-model="newManage.departmentValue"
			 placeholder="请选择数据范围"
			 clearable
			 @change="dataRange(newManage.departmentValue)"
		 >
			 <el-option
			 v-for="item in departmentData"
			:label="item.name"
			:value="item.value"
			 />
		 </el-select>
		 <el-select
			 style="margin-left: 30px;"
			 v-model="newManage.countPeople"
			 v-if="this.chooseVal === 2"
			 placeholder="请选择要统计的人员"
			 clearable
		 >
			<el-option
			  v-for="item in salesPersonnelfrom.deliverAssign"
			  :key="item.nickName"
			  :label="item.nickName"
			  :value="item.userId">
			</el-option>
		 </el-select>
		 <el-select
		   style="margin-left: 30px;"
		   v-model="newManage.countDepartment"
		   v-if="this.chooseVal === 1"
		   placeholder="请选择要统计的部门"
		   clearable
		  >
		 	 <el-option
		 		 v-for="item in salesPersonnelfrom.department"
		 		 :key="item.value"
		 		 :label="item.label"
		 		 :value="item.leaderId">
		 	 </el-option>
		 </el-select>
			<el-button
			  type="primary"
			  style="margin-left: 20px"
			  @click="toSearch"
			  icon="el-icon-share"
			  >统计</el-button>
		</div>
	  <div class="box-top">
		<div class="boxtext">
			<div>今日新增客户:<span>{{this.typeManage.todayNewInsertCustomer}}</span>个</div>
			<div>今日跟进客户:<span>{{this.typeManage.todayFollowCustomer}}</span>个</div>
			<div>今日成交项目:<span>{{this.typeManage.todayDealProject}}</span>个</div>
		</div>
		<div class="boxtext">
			<div>昨日新增客户:<span>{{this.typeManage.yesterdayNewInsertCustomer}}</span>个</div>
			<div>昨日跟进客户:<span>{{this.typeManage.yesterdayFollowCustomer}}</span>个</div>
			<div>昨日成交项目:<span>{{this.typeManage.yesterdayDealProject}}</span>个</div>
		</div>
	  </div>
	  <div class="box-center">
		<div class="box-center-left">
			<div>客户信息分类统计</div>
			<div ref="histogram" class="chartOne"/> 
		</div>
		<div class="box-center-right">
			<div>项目成交情况</div>
			<div ref="pieChart" class="chartTwo"/>	   
		</div>
	  </div>
		  <div class="box-center">
				<div class="box-center-left">
					<div>客户跟进统计</div>
					<div ref="brokenLine" class="chartThree"/>
				</div>  
			<div class="box-center-right">
				  <el-table
				    :data="tableData"
				    border
				    style="width: 90%;height: 100%;">
				    <el-table-column
				      prop="date"
				      label="项目名称"
				      width="180">
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="公司名称"
				      width="180">
				    </el-table-column>
				    <el-table-column
				      prop="address"
				      label="最后跟进时间">
				    </el-table-column>
					<el-table-column
					  prop="address"
					  label="成交状态">
					</el-table-column>
				  </el-table>
			</div>
		  </div>
		<div class="box-bottom">
			<div class="box-bottom-top">
				<div class="list">数据列表</div>
				 <el-date-picker
				   :default-time="['00:00:00', '23:59:59']"
					v-model="exportTime"
					 type="datetimerange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					style="margin-left: 30px;"
					>
				</el-date-picker>
				<el-button
				  type="success"
				  @click="exportRecord"
				  icon="el-icon-share"
				  style="margin-left: 30px;"
				  >导出客户跟进情况记录</el-button>
			</div>
			<div class="box-bottom-table">
			  <el-table  :data="typeManage.selectdata" style="width: 97%;margin-left: 30px;" >
			    <el-table-column type="index" label="序号" width="100"/>
			    <el-table-column prop="name" label="姓名"/>
				<el-table-column prop="tel" label="电话"/>
				<el-table-column prop="saleidStr" label="销售人员"/>
				<el-table-column prop="company" label="公司名称"/>
				<el-table-column prop="numberOfAllProject" label="现有项目数"/>
				<el-table-column prop="dealStatus" label="成交状态">
					<template slot-scope="scope">
					<span v-if="scope.row.dealStatus===0" style="color:#f56c6c;">未成交</span>
					<span v-else style="color: #67c23a;">已成交</span>
					</template>
				</el-table-column>
				<el-table-column prop="custLevel" label="客户级别"/>
				<el-table-column prop="custType" label="客户类型"/>
				<el-table-column prop="classidStr" label="消息分类"/>
				<el-table-column prop="inforSourceVo" label="客户来源"/>
			  </el-table>
			  <el-pagination
			    :page-sizes="[10, 20, 30, 40]"
			    layout="total, sizes, prev, pager, next, jumper"
			    :total="typeManage.total"
			    @size-change="handleSizeChange"
			    @current-change="handleCurrentChange"
			    style="margin:10px 0px 40px 30px;"
			  />
			</div>
		</div>
    </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts";
import { parseTime,Tools} from "../../utils";
import {deliverList,allDepartments,getEchrtsData,expRecord} from "@/api/connectionAdministration.js";
export default {
  data() {
    return {
		//选择周
		seletWeekValue: "",
		weekTime: "",
		startTimeNum: "",
		endTimeNum: "",
		  //部门选择
		  departmentData: [
			{
			name: "全部",
			value: 0,
			},
			{
			name: "本部门及下属部门",
			value: 1,
			},
			{
			name: "个人",
			value:2,
			},
		  ],
		newManage:{
			departmentValue:"",//部门选择
			countPeople:"",//统计人员
			countDepartment:""//统计部门
		},
			chooseVal:"",
			//销售人员
			salesPersonnelfrom:{
			deliverAssign:[],
			department:[]
		},
		//默认x轴数据
		xAxisData:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
		//选择时间后的数组
		preYear:'',
		preMonth:'',
		//时间状态选择
		dateValue: 2,
		formallyData: [
		  {
			name: "年度",
			value: 0,
		  },
		  {
			name: "月",
			value: 1,
		  },
		  {
			name: "周",
			value:2,
		  },
		],
		tableData:[],
		typeSelectList:[],
		typeManage:{
		  page:1,
		  size:10,
		  total:0,
		  selectdata:[],
		  // 增加数量
		  todayDealProject: "",
		  todayFollowCustomer: "",
		  todayNewInsertCustomer: "",
		  yesterdayDealProject:"",
		  yesterdayFollowCustomer:"",
		  yesterdayNewInsertCustomer:"",
		  weekNumber:[],
		 addDialog:false,
		},
		 exportTime:"",//导出时间
    };
  },
  mounted() {
     this.setDateRange()
     this.echartshistogram = echarts.init(this.$refs.histogram);
	 this.echrtsOne()
	 this.echartspie = echarts.init(this.$refs.pieChart);
	 this.echrtsTwo()
	 this.echartsLine = echarts.init(this.$refs.brokenLine);
	 this.echrtsThree()
	//获取所有销售人员
	deliverList().then(function(res){
		var deliverData=res.object||[]
		 this.salesPersonnelfrom.deliverAssign=deliverData
	}.bind(this));
	// 获取所有销售部门
	allDepartments().then(function(res){
		var departmentData=res.object||[]
		 this.salesPersonnelfrom.department=departmentData
	}.bind(this));
	this.changeweek();
	console.log('toSearch ________________ ', this.typeManage, this.dateValue, this.MonthstartTime, this.MonthendTime);
	// 初始化搜索
	this.toSearch();
  },
  methods: {  
	  // 切换时间
	    setDateRange (val) {
	  	  this.preMonth=''
	  	  var date = new Date();
	  	  var year = date.getFullYear();
	  	  var month = date.getMonth() + 1;
	  	if(val===0){
	  		this.preMonth=`${year}`
	  		this.xAxisData=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
			this.echrtsOne()
			this.echrtsThree()
	  	}else if(val===1){
	  		this.preMonth=`${year}-${month}`
	  		this.xAxisData=['1号','2号','3号','4号','5号','6号','7号','8号','9号','10号','11号','12号','13号','14号','15号',
			'16号','17号','18号','19号','20号','21号','22号','23号','24号','25号','26号','27号','28号','29号','30号','31号'];
			this.echrtsOne()
			this.echrtsThree()
	  	}else if(val===2){
	  		this.xAxisData=['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
			this.echrtsOne()
			this.echrtsThree()
	  	}
	  },
	  // 选择年时间
	  yearChange(e){
	  		  var firstDay = new Date(e);
	  		  firstDay.setDate(1);
	  		  firstDay.setMonth(0);
	  		  var lastDay = new Date(e);
	  		  lastDay.setFullYear(lastDay.getFullYear()+2);
	  		  lastDay.setDate(0);
	  		  lastDay.setMonth(-1);
	  		  var startTime = Tools.Dates.format.call(new Date(firstDay), 'yyyy-MM-dd HH:mm:ss');
	  		  var endTime = Tools.Dates.format.call(new Date(lastDay.getTime()+86399000), 'yyyy-MM-dd HH:mm:ss');
	  		  this.MonthstartTime=startTime
	  		  this.MonthendTime=endTime
	  },
	  // 选择月时间
	  monthChange(e){
			var dateList = Tools.Dates.format.call(new Date(e), 'yyyy-MM').split('-');
			var year = dateList[0];
			var startMonth = dateList[1];
			var endStamp = new Date(year, startMonth, 0).getTime()+86399000;
			var startTime = Tools.Dates.format.call(new Date(e), 'yyyy-MM-dd HH:mm:ss');
			var endTime = Tools.Dates.format.call(new Date(endStamp), 'yyyy-MM-dd HH:mm:ss');
			this.MonthstartTime=startTime
			this.MonthendTime=endTime
	  },
	// 计算周时间
	timestampToTime(timestamp) {
	  var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
	  let Y = date.getFullYear() + '-';
	  let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
	  let D = date.getDate() + ' ';
	  return Y + M + D;
	},
	// 选择周时间
	 changeweek(val) {
			if (val) {
			var todayDay = new Date(val);
		  } else {
			var todayDay = new Date();
		  }
			let todayOfWeek = todayDay.getDay();
			let todayOfmonth = todayDay.getMonth();
			let todayOfDate = todayDay.getDate();
			let spendDay = 1;
			if (todayOfWeek != 0) {
			spendDay = 7 - todayOfWeek;
		 }
			this.startTimeNum = todayDay.valueOf() - (6 - spendDay) * 86400000;
			this.endTimeNum = todayDay.valueOf() + spendDay * 86400000;
			var startTimeStr = this.timestampToTime(this.startTimeNum); // 时间戳转字符串
			var endTimeStr = this.timestampToTime(this.endTimeNum);
			var startTime = Tools.Dates.format.call(new Date(startTimeStr), 'yyyy-MM-dd HH:mm:ss');
			var endTime = Tools.Dates.format.call(new Date(endTimeStr+"23:59:59"), 'yyyy-MM-dd HH:mm:ss');
			this.MonthstartTime=startTime
			this.MonthendTime=endTime
	        this.weekTime = startTimeStr + "  -  " + endTimeStr; // 2020-09-21~2020-09-27默认
	    },
		//选择部门判断
		dataRange(val){
		  console.log(val,"选择部门")
		  this.chooseVal=val
		},
	   //柱状图
	  echrtsOne(serises){
		  this.echartshistogram.setOption({
		   tooltip: {
		     trigger: 'axis',
		     axisPointer: {
		       type: 'shadow'
		     }
		   },
		   legend: {
			 top:'5%',
		   },
		   grid: {
		     left: '3%',
		     right: '4%',
		     bottom: '3%',
		     containLabel: true
		   },
		   xAxis: {
		  type: 'category',
		  data:this.xAxisData,
		   },
		   yAxis: {
				 type: 'value'
		   },
		   series:serises || [],
		}); 
	  },
	  //饼图
	  echrtsTwo(){
		    this.echartspie.setOption({
				  tooltip: {
				    trigger: 'item'
				  },
				  legend: {
					 top:'5%',
				     left: 'center'
				  },
				  series: [
				    {
				      name: '项目成交情况',
				      type: 'pie',
				      radius: '60%',
				      data: [
				        { value: 0, name: '已成交' },
				        { value: 0, name: '未成交' }
				      ],
				      emphasis: {
				        itemStyle: {
				          shadowBlur: 10,
				          shadowOffsetX: 0,
				          shadowColor: 'rgba(0, 0, 0, 0.5)'
				        }
				      },
					  itemStyle: {
					     normal: {
					       color: function (colors) {
					          var colorList = [
					            '#73c0de',
					            '#ee6666'
					          ];
					          return colorList[colors.dataIndex];
					        }
					      },
					    },
				    }
				]
			})  
	    },
	  echrtsThree(){
		this.echartsLine.setOption({
			 tooltip: {
				trigger: 'axis',
				axisPointer: {
				  type: 'cross',
				  crossStyle: {
					color: '#8dc67b'
				  }
				}
			  },
			  legend: {
				 top:'5%',
				data: ['客户总数', '跟进次数']
			  },
			  xAxis: [
				{
				  type: 'category',
				  data: this.xAxisData,
				  axisPointer: {
					type: 'shadow'
				  }
				}
			  ],
			  yAxis: [
				{
				  type: 'value',
				  name: '数量',
				  min: 0,
				  max: 25,
				  interval: 5,
				  axisLabel: {
					formatter: '{value}'
				  }
				},
				{
				  type: 'value',
				  min: 0,
				  max: 25,
				  interval: 5,
				  axisLabel: {
					formatter: '{value}'
				  }
				}
			  ],
			  series: [
				{
				  name: '客户总数',
				  type: 'bar',
				  color: ['#5470c6'],
				  barWidth : 35, //柱图宽度
				  tooltip: {
					valueFormatter: function (value) {
					  return value ;
					}
				  },
				  data: [
				  ]
				},
			   
				{
				  name: '跟进次数',
				  type: 'line',
				  color: ['#96ce7b'],
				  yAxisIndex: 1,
				  tooltip: {
					valueFormatter: function (value) {
					  return value ;
					}
				  },
				  data: []
				}
			  ]
		})  
	 },
	 // 请求接口数据
	 toSearch(params){
		 var params = {
		   page:this.typeManage.page, 
		   pageSize:this.typeManage.size,
		   startTime:this.MonthstartTime,//开始时间与结束时间
		   endTime: this.MonthendTime,
		   range:this.newManage.departmentValue ,//数据范围
		   detailRange:this.newManage.countDepartment,// 统计销售部门、
		   form:this.dateValue,
		 };
	 	getEchrtsData(params).then((res) => {
	 	  console.log(res,"表格数据---")
		  if(res.code ===200){
			  // 最下方表格数据
			  var selectArr=res.object.dataList||[]
			  this.typeManage.selectdata=selectArr
			  this.typeManage.total=res.object.total
			  // 数量显示
			  this.typeManage.todayDealProject=res.object.todayDealProject
			  this.typeManage.todayFollowCustomer=res.object.todayFollowCustomer
			  this.typeManage.todayNewInsertCustomer=res.object.todayNewInsertCustomer
			  this.typeManage.yesterdayDealProject=res.object.yesterdayDealProject
			  this.typeManage.yesterdayFollowCustomer=res.object.yesterdayFollowCustomer
			  this.typeManage.yesterdayNewInsertCustomer=res.object.yesterdayNewInsertCustomer;
			  // 周数量显示
			 var weekData=res.object.customerInfoClassStatics;
			 var serises = [], colors = ["#fac858", "#ee6666", "#73c0de"];
			   for(var i=0;i<weekData.length;i++){
				 var item = weekData[i];
				 serises.push({
				   name: item.string,
				   type: 'bar',
				   stack: 'total',
				   label: {
					 show: true
				   },
				   emphasis: {
					 focus: 'series'
				   },
				   data: item.listInteger,
				   itemStyle: {//自定义颜色
						 normal: { color: colors[i] },
					}
				 });
			   }
			   this.echrtsOne(serises)
		  }else if(res.code === 401){
			    var self = this;  
				self.$message({
					type: "error",
					message: "查询失败!请选择具体日期",
		        });  
		    }
	 	});
	 },
	 //获取全部信息分类分页
	 handleSizeChange(val) {
	 // 每页多少条
	 this.typeManage.size =val ;
	 this.toSearch();
	 },
	 handleCurrentChange(val) {
	 // 当前是多少页
	 this.typeManage.page = val;
	 this.toSearch();
	 },
	 
	 // 导出
	 exportRecord(){
		 var params = {};
		 // 时间
		 if (this.exportTime instanceof Array) {
		   params.startTime = parseTime(new Date(this.exportTime[0]));
		   params.endTime = parseTime(new Date(this.exportTime[1]));
		 }
		 expRecord(params).then((res) => {
			 var file = res.object;
			 window.open('oa.gemho.cn:8004/customer_follow_form/'+file);
		});
	 }, 
  },
};
</script>
<style lang="scss" scoped>
.boxmain{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-direction: column;
}
.title{
	width: 100%;
	height: 75px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: 24px;
	font-family: Microsoft YaHei;
	font-weight: 700;
	color: #666666;
	line-height: 150px;
}
.box-search {
  width: 97%;
  display: flex;
  margin:30px 30px 30px 30px;
}
.box-top{
	width: 96%;
	display: flex;
	flex-direction: column;
	justify-content:start;
	margin: 10px 0px 10px 30px;
}
	
.box-top div{
	font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
	font-weight: 700;
	font-style: normal;
	font-size: 18px;
}
.boxtext{
	width: 50%;
	display: flex;
	justify-content: start;
	align-items: center;
}
.boxtext div{
	margin: 10px 40px 10px 0px;
}
.box-center{
	width: 100%;
	display: flex;
}
.box-center-left{
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.box-center-left div{
	font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
	font-weight: 700;
	font-style: normal;
	font-size: 18px;
	
}
.box-center-right{
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.box-center-right div{
	font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
	font-weight: 700;
	font-style: normal;
	font-size: 18px;
	
}
.chartOne{
	width: 80%;
	height: 300px;
}
.chartTwo{
	width: 80%;
	height: 300px;
}
.chartThree{
	width: 80%;
	height: 300px;
}
.box-bottom{
	width: 100%;
	display: flex;
	flex-direction: column;
	
}
.box-bottom-top{
	width: 97%;
	display: flex;
	align-items: center;
	margin:10px 30px 10px 30px;
}
.list{
	font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
	font-weight: 700;
	font-style: normal;
	font-size: 18px;
}
.export{
	font-family: Microsoft YaHei;
	font-size: 14px;
	color: #169bd5;
	text-align: center;
	margin-left: 30px;
}
.print{
	font-family: Microsoft YaHei;
	font-size: 14px;
	color: #169bd5;
	text-align: center;
	margin-left: 30px;
	
}
// 周选择器样式
.data_week {
  position: relative;
  margin-left: 30px;
  .picker {
    position: absolute;
    width: 80%;
    opacity: 0;
    z-index: 100;
  }
  .week-picker {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 0.875rem;
    .spanTitle {
      min-width: 40px;
    }
  }
  .weekDataInput{
	  width: 250px;
  }
}
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
::v-deep input[type=‘number’] {
-moz-appearance: textfield !important;
}
</style>
