<template>
  <el-input
    class="editCode"
    type="textarea"
    rows="25"
    placeholder="请输入内容"
    @input="onChange"
    v-model="value">
  </el-input>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class EditInput extends VueViews {
  @Watch('propValue')
  propValueChange(v:any){
    this.setValue(v);
  }

  created(){
    this.initValue();
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
    if(this.propValue){
      this.setValue(this.propValue)
    }
  }
  initValue(){
    this.value=`<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
<body>
	
</body>
</html> `
  }
  setValue(data:any){
    if(data){
      this.value = (this as any).$lodash.cloneDeep(data);
      
    }else{
      this.initValue();
    }
  }

  getValue(){
    return (this as any).$lodash.cloneDeep(this.value);
  }

  // 清空数据
  clearValue(){
    this.initValue();
  }

  onChange(){
    this.$emit('onChange',this.value);
  }
}
</script>
<style lang="scss">
.editCode{
  textarea.el-textarea__inner{
    color: #FFF;
    background-color: #042a33 !important;
    font-family: 'Courier New', Courier, monospace;
  }
}
</style>