<template>
	<view>
		<view class="grxx">
			<view class="grxxItem">
				<view class="sfzhm">
					<view class="uni-list-cell-left">
						临时流调名称
					</view>
					<view class="uni-list-cell-db">
						<input type="text" placeholder="请输入临时流调名称" v-model="listData.name" />
					</view>
				</view>
			</view>
		</view>
		<view class="czan">
			<button type="primary" @click="navTo">+新增</button>
		</view>
		<view class="grxx">
			<view class="grxxItem items" v-for="(item,index) in messageList" :key="index">
				<view class="ygxm">
					<text>{{item.name}}</text>
					<text>{{item.createDate}}</text>
				</view>
				<view class="sfzhm lszt">
					<text>状态：</text>
					<text :class="item.initiateState==0?'wfq':'yfq'">{{item.initiateState==0?'未发起':'已发起'}}</text>
				</view>
				<view class="sfzhm">
					<button type="default" @click="seefxqy(item)">查看</button>
					<view class="contextdqs" v-show="isdqs" @click="isdqs=false">
						<view class="contextdq" @click.stop>
							<view class="container">
								<editor :id="`editor${index}`" :read-only="true" class="ql-container" @ready="onEditorReady">
								</editor>
							</view>
						</view>
					</view>
					<button type="default" @click="fqlsld(item.id)">发起</button>
				</view>
			</view>
		</view>
		<view class="ydd" v-if="isReachBottom">
			~<没有了>~
		</view>
	</view>
</template>

<script>
	import {
		postRequest,
		getRequest
	} from '../../api/api.js'
	export default {
		data() {
			return {
				//为true时，停止下拉加载
				isReachBottom: false,
				//总list
				messageList: [],
				listData: {
					name: '',
					current: 1,
					orders: [{
						asc: true,
						column: ""
					}],
					size: 10,
				},
				total: 0,

				isdqs: false,
				contentVal: ''
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if (this.isReachBottom) {
				return
			} else {
				this.listData.current++;
				let list = this.messageList;
				this.getList();
			}
		},
		methods: {
			fqlsld(id){
				getRequest('/dailyRegisterType/initiateProcess',{id}).then(res=>{
					if(res.code=='200'){
						
					}
				})
			},
			navTo(){
				uni.navigateTo({
					url:'/pages/lsld/lsld'
				})
			},
			//风险地区文本编辑器
			onEditorReady() {
				this.messageList.forEach((item,index)=>{
					// #ifdef APP-PLUS || H5 ||MP-WEIXIN
					uni.createSelectorQuery().select(`#editor${index}`).context((res) => {
						this.editorCtx = res.context;
						this.editorCtx.setContents({
							html: this.contentVal //this.contentVal为赋值内容。    
						})
					}).exec()
					// #endif
				})
			},
			seefxqy(item) {
				this.isdqs = true
				this.contentVal = item.riskyArea;
				this.onEditorReady()
			},
			getList() {
				postRequest('/dailyRegisterType/findListByTemporary', this.listData).then(res => {
					if (res.code == '200' && res.data != null) {
						if (this.messageList.length < 0) {
							this.messageList = res.data.records;
							this.total = res.data.total;
						} else {
							let list = []
							list = res.data.records;
							if (list.length > 0) {
								list.forEach(item => {
									this.messageList.push(item)
								})
							}
						}
						if (this.listData.current == res.data.pages) {
							this.isReachBottom = true
						}
					}
				})
			}
		}
	}
</script>

<style>
	.grxx {
		padding: 2%;
	}

	.grxxItem .sfzhm {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		font-size: 84%;
		color: #999999;
		position: relative;
	}

	.grxxItem .lszt {
		border-bottom: 1px solid #CCCCCC;
	}

	.sfzhm button {
		color: #007AFF;
		background-color: white;
		font-size: 14px;
	}

	.sfzhm button::after {

		border: none;
	}

	.grxxItem .mdd {
		justify-content: left;
	}

	.grxxItem .mdd input {
		width: 70%;
		margin-left: 10px;
	}

	.hxx {
		position: absolute;
		color: red;
		left: 3px;
		top: 25%;
	}

	.wfq {
		color: red;
	}

	.yfq {
		color: #CCCCCC;
	}

	.grxxItem {
		margin: 8px 0;
		border-radius: 5px;
		overflow: hidden;
		box-shadow: 0px 2px 15px 3px rgba(0, 0, 0, 0.1);
	}

	.items {
		margin-bottom: 5%;
	}

	.grxxItem .ygxm {
		padding: 10px;
		background-color: #007AFF;
		color: white;
		border-bottom: 1px solid #ccccccbf;
		display: flex;
		justify-content: space-between;
	}

	.grxxItem .ygxm text:last-of-type {
		font-size: 14px;
	}

	.ydd {
		text-align: center;
		padding: 5px;
		color: #cac5c5;
	}

	.czan {
		overflow: hidden;
	}

	.czan button {
		width: 30%;
		font-size: 14px;
		float: right;
		margin-right: 2%;
	}

	.contextdqs {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}


	.contextdq {
		width: 80%;
		height: 50%;
		margin: 0 auto;
		transform: translateY(44%);
		background-color: white;
		overflow-y: scroll;
		padding: 5%;
		border-radius: 5px;
		font-size: 14px;
	}

	.xcmphoto {
		padding: 5%;
	}

	.xcmphoto text {
		color: red;
		font-size: 14rpx;
	}
</style>
