<style>
  .diy-image-text {
    width: 100%;
    height: 500px;
    overflow: hidden;
    overflow-y: auto;
  }

  .imgVisible {
    visibility: hidden;
  }

  .visibleA {
    visibility: visible;
  }

</style>
<template>
  <div :class="{'active':imageData.isCked}">
    <div class="diy-component-options" v-if="imageData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-modal">
      <div class="diy-component-preview">
        <div class="diy-image-text">
          <div v-if="data.content" v-html="data.content"></div>
          <div v-else flex="main:center" style="line-height: 500px;color: rgb(173, 177, 184);">图文详情</div>
        </div>
      </div>
      <div class="diy-component-edit imgVisible" :class="{'visibleA':imageData.isCked}">
        <UE2 v-model="data.content" :defaultMsg="data.content" :config="config" ref="ue" :IsMultiple="true"></UE2>
      </div>
    </div>
  </div>
</template>
<script>
  import UE2 from '@/components/global/UE2.vue'
  export default {
    props: ["imageData", "index", "dataLeng"],
    components: {
      UE2
    },
    data() {
      return {
        data: {
          content: ''
        },
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350,
        },
      };
    },
    created() {
      var content = this.imageData.data.content;
      this.data.content = content;
    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      getContent() {
        return this.$refs.ue.getUEContent();
      },
    },
    computed: {},
    mounted() {
      this.$refs.ue.loadUe();
    },
    watch: {
      data: {
        deep: true,
        handler(newVal, oldVal) {
          let newContent = newVal.content;
          this.data.content = newContent;
          this.imageData.data.content = newContent;
        },
      }
    }
  };

</script>
