<template>
	<view class="content">

		<view class="content-middle">


			<view class="content-middle-three">
				<view class="middle-three">


					<view class="middle-threeb">
						<view class="middle-threeb-title">
							<view class="title">
								{{detail.title}}
							</view>
							<view class="title-status" @click="show5=true">
								{{detail.flow_status==1?"待办的":detail.flow_status==2?"进行中":detail.flow_status==3?"已完成":detail.flow_status==4?"已拒绝":"已关闭"}}
							</view>
						</view>

						<view class="middle-threeba">
							<view class="middle-threeb-a">

								<view class="threeb-a-b">
									<view class="name">负责人：<text>{{detail.director_name}}</text></view>
									<view class="name">协办人：<text>{{detail.assist_admin_names}}</text></view>
									<!-- <view class="name">发布人：<text>{{detail.title}}</text></view> -->
									<view class="name">工作性质：<text>{{detail.cate_name}}</text></view>
									<view class="name">计划完成日期：<text>{{detail.end_time}}</text></view>
									<!-- <view class="name">任务验收截止时间：<text>{{detail.project_name}}</text></view> -->
									<view class="name">预估工时：<text>{{detail.plan_hours}}</text></view>

								</view>
							</view>

						</view>


					</view>


				</view>
				<view class="middle-three" style="margin-top: 30rpx;">


					<view class="middle-threeb">
						<view class="middle-threeb-title">
							<view class="title">
								任务描述
							</view>

						</view>

						<view class="middle-threeba">
							<view class="middle-threeb-a">

								<view class="threeb-a-b1">


									<!-- <text>{{detail.content}}</text> -->

									<jyf-parser :html="detail.content" ref="article" :tag-style="tagStyle"></jyf-parser>





								</view>
							</view>

						</view>


					</view>


				</view>
				<view class="" style="background-color: #fff;">
					<block v-for="(item, i) in fileArray" :key="i">
						<view class="file flex_a_c_j_sb" style="z-index: 0;">
							<view class="l_file">
								<view class="file_name" @click="downloadFile(item)">{{ item.name }}</view>
								<view class="file_size">{{ item.filesize  }}</view>
								<!--  -->
							</view>
							<u-icon @click="delImg(item,i)" name="close-circle" color="#333333" size="28"
								style="z-index: 999;"></u-icon>
						</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'>

								<u-icon name="plus-circle" color="#333333" size="28"></u-icon>
							</lsjUpload>
						</view>

					</view>
				</view>
			</view>
		</view>

		<u-empty v-if="Object.keys(detail).length==0" text="没有信息" icon="/static/empty/data.png"></u-empty>
		<u-action-sheet :show="show5" :actions="actions5" title="请选择任务状态" @close="show5 = false" @select="Select5">
		</u-action-sheet>
	</view>
</template>


<script>
	import {
		projecttaskview,
		addprojecttask,
		addfile,
		deletefile
	} from '@/api/oa.js'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js'
	import {
		Toast
	} from '@/libs/uniApi.js'
	import {
		FILE_URL
	} from '@/api/file.js'
	import lsjUpload from '@/uni_modules/lsj-upload/components/lsj-upload/lsj-upload.vue'
	export default {
		components: {
			lsjUpload
		},

		data() {
			return {
				show5: false,
				type: '',
				detail: {},
				actions5: [{
					name: '待办的',
					id: '1',
				}, {
					name: '进行中',
					id: '2',
				}, {
					name: '已完成',
					id: '3'
				}, {
					name: '已拒绝',
					id: '4'
				}, {
					name: '已关闭',
					id: '5'
				}],
				fileArray: [],
				fileOption: {},
tagStyle: {
					img: 'width:100%;display:block;',

				},
				files: new Map(),
			};
		},

		onLoad(data) {
			this.fileOption = {
					url: FILE_URL,
					name: 'file',
					header: {
						token: this.$store.state.app.token
					}
				},

				this.type = data.data
			this.getDeatil(data.data)
		},
		onShow() {

		},

		methods: {
			async getDeatil(id) {
				let res = await projecttaskview({
					id: id

				})
				this.detail = res.data.detail

				this.fileArray = res.data.file_array.map(function(obj) {
					return {
						name: obj.name,
						filepath: obj.filepath,
						fileext: obj.fileext,
						filesize: obj.filesize,
						id: obj.id
					};
				});

			},
			Select5(e) {
				this.detail.flow_status = e.id
				// con
				this.zhuangtai()
			},
			downloadFile(item) {
				uni.downloadFile({
					url: HTTP_REQUEST_URL + item.filepath,
					success: function(res) {
						if (res.statusCode === 200) {
							const tempFilePath = res.tempFilePath;
							if (item.fileext == 'png'||item.fileext == 'jpg') {
								uni.previewImage({
									urls: [tempFilePath]
								});
							} else {

								uni.showModal({
									title: '提示',
									content: '暂时不支持查看，请登录后台查看',
									success: function(res) {
										if (res.confirm) {
											// console.log('用户点击确定');
										} else if (res.cancel) {
											// console.log('用户点击取消');
										}
									}
								});
							}

						}
					}
				});
			},
			async zhuangtai() {
				let res = await addprojecttask({
					id: this.type,
					flow_status: this.detail.flow_status
				})
				if (res.code == 0) {
					uni.navigateBack({
						delta: 1
					})
				}
				Toast(res.msg)
			},
			async addfile1(val) {

				let data = {
					topic_id: this.detail.id,
					file_id: val.id,
					file_name: val.name,
					module: 'task',

				}
				let res = await addfile(data)

				if (res.code == 0) {
					this.getDeatil(this.type)
				}
				Toast(res.msg)
				// console.log(res)
			},
			/**
			 * 某文件上传结束回调(成功失败都回调)
			 * @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.addfile1(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() {
				this.$refs.lsjUpload.upload(name);
			},
			async delImg(item, i) {
				console.log(item)
				let res = await deletefile({
					id: item.id
				})
				if (res.code == 0) {
					this.fileArray.splice(i, 1)
				}
				Toast(res.msg)
			}
		}
	};
</script>


<style lang="scss">
	page {
		padding: 0 28rpx;
	}

	// 附件
	.upload_box {
		padding: 17.54rpx;
		background-color: #fff;
		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;
		}
	}

	.content-middle {
		.content-middle-one {
			.middle-one {
				display: flex;
				background-color: #FFFFFF;
				padding: 28rpx 18rpx;

				.search {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					width: 149rpx;
					line-height: 63rpx;
					height: 63rpx;
					background: #FFFFFF;
					text-align: center;
					border-radius: 35rpx 35rpx;
					border: 2rpx solid #E6E5E5;
					margin-left: 18rpx;
				}

				.content-middle-search {
					display: flex;
					width: 527rpx;
					height: 63rpx;
					line-height: 63rpx;
					padding-left: 30rpx;
					background: #F7F7F7;
					border-radius: 35rpx 35rpx;
					font-size: 25rpx;

					input {
						width: 527rpx;
						height: 63rpx;
						line-height: 63rpx;
						padding-left: 30rpx;
					}

					.placeholder {
						font-size: 25rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						padding-left: 30rpx;

					}


				}

				.content-middle-sai {
					display: flex;
					width: 149rpx;
					height: 63rpx;
					line-height: 63rpx;
					background: #FFFFFF;
					border-radius: 35rpx 35rpx;
					border: 2rpx solid #E6E5E5;
					margin-left: 18rpx;

					.content-middle-saia {

						width: 29rpx;
						height: 28rpx;
						margin-left: 25rpx;
						margin-right: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.content-middle-saib {
						font-size: 28rpx;

						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
					}
				}
			}

			.content-middle-search-detail {
				background-color: #FFFFFF;

				:nth-last-child(1) {
					border: none !important;
				}

				.search-detail {
					display: flex;
					justify-content: space-between;
					padding-right: 195rpx;
					padding: 18rpx 53rpx;
					border-bottom: 2rpx solid #E6E6E6;
					;


					.search-detail-one {}
				}

			}
		}


		.content-middle-three {
			margin-top: 26rpx;


			.middle-three {
				background-color: #FFFFFF;
				padding: 28rpx 28rpx;

				.middle-threea {
					font-size: 35rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #3274F9;
					margin-bottom: 30rpx;
				}

				.middle-threeb {


					.middle-threeb-title {
					
						display: flex;
						justify-content: space-between;
						margin-bottom: 10px;




						.title {
							width: 540rpx;
							font-size: 32rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						.title-status {
							font-size: 25rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #3274F9;
							background: #E4EDFF;
							height: 42rpx;
							line-height: 42rpx;
							padding: 0 10rpx;
							border-radius: 7rpx 7rpx;
						}
					}

					.middle-threeba {
						display: flex;
						justify-content: space-between;

						.middle-threeb-a {

							.threeb-a-b {



								.middle-edit {
									width: 645rpx;
									height: 63rpx;
									line-height: 63rpx;
									background: #e6e5d9;
									text-align: center;
									font-size: 28rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #000;
									margin-bottom: 20rpx;

								}

								.middle-delete {
									width: 645rpx;
									height: 63rpx;
									line-height: 63rpx;
									background: #F02828;
									text-align: center;
									font-size: 28rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #FFFFFF;

								}

								.name {
									font-size: 28rpx;
									font-family: PingFang SC-Bold, PingFang SC;
									color: #333333;

									text {
										font-size: 28rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: 400;
										color: #333333;
									}

								}

								.achor {
									font-size: 28rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #333333;

								}
							}


							.threeb-a-b1 {
							    width: 350px;
								padding: 20rpx 20rpx;
								word-wrap: break-word;
								overflow: hidden;
							}

						}

						.middle-threeb-b {

							height: 80rpx;



							image {
								width: 100%;
								height: 100%;
							}
						}
					}


				}
			}

		}
	}
</style>