<template>
	<view class="leave_request">
		<view class="leave_box">



			<view class="cont_cell">
				<view class="title">开票金额：</view>
				<input type="text" v-model="listobj.amount" placeholder="开票金额">
			</view>

			<view class="leava_type flex_a_c">
				<view class="title">开票类型：</view>
				<input type="text" v-model="project1" placeholder="请选择" disabled @click="leavaTypeShow2=true">
			</view>


			<view class="leava_type flex_a_c">
				<view class="title">开票主体：</view>
				<input type="text" v-model="project2" placeholder="请选择" disabled @click="leavaShow1">
			</view>

			<view class="cont_cell">
				<view class="title">抬头类型：</view>
				<radio-group class="select_group" @change="deliveryWayChangetwo">
					<label class="radio_select" style="margin-right:15rpx;display: flex; margin-bottom: 30rpx;">
						<view style="margin-right:5rpx;">
							<radio value="1" :checked="selected === '1'" />
						</view>
						企业
					</label>
					<label class="radio_select" style="margin-right:15rpx;display: flex;">
						<view style="margin-right:5rpx;">
							<radio value="2" :checked="selected === '2'" />
						</view>
						<view @click="branchShow = true" style="display: flex;">
							<view class="title"> 个人</view>

						</view>
					</label>
				</radio-group>
			</view>

			<view class="cont_cell">
				<view class="title">开票抬头：</view>
				<input type="text" v-model="listobj.invoice_title" placeholder="开票抬头">
			</view>
			<view class="cont_cell">
				<view class="title">电话号码：</view>
				<input type="text" v-model="listobj.invoice_phone" placeholder="电话号码">
			</view>
			<view class="cont_cell">
				<view class="title">纳税人识别号 ：</view>
				<input type="text" v-model="listobj.invoice_tax" placeholder="纳税人识别号">
			</view>
			<view class="cont_cell">
				<view class="title">开户行：</view>
				<input type="text" v-model="listobj.invoice_bank" placeholder="开户行">
			</view>
			<view class="cont_cell">
				<view class="title">银行账号：</view>
				<input type="text" v-model="listobj.invoice_account" placeholder="银行账号">
			</view>

			<view class="cont_cell">
				<view class="title">银行营业网点 ：</view>
				<input type="text" v-model="listobj.invoice_banking" placeholder="银行营业网点">
			</view>

			<view class="cont_cell">
				<view class="title">地址：</view>
				<input type="text" v-model="listobj.invoice_address" placeholder="地址">
			</view>






		</view>

		<!-- <view class="leave_box" style="padding-top: 100rpx;"> -->

		<!-- 附件 -->
		<!-- 	<block v-for="(item, i) in fileArray" :key="i">
				<view class="file flex_a_c_j_sb">
					<view class="l_file">
						<view class="file_name">{{ item.name }}</view>
						<view class="file_size">{{ item.filesize | formatBytes }}</view>
						<view class="upload_people">上传人：{{ item.admin_name }}</view>
					</view>
					
				</view>
			</block> -->
		<!-- 	<view class="upload_box flex_a_c_j_sb">
				<view>
					<view class="title">选择文件并上传</view>
					<view class="text">
						上传前，请规范命名，最大只能上传100M的文件<br />
						超过请压缩成多个文件上传。
					</view>
				</view> -->
		<!-- 	<view class="" style="margin-top: 60rpx;">
					<lsjUpload ref="lsjUpload" childId="upload1" :size="10" :option="fileOption" height="200rpx"
						style="margin-top: 28rpx;" :debug="false"
						:formats="'pdf,txt,zip,rar,jpg,png,mp3,avi,mov,mp4,gif'" :multiple="false" :count="3"
						:instantly="true" @change="changeFile" @uploadEnd='onuploadEnd' @progress='onprogre'> -->
		<!-- <view class="change-file">请选择PDF类型的发票</view> -->
		<!-- 	<u-icon name="plus-circle" color="#333333" size="28"
							style="margin-top: 40rpx; margin-left: 60rpx;"></u-icon> -->
		<!-- 	<u-icon name="plus-circle" color="#333333" size="28"></u-icon>
					</lsjUpload> 
				</view>
			</view>-->
		<!-- </view> -->
		<view class="flow_path">
			<view class="cont_cell">
				<view class="title">选择审批流程：</view>
				<input type="text" v-model="flowPath" placeholder="请选择" disabled @click="flowPathShow = true">
			</view>
			<view class="cont_cell" @click="branchShow = true">
				<view class="title">审核人：</view>
				<input type="text" v-model="check_admin_name" placeholder="请选择" disabled>
			</view>
			<view class="cont_cell" @click="branchShow1 = true">
				<view class="title">抄送人：</view>
				<input type="text" v-model="copy_names" placeholder="请选择" disabled>
			</view>

		</view>

		<view class="bot_btn">
			<view class="reset" @click="reset">重置</view>
			<view class="submit_btn" @click="submiteBtn">立即提交</view>
		</view>
		<u-action-sheet :show="leavaTypeShow2" keyName="name" :actions="columns1" title="请选择"
			@close="leavaTypeShow2 = false" @select="leavaType2">
		</u-action-sheet>
		<u-action-sheet :show="leavaTypeShow" keyName="name" :actions="columns" title="请选择"
			@close="leavaTypeShow = false" @select="leavaType">
		</u-action-sheet>
		<u-action-sheet :show="leavaTypeShow1" keyName="name" :actions="actions4" title="请选择"
			@close="leavaTypeShow1 = false" @select="leavaType1">
		</u-action-sheet>

		<!-- 选择审批流程 -->
		<u-action-sheet :actions="flowPathSheet" @select="flowPathSelect" title="选择审批流程" :show="flowPathShow"
			@close="flowPathShow=false" :closeOnClickOverlay="true" :closeOnClickAction="true">
		</u-action-sheet>

		<!-- 部门选择 -->
		<u-picker :show="branchShow" :defaultIndex='defaultIndex' ref="branchRef" :columns="branchColumns"
			@confirm="branchConfirm" @change="columnCode" :closeOnClickOverlay="true" @close="branchShowclose"
			keyName="name">
		</u-picker>

		<u-picker :show="branchShow1" :defaultIndex='defaultIndex1' ref="branchRef" :columns="branchColumns1"
			@confirm="branchConfirm1" @change="columnCode1" :closeOnClickOverlay="true" @close="branchShowclose1"
			keyName="name">
		</u-picker>
		<!-- 选择时间 -->

		<u-datetime-picker :show="timeShow" mode="datetime" :maxDate="1786778555000" :minDate="timestamp"
			closeOnClickOverlay @confirm="timeConfirm($event)" @cancel="timeShow = false"
			@close="timeShow = false"></u-datetime-picker>
		<u-datetime-picker :show="timeShow1" mode="datetime" :maxDate="1786778555000" :minDate="timestamp"
			closeOnClickOverlay @confirm="timeConfirm1($event)" @cancel="timeShow1 = false"
			@close="timeShow1 = false"></u-datetime-picker>


	</view>
</template>

<script>
	import {
		Toast
	} from '../../libs/uniApi'
	import {



		userdepartment,
		getemployee,
		addinvoice,
		invoicecate,
		appexpenseview,
		invoiceview,
		invoiceflow
	} from '@/api/oa.js'
	import lsjUpload from '@/uni_modules/lsj-upload/components/lsj-upload/lsj-upload.vue'
	import {
		FILE_URL
	} from '@/api/file.js'
	export default {
		components: {
			lsjUpload
		},
		data() {
			return {
				selected: "2",
				defaultIndex: [0, 0, 0],
				defaultIndex1: [0, 0, 0],
				timestamp: '',
				personInfo: {},
				company: '',
				listobj: {},
				project1: '',
				project2: '',
				timeShow: false,
				timeShow1: false,
				branchShow: false,
				flowPathShow: false,
				leavaTypeShow: false,
				leavaTypeShow1: false,
				leavaTypeShow2: false,
				branchColumns: [],
				branchColumns1: [],
				flowPathSheet: [],
				actions4: [],
				branchShow1: false,
				flowPath: '',
				columns: [],
				check_admin_name: '',
				copy_names: '',
				columns1: [{
						name: '企业',
						id: 1,
					},
					{
						name: '个人',
						id: 2,
					}
				],
				list: [{
					cate_title: "",
					amount: '',
					remarks: ''
				}],
				fileOption: {},
				files: new Map(),
				fileArray: [],
				dnum: 0
			}
		},
		onLoad(option) {
			this.detail(option.type)
		},
		onShow() {
			this.fileOption = {
					url: FILE_URL,
					name: 'file',
					header: {
						token: this.$store.state.app.token
					}
				},
				// 获取当前时间戳
				this.timestamp = Date.parse(new Date());

			// this.getlist()
			this.getlist1()
			this.getDocumentList()
			this.getDocumentList1()

		},


		methods: {
			async detail(id) {
				let res = await invoiceview({
					id: id
				})
				console.log(res.data.detail.invoice_subject, this.flowPathSheet, '111')
				// this.listobj = res.data.detail
				this.project1 = this.columns1.find(obj => obj.id === res.data.detail.type).name;
				this.project2 = this.actions4.find(obj => obj.id === res.data.detail.invoice_subject).name;
				// this.copy_names = res.data.detail.copy_user
				this.listobj.invoice_account = res.data.detail.invoice_account
				this.listobj.invoice_address = res.data.detail.invoice_address
				this.listobj.invoice_bank = res.data.detail.invoice_bank
				this.listobj.invoice_banking = res.data.detail.invoice_banking
				this.listobj.invoice_phone = res.data.detail.invoice_phone
				this.listobj.invoice_subject = res.data.detail.invoice_subject
				this.listobj.invoice_tax = res.data.detail.invoice_tax
				this.listobj.invoice_title = res.data.detail.invoice_title
				this.listobj.invoice_type = res.data.detail.invoice_type
				this.listobj.amount= res.data.detail.amount
				this.listobj.type=res.data.detail.type
				this.selected = res.data.detail.type.toString()
				// console.log(res.data.detail.type)
			},
			reset() {
				this.list = [{
						name: "",
						num: ''
					}],
					this.listobj = {}
				this.fileArray = []
				this.copy_names = ''
				this.flowPath = ''
				this.check_admin_name = ''
				this.project1 = ''
				this.project2 = ''
			},
			async getDocumentList1() {
				let res = await invoicecate()
				this.actions4 = res.data.map((step, index) => {
					return {
						name: step.title,
						id: step.id,
					};
				});

			},
			//获取部门
			async getDocumentList() {
				const res = await userdepartment()
				const deArr = res.data
				let codelist = [
					[], //顶级部门
					[], //次级部门
					[] // 负责人
				]

				codelist[0] = res.data.map((item) => { // 赋值 
					return {
						id: item.id,
						name: item.title
					}
				})

				codelist[1] = res.data[0].children.map((item) => { // 赋值 
					return {
						id: item.id,
						name: item.title
					}
				})



				let dat = await getemployee({
					did: codelist[1][0].id
				})

				codelist[2] = dat.data.map((item) => {
					return {
						id: item.id,
						name: item.name
					}
				})

				this.$forceUpdate()
				this.$nextTick(() => {
					this.branchColumns = codelist
					this.branchColumns1 = codelist
					this.branchColumns2 = codelist
				})


			},
			//监听人员加载数据
			async columnCode(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.branchColumns[e.columnIndex][e.index].id
					})

					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})

						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.branchColumns, 2, newColumn);

					}

				}

			},

			//监听人员加载数据
			async columnCode1(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.branchColumns1[e.columnIndex][e.index].id
					})

					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})

						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.branchColumns1, 2, newColumn);

					}

				}

			},
			deliveryWayChangetwo(e) {

				this.listobj.type = e.detail.value
			},
			//弹窗显示
			leavaShow(item, i) {
				this.dnum = i
				this.leavaTypeShow = true
			},
			leavaShow1() {

				this.leavaTypeShow1 = true
			},
			branchConfirm(e) {
				// console.log('confirm', e, e.value[2].name)
				this.check_admin_name = e.value[2].name
				this.listobj.check_admin_ids = e.value[2].id
				this.branchShow = false
			},
			branchConfirm1(e) {
				console.log('confirm', e, e.value[2].name)
				if (this.listobj.copy_uids) {
					this.listobj.copy_uids += e.value[2].id
				} else {
					this.listobj.copy_uids = e.value[2].id
				}

				this.copy_names += e.value[2].name + ','
				this.branchShow1 = false
			},

			async submiteBtn() {
				console.log(this.listobj)
				// 	let fileIds = [];
				// 	this.fileArray.map((item, i) => {
				// 		fileIds.push(item.id)
				// 	});

				// if (this.fileArray.length > 0) {
				// 	this.listobj.file_ids = fileIds.join(',');
				// }
				this.listobj.flow_id = this.flow_id
				if (this.listobj.invoice_phone) {
					const pattern = /^1[3456789]\d{9}$/;
					if (!pattern.test(this.listobj.invoice_phone)) return Toast('手机号输入错误')
				}
				if (!this.listobj.invoice_title) return Toast('请输入开票抬头')
				if (!this.listobj.type) return Toast('请选择抬头类型')
				if (!this.listobj.invoice_subject) return Toast('请输入开票主体')
				if (!this.listobj.amount) return Toast('请输入发票金额')
				if (!this.listobj.invoice_type) return Toast('请选择开票类型')





				const res = await addinvoice(this.listobj)
				Toast('提交成功')




			},
			//新增
			addleava() {
				this.list.push({
					name: "",
					num: ''
				})
			},
			deleteleava(item, index) {
				if (this.list.length > 1) {
					this.list.splice(0, 1)
				} else {
					Toast('不能删除')
				}

			},


			async getlist1() {

				const res = await invoiceflow()

				this.flowPathSheet = res.data
				console.log('个人信息2', res.data);
			},
			flowPathSelect(value) {
				this.flowPath = value.name
				this.flow_id = value.id

			},
			/** 类型 */
			leavaType(e) {

				this.list[this.dnum].cate_title = e.name
				this.list[this.dnum].id = e.id
				this.leavaTypeShow = false
			},
			leavaType1(e) {
				console.log(e)
				this.project2 = e.name
				this.listobj.invoice_subject = e.id
				this.leavaTypeShow1 = false
			},
			leavaType2(e) {

				this.project1 = e.name
				this.listobj.invoice_type = e.id
				this.leavaTypeShow1 = false
			},
			branchShowclose() {
				this.branchShow = false
			},
			branchShowclose1() {
				this.branchShow1 = false
			},
			/**
			 * 某文件上传结束回调(成功失败都回调)
			 * @param {Object} item 当前上传完成的文件
			 */
			onuploadEnd(item) {
				console.log(`${item.name}已上传结束，上传状态=${item.type}`);
				if (item['responseText']) {
					this.files.get(item.name).responseText = JSON.parse(item.responseText);
				}
				// 更新当前窗口状态变化的文件
				this.files.set(item.name, item);
				let arr1 = this.files.get(item.name).responseText

				this.fileArray.push(arr1.data)


				// 强制更新视图
				this.$forceUpdate();
			},
			/**
			 * 上传进度回调
			 * 如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
			 * @param {Object} item 当前正在上传的文件
			 */
			onprogre(item) {

				console.log('打印对象', JSON.stringify(this.files.get(item.name)));
				// 更新当前状态变化的文件
				this.files.set(item.name, item);
				// 强制更新视图
				this.$forceUpdate();
			},
			/**
			 * 文件选择回调
			 * @param {Object} files 已选择的所有文件Map集合
			 */
			changeFile(files) {
				console.log('当前选择的文件列表：', JSON.stringify([...files.values()]));
				// 更新选择的文件 
				this.files = files
				console.log(files.values())
				// 强制更新视图
				this.$forceUpdate();
			},
			/**
			 * 指定上传某个文件
			 * @param {Object} name 带后缀名的文件名称
			 */
			resetUpload(name) {
				this.$refs.lsjUpload.upload(name);
			},

		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.leave_request {
		position: relative;
		padding-bottom: 100px;
	}

	.leave_box,
	.flow_path {
		width: 100%;
		padding: 0 28.07rpx;
		background: #fff;
		margin-bottom: 35.09rpx;
		padding-bottom: 28.07rpx;
	}

	.bot_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 87.72rpx;

		>view {
			width: 50%;
			text-align: center;
			line-height: 87.72rpx;
		}

		.reset {
			background-color: #fff;
		}

		.submit_btn {
			color: #fff;
			height: 87.72rpx;
			background: $theme-oa-color;
		}
	}

	.leava_type {
		height: 100rpx;
		border-bottom: 1px solid #999;

		.title {
			font-size: 31.58rpx;
		}
	}

	.cont_cell {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 87.72rpx;
		border-bottom: 1px solid #f7f7f7;

		.title {
			font-size: 31.58rpx;
		}
	}

	// 审批流程
	.audit_process {

		.process_item {
			position: relative;
			height: 100%;
			margin: 17.54rpx 0;
		}

		:last-child {
			.circle {
				&::before {
					display: none;
				}
			}
		}

		.tag {
			font-size: 21.05rpx;
			color: #fff;
			padding: 0 4px;
			margin-left: 10.53rpx;
			background-color: #3c9cff;
			border-radius: 2px;
		}

		.verifier {
			margin: 17.54rpx 0;
		}
	}



	.circle {
		width: 31.58rpx;
		height: 31.58rpx;
		background-color: #fff;
		border: 2px solid #34A853;
		border-radius: 50%;
		margin: 0 5px;
		display: flex;
		flex-direction: column;
		align-items: center;

		&::before {
			content: "";
			display: block;
			position: absolute;
			clear: both;
			width: 1px;
			height: 100%;
			background-color: rgba(204, 204, 204, 0.5);
			margin: 31.58rpx;
		}
	}

	// 附件
	.upload_box {
		padding: 17.54rpx;
		background-color: #F7F7F7;
		border-radius: 4px;

		.title {
			font-size: 28.07rpx;
		}

		.text {
			margin-top: 7.02rpx;
			font-size: 21.05rpx;
			color: #999;
		}
	}

	.file_name {
		width: 526.32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.file {
		padding: 17.54rpx;
		border-radius: 4px;
		border: 1px solid #F2F2F2;
		margin: 17.54rpx 0;

		.file_size {
			margin-top: 7.02rpx;
		}

		.file_size,
		.upload_people {
			font-size: 21.05rpx;
			color: #999;
		}
	}
</style>