<!--售前技术支持 -->
<template>
      <div class="datamanage-wrapper">
		  <div class="search-wrapper">
			<el-input
			  v-model="projectName"
			  style="width: 180px; margin-left: 20px"
			  clearable
			  placeholder="请输入项目名称"
			/>
			 <el-input
			   v-model="saleName"
			   clearable
			   style="width: 180px; margin-left: 20px"
			   placeholder="请输入销售人员"
			 />
			<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="结束日期"
			/>
		    <el-button
			  icon="el-icon-search"
		      type="success"
		      style="margin-left: 20px"
		      @click="search"
		      >搜索</el-button
		    >
		  </div>
        <div class="table-wrapper">
          <el-table
            :data="newManage.newdata"
            style="width: 100%"
          >
		  	<el-table-column type="expand" width="80">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand">
					  <el-form-item label="售前技术支持人员:">
						<span>{{props.row.projectName }}</span>
					  </el-form-item>
					  <el-form-item label="时间:">
						<span>{{props.row.shop}}</span>
					  </el-form-item>
					  <el-form-item label="说明:">
						<span>{{props.row.id}}</span>
					  </el-form-item>
					  <el-form-item label="文件:">
						<span>{{props.row.shopId}}</span>
					  </el-form-item>
					</el-form>
					<el-form label-position="right" inline class="demo-table-expand">
					  <el-form-item label="备注:">
						<span>{{props.row.projectName }}</span>
					  </el-form-item>
					  <el-form-item label="时间:">
						<span>{{props.row.shop}}</span>
					  </el-form-item>
					  <el-form-item label="说明:">
						<span>{{props.row.id}}</span>
					  </el-form-item>
					  <el-form-item label="文件:">
						<span>{{props.row.shopId}}</span>
					  </el-form-item>
					</el-form>
			    </template>
			</el-table-column>
			<el-table-column type="index" label="序号" width="80"/>
			<el-table-column prop="projectName" label="项目名称" width="140"/>
			<el-table-column prop="saleName" label="销售人员" width="140"/>
			<el-table-column prop="description" label="售前支持描述" width="240"/>
			<el-table-column prop="dealStatus" label="成交状态"width="140"/>
		    <el-table-column prop="chargePersonName" label="售前负责人"width="140"/>
		    <el-table-column prop="isExamine" label="审核状态" width="140">
				<template slot-scope="scope">
					<span v-if="scope.row.isExamine===0" style="color: #f56c6c;">未通过</span>
					<span v-else style="color: #67c23a;">已通过</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right">
			  <template slot-scope="scope">
			    <el-button
			      size="mini"
			      type="primary"
			      @click="preSupport($event, scope.$index, scope.row)"
			      >售前支持
				</el-button>
				<el-button
				 v-if="deptShow" 
				 @click="assignPersonnel($event, scope.$index, scope.row)"
				 size="mini"
				 type="primary"
				>
				分配售前人员
				</el-button>
				<el-button
				 v-if="delivery" 
				 @click="deliveryMethod($event, scope.$index, scope.row)"
				 size="mini"
				 type="primary"
				>
				修改审核状态
				</el-button>
			  </template>
			</el-table-column>
          </el-table>
          <el-pagination
		     style="margin-top: 20px;"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="newManage.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <el-dialog title="售前技术支持" :visible.sync="popForm.addDialogFormVisible">
          <el-form
            ref="addDataForm"
            :model="popForm"
          >
		    <div class="top">
				<div>销售人员:<span>{{popForm.saleman}}</span></div>
				<div>日期:<span>{{popForm.date}}</span></div>
			</div>
			<div class="bottom">
				<div>说明:<span>{{popForm.explain}}</span></div>
				<div></div>
			</div>	
			<el-form-item
				   prop="followFiles"
				   label="文件名称:"
				   :label-width="'120px'"
				 >
				<div v-if="showPrise">{{this.popForm.newfileName}} 
					<i class="el-icon-view" @click="preview(popForm.fileName)"></i>
				</div>
				<el-upload
			       class="upload"
			       name="file"
				   ref="fileRef"
			       :limit="3"
			       :on-change="handleBeforeUpload"
				   :auto-upload="false"
				   :before-remove="removeFileCallback"
			     >
			       <el-button type="text" size="small" icon="el-icon-upload">点击上传</el-button>
			     </el-upload>
			</el-form-item>
			 <el-form-item label="备注:" 
			 style="margin-left: 67px;margin-top:10px;">
			    <el-input type="textarea" 
				v-model="popForm.desc" style="width: 80%!important;"></el-input>
			  </el-form-item>
			  
          </el-form>
          <div slot="footer">
            <el-button type="primary" @click="uploadAddForm">确定</el-button>
          </div>
        </el-dialog>
		<!-- 分配售前人员 -->
		<el-dialog title="分配售前人员" :visible.sync="handoverDialog" append-to-body>
		    <el-form
		      ref="handoverSaleman"
		      :model="salesPersonnelfrom"
		    >
			  <el-form-item prop="salesPersonnelfrom" label="分配售前人员:" style="margin-left: 30px;">
			  <el-select v-model="changesalesman" clearable placeholder="请选择售前人员">
			    <el-option
			      v-for="item in salesPersonnelfrom.deliverAssign"
			      :key="item.nickName"
			      :label="item.nickName"
			      :value="item.userId">
			    </el-option>
			  </el-select>
			 </el-form-item>
		    </el-form>
		    <div slot="footer">
		      <el-button type="primary" @click="deliverUpate">确定</el-button>
		    </div>
		 </el-dialog>
	</div>
     
</template>

<script>
 import axios from "axios";
import {getAllsupport,assignPresales,deliverList,preFile,checkType} from "@/api/preSupportjk.js";
import { parseTime } from "../../utils";
export default {
  data() {
    return {
		// 获取类别
		newManage:{
		  page:1,
		  size:10,
		  total:0,
		  newdata:[],
		},
		projectName:'',
		saleName:'',
		searchTime:'',
		// 售前支持弹窗
		popForm:{
			addDialogFormVisible:false,	
			saleman:"",
			date:"",
			explain:"",
		  fileName:"",
			newfileName:"",
			desc:""
			
		},
		// 文件
		showPrise:false,
		fileId:'',
		flowup:{
			from:{
			  followFiles:null,//文件
			  file:'',
			  ifFileExist:0,
			},
		
		},
		// 分配售前人员弹窗
		handoverDialog:false,
		changesalesman:'',
		changeid:'',
		// 转交给销售人员
		salesPersonnelfrom:{
			deliverAssign:[],
		},
		// 根据部门id判断按钮显示隐藏
		deptShow:false,
		delivery:false,
		deliveryType:'',
		userId:''
		
    };
  },
  mounted() {
	  deliverList().then(function(res){
	  	var deliverData=res.object||[]
	  	 this.salesPersonnelfrom.deliverAssign=deliverData
	  }.bind(this));
	  this.getSupport()
	   this.userId=this.$store.getters.user.id;
	   var deptId=this.$store.getters.user.dept.id
	   if(deptId===580270058 || this.userId==1){
		   this.deptShow=true
		   this.delivery=true
	   }
  },
  methods: {
	  getSupport(params){
	   this.userId=this.$store.getters.user.id+'';
	  var params = {
	    page:this.newManage.page, 
	    pageSize:this.newManage.size,
		userId:	this.userId
		// userId
	  };
	  getAllsupport(params).then((res) => {
	      this.newManage.newdata=res.object.records|| []
		  this.newManage.total=res.object.total
	  });
	  },
	  //获取全部信息分类分页
	  handleSizeChange(val) {
	  // 每页多少条
	  this.newManage.size =val ;
	  this.getSupport();
	  },
	  handleCurrentChange(val) {
	  // 当前是多少页
	  this.newManage.page = val;
	  this.getSupport();
	  },
	  //搜索
	  search(){
		  var params = {
			  page:this.newManage.page,
			  pageSize:this.newManage.size,
		  };
		  	this.projectName && (params.projectName = this.projectName);
			this.saleName && (params.saleName = this.saleName);
			// 时间
			if (this.searchTime instanceof Array) {
			  params.startTime = parseTime(new Date(this.searchTime[0]));
			  params.endTime = parseTime(new Date(this.searchTime[1]));
			}
		    getAllsupport(params).then((res) => {
				this.newManage.newdata=res.object.records|| []
				this.newManage.total=res.object.total
		   });  
	  },
	  preSupport(e,index,item){
		  this.popForm.newfileName=""
		  this.fileId=item.id
		  this.popForm.saleman=item.saleName
		  this.popForm.date=item.addTime
		  this.popForm.explain=item.description
		  this.popForm.fileName=item.fileOriginalName
		  this.popForm.desc=item.remarks
		  this.popForm.addDialogFormVisible=true 
		  this.showPrise=true
		  var newstring = this.popForm.fileName.replace(/,/g, "");  
		  this.popForm.newfileName=newstring
		  this.$nextTick(function(){
		  	// 清空文件
		  	this.$refs.fileRef.clearFiles()
		  });
	  },
	  // 点击确定上传文件
	  uploadAddForm(){
		  	var params = new FormData();
			params.append('id', this.fileId);//文件id
			if(!this.flowup.from.followFiles){
			    delete params.followFiles
			}else{
			    params.append('multipartFile', this.flowup.from.followFiles);//文件
			}
			var self = this;
			preFile(params).then((res) => {
				console.log(res)
				 this.popForm.addDialogFormVisible=false
				 this.getSupport();
				if(res.code === 200){
					self.$message({
					  type: "success",
					  message: "售前技术支持文件上传成功，等待审核",
					});
				}
				else if(res.code === 201){
					self.$message({
					  type: "success",
					  message: "文件上传时已存在原文件，原来的文件已删除,新文件上传成功，等待审核",
					});
				}else{
					self.$message({
					  type: "error",
					  message: "未做更改或更新失败",
					});
				}
			  }, 
			  
			);
	  },
	  // 上传文件 file(二进制)
	   handleBeforeUpload(file) {
	  		if(file!=''){
	  			this.flowup.from.ifFileExist=1
	  			console.log(this.flowup.from.ifFileExist,"this.flowup.from.ifFileExist")
	  		}else{
	  			this.flowup.from.ifFileExist=0
	  			console.log(this.flowup.from.ifFileExist,"this.flowup.from.ifFileExist")
	  		}
	  	     this.showPrise=false;
	  		 file = file.raw || file;
	  		  var uploadLimit = 2
	  		 var uploadTypes = ['jpg', 'png', 'jpeg', 'pdf','doc','xlsx','xls']
	  		  var isRightSize = (file.size || 0) / 1024 / 1024 < uploadLimit
	  		 if(file.type === 'image/jpeg' || file.type === 'image/png' ||
	  		  file.type === 'image/jpg'||file.type === 'application/pdf'||file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'||file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'||file.type === 'application/vnd.ms-excel'){
	  			  this.flowup.from.followFiles = file;
	  			  this.$refs.fileForm.validate();
	  		  }else{
	  			  this.$refs.fileRef.clearFiles();
	  			  if(!isRightSize){
	  				  this.$message.error('文件大小超过 ' + uploadLimit + 'MB')
	  			  }else{
	  				this.$message.warning({message: '请上传后缀名为jpg、png、pdf、jpeg、doc、xlsx、xls、的附件'});    
	  			  };return false
	  		  };
	      },
	  	removeFileCallback(){
	  		this.flowup.from.followFiles = '';
	  	},
	  // 分配售前人员
	  assignPersonnel(e,index,item){
	  	this.handoverDialog=true
		this.changeid=item.id
	  },
	  deliverUpate(){
	  	var params = {
	  		id: this.changeid,	
	  		newUserId:this.changesalesman,
	  	};
		var self = this;
	  	assignPresales(params).then((res) => {
	  		console.log(res)
	  		self.$message({
	  		  type: "success",
	  		  message: "更改售前支持的负责人员成功",
	  		});
			this.handoverDialog = false;
			this.getSupport();
	  	  }, 
	  	  () => {
	  	   self.$message.error("更改售前支持的负责人员失败");
	  	  }
	  	);
	  },
	  // 审核
	  deliveryMethod(e,index,item){
		  this.deliveryType=item.id
		  var params = {
		  	id: this.deliveryType,	
		  };
		   var self = this;
		  checkType(params).then((res) => {
		  	  console.log(res)
			 self.$message({
			   type: "success",
			   message: "审核成功",
			 },
			 () => {
			   self.$message.error("审核失败");
			 }
			 );
			  this.getSupport();
		    }, 
		  );
	  },
	  preview(val){
		  console.log(val,"_____")
		  if(val){
		  	window.open('http://oa.gemho.cn:8004/project_follow_file/'+val);
		  }else{
		   this.$notify({
			title: '未找到文件或图片!',
			type: 'error',
			duration: 3500
		   });
		  }
		  
	  }
  },
};
</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;
}
// 去掉input数字类型上下箭头
::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;
}
// 弹窗样式
.top{
	width: 100%;
	height: 20%;
	display: flex;
	justify-content: space-between;
	margin: 0px 0px 15px 0px;
}
.bottom{
	width: 100%;
	height: 20%;
	display: flex;
	justify-content: space-between;
	margin: 0px 0px 15px 0px;
	
}
.top div{
	font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
	font-weight: 700;
	font-style: normal;
	margin-left:65px;
	margin-right:65px;
}
.bottom div{
	font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
	font-weight: 700;
	font-style: normal;
	margin-left:65px;
	margin-right:65px;
}
span{
	margin-left: 10px;
}

</style>
