<template>
	<el-dialog
	 :close-on-click-modal="false"
	 :close-on-press-escape="false"
	 :title="dialogTitle"
	 :visible.sync="dialogVisible"
	 top="50px"
	 width="50%"
	>
		<div class="tabsdom">
			<el-form ref="elForm" :model="formData" :rules="rules" label-width="165px" size="medium">
				<el-form-item label="姓名" prop="name">
					<el-input
					 v-model="formData.truename"
					 clearable
					 placeholder="请输入姓名"/>
				</el-form-item>
				<el-form-item label="入职日期" prop="joinDay">
					<el-date-picker
					 v-model="formData.joinDay"
					 format="yyyy-MM-dd"
					 learable
					 placeholder="请输入入职日期"
					 type="date"
					 value-format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
				<el-form-item label="入职前已缴纳社保月数" prop="socialHasMonth">
					<el-input
					 v-model="formData.socialHasMonth"
					 label="描述文字"
					 type="number"
					 @change="handleChange"></el-input>

				</el-form-item>

				<el-form-item label="上传" prop="fileDataIds">
					<el-upload
					 :action="$constant.BASE_URI+'/FileController/upload'"
					 :file-list="formData.fileUrlList"
					 :http-request="uploadFile"
					 :on-preview="handlePictureCardPreview"
					 :on-remove="handleRemove"
					 accept=".png, .jpg, .jpeg, .pdf"
					 class="upload-demo"
					 :show-file-list="false"
					 multiple
					>
						<el-button class="mtmb16 mgauto" size="small" style="margin-top: 0;height: 33px" type="primary">
							上传文件
						</el-button>
					</el-upload>
					<div style="margin:5px 0 5px 0">
						<div v-for="item in formData.fileUrlList" style="height: 15px;margin-top:10px;width: 100%">
							<a :href="item.url" @click="handlePictureCardPreview(item)">{{ item.name }}</a>
							<span class="el-upload-list__item-actions">
                    <i class="el-icon-delete" @click="handlePictureRemove(item.id,formData.fileUrlList)"/>
                  </span>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="年假核算标准" prop="holidayType">
					<el-select
					 v-model="formData.holidayType"
					 clearable
					 disabled
					 placeholder="由系统自动计算带出">
						<el-option
						 v-for="item in biaozhun"
						 :label="item.label"
						 :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer">
			<el-button @click="dialogVisible=false">取消</el-button>

			<el-button type="primary" @click="handelConfirm">确定</el-button>
		</div>
		<el-dialog :modal="false" :visible.sync="visible">
			<img :src="dialogImageUrl" alt="" width="100%"/>
		</el-dialog>
	</el-dialog>


</template>

<script>
import {upload} from '@/static/utils/channel'
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import UserSelect from '@/views/components/UserSelect'

const formData = {
	fileUrlList: []
}
export default {
	mixins: [Base, BaseData],
	components: {
		upload, UserSelect
	},
	props: [],
	data() {
		return {
			dialogImageUrl: '',
			visible: false,
			disabled: false,
			biaozhun: [
				{label: '司龄不满一年', value: 3},
				{label: '社保满一年不满十年', value: 1},
				{label: '社保满十年不满二十年', value: 2},
				{label: '社保满二十年', value: 4},
			],
			selectList: [],
			loading: false,
			dc_key: ['ORDER_STATUS', 'PAY_TYPE', 'BUDGET_FY'],
			dialogTitle: '假期额度管理-添加',
			dialogVisible: false,
			formData: {
				fileUrlList: []
			},
			rules: {

				joinDay: [{
					required: true,
					message: '请输入入职日期',
					trigger: 'blur'
				}],
				socialHasMonth: [{
					required: true,
					message: '请输入入职前已缴纳社保月数',
					trigger: 'blur'
				}],
				holidayType: [{
					required: true,
					message: '请输入年假核算标准',
					trigger: 'blur'
				}],
			},
		}
	},
	computed: {},

	watch: {
		formData: {
			deep: true,
			handler(val) {


				if (this.formData.socialHasMonth && this.formData.joinDay) {

					try {


						const startDateParams = new Date(this.formData.joinDay).getTime()
						const endDateParams = new Date(Date.now()).getTime()
						let years = endDateParams - startDateParams
						years = years / (1000 * 60 * 60 * 24 * 365)
						let socialHasMonth = Number(this.formData.socialHasMonth / 12)
						let allWorkYears = Math.floor(years) + Math.floor(socialHasMonth)
						console.log(allWorkYears)

						// {label: '社保不满一年', value: 3},
						// {label: '社保满一年不满十年', value: 1},
						// {label: '社保满十年不满二十年', value: 2},
						// {label: '社保满二十年', value: 4},
						if (years < 1) return this.formData.holidayType = 3
						if (allWorkYears < 10 && allWorkYears > 1) {
							this.formData.holidayType = 1
						} else if (allWorkYears >= 10 && allWorkYears < 20) {
							this.formData.holidayType = 2
						} else if (allWorkYears >= 20) {
							this.formData.holidayType = 4
						}
					} catch (e) {
						console.log(e)
					}
				}
			}
		}
	},
	created() {
	},
	mounted() {
		this.initDict(this.dc_key).then((res) => {
		});
	},
	methods: {
		handleChange(e) {
			this.$forceUpdate()
		},
		getItemJson: function (item) {
			const _this = this
			const json = {
				isproject: item.isproject,
				custid: item.custid,
				custname: item.custname,
				bizcode: item.bizcode,
				proname: item.proname,
				protype: this.dc_map.dc_pro_type[item.protype],
				profrom: this.dc_map.dc_pro_from[item.profrom],
				// bizstatus: this.dc_map.dc_sign_status[item.signstatus] + ' ' + this.dc_map.dc_enable_status[item.enablestatus],
				presales: '￥' + (item.presales == null ? 0 : item.presales).FMoney(2),
				chargedname: this.UserMap[item.chargedby],
				managedname: this.UserMap[item.managedby],
				createdByName: this.UserMap[item.createdby],
				signstatus: item.signstatus,
				bidstatus: item.bidstatus,
				enablestatus: item.enablestatus,
				validat: this.$common.transDate(item.validat),
				signat: this.$common.transDate(item.signat),
				bidat: this.$common.transDate(item.bidat),
				endingat: this.$common.transDate(item.endingAt),
				notesat: this.$common.transDate(item.notesat),
				id: item.id
			}
			if (this.enableStatus === '2' || this.enableStatus === '3' || item.enablestatus === '2' || item.enableStatus === '3') {
				json.bizstatus = this.dc_map.dc_enable_status[item.enablestatus]
			} else {
				json.bizstatus = this.dc_map.dc_sign_status[item.signstatus]
			}
			// json.bizstatus =  _this.dc_map.dc_val_status[item.validstatus]

			return json
		},
		initOutData: function () {
			const _this = this
			this.OutData = [[
				'项目编号', '项目名称', '客户名称', '项目类型', '来源', '预计销售额(元)',
				'销售人员', '立项日期', '签约日期', '招投标日期', '终止或暂停日期', '跟进更新日期', '项目经理', '商机状态']]
			const postData = this.getPostData()
			this.baseRequest('listAll', postData).then((res) => {
				if (res.data) {
					res.data.forEach(function (item) {
						const jsonMap = _this.getItemJson(item)
						const jsonArray = [
							jsonMap.bizcode,
							jsonMap.proname,
							jsonMap.custname,
							jsonMap.protype,
							jsonMap.profrom,
							jsonMap.presales,
							jsonMap.chargedname,
							jsonMap.validat,
							jsonMap.signat,
							jsonMap.bidat,
							jsonMap.endingat,
							jsonMap.notesat,
							jsonMap.managedname,
							jsonMap.bizstatus
						]

						_this.OutData.push(jsonArray)
					})
				}
			}).catch(() => {
			})
		},
		confirmOutput() {
			const OutSize = [
				{wch: 15}, {wch: 15}, {wch: 15}, {wch: 15}, {wch: 15}, {wch: 15}, {wch: 15},
				{wch: 15}, {wch: 15}, {wch: 25}, {wch: 25}, {wch: 15}, {wch: 15}, {wch: 15}]
			const fileName = '商机进展导出 ' + new Date().Format('yyyy-MM-dd')
			this.$outputXlsxFile(this.OutData, OutSize, fileName)
		},

		handleDownload(file) {
			console.log(file);
		},
		handleRemove(file, fileList) {
			console.log(file, fileList)
			var index = this.formData.fileList.indexOf(file);
			this.formData.fileList.splice(index, 1);
			console.log(this.formData.fileUrlList)
		},
		handlePreview(file) {
			console.log(file);
		},
		uploadFile: function (param) {
			const _this = this
			upload(param, true).then((res) => {
				_this.formData.fileUrlList.push(res)
				console.log(res)
				this.$forceUpdate()
			})
		},
		handlePictureRemove(file, fileList) {
			// console.log(file, fileList)
			var index = fileList.indexOf(file);
			fileList.splice(index, 1);
			this.$forceUpdate()
		},
		async setVisible(status, row) {
			console.log(row.socialImgAddress)
			this.formData = {...row}
			this.dialogVisible = status
			this.formData.id = row.id
			this.formData.truename = row.truename
			this.formData.joinDay = row.joinDay
			// this.formData.socialHasMonth = !row.socialHasMonth ? 0 : Number(row.socialHasMonth)
			this.formData.holidayType = row.holidayType

			if (row.socialImgAddress) {
				const {data: fileTaoTaoList} = await this.baseRequest2('findFileInfoByIds/' + row.socialImgAddress, '')
				this.$nextTick(() => {
					this.formData.fileUrlList = fileTaoTaoList.data.map((e) => {
						return {
							url: this.$constant.BASE_URI + '/FileController/download/' + e.id,
							name: e.fileName,
							data: e.id,
							uid: new Date().getTime()
						}
					})
					console.log(this.formData.fileUrlList)
					this.$forceUpdate()
				})
			} else {
				this.formData.fileUrlList = []
			}
			console.log(this.formData)
			this.$forceUpdate()
		},
		baseRequest1(opUrl, postData) {
			return this.$channel.globleRequest(
			 'HolidayManagementController',
			 opUrl,
			 postData,
			 'project task'
			)
		},
		baseRequest2(opUrl, postData) {
			return this.$channel.globleRequest(
			 'FileZtController',
			 opUrl,
			 postData,
			 'project task'
			)
		},
		async handelConfirm() {
			this.$refs['elForm'].validate(async valid => {
				if (!valid) return
				this.formData.socialImgAddress = this.formData.fileUrlList.map((e) => {
					console.log(e)
					return e.data
				}).toString()
				let formData = {...this.formData}
				delete formData.fileUrlList
				let {data} = await this.baseRequest1('editInfo', {...formData})
				if (data.code == 200) {
					this.$message.success('修改成功')
					this.dialogVisible = false
					this.$emit("getData")
				}
			})
		},
	}
}

</script>

<style lang="scss">
.cclist {
	.col-input {
		padding: 0;
	}
}

.pdr10px {
	padding-right: 10px;
}

.mgb10px {
	margin-bottom: 10px;
}

.mb25 {
	margin-bottom: 25px;
}

.pdtopbottom16 {
	padding: 0px 16px;
}

.pdtop16px {
	padding-top: 16px;
}

.totalApplyTime {
	font-size: 16px;
	font-family: 微软雅黑;
	font-weight: 400;
	color: #1890FF;
	text-align: right;
	margin: 15px 0 15px 0;
	width: 100%;
}

.cost_form {
	.col-input {
		font-weight: 400;
	}

	.el-form-item__label .moneydetails {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		line-height: 40px;
		word-break: keep-all;
		white-space: nowrap;
		color: #606266;
		text-rendering: optimizeLegibility;
		font-weight: 400;
	}

	.moneydetails {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		word-break: keep-all;
		white-space: nowrap;
		color: #606266;
		text-rendering: optimizeLegibility;
		font-weight: 400;


	}

	.moneydetails:before {
		content: "*";
		color: #ff4949;

	}
}


.txtc {
	text-align: center
}

.ml5 {
	margin-left: 5px;
}

.eltype {
	margin-bottom: 15px;
}

.tabsdom {
	.el-input {
		width: 100%;
	}

	.el-tabs__header {
		text-align: center !important;
		width: 139px !important;
		text-align: center !important;
		display: block !important;
		margin: auto !important;
		margin-bottom: 15px !important;
	}

	.el-tabs__nav-wrap::after {
		display: none;
	}

	//.el-upload {
	//	width: 100%;
	//}
}

.feeMoneyTotal {
	width: 100%;
	height: 14px;
	font-size: 14px;
	font-weight: 400;
	color: #1890FF;
	margin-top: 31px;
	margin-bottom: 13px;
}
</style>
