<!--
 * @Description : 产品目录清单 -- Pc详情
 * @Author      : jinxin
 * @Date        : 2022-10-17 09:28:42
-->

<template>
  <div>
    <el-row class="title_box1 m-b-10">
      <el-col :span="24">
        <div class="title">{{ data.title }}</div>
      </el-col>
    </el-row>
    <div class="pc_content">
      <TinymceEditor :id="data.id" ref="editor" :height="data.height" :cur-value="data.details" @input="inputContent"
        :key="data.key"></TinymceEditor>
    </div>
  </div>
</template>
<script>
import { defineComponent, getCurrentInstance, onMounted, reactive, watch } from "vue";
import TinymceEditor from '@/components/tinymce.vue'
export default defineComponent({
  name: 'PcDetails',
  props: {
    getspuinfo: Object
  },
  components: {
    TinymceEditor
  },
  emits: ['transmitPc', 'update:getspuinfo'],
  setup (props, context) {
    // 生命周期
    onMounted(() => {

    })
    // 获取实例
    const { proxy } = getCurrentInstance()
    // 变量
    let data = reactive({
      title: 'PC描述',
      id: '',
      height: 600,
      details: '',
      key: 0,
      type: ''
    })
    // 编辑回传
    const inputContent = (value) => {
      data.details = value
      let query = {
        value
      }
      context.emit('transmitPc', query)
    }
    // 监听
    watch(() => props.getspuinfo, (v1, v2) => {
      // console.log('PC 监听',v1)
      data.details = v1.pc_desc
    })
    return {
      data,
      props,
      inputContent
    }
  }
})
</script>
<style scope>
.title_box1 .title {
  margin: 0 0 10px 0;
}
</style>