<!-- 信息管理 -->
<template>
      <div class="datamanage-wrapper">
		  <div class="search-wrapper">
		    <el-input
			  type="number"
		      v-model="tel"
		      style="width: 180px; margin-left: 20px"
		      placeholder="请输入电话"
			  clearable
		    />
			<el-select
				 clearable
			     v-model="className"
			     placeholder="请选择类别"
				 style="margin-left: 30px;"
			   >
			     <el-option
			     v-for="item in typeManage.dropData"
			     :key="item.id"
			     :label="item.name"
			     :value="item.name"
			     />
			   </el-select>
			<el-date-picker
			:default-time="['00:00:00', '23:59:59']"
		     style="width: 380px !important;margin-left: 30px;"
			  v-model="searchTime"
			  type="datetimerange"
			  range-separator="至"
			  start-placeholder="开始日期"
			  end-placeholder="结束日期"
			  clearable
			/>
			
		    <el-input
		      v-model="salesName"
			  type="text"
		      style="width: 180px; margin-left: 20px"
		      placeholder="请输入销售人员"
			  clearable
		    />
		    <el-button
		      type="success"
		      style="margin-left: 30px"
			  icon="el-icon-search"
		      @click="toSearch"
		      >搜索</el-button
		    >
			  <el-button type="primary"  icon="el-icon-circle-plus"  @click="addDialogData()" style="margin-left: 30px">
				自动分配
			  </el-button>
			  <el-button type="primary"  icon="el-icon-circle-plus"  @click="manualAssignment()" style="margin-left: 30px">
			  	手动分配
			  </el-button>
		  </div>
        <div class="table-wrapper">
          <el-table
           :data="typeManage.selectdata"
            style="width: 100%"
          >
            <el-table-column type="index"  label="序号" width="80" />
            <el-table-column prop="name" label="姓名" width="140" />
            <el-table-column prop="tel" label="电话" width="180" />
            <el-table-column prop="saleidStr" label="销售人员" width="140" />
            <el-table-column prop="classidStr" label="信息分类" width="180" />
            <el-table-column prop="addtime" label="时间" width="200" />
			<el-table-column prop="useridStr" label="推广人员" width="160" />
			<el-table-column prop="inforStatus" label="信息状态" width="180" />
			<el-table-column prop="inforSource" label="客户来源" width="180" />
			<el-table-column prop="alloStatus" label="分配状态" width="180" />
			<el-table-column label="操作" fixed="right" width="180"> 
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="primary"
						icon="el-icon-edit"
						@click="typeEdit($event, scope.$index, scope.row)"
						>编辑</el-button
					>
					<el-button
						size="mini"
						type="danger"
						icon="el-icon-delete"
						@click="typeDelete(scope.row)"
						>删除</el-button
					>
				</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-top: 20px;"
          />
        </div>
        <el-dialog title="自动分配新增信息" :visible.sync="typeManage.addDialog">
          <el-form
            ref="addDataForm"
            :model="addFormInfo.from"
            :rules="rules"
          >
            <el-form-item prop="type" label="信息分类" :label-width="'120px'">
           <el-select
				clearable	 
                v-model="addFormInfo.from.type"
                placeholder="请选择类别"
                filterable
                allow-create
              >
                <el-option
                v-for="item in typeManage.dropData"
                :key="item.id"
                :label="item.name"
                :value="item.name"
                />
              </el-select>
            </el-form-item>
             <div class="contact">
				  <el-form-item prop="name" label="姓名">
				   <el-input v-model="addFormInfo.from.name" type="text" clearable/>
				 </el-form-item>
				<div>
				  <el-form-item prop="qq" label="QQ号" >
					 <el-input v-model="addFormInfo.from.qq" clearable/>
				 </el-form-item>
				</div>
             </div>
			<div class="contact">
				 <el-form-item prop="telephone" label="电话" >
				   <el-input
				    v-model="addFormInfo.from.telephone"
				    clearable
				    type="number"/>
				 </el-form-item>
				<div>
					<el-form-item prop="wechatNumber" label="微信号">
					   <el-input v-model="addFormInfo.from.wechatNumber" clearable/>
					</el-form-item>
				</div>
			</div>
            <el-form-item prop="corporate" label="公司名称" style="margin-left: 67px;margin-top:10px;">
              <el-input v-model="addFormInfo.from.corporate" clearable style="width: 80%!important;"/>
            </el-form-item>
			 <el-form-item label="需求描述:" autosize  prop="description" style="margin-left: 67px;margin-top:10px;">
			    <el-input type="textarea" v-model="addFormInfo.from.description" 
				:rows="5"
				style="width: 80%!important;"></el-input>
			  </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button type="primary" @click="uploadAddForm" :loading="addFormInfo.flag === 0">确定</el-button>
          </div>
        </el-dialog>
		
		
		<el-dialog title="手动分配新增信息" :visible.sync="typeManage.manualDialog">
		  <el-form
		    ref="manuaDataForm"
		    :model="addFormInfo.from"
		    :rules="rules"
		  >
				<el-form-item prop="type" label="信息分类" :label-width="'120px'">
				<el-select
					clearable	 
				     v-model="addFormInfo.from.type"
				     placeholder="请选择类别"
				     filterable
				     allow-create
				   >
				     <el-option
				     v-for="item in typeManage.dropData"
				     :key="item.id"
				     :label="item.name"
				     :value="item.name"
				     />
				   </el-select>
				 </el-form-item>
				<el-form-item prop="changesalesman" label="选择销售人员" style="margin-left: 30px;">
				 <el-select v-model="addFormInfo.from.changesalesman" clearable placeholder="请选择销售人员">
				   <el-option
					 v-for="item in addFormInfo.from.deliverAssign"
					 :key="item.nickName"
					 :label="item.nickName"
					 :value="item.userId">
				   </el-option>
				 </el-select>
				</el-form-item>
		     <div class="contact">
				  <el-form-item prop="name" label="姓名">
				   <el-input v-model="addFormInfo.from.name" type="text" clearable/>
				 </el-form-item>
				<div>
				  <el-form-item prop="qq" label="QQ号" >
					 <el-input v-model="addFormInfo.from.qq" clearable/>
				 </el-form-item>
				</div>
		     </div>
			<div class="contact">
				 <el-form-item prop="telephone" label="电话" >
				   <el-input
				    v-model="addFormInfo.from.telephone"
				    clearable
				    type="number"/>
				 </el-form-item>
				<div>
					<el-form-item prop="wechatNumber" label="微信号">
					   <el-input v-model="addFormInfo.from.wechatNumber" clearable/>
					</el-form-item>
				</div>
			</div>
		    <el-form-item prop="corporate" label="公司名称" style="margin-left: 67px;margin-top:10px;">
		      <el-input v-model="addFormInfo.from.corporate" clearable style="width: 80%!important;"/>
		    </el-form-item>
			 <el-form-item label="需求描述:" autosize  prop="description" style="margin-left: 67px;margin-top:10px;">
			    <el-input type="textarea" v-model="addFormInfo.from.description" 
				:rows="5"
				style="width: 80%!important;"></el-input>
			  </el-form-item>
		  </el-form>
		  <div slot="footer">
		    <el-button type="primary" @click="manualuploadAddForm" :loading="addFormInfo.flag === 0">确定</el-button>
		  </div>
		</el-dialog>
      <el-dialog title="编辑信息" :visible.sync="editDialog">
       <el-form
         ref="addDataForm"
         :model="editFormInfo.from"
         :rules="rules"
		 
       >
         <el-form-item prop="type" label="信息分类" :label-width="'120px'">
        <el-select
            v-model="editFormInfo.from.type"
            placeholder="请选择类别"
            filterable
            allow-create
			clearable
          >
            <el-option
             v-for="item in typeManage.dropData"
             :key="item.id"
             :label="item.name"
             :value="item.name"
            />
          </el-select>
        </el-form-item>
          <div class="contact">
				<el-form-item prop="name" label="姓名">
				   <el-input v-model="editFormInfo.from.name" type="text"  clearable/>
				</el-form-item>
				<el-form-item prop="telephone" label="电话" >
				  <el-input
				   v-model="editFormInfo.from.telephone" type="number" clearable v-bind:readonly="pMobile"/>
				</el-form-item>
          </div>
		 <div class="contact">
			 <div> 
				  <el-form-item prop="qq" label="QQ号" >
				   <el-input v-model="editFormInfo.from.qq"
				   clearable/>
				 </el-form-item>
			 </div>
			<div>
				<el-form-item prop="wechatNumber" label="微信号">
				  <el-input v-model="editFormInfo.from.wechatNumber" clearable  v-bind:readonly="mPassport"/>
				</el-form-item>
			</div>
		</div>
			 <el-form-item prop="corporate" label="公司名称" style="margin-left: 67px;margin-top:10px;">
			   <el-input v-model="editFormInfo.from.corporate" style="width: 80%!important;" clearable/>
			 </el-form-item>
			   <el-form-item label="需求描述:"   prop="description" style="margin-left: 67px;margin-top:10px;">
				<el-input type="textarea" v-model="editFormInfo.from.description" 
				:rows="5"
				style="width: 80%!important;"
				></el-input>
			</el-form-item>
       </el-form>
       <div slot="footer">
         <el-button type="primary" @click="editConfig" :loading="editFormInfo.flag === 0">确定</el-button>
       </div>
      </el-dialog>
      </div>
</template>

<script>
import axios from "axios";
import {
	getAllcategory,getNamecategory,addcategory,editcategory,deletecategory,getAllCategory,deliverList,manualInfo} from "@/api/management.js";
import { parseTime } from "../../utils";
export default {
  data() {
    return {
		// 微信电话二选一
		pMobile:false,
		mPassport:false,
		// 获取其他页数据
		newManage:{
		  page:1,
		  size:10,
		  total:0,
		  newdata:[],
		  
		},
		//1.获取全部信息分类
		typeManage:{
		  page:1,
		  size:10,
		  total:0,
		  selectdata:[],
		  dropData:[],
		  addDialog:false,
		  manualDialog:false,
		  fromData:[]
		},
		//2.根据名称获取信息分类
		tel: '',//电话
		className:'',//信息分类
		salesName:'',//销售人员
		searchTime: "",//时间
		// 新增
		editDialog:false,
		addFormInfo:{
			from:{
				localdata:[],
				type:'',
				name:'',
				telephone:'',
				qq:'',
				wechatNumber:'',
				corporate:'',
				description:'',
				user:'',
				adduserId:'',
				putdata:[],
				deliverAssign:[],
				changesalesman:''
			},
			flag:1,
		},
		// 4.编辑信息分类
		editFormInfo: {
			from:{
				type:'',
				name:'',
				telephone:'',
				qq:'',
				wechatNumber:'',
				corporate:'',
				description:'',
				userId:'',
				id:'',
				listid:'',
				pushdata:[],
			},
			flag:1,
		},
		// 验证
		rules:{
			name: [{ required: true, message: "请输入姓名", trigger: "blur"}],
			telephone: [
				{
				// required: true, message: "请输入正确的联系方式", 
			     pattern:/^1[3456789]\d{9}$/,message: "请输入正确的联系方式", trigger: "blur"}],
			 qq: [
			     // { required: true, message: 'QQ号只可输入5-11位数字', trigger: 'change' },
			     { pattern: /^[1-9][0-9]{0,12}$/, message: 'QQ号只可输入5-11位数字', trigger: 'change' },
			     { pattern: /^\d{5,12}$/, message: 'QQ号只可输入5-11位数字', trigger: 'change' }
			],
			// wechatNumber: [
			// {pattern:/^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/,message: "请输入正确的微信号码",trigger: "blur"},
			// ],
			wechatNumber: [
			{message: "请输入正确的微信号码",trigger: "blur"},
			],
			type: [{ required: true, message: "请选择类别", trigger: "blur"}],
			changesalesman: [{ required: true, message: "请选择销售人员", trigger: "blur"}],
			// corporate: [{ required: true, message: "请输入公司名称", trigger: "blur"}],
		},
		
    };
  },
  mounted() {
    this.allManagement();
	this.classification();
	this.getSelectInfo();
	// 销售人员列表
	deliverList().then(function(res){
		var deliverData = res.object||[];
		this.addFormInfo.from.deliverAssign = deliverData;
	}.bind(this));
  },
  
  watch:{
      computer: {
        deep: true,
        handler: function (val) {
          if (val.length > 0) {
            this.mPassport = true
          } else {
            this.mPassport = false
          }
        }
      },
      mobile: {
        deep: true,
        handler: function (val) {
          if (val.length > 0) {
            this.pMobile = true
          } else {
            this.pMobile = false
          }
        }
      },

  },

  methods: {  
	  // 获取其他页数据
	  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;
	  		});
	  		
	  },
	  // 获取分类下拉列表
	  getSelectInfo(){
		  var typeM = this.typeManage;
		  var params = {
			page:1, 
			pageSize:999,
		  };
		  getAllCategory(params).then((res) => {
			var dropDown = res.object.records || [];
			typeM.dropData = dropDown;
			
		  });
	  },
	  //1.获取全部信息管理
	allManagement(params){
	  var typeM = this.typeManage;
	  var params = {
	    page:typeM.page, 
	    pageSize:typeM.size,
	  };
	  getAllcategory(params).then((res) => {
	    var selectlist = res.object.records || [];
	    typeM.selectdata = selectlist;
	    typeM.total = res.object.total;
	  });
	  },
	  //获取全部信息管理分页
	  handleSizeChange(val) {
	  // 每页多少条
	  this.typeManage.size =val ;
	  this.toSearch()
	  },
	  handleCurrentChange(val) {
	  // 当前是多少页
	  this.typeManage.page = val;
	  this.toSearch()
	  },
	  //2.根据名称获取信息分类
	  toSearch() {
	  		var typeM = this.typeManage;
			var param = {
				   page: this.typeManage.page,
				   pageSize: this.typeManage.size,
			};
	  		this.tel && (param.tel = this.tel);
			this.salesName && (param.salesName = this.salesName);
			this.className && (param.className = this.className);
			// 时间
			if (this.searchTime instanceof Array) {
			  param.startTime = parseTime(new Date(this.searchTime[0]));
			  param.endTime = parseTime(new Date(this.searchTime[1]));
			}		
	  	   var typeM = this.typeManage;
			getNamecategory(param).then((res) => {
				  var selectlist = res.object.records || [];
				  typeM.selectdata = selectlist;
				  typeM.total = res.object.total;
			});
	   },
	   // 新增
	   addDialogData(){
		   // username
		  this.typeManage.addDialog = true;
		  this.addFormInfo.from.user=this.$store.getters.user.username;
		  // userId
		  this.addFormInfo.from.adduserId=this.$store.getters.user.id 
		},
		uploadAddForm(){
			if(this.addFormInfo.flag){
				this.addFormInfo.flag = 0;
				this.$refs.addDataForm.validate((valid) => {
					  if (valid) {
						 var params = {
							 classidStr:this.addFormInfo.from.type,
							 name:this.addFormInfo.from.name,
							 tel:this.addFormInfo.from.telephone,
							 qqnub:this.addFormInfo.from.qq,
							 weixin:this.addFormInfo.from.wechatNumber,
							 company:this.addFormInfo.from.corporate,
							 remarks:this.addFormInfo.from.description,	
							 username:this.addFormInfo.from.user,
							 userId:this.addFormInfo.from.adduserId
							
						 };
						 if((this.addFormInfo.from.telephone=='')&& (this.addFormInfo.from.wechatNumber=='')){
							this.$message({
							  type: "error",
							  message: "电话或微信号必须填一个",
							});
						 }
						  var self = this;
						 addcategory(params).then((res) => {
							 this.typeManage.addDialog = false;
							 setTimeout(function(){
							 	self.addFormInfo.flag = 1;
							 }, 300);
							if(res.code === 200){
								 this.allManagement();
								self.$message({
								  type: "success",
								  message: "新增成功",
								});
							}
							else if(res.code === 401){
								self.$message({
								  type: "error",
								  message: "已有客户",
								});
							}else if(res.code === 402){
								self.$message({
								  type: "error",
								  message: "没有销售被分配了该类别的权重",
								});
							}else{
								self.$message({
								  type: "error",
								  message: "新增失败",
								});
							}
						 });
					}
				}) 
				
			}
			
	     },
		 // 手动分配新增信息
		 manualAssignment(){
			
			   // username
			  this.typeManage.manualDialog = true;
			  this.addFormInfo.from.user=this.$store.getters.user.username;
			  // userId
			  this.addFormInfo.from.adduserId=this.$store.getters.user.id;
		 	},
		 	manualuploadAddForm(){
				if(this.addFormInfo.flag){
					this.addFormInfo.flag = 0;
					this.$refs.manuaDataForm.validate((valid) => {
						  if (valid) {
							 var params = {
								 classidStr:this.addFormInfo.from.type,
								 name:this.addFormInfo.from.name,
								 tel:this.addFormInfo.from.telephone,
								 qqnub:this.addFormInfo.from.qq,
								 weixin:this.addFormInfo.from.wechatNumber,
								 company:this.addFormInfo.from.corporate,
								 remarks:this.addFormInfo.from.description,	
								 username:this.addFormInfo.from.user,
								 userId:this.addFormInfo.from.adduserId,
								 saleidStr:this.addFormInfo.from.changesalesman,
							 };
							 if((this.addFormInfo.from.telephone=='')&& (this.addFormInfo.from.wechatNumber=='')){
								this.$message({
								  type: "error",
								  message: "电话或微信号必须填一个",
								});
							 }
							  var self = this;
							 manualInfo(params).then((res) => {
								  this.typeManage.manualDialog = false;
								  setTimeout(function(){
								  	self.addFormInfo.flag = 1;
								  }, 300);
								if(res.code === 200){
									 this.allManagement();
									self.$message({
									  type: "success",
									  message: "新增成功",
									});
								}
								else if(res.code === 401){
									self.$message({
									  type: "error",
									  message: "已有客户",
									});
								}else{
									self.$message({
									  type: "error",
									  message: "新增失败",
									});
								}
							 });
						}
					})
				}
			
		},
	   
	   // 编辑
	   typeEdit(e, index, item){
		   // userId
	     this.editFormInfo.from.userData=this.$store.getters.user.id
		 this.editDialog = true
		 this.editFormInfo.from.type=item.classidStr
		 this.editFormInfo.from.name=item.name
		 this.editFormInfo.from.telephone=item.tel
		 this.editFormInfo.from.wechatNumber=item.weixin
		 this.editFormInfo.from.corporate=item.company
		 this.editFormInfo.from.description=item.remarks
		 this.editFormInfo.from.qq=item.qqnub
		 this.editFormInfo.from.listid=item.id
	   },
	   editConfig(){
		   	 if(this.editFormInfo.flag){ 
				  this.editFormInfo.flag = 0;
				  this.$refs.addDataForm.validate((valid) => {
				  		    if (valid) {
				  		 var params = {
				  			classidStr:this.editFormInfo.from.type,
				  			name:this.editFormInfo.from.name,
				  			tel:this.editFormInfo.from.telephone,
				  			qqnub:this.editFormInfo.from.qq,
				  			weixin:this.editFormInfo.from.wechatNumber,
				  			company:this.editFormInfo.from.corporate,
				  			remarks:this.editFormInfo.from.description,	
				  			userId:this.editFormInfo.from.userData,
				  				id:this.editFormInfo.from.listid
				  		 };
				  		  var self = this;
				  		 editcategory(params).then((res) => {
				  			 this.editDialog = false; 
							 setTimeout(function(){
							 	self.editFormInfo.flag = 1;
							 }, 300);
				  		     this.allManagement();
				  			self.$message({
				  			  type: "success",
				  			  message: "编辑成功",
				  			});
				  		
				  		 }); 
				  	   }
				  }) 
				 
			 }
	   		
    },
    // 删除
	typeDelete(item) {
		var id = item.id;
	  this.$confirm("销售部门已记录该客户，删除该条信息后，后续无法添加该客户相关信息，请谨慎操作", "提示", {
	    confirmButtonText: "确定",
	    cancelButtonText: "取消",
	    type: "warning",
	  }).then(() => {
	    deletecategory({id:id}).then(
	      (res) => {
	        this.$message({
	          message: "删除成功",
	          type: "success",
	        });
	      this.allManagement();
	      },
	      () => {
	        this.$message.error("删除失败");
	      }
	    );
	  });
	},  
  },
};
</script>

<style lang="scss" scoped>
.search-wrapper {
  display: flex;
  margin: 20px 0;
}
.tools-wrapper {
  display: flex;
  margin: 20px 0;
}
.upload-file-wrapper {
  display: flex;
  .file-wrapper {
    width: 240px;
    height: 100px;
    background: aliceblue;
  }
}
.datamanage-wrapper {
	width: 100%;
	height:100%;
	padding: 10px;
	border-radius: 5px;
	background-color: #f5f6fb;
  .tool-wrapper {
    padding: 10px;
    border-radius: 5px;
    margin: 10px 10px;
    background: #fff;
  }
  .search-wrapper {
    padding: 10px;
    border-radius: 5px;
    margin: 10px 10px;
    background: #fff;
  }
  .table-wrapper {
    padding: 10px;
    border-radius: 5px;
    margin: 10px 10px;
    background: #fff;
  }
}
.contact{
	width: 100%;
	display: flex;
	justify-content: space-around;
}
  ::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>
