<template>
	<div>
		<el-dialog v-dialogDrag title="预览" :visible.sync="previewVisible" width="60%" @close="onClose" 
			destroy-on-close :modal-append-to-body="false" v-if="previewVisible">
			<div class='formatTextDiv'>
			<p class="contentTable" v-for="(item,index) in formatText" :key="index" >
				{{item}}
			</p>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import Api from "~/service/Api";
import Utils from "~/utils"

export default {
	props: {
    col: {
      type: Number,
      default: 0
    },
    value: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
			previewVisible: false,
			formatText: []
    };
	},
	watch:{
		'value'(newVal) {
			if(newVal) {
				this.formatText = Utils.convertGidHtmlRowAndCol(this.col, this.value)
			}
		}
	},
  mounted() {
  },
  methods: {
    onClose() {
      this.previewVisible = false;
    },
  }
};
</script>
<style scoped lang="less">
.formatTextDiv{
	width: 100%;
	height: 100%;
	display: inline-block;
	text-align: left;
	margin-top: 2em;
	background-color: #EEE;
	line-height: 1.5em;
  padding: 2em;
  font-family: 'Courier New', Courier, monospace;
  overflow:auto;
  font-size: 20px;
}
::v-deep .el-dialog__body {
  text-align: center;
}
</style>