<template>
	<div style="height: 98%;">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-document-copy"></i> Artcile Html
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" style="height: 95%;min-width: 1000px;background-color: #fafafa;padding: 10px;">
			<el-row :gutter="20" style="height: 102%;">
				<el-col :span="24" style="height: 100%;">
					<div class="type_MTxt">
						<h3 class="man_Title">{{detailMes.title}}ea quisquam modi ratione in, ducimus quia. Neque
							reiciendis nihil illum!</h3>
						<div>
							<div v-for="(item,index) in Main_List" :class="item.check?'C_style':''">
								<el-checkbox v-model="item.check" class="checkMain" @change="chooseMain($event,item)">
								</el-checkbox>
								<p v-html="item.text"></p>
								<font v-if="item.getnum!=0" class="chNumer">{{item.getnum}}</font>
								<b class="MaxBtn" @click="MTxtEdit(item,index)"
									style="background-color: #006699;right: 120px;">
									<i class="el-icon-edit"></i>
								</b>
								<b class="MaxBtn" @click="MTxtPic(item,index)"
									style="background-color: #13bc20;right: 80px;">
									<i class="el-icon-picture-outline"></i>
								</b>
								<b class="MaxBtn" @click="MTxtTable(item,index)"
									style="background-color: #b6a109;right:40px;">
									<i class="el-icon-document-add"></i>
								</b>

								<b class="MaxBtn" @click="MTxtDelet(item,index)"
									style="background-color: #bc1a13;right: 0px;">
									<i class="el-icon-delete"></i>
								</b>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="8" style="height: 100%;">
					<p class="type_Gbtn" @click="trsanGtp">
						<i class="el-icon-document-copy" style="margin-right: 5px;"></i>
						TMRGTP Proofreading
					</p>
					<div style="height: 91.5%;overflow-y: scroll;" v-if="ChGtp_List.length!=0">
						<div class="type_CHar" v-for="(item,index) in ChGtp_List">
							<p v-html="item.text"></p>
							<font class="chNumer">{{index+1}}</font>
							<font class="chReple" @click="replceChGpr(item)">replace</font>
						</div>
					</div>
				</el-col>
			</el-row>

		</div>


		<!--修改文本 -->
		<el-dialog title="Modify Text" :visible.sync="txtVisible" width="800px" :close-on-click-modal="false">
			<el-form ref="editMes" :model="txtStyle" label-width="10px">
				<!-- <el-form-item label="">
					<p style="color: #006699;font-weight: bold;">Preview :</p>
					<p v-html="txtStyle.text" style="line-height: 24px;word-wrap: break-word;word-break: normal;"></p>
				</el-form-item> -->
				<el-form-item label="">
					<el-input type="textarea" placeholder="Please enter the table content..." v-model="txtStyle.text"
						autosize>
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="txtVisible=false">
					Cancel
				</el-button>
				<el-button type="primary" @click="saveTxt">
					<i class="el-icon-finished" style="margin-right: 5px;"></i>
					Save
				</el-button>
			</span>
		</el-dialog>


		<!--添加图片 -->
		<el-dialog title="Insert Picture" :visible.sync="pictVisible" width="800px" :close-on-click-modal="false">
			<el-form ref="editMes" :model="picStyle" label-width="150px">
				<el-form-item>
					<span slot="label">
						<font style="color: #f56c6c;margin-right: 5px;">*</font>
						Picture :
					</span>
					<el-upload class="avatar-uploader" :action="baseUrl+'api/Production/up_articlepic_file'"
						:show-file-list="false" name="articleicon" :on-success="handleAvatarSuccess"
						:on-error="handleAvatarError" :before-upload="beforeAvatarUpload">
						<img v-if="picStyle.imageUrl" :src="picStyle.imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="Bottom Title :">
					<el-input placeholder="Please enter the table title..." v-model="picStyle.titleBot">
					</el-input>
				</el-form-item>
				<el-form-item label="Bottom Describe :">
					<el-input placeholder="Please enter the table describe..." v-model="picStyle.titleDes">
					</el-input>
				</el-form-item>
			</el-form>
			<p style="margin: 20px 0;text-align: right;">
				<el-button type="warning" plain
					@click="picStyle.picUrl='';picStyle.titleBot='';picStyle.titleDes='';picStyle.imageUrl='';">
					<i class="el-icon-refresh" style="margin-right: 5px;"></i>Empty
				</el-button>
				<el-button type="primary" plain @click="">
					<i class="el-icon-sort" style="margin-right: 5px;"></i>Generate Picture
				</el-button>
			</p>
			<div class="lineStyle" v-if="picStyle.picUrl!=''">
				<div>
					<span class="title">Picture Width :</span>
					<el-input v-model="picStyle.picwith" style="width: 120px;">
						<template slot="append">px</template>
					</el-input>
				</div>
			</div>
			<div style="padding: 0 20px;" v-if="picStyle.picUrl!=''">
				<div style="text-align: center;">
					<img :src="baseUrl+'public/'+picStyle.picUrl" :style="'width:'+picStyle.picwith+'px'">
				</div>
				<p style="text-align: center;margin: 0 0 15px 0;font-size: 12px;color: #006699;">
					<b>{{picStyle.titleBot}}</b>
				</p>
				<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">{{picStyle.titleDes}}</p>
			</div>
			<span slot="footer" class="dialog-footer" v-if="picStyle.picUrl!=''">
				<el-button type="primary" @click="savePic">
					<i class="el-icon-finished" style="margin-right: 5px;"></i>
					Save Picture
				</el-button>
			</span>
		</el-dialog>


		<!-- 添加表格 -->
		<el-dialog title="Insert Table" :visible.sync="threeVisible" width="1000px" :close-on-click-modal="false">
			<el-form ref="editMes" :model="lineStyle" label-width="115px">
				<el-form-item label="Top Title :">
					<el-input placeholder="Please enter the table title..." v-model="lineStyle.titleTop">
					</el-input>
				</el-form-item>
				<el-form-item>
					<span slot="label">
						<font style="color: #f56c6c;margin-right: 5px;">*</font>
						Content :
					</span>
					<el-input type="textarea" :rows="5" placeholder="Please enter the table content..."
						v-model="lineStyle.textarea">
					</el-input>
				</el-form-item>
				<el-form-item label="Bottom Title :">
					<el-input placeholder="Please enter the table title..." v-model="lineStyle.titleBot">
					</el-input>
				</el-form-item>
			</el-form>


			<p style="margin: 20px 0;text-align: right;">
				<el-button type="warning" plain
					@click="lineStyle.textarea='';lineStyle.titleTop='';lineStyle.titleBot='';lineTable=[]">
					<i class="el-icon-refresh" style="margin-right: 5px;"></i>Empty
				</el-button>
				<el-button type="primary" plain @click="CopyExcelToTable">
					<i class="el-icon-sort" style="margin-right: 5px;"></i>Generate Table
				</el-button>
			</p>
			<div class="lineStyle" v-if="lineTable.length!=0">
				<div>
					<span class="title">Table All Width :</span>
					<el-input v-model="lineStyle.tabwith" style="width: 120px;">
						<template slot="append">%</template>
					</el-input>
				</div>
				<div>
					<div v-for="(item,index) in lineStyle.arrwith" class="styArry">
						<span class="title">Column <b style="color: #006699;">{{index+1}}</b> :</span>
						<el-input v-model="lineStyle.arrwith[index]" style="width: 100px;">
							<template slot="append">%</template>
						</el-input>
					</div>
				</div>
			</div>
			<div style="padding: 0 20px;" v-if="lineTable.length!=0">
				<p style="text-align: center;margin: 0 0 10px 0;font-size: 12px;color: #006699;">
					<b>{{lineStyle.titleTop}}</b>
				</p>
				<div class="lineAll" :style="'width:'+lineStyle.tabwith+'%'">
					<div v-for="item in lineTable" class="lineTit">
						<div v-for="(eqrt,iner) in item" :style="'width:'+lineStyle.arrwith[iner]+'%'">
							{{eqrt}}
						</div>
					</div>
				</div>
				<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">{{lineStyle.titleBot}}</p>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveLine" v-if="lineTable.length!=0">
					<i class="el-icon-finished" style="margin-right: 5px;"></i>
					Save Table
				</el-button>
			</span>
		</el-dialog>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				Art_Id: this.$route.query.id,
				detailMes: {},
				Main_List: [],
				check_List: [],
				ChGtp_List: [],
				lineStyle: {
					titleTop: '',
					titleBot: '',
					textarea: '',
					tabwith: '100',
					arrwith: []
				},
				lineTable: [],
				threeVisible: false,
				picStyle: {
					titleTop: '',
					titleDes: '',
					// picUrl: 'https://www.tmrjournals.cn/public/articleHTML/TMR/TMR20230213002/images/alternativeImage/TMR20230213002-F004.jpg',
					picUrl: '',
					imageUrl: '',
					picwith: '500'
				},
				pictVisible: false,
				txtStyle: {
					text: ''
				},
				txtVisible: false,
			};
		},

		created() {
			this.getDate()
		},

		methods: {
			// 获取数据
			getDate() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				// 获取文章信息
				this.$api
					.post('api/Production/getProductionMains', {
						p_article_id: this.Art_Id
					})
					.then(res => {
						if (res.code == 0) {
							this.detailMes = res.data.mains
							this.Main_List = []
							for (let i = 0; i < this.detailMes.length; i++) {
								this.Main_List.push({
									p_main_id: this.detailMes[i].p_main_id,
									text: this.detailMes[i].content,
									value: i + 1,
									getnum: 0,
									check: false,
								})
							}
							loading.close()
						} else {
							this.$message.error(res.msg);
							loading.close()
						}
					})
					.catch(err => {
						this.$message.error(err);
						loading.close()
					});

			},


			// 选择段落
			chooseMain(e, item) {
				this.check_List = []
				let allNUm = 1
				for (var i = 0; i < this.Main_List.length; i++) {
					if (this.Main_List[i].check) {
						this.Main_List[i].getnum = allNUm
						allNUm = allNUm + 1
						this.check_List.push({
							text: this.Main_List[i].text,
							value: this.Main_List[i].value,
							index: i,
							p_main_id: this.Main_List[i].p_main_id,
						})
					}
				}
				console.log(this.check_List)
			},

			// 转化为gpt标准格式
			trsanGtp() {
				if (this.check_List.length == 0) {
					this.$message.error('Please select a paragraph!');
				} else {
					this.ChGtp_List = JSON.parse(JSON.stringify(this.check_List))
					console.log(this.ChGtp_List)
				}

			},


			// 替换Gtp生成的内容
			replceChGpr(val) {
				this.Main_List[val.index].text = JSON.parse(JSON.stringify(val.text))
			},


			// 修改段落
			MTxtEdit(val, num) {
				this.txtVisible = true
				this.txtStyle = JSON.parse(JSON.stringify(val))
				this.txtStyle.index = num
			},

			// 图片段落
			MTxtPic(val, num) {
				this.picStyle.p_main_id = val.p_main_id;
				this.picStyle.titleBot = '';
				this.picStyle.titleDes = '';
				this.picStyle.picUrl = '';
				this.picStyle.imageUrl = ''
				this.pictVisible = true
			},

			// 表格段落
			MTxtTable(val, num) {
				this.lineStyle.p_main_id = val.p_main_id;
				this.lineStyle.textarea = '';
				this.lineStyle.titleCon = '';
				this.lineTable = [];
				this.threeVisible = true
			},

			// 删除段落
			MTxtDelet(val, num) {
				this.$api
					.post('api/Production/delProductionMain', {
						p_main_id: val.p_main_id
					})
					.then(res => {
						if (res.code == 0) {
							this.txtVisible = false
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},


			// 确定保存段落修改
			saveTxt() {
				this.$api
					.post('api/Production/editProductionMain', {
						p_main_id: this.txtStyle.p_main_id,
						content: this.txtStyle.text
					})
					.then(res => {
						if (res.code == 0) {
							this.txtVisible = false
							this.Main_List[this.txtStyle.index].text = JSON.parse(JSON.stringify(this.txtStyle.text))
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 确定保存图片
			savePic() {

			},

			// 表格转化
			CopyExcelToTable() {
				if (this.lineStyle.textarea == '') {
					this.$message.error('Please fill in the table content!');
					return
				}
				let txtRows = this.lineStyle.textarea.split("\n");
				let txtColum = []
				for (let i = 0; i < txtRows.length; i++) {
					if (txtRows[i] != "") {
						let columns = txtRows[i].split("\t");
						let dataone = [];
						for (let j = 0; j < columns.length; j++) {
							dataone.push(columns[j]);
						}
						txtColum.push(dataone);
					};
				}

				let arrwithNumer = Math.floor(100 / txtColum[0].length) - 2
				this.lineStyle.arrwith = []
				for (let i = 0; i < txtColum[0].length; i++) {
					this.lineStyle.arrwith.push(arrwithNumer)
				}
				this.lineTable = txtColum

			
			},


			// 确定保存表格
			saveLine() {
				let dataTable = ''
				for (let i = 0; i < this.lineTable.length; i++) {
					let ArryDr = ''
					let listHNem = ''
					for (let j = 0; j < this.lineTable[i].length; j++) {
						let ArrHtml = '<div style="width:' + this.lineStyle.arrwith[j] +
							'%;line-height: 22px;vertical-align: middle;display: inline-block;padding: 0 1%;font-size: 14px;color: #606266;word-wrap: break-word;word-break: normal;">' 
							+ this.lineTable[i][j] +'</div>'
						ArryDr = ArryDr + ArrHtml
					}

					if (i == 0) {
						listHNem =
							'<div style="display: flex;border-top: 2px solid #333333;border-bottom: 1px solid #333333;padding: 10px 0;font-weight: bold;margin-bottom: 20px;">' +
							ArryDr + '</div>'
					} else if (i == this.lineTable.length - 1) {
						listHNem =
							'<div style="display: flex;border-bottom: 2px solid #333333;padding:0 0 20px 0;">' +
							ArryDr + '</div>'
						ArryDr = ArryDr + listHNem
					} else {
						listHNem = '<div style="display: flex;padding:20px 0;">' + ArryDr + '</div>'
					}

					dataTable = dataTable + listHNem
				}
				dataTable = '<div style="width:' + this.lineStyle.tabwith + '%">' + dataTable + '</div>'

				if (this.lineStyle.titleTop != '') {
					dataTable = '<p style="text-align: center;margin: 0 0 10px 0;font-size: 12px;color: #006699;"><b>' +
						this.lineStyle.titleTop + '</b></p>' + dataTable
				}

				if (this.lineStyle.titleBot != '') {
					dataTable = dataTable+'<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">' +
						this.lineStyle.titleBot + '</p>'
				}


				console.log(dataTable)
			},


			// 上传图片
			handleAvatarSuccess(res, file) {
				if (res.code == 0) {
					this.picStyle.picUrl = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.picStyle.imageUrl = URL.createObjectURL(file.raw);
			},
			handleAvatarError(res, file) {

			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isLt2M) {
					this.$message.error('Picture size cannot exceed 1M!');
				}
				return isLt2M;
			},


		},

	};
</script>

<style scoped>
	.lineStyle {
		border-top: 1px solid #0066994d;
		padding: 20px 20px 40px 20px;
	}

	.lineStyle>div {}

	.lineStyle>div span.title {
		font-size: 14px;
		color: #606266;
		margin: 0px 10px 0px 0px;
	}

	.lineStyle>div font.mark {
		font-size: 14px;
		color: #606266;
		margin: 0px 0px 0px 10px;
	}

	.lineStyle .styArry {
		display: inline-block;
		margin: 15px 40px 0 0;
	}

	.lineStyle .styArry:nth-last-child(1) {
		margin-right: 0;
	}

	.lineAll {
		margin: 0 auto;

	}

	.lineAll .lineTit {
		padding: 0 0 20px 0;
		font-size: 14px;
	}

	.lineAll .lineTit:nth-child(1) {
		border-top: 2px solid #333333;
		border-bottom: 1px solid #333333;
		padding: 10px 0;
		font-weight: bold;
	}

	.lineAll .lineTit:nth-child(2) {
		padding-top: 20px;
	}

	.lineAll .lineTit:nth-last-child(1) {
		border-bottom: 2px solid #333333;
	}

	.lineAll .lineTit>div {
		line-height: 22px;
		vertical-align: middle;
		display: inline-block;
		padding: 0 1%;
	}



	.type_MTxt {
		background-color: #fff;
		padding: 0 10px;
		box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
		border-radius: 12px;
		height: 99%;
		overflow-y: scroll;
		position: relative;
	}


	.type_MTxt .man_Title {
		margin: 0 -10px 20px -25px;
		border-bottom: 1px solid #dde1eb;
		box-shadow: 0 5px 5px -2px rgb(134 134 134);
		padding: 12px 25px 8px 35px;
		font-size: 15px;
		line-height: 20px;
		color: #333;
	}

	.type_MTxt>div>div {
		position: relative;
		padding: 10px 10px 10px 40px;
		min-height: 22px;
		border: 2px dashed #fff;
		border-radius: 5px;
		margin-bottom: 5px;
		color: #606266;
	}


	.type_MTxt>div>div:hover {
		background-color: #eaf3fe;
		border: 2px dashed rgb(0 102 153 / 80%);
	}

	.type_MTxt>div>div.C_style {
		background-color: rgb(0 102 153 / 10%);
		border: 2px dashed rgb(0 102 153 / 10%);
		color: #000;
	}

	.type_MTxt>div>div>.checkMain {
		position: absolute;
		left: 10px;
		top: 12px;
	}

	.type_MTxt>div>div>p {
		font-size: 14px;
		line-height: 22px;

	}

	.type_MTxt>div>div .chNumer {
		position: absolute;
		top: -2px;
		right: -1px;
		border-radius: 3px;
		font-size: 10px;
		background-color: rgb(0 102 153 / 85%);
		color: #fff;
		padding: 0 6px;
	}

	.type_MTxt>div>div .MaxBtn {
		position: absolute;
		right: 0;
		top: -1px;
		color: #fff;
		border-radius: 50px;
		font-size: 15.5px;
		padding: 5px 6px;
		display: none;
		opacity: 0.7;
	}

	.type_MTxt>div>div:hover .MaxBtn {
		display: block;
	}

	.type_MTxt>div>div .MaxBtn:hover {
		opacity: 1;
		cursor: pointer;
	}

	.type_Gbtn {
		color: #fff;
		border-color: #006699;
		background: #006699;
		width: 100%;
		height: 34px;
		line-height: 34px;
		text-align: center;
		padding: 10px 0;
		font-size: 17px;
		border-radius: 8px;
		font-weight: 500;
	}

	.type_Gbtn:hover {
		box-shadow: 0 4px 14px rgb(0 102 153 / 30%);
		cursor: pointer;
	}

	.type_CHar {
		border-left: 4px solid rgba(0 102 153 / 20%);
		border-radius: 5px;
		padding: 10px 25px 10px 20px;
		background-color: #fff;
		margin: 15px 0 0 0;
		font-size: 14px;
		line-height: 22px;
		position: relative;
	}

	.type_CHar .chNumer {
		position: absolute;
		top: 1px;
		right: 5px;
		border-radius: 3px;
		font-size: 10px;
		background-color: rgb(0 102 153 / 85%);
		color: #fff;
		padding: 0 6px;
	}

	.type_CHar .chReple {
		position: absolute;
		top: 1px;
		right: 40px;
		border-radius: 3px;
		font-size: 10px;
		background-color: rgb(223 109 11);
		opacity: 0.85;
		color: #fff;
		padding: 0 6px;
		display: none;
	}

	.type_CHar:hover .chReple {
		display: block;
	}

	.type_CHar .chReple:hover {
		opacity: 1;
		cursor: pointer;
	}



	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 100px;
		height: 100px;
	}

	.avatar-uploader_small {
		height: 100px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.avatar-uploader_small .el-upload {
		width: 80px;
		height: 80px;
	}

	.avatar-uploader_small .avatar-uploader-icon {
		line-height: 80px;
		margin-left: -30px;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}
</style>
