<template>
  <div style="display:inline-block;margin-left:20px;">
    <el-button :disabled="disabled" @click="open" type="primary">比较历史文本</el-button>
    <el-dialog :fullscreen="isShowFull" :modal-append-to-body="false" :show-close="false" :visible.sync="previewVisible" @close="handleClosePreview" center class="preview" destroy-on-close ref="dialog" title="文本比较结果" v-dialogDrag v-if="previewVisible" width="90%">
      <div class="preview-title-wrap" slot="title">
				<div class="preview-title">文本比较结果</div>
				<div class="btn-wrap">
					<i @click="fullScreen" class="el-icon-full-screen icon-sty" style="margin-right: 10px;" v-if="!isShowFull"></i>
					<i @click="noFullScreen" class="el-icon-copy-document icon-sty" style="margin-right: 10px;" v-else></i>
					<i @click="previewVisible = false" class="el-icon-close icon-sty"></i>
				</div>
			</div>
      
      <div style="text-align:center;">
        <div class="compareA4" :style="{
              'width': isShowScale ? 794 * curScale + 'px' : '',
              'font-size': isShowScale ? curFontSize : '',
              'paddingLeft': 15*curScale+'px',
              'paddingRight': 15*curScale+'px',
              'backgroundColor':'#F5F5F5'
            }">
          <p :style="{
            'font-size':'18px',
            'color':editCount?'red':'green',
          }">{{diffDescription}}</p>
          <br/>
          <div  v-loading="!result" v-html="result" style="padding: 80px 10% 100px 8%;">
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Api from "~/service/Api";

export default {
  props:{
    leftText:{
      default:'',
      type:String
    },
    rightText:{
      default:'',
      type:String
    },
    isShowScale:{
      default:true,
      type:Boolean
    },
    disabled:{
      default:false,
      type:Boolean
    }
  },
  
  data(){
    return {
      diffDescription:'',
      previewVisible:false,
      isShowFull : false,
      result:'',
      curScale: 1,
      curFontSize: '',
      editCount:0,
    }
  },
  methods:{
    fullScreen() {
      this.isShowFull = true;
    },
    noFullScreen() {
      this.isShowFull = false;
    },
    handleClosePreview() {
      this.isShowFull = false;
    },
    async open(){
      this.previewVisible = true
      this.contrast()
      

    },
    async contrast(){
      this.result = ""
      this.diffDescription = ""
      let res = await Api.post(`/business/gittxt/compareText`, {
          leftText:this.leftText,
          rightText:this.rightText
      });
      if (res.respCode === SUCCESS) {
          this.result = res.data.resultHtml.replace(/background:#e6ffe6;/g,"background:green;color:white;").replace(/background:#ffe6e6;/g,"background:red;color:white;")
          this.editCount = res.data.editCount
          if(res.data.editCount){
            this.diffDescription = `文本内容发生修改`
          }
          else{
            this.diffDescription = `文本内容无修改`
          }
      }
    },
    initViewDivWrapWidth () {
			if (this.isShowScale) {
				let contentWidth = document.body.clientWidth - 340
				if (contentWidth > 1588) {
					this.curScale = 2
				} else if (contentWidth < 1000) {
					this.curScale = 1
				} else {
					this.curScale = contentWidth / 794
				}
				this.curFontSize = this.curScale * 18.6 + 'px'
			}
    },
  },
  mounted(){
    this.initViewDivWrapWidth ();
  }

}
</script>
<style lang="less" scoped>
.preview /deep/ .el-dialog--center .el-dialog__body {
  width: 100%;
  height: calc(100% - 54px);
}

.preview /deep/ .el-dialog--center .el-dialog__body > div {
  height: 100%;
}

.compareA4{
  width: 794px;
  font-size: 1.5em;
  font-family: 黑体;
  display: inline-block;
  text-align: left;
  line-height: 1.5em;
  
}

.preview-title-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .preview-title {
    width: 50%;
    text-align: left;
    color: #fff;
  }

  .btn-wrap {
    width: 50%;
    text-align: right;
    color: #fff;

    .icon-sty {
      font-size: 18px;
      cursor: pointer;
    }

    .icon-sty:hover {
      color: #6653f2;
    }
  }

}
</style>