<!-- 信息管理 -->
<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.customerSource" 
					 placeholder="请选择信息分类"
					 clearable
                    >
					 <el-option
					v-for="item in typeManage.dropData"
					:key="item.id"
					:label="item.name"
					:value="item.id"
					 />
				  </el-select>
				 <el-button
					type="primary"
					style="margin-left: 30px"
					@click="toSearch"
					icon="el-icon-share"
					>
					统计
				</el-button>
		  </div>
		  <div class="box-top">
				<div class="boxtext">
					<div>今日新增信息:<span>{{this.typeManage.newToday}}</span>条</div>
					<div>昨日新增信息:<span>{{this.typeManage.newlyIncreased}}</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-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="200"/>
			    <el-table-column prop="name" label="姓名"/>
				<el-table-column prop="tel" label="电话"/>
				<el-table-column prop="saleidStr" label="销售人员"/>
				<el-table-column prop="classidStr" label="信息分类"/>
				<el-table-column prop="useridStr" label="推广人员"/>
				<el-table-column prop="inforStatus" label="信息状态">
					<template slot-scope="scope">
					   <span v-if="scope.row.inforStatus==='0'">未成交</span>
					   <span v-else>已成交</span>
					</template>
				</el-table-column>
			  </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:20px 0px 20px 30px;"
			  />
			</div>
		</div>
    </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts";
import {parseTime, Tools } from "../../utils";
import {getAllCategory,deliverList,allDepartments,getEchrtsData,expRecord} from "@/api/census.js";
export default {
  data() {
    return {
		// 周选择器
		seletWeekValue:"",
		weekTime: "",
		startTimeNum: "",
		endTimeNum: "",
		  options: [{
		          value: 'zhinan',
		          label: '副总经理',
		          children: [
					  {
		            value: 'shejiyuanze',
		            label: '推广一部',
		          }, {
		            value: 'daohang',
		            label: '销售二中心',
		            children: [{
		              value: 'cexiangdaohang',
		              label: '销售一部'
		            }, {
		              value: 'dingbudaohang',
		              label: '销售二部'
		            },
					{
					  value: 'san',
					  label: '销售三部'
					}]
		    }]
		}],
		//默认x轴数据
		xAxisData:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
		//选择时间后的数组
		preYear:'',
		preMonth:'',
		// 时间状态选择
		dateValue: 2,
		// 信息分类接口
		newManage:{
		  page:1,
		  size:10,
		  total:0,
		  newdata:[],
		  customerSource:"",//信息分类
		  departmentValue:"",//部门选择
		  countPeople:"",//统计人员
		  countDepartment:""//统计部门
		},
		// 日期选择
		formallyData: [
		  {
			name: "年度",
			value: 0,
		  },
		  {
			name: "月",
			value: 1,
		  },
		  {
			name: "周",
			value:2,
		  },
		],
		chooseVal:"",
		//销售人员
		salesPersonnelfrom:{
			deliverAssign:[],
			department:[]
		},
		typeManage:{
		  page:0,
		  size:10,
		  total:0,
		  selectdata:[],
		  dropData:[],
		  addDialog:false,
		  newToday:"",//今日新增
		  newlyIncreased:"",//昨日新增
		  editDialog:false,
		  echartOneData:[],
		  echartNewData:[],
		  echartTwoData:[],
		  
		},
		tatilData:[],
		MonthstartTime:"",
		MonthendTime:"",
		WeekstartTime:"",
		WeekendTime:"",
		// 遍历数组
		foreachArr:[],
		data:[],
        exportTime:"",//导出时间
    };
  },
  mounted() {
	this.setDateRange();
	this.changeweek();
    this.echartshistogram = echarts.init(this.$refs.histogram);
	this.echrtsOne()
	this.echartspie = echarts.init(this.$refs.pieChart);
	this.echrtsTwo()
	this.classification()
	this.getSelectInfo();
	
	
	console.log('toSearch ________________ ', this.typeManage, this.dateValue, this.MonthstartTime, this.MonthendTime);
	
	// 初始化搜索
	this.toSearch();
  },
  methods: {  
	  // 获取分类下拉列表
	  getSelectInfo(){
	    var typeM = this.typeManage;
	    var params = {
	      page:1, 
	      pageSize:999,
	    };
	    getAllCategory(params).then((res) => {
	      var dropDown = res.object.records || [];
	      typeM.dropData = dropDown;
	    });
	  },
	  // 信息分类接口
	  classification(params){
	  		var params = {
	  		  page:this.newManage.page, 
	  		  pageSize:this.newManage.size,
	  		};
	  		getAllCategory(params).then((res) => {
	  		    var newlist = res.object.records || [];
	  		    this.newManage.newdata=newlist
	  		});	
	  },
	  // 切换时间
		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()
	  	}else if(val===1){
	  		this.preMonth=`${year}-${month}`
	  		this.xAxisData=this.foreachArr;
			this.echrtsOne()
	  	}else if(val===2){
	  		this.xAxisData=['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
			this.echrtsOne()
	  	}
	  	//this.dateValue = val
	  },
	  // 选择年时间
	  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 = e && Tools.Dates.format.call(new Date(firstDay), 'yyyy-MM-dd HH:mm:ss') || '';
		  var endTime = e && 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 = e && Tools.Dates.format.call(new Date(e), 'yyyy-MM-dd HH:mm:ss') || '';
		  var endTime = e && 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默认
		},
	 
	  // 柱状图
	  echrtsOne(xAxisList){
		  let that = this;
		  this.echartshistogram.setOption({
		   tooltip: {
		      trigger: 'axis',
		      axisPointer: {
		        type: 'shadow',
		      }
		    },
		    xAxis: [
		      {
		        type: 'category',
				name: '(数量/日)',
		        data: that.xAxisData[0] ? that.xAxisData : (xAxisList || []),
		        axisTick: {
		          alignWithLabel: true
		        },
				 axisLabel: {
					interval: 0,//横轴信息全部显示
					margin: 10, //刻度标签与轴线之间的距离
					textStyle: {
					  fontSize: 9, //横轴字体大小
					  color: "#000000",//颜色
					},
				  },
		      }
		    ],
		    yAxis: [
		      {
		       	type:'value',//关键
		       	scale:true,
		        name: '(数量/条)',
				 min: (value) => {
				    return value.min
				  },
				  max: (value) => {
				    return value.max
				  },
				interval: 50,
		       	nameTextStyle: {
		  	   		color: "#000000",
		  	   		fontSize: 14,
		  	   		fontFamily: "Microsoft YaHei",
		  	   		fontWeight: 400,
		  	   	},
			}
		],
		    series: [
		      {
		         name: '增加信息总数',
		         type: 'bar',
				 barWidth : 20, //柱图宽度
		        color: ['#5470c6'],
		        data:this.typeManage.echartOneData
		      }
		    ]
		}); 
	  },
	  // 饼图
	    echrtsTwo(){
		    this.echartspie.setOption({
				  tooltip: {
				    trigger: 'item'
				  },
				  legend: {
				    top: '5%',
				    left: 'center'
				  },
				  series: [
				    {
				      type: 'pie',
				      radius: ['40%', '70%'],
				      avoidLabelOverlap: false,
				      label: {
				        show: false,
				        position: 'center'
				      },
				      emphasis: {
				        label: {
				          show: true,
				          fontSize: '40',
				          fontWeight: 'bold'
				        }
				      },
					   itemStyle: {
					      normal: {
					        color: function (colors) {
					           var colorList = [
					             '#5470c6',
					             '#91cc75',
					             '#fac858',
					             '#ee6666',
					             '#73c0de',
					             '#3ba272'
					           ];
					           return colorList[colors.dataIndex];
					         }
					       },
					     },
				      labelLine: {
				        show: false
				      },
				      data:this.typeManage.echartTwoData
				    },
				]
			})
	    },
		// 请求接口根据参数不同获取数据
		toSearch(){
			var params = {
			  page:this.typeManage.page, 
			  pageSize:this.typeManage.size,
			  form:this.dateValue,
			  startTime:this.MonthstartTime,
			  endTime: this.MonthendTime,
			  infoClassNo:this.newManage.customerSource,
			};
			getEchrtsData(params).then((res) => {
			  if(res.code ===200){
				  var selectArr=res.object.dataList||[]
				  this.typeManage.selectdata=selectArr
				  this.typeManage.total=res.object.total
				  this.typeManage.newToday=res.object.newInformationToday
				  this.typeManage.newlyIncreased=res.object.newInformationYesterday
				  this.data = JSON.parse(JSON.stringify(res).replace(/"tableArrayMonth"/g,'"tableArray"'))
				  this.typeManage.echartOneData=this.data.object.tableArray||[]
				  this.typeManage.echartTwoData=res.object.iconArray||[]
				  var arr=[];
				  for(var item of this.typeManage.echartOneData){
					arr.push(item.data)
				  }
				  this.foreachArr=arr;
				  // 查询成功后调用echarts图一接口
				  this.echrtsOne(arr)
				  this.echrtsTwo()
			  }else if(res.object === 403){
				  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;
	overflow: hidden;
}
.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: 97%;
	display: flex;
	flex-direction: column;
	justify-content:start;
	margin: 10px 30px 10px 30px;
}
	
.box-top div{
	font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
	font-weight: 700;
	font-style: normal;
	font-size: 18px;
	margin: 0px 30px 10px 0px;
	
}
.boxtext{
	width: 50%;
	display: flex;
	justify-content: start;
	align-items: center;
	
}
.box-center{
	width: 100%;
	display: flex;
}
.box-center-left{
	width: 60%;
	display: flex;
	flex-direction: column;
	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: 40%;
	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: 90%;
	height: 300px;
}
.chartTwo{
	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>
