<template>
	<div style="height: 90%; " class="portS">
		<!-- 创建和搜索 -->
		<div class="datasou_top" style="height: 10%;">
			<el-row style="margin-bottom: 30px;margin-top: 20px;">
				<el-col :span="15">
					<el-button type="primary" @click="createEngine">创建接口</el-button>
				</el-col>

			</el-row>
		</div>


		<div class="datasou_cont" style="height: 80%;" v-if="data">
			<div class="datasou_table">
				<el-row>


					<el-table border :data="data.data.klist" style="width: 100%" :cell-style="{padding: '10px'}"
						v-loading="loading">

						<el-table-column prop="id" label="ID" align="center" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="name" label="连接名称" align="center" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="url" label="连接地址" align="center" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="method" label="请求方法" align="center" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="requestBody" label="请求体类型" align="center" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="" label="调用量" align="center" show-overflow-tooltip>
							{{1}}
						</el-table-column>
						<el-table-column prop="creatorName" label="创建人" align="center" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="updataTime" label="最后更新时间" align="center">
							<template slot-scope="scope">
								<span style="white-space: nowrap;">{{
								new Date(scope.row.updateTime).toLocaleDateString().replace(/\//g, "-") + " " + new Date(scope.row.updateTime).toTimeString().substr(0, 8)
								}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" size="s">
							<template slot-scope="scope">
								<div style="display: flex;">
									<el-button icon="el-icon-search" circle size="mini"
										@click="dialogShow(scope.$index)"></el-button>
									<el-button type="primary" icon="el-icon-edit" circle size="mini"
										@click="modificationShow(scope.row.id)"></el-button>
									<el-button type="danger" icon="el-icon-delete" circle size="mini"
										@click="deletelistsor(scope.row.id)"></el-button>
								</div>
							</template>
						</el-table-column>

					</el-table>

				</el-row>

			</div>
			<div style="float: right;margin-right: 120px;margin-top: 40px;">
				<el-pagination :current-page="pageNo" @current-change="currpage" background layout="prev, pager, next"
					:total="data.data.pageInfo.total" v-if="data!==null">
				</el-pagination>
			</div>
		</div>

		<el-dialog title="接口详情" :visible.sync="dialogVisible" width="40%" :before-close="handleClose"
			class="DataSource_look">
			<div v-if="tempDialogData!==null">
				<div class="port_textLayout">
					<p>连接名称：</p>
					<p v-if="tempDialogData.name">{{tempDialogData.name}}</p>
				</div>
				<div class="port_textLayout">
					<p>连接地址：</p>
					<p v-if="tempDialogData.url">{{tempDialogData.url}}</p>
				</div>
				<div class="port_textLayout">
					<p>请求方式：</p>
					<p v-if="tempDialogData.method">{{tempDialogData.method}}</p>
				</div>
				<div class="port_textLayout" >
					<p>请求头：</p>
					<div v-if="tempDialogData.requestHeaders" >
						<p
							v-for="value in typeof tempDialogData.requestHeaders == 'string'?JSON.parse(tempDialogData.requestHeaders):tempDialogData.requestHeaders">
							{{value.key}}:{{value.value}}
						</p>
					</div>
				</div>
				<div class="port_textLayout" style="margin-top: 20px;">
					<p>请求体：</p>
					<el-input type="textarea" rows="8" placeholder="格式:{page:1}   变量格式:name:{name}"
						v-model="tempDialogData.requestBody" disabled style="width: 400px;">
					</el-input>
				</div>
				<div class="port_textLayout">
					<p>响应体：</p>
					<el-input type="textarea" rows="8" v-model="tempDialogData.responseBody" disabled
						style="width: 400px;">
					</el-input>
				</div>
				<div class="port_textLayout">
					<p>创建时间：</p>
					<p v-if="tempDialogData.createTime">
						{{new Date(tempDialogData.updateTime).toLocaleDateString().replace(/\//g, "-") + " " + new Date(tempDialogData.updateTime).toTimeString().substr(0, 8)}}
					</p>
				</div>
				<div class="port_textLayout">
					<p>创建人：</p>
					<p v-if="tempDialogData.creatorName">{{tempDialogData.creatorName}}</p>
				</div>
				<div class="port_textLayout">
					<p>修改时间：</p>
					<p v-if="tempDialogData.updateTime">
						{{new Date(tempDialogData.updateTime).toLocaleDateString().replace(/\//g, "-") + " " + new Date(tempDialogData.updateTime).toTimeString().substr(0, 8)}}
					</p>
				</div>
				<div class="port_textLayout">
					<p>修改人：</p>
					<p v-if="tempDialogData.modifierName">{{tempDialogData.modifierName}}</p>
				</div>
			</div>
			<div v-else>
				数据错误 请重新尝试
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false;tempDialogData=null">确 定</el-button>
			</span>

		</el-dialog>
		<el-dialog :title="modificationId===null?'创建接口':'修改接口'" :visible.sync="modificationVisible" width="40%"
			class="portS_dialog" :before-close="handleClose">
			<div v-loading="dialogLoading">
				<div class="port_textLayout">
					<p><span style="color: red;">*</span>接口名称：</p>
					<p>
						<el-input placeholder="请输入连接名称" v-model="modificationData.name" clearable maxlength="20">
						</el-input>
					</p>
				</div>

				<div class="port_textLayout">
					<p><span style="color: red;">*</span>请求地址：</p>
					<p>
						<el-input placeholder="如:192.168.1.1" v-model="modificationData.url" clearable maxlength="100">
						</el-input>
					</p>
				</div>
				<div class="port_textLayout">
					<p><span style="color: red;">*</span>请求方法：</p>
					<p>
						<el-select v-model="modificationData.method" placeholder="请选择请求方法">
							<el-option label="Get" value="GET"></el-option>
							<el-option label="Post" value="POST"></el-option>
						</el-select>
					</p>
				</div>

				<div class="port_textLayout">
					<p>请求头参数：</p>
					<div>
						<p style="display: flex;align-items: center;margin-top: 5px;">
							<el-input placeholder="key" v-model="modificationData.requestHeaders[0].key" disabled
								clearable size="mini"></el-input>
							<span>:</span>
							<el-select v-model="modificationData.requestHeaders[0].value" size="mini"
								placeholder="请选择请求方法">
								<el-option label="/json" value="application/json"></el-option>
								<el-option label="/x-www-form-urlencoded" value="application/x-www-form-urlencoded">
								</el-option>
							</el-select>
							<i class="el-icon-circle-plus-outline" style="color: #409EFF;font-size: 20px;"
								@click="addheader(0)"></i>
							<i class="el-icon-circle-close" style="color: #ddd;font-size: 20px;"></i>
						</p>

						<p v-for="(value,index) in modificationData.requestHeaders"
							style="display: flex;align-items: center;margin-top: 5px;" v-if="index!=0">
							<el-input placeholder="key" v-model="value.key" clearable size="mini"></el-input>
							<span>:</span>
							<el-input placeholder="value" v-model="value.value" clearable size="mini"></el-input>
							<i class="el-icon-circle-plus-outline" style="color: #409EFF;font-size: 20px;"
								@click="addheader(index)"></i>
							<i class="el-icon-circle-close" style="color: #F56C6C;font-size: 20px;"
								@click="delectheader(index)"></i>
						</p>
					</div>
				</div>
				<div class="port_textLayout">
					<p>请求体：</p>
					<p>
						<el-input type="textarea" rows="12" placeholder="格式:{page:1}   变量格式:name:{name}"
							v-model="modificationData.requestBody" style="width: 400px;">
						</el-input>
					</p>
				</div>
				<div class="port_textLayout">
					<p>测试请求：</p>
					<p>
						<el-button plain @click="getHttpResponses">请求测试</el-button>
						<el-button plain @click="lookBig">大屏查看请求响应体</el-button>
					</p>
				</div>
				<div class="port_textLayout">
					<p>响应体：</p>
					<p>
						<el-input type="textarea" placeholder="点击请求测试获取此值" v-model="modificationData.responseBody"
							style="width: 400px;">
						</el-input>
					</p>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose" :disabled="dialogLoading?'disabled':false">取 消</el-button>
				<el-button type="primary" :disabled="dialogLoading?'disabled':false" @click="modificationSure">确 定
				</el-button>
			</span>
			<el-dialog width="70%" title="数据" :visible.sync="dialogVisibleBigData" append-to-body :close-on-click-modal="false">
				<span>
					ps:在此处也可以修改数据
				</span>
				<div style="display: flex;justify-content: space-between;width: 100%;">
					
					<div style="width: 50%;">
						<p>请求体：</p>
						<p>
							<el-input type="textarea" rows="26" placeholder="格式:{page:1}   变量格式:name:{name}"
								v-model="modificationData.requestBody" >
							</el-input>
						</p>
					</div>
					<div style="width: 50%;">
						<p>响应体：</p>
						<p>
							<el-input type="textarea" rows="26"  placeholder="点击请求测试获取此值" v-model="modificationData.responseBody"
								>
							</el-input>
						</p>
					</div>
				</div>
				
				<span slot="footer" class="dialog-footer">
				
					<el-button type="primary"  @click="dialogVisibleBigData=false">确 定
					</el-button>
				</span>
			</el-dialog>
		</el-dialog>






	</div>
</template>

<script>
	import {
		getInterfaceList,
		addInterface,
		updateInterface,
		deleteInterface,
		getHttpResponse
	} from '../../api/index';
	export default {
		name: "portSource",
		data() {
			return {
				dialogLoading: false,
				loading: false,
				searchString: "",
				data: null,
				currentPage: null,
				dialogVisible: false,
				tempDialogData: null,
				pageNo: 1,
				modificationId: null,
				modificationVisible: false,
				modificationData: {
					name: "",
					url: '',
					method: '',
					requestBody: '',
					requestHeaders: [{
						key: 'Content-Type',
						value: 'application/json'
					}],
					responseBody: '',
				},
				dialogVisibleBigData: false
			}
		},
		created() {
			let params = {
				pageNo: this.pageNo,
				pageSize: 10,
				"interfaceInfo": {}
			}
			this.getInterfaceLists(params)
		},
		methods: {
			lookBig() {
				this.dialogVisibleBigData = true
			},
			random() {
				return Math.floor(Math.random() * 5000)
			},
			addheader(index) {
				this.modificationData.requestHeaders.splice(index + 1, 0, {
					key: '',
					value: ''
				})
			},
			delectheader(index) {
				this.modificationData.requestHeaders.splice(index, 1)
			},
			// 测试连接
			getHttpResponses() {

				let subobj = {}
				this.modificationData.requestHeaders.forEach(value => {
					subobj[value.key] = value.value
				})

				let Params = {
					url: this.modificationData.url,
					method: this.modificationData.method,
					requestHeaders: JSON.stringify(subobj),
					requestBody: this.modificationData.requestBody
				}
				this.dialogLoading = true
				getHttpResponse(Params).then(res => {
					if (res.status == "1") {
						this.modificationData.responseBody = JSON.stringify(JSON.parse(res.data), null, 4)
					}
					this.dialogLoading = false
				})
			},
			// 关闭弹窗所有弹窗 且清除临时数据
			handleClose() {
				this.dialogVisible = false
				this.modificationVisible = false

				this.tempDialogData = null
				this.modificationData = {
					name: "",
					url: '',
					method: '',
					requestBody: '',
					requestHeaders: [{
						key: 'Content-Type',
						value: 'application/json'
					}],
					responseBody: '',
				}

				this.modificationId = null
			},
			// 查看  弹窗显示
			dialogShow(index) {
				this.tempDialogData = this.data.data.klist[index]
				console.log(this.tempDialogData)
				// this.tempDialogData.requestHeaders = JSON.parse(this.tempDialogData.requestHeaders)
				this.dialogVisible = true
			},
			// 修改  弹窗显示
			modificationShow(id) {
				this.modificationId = id
				this.data.data.klist.forEach(value => {
					if (value.id === id) {
						this.modificationData = {
							...value
						}
						if (value.requestHeaders) {
							if (typeof this.modificationData.requestHeaders == "string") {
								this.modificationData.requestHeaders = JSON.parse(value.requestHeaders)


							}

						} else {
							this.modificationData.requestHeaders = [{
								key: 'Content-Type',
								value: 'application/json'
							}]
						}

					}
				})
				this.modificationVisible = true
			},
			// 确定修改或者添加
			modificationSure() {
				if (this.modificationData.name.indexOf(' ') !== -1 || this.modificationData.url.indexOf(' ') !== -1 || this
					.modificationData
					.method == "") {
					this.$message.error('必填项不允许出现空格！')
				} else {
					if (this.modificationData.name.length < 4 || this.modificationData.url.length < 4) {
						this.$message.error('请检查必填项且长度不小于4！')
					} else {
						let is = false
						this.modificationData.requestHeaders.forEach(value => {
							if (value.key.trim() == "" || value.value.trim() == "") {
								is = true
							}
						})

						if (is) {
							this.$message.error('请填入请求头');
							return
						}
						// this.modificationData.responseBody
						if (!this.isJSON(this.modificationData.responseBody)) {
							this.$message.error('请检查 响应体 是否为JSON格式');
							return
						}
						let params = {}

						params.name = this.modificationData.name
						params.url = this.modificationData.url
						params.method = this.modificationData.method
						params.requestBody = this.modificationData.requestBody
						params.responseBody = this.modificationData.responseBody

						let subobj = {}
						this.modificationData.requestHeaders.forEach(value => {
							subobj[value.key] = value.value
						})

						params.requestHeaders = String(JSON.stringify(subobj))
						console.log(params.requestHeaders)
						if (this.modificationId !== null) {
							params.id = this.modificationData.id
							console.log(1)
							updateInterface(params).then(res => {
								if (res.status == "1") {
									this.data.data.klist.forEach((value, index) => {
										if (value.id === this.modificationData.id) {
											this.$set(this.data.data.klist, index, {
												...this.modificationData
											})
										}
									})
									this.$message({
										message: '修改成功',
										type: 'success'
									});
									console.log(2)
									this.handleClose()
									console.log(3)
								}
							})
						} else {
							params.id = ""
							this.setDataSources(params).then(res => {
								if (res.status === "1") {
									// 创建成功方法
									this.pageNo = 1
									this.getInterfaceLists({
										pageNo: this.pageNo,
										pageSize: 10,
										"interfaceInfo": {}
									})
									this.$message({
										message: '创建成功',
										type: 'success'
									});
									this.handleClose()
								}
							})
						}

					}

				}
				// console.log(this.modificationData.name.indexOf(' '))
			},
			async setDataSources(params) {
				this.loading = true
				const data = await addInterface(params)
				this.loading = false
				return data
			},
			createEngine() {
				this.modificationVisible = true
			},
			searchEngine() {},
			async getInterfaceLists(params) {
				this.loading = true
				const data = await getInterfaceList(params)
				if (data.status === "1") {
					this.data = data
					data.data.klist = data.data.klist.map(value => {
						value.requestBody = this.isJSON(value.requestBody) ? JSON.stringify(JSON.parse(value
							.requestBody), null, 4) : ''
						value.responseBody = this.isJSON(value.responseBody) ? JSON.stringify(JSON.parse(value
							.responseBody), null, 4) : ''

						if (!Array.isArray(JSON.parse(value.requestHeaders))) { //讲 key:value 格式 更改为老格式
							value.requestHeaders = JSON.stringify(this.format(JSON.parse(value
								.requestHeaders)))


						}

						return value
					})
					this.page = data.data.pageInfo
				} else {
					this.$message.error('访问出错了-_-');
				}
				this.loading = false
			},
			format(obj) {
				return Object.keys(obj).map(value => {
					return {
						key: value,
						value: obj[value]
					}


				})



			},
			deletelistsor(id) {

				this.$confirm('确定删除？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'error'
				}).then(() => {
					this.deletelists({
						id: id
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			deletelists(id) {
				this.deletelist(id).then(res => {
					if (res.status === "1") {
						this.getInterfaceLists({
							pageNo: this.pageNo,
							pageSize: 10,
							"interfaceInfo": {}
						})
						this.$message({
							message: '删除成功',
							type: 'success'
						});
					}
				})
			},
			async deletelist(id) {
				this.loading = true
				return await deleteInterface(id)
				this.loading = false
			},
			currpage(num) {
				this.pageNo = num
				this.getInterfaceLists({
					pageNo: this.pageNo,
					pageSize: 10,
					"interfaceInfo": {}
				})
				console.log(this.pageNo)
			},
			isChinese(temp) {
				// var re = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
				// if (re.test(temp)) {
				// 	console.log(temp)
				// 	return false
				// };
				// return true;
				if (escape(temp).indexOf("%u") < 0) {
					return false
				} else {
					return true;
				}

			},
			isJSON(str) {
				if (typeof str == 'string') {
					try {
						var obj = JSON.parse(str);
						if (typeof obj == 'object' && obj) {
							return true;
						} else {
							return false;
						}

					} catch (e) {
						console.log('error：' + str + '!!!' + e);
						return false;
					}
				}
			},
		}




	}
</script>

<style>
	.el-pagination.is-background .btn-next,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .el-pager li {
		background-color: #fff !important;
	}

	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #409EFF !important;
	}

	.portS_dialog .port_textLayout {
		display: flex;
		font-size: 16px;
		height: 40px;
		padding-left: 0px;
		margin-top: 10px;
	}

	.port_textLayout>p {
		height: 100%;
		line-height: 30px;
	}

	.portS_dialog .port_textLayout>p:nth-of-type(1) {
		width: 32%;
		text-align: right;
		margin-right: 20px;
		line-height: 40px;
	}

	.portS .DataSource_look .port_textLayout {
		display: flex;
		align-items: center;
		margin-top: 5px;
	}

	.DataSource_look .port_textLayout>p:nth-of-type(2) {
		border-radius: 5px;
		line-height: 40px;
		box-sizing: border-box;
	}

	.el-dialog {
		border-radius: 20px !important;
	}

	.portS_dialog .port_textLayout {
		height: unset !important;
	}
</style>
