<template>
  <div>
    <el-card style="height: 500px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
      <div>预览</div>
      <div id="viewPortParse" ref="viewPort">
        123
      </div>
    </el-card>
    <el-card style="height: 500px">
      <el-row>
        <span>设计</span>
        <el-button type="success" size="mini" plain @click="editData">保存</el-button>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="4">
          <el-card>
            <div slot="header">通用组件</div>
            <div style="display: flex">
              <el-button ref="button111" size="mini" plain type="success" style="flex: 1;" @click="add">按钮</el-button>
              <el-button size="mini" plain type="success" style="flex: 1;">输入框</el-button>
              <el-button size="mini" plain type="success" style="flex: 1;">文本</el-button>
              <el-button size="mini" plain type="success" style="flex: 1;">图表</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-card>
            <div>设计面板</div>
            <div id="viewPort" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div style="position: absolute">属性</div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
let count = 0
import $ from 'jquery'

export default {
  data() {
    return {
      activeName: 'second',
      pageId: 'd21152fe-43df-40d1-87bd-4176ea052500',
      pageCode: `
      {"id":"","name":"div","text":"","tag":"div","props":{"class":"","style":{"position":"absolute","left":"100px","top":"100px","width":"100%","height":"","background":"transparent"}},"children":[{"id":"33333333333333333333","tag":"button","name":"button","text":"button","props":{"class":"el-button el-button--success el-button--mini is-plain","onclick":"\\n        count++\\n        console.log(count)\\n        $('#count1111111').text(count)\\n        $('#input1111111').val(count)\\n      ","style":{"position":"absolute","left":0,"top":0,"width":"100px","height":"40px","border-radius":"8px"}},"children":[]},{"id":"count1111111","tag":"span","name":"span","text":"count1111111","props":{"class":"","style":{"position":"absolute","left":"100px","top":"100px","width":"100%","height":""}},"children":[]},{"id":"input1111111","tag":"input","name":"input","text":"请输入内容","placeholder":"请输入内容","props":{"class":"","style":{"position":"absolute","left":"150px","top":"150px","width":"100px","height":"20px"},"type":"number"},"children":[]}]}`,
      componentList: {
        common: {
          button: {
            id: '',
            tag: 'button',
            name: 'button',
            text: 'button',
            props: {
              class: 'el-button el-button--success el-button--mini is-plain',
              onclick: function() {
              },
              style: {
                position: 'absolute',
                left: 0,
                top: 0,
                width: '100px',
                height: '40px',
                'border-radius': '8px'
              }
            },
            children: []
          },
          container: {
            id: '',
            tag: 'div',
            name: 'div',
            text: '',
            props: {
              class: '',
              style: {
                position: 'absolute',
                left: '100px',
                top: '100px',
                width: '100%',
                height: '',
                background: 'transparent'
              }
            },
            children: []
          },
          text: {
            id: '',
            tag: 'span',
            name: 'span',
            text: '这是一行文本',
            props: {
              class: '',
              style: {
                position: 'absolute',
                left: '100px',
                top: '100px',
                width: '100%',
                height: ''
              }
            },
            children: []
          },
          input: {
            id: '',
            tag: 'input',
            name: 'input',
            text: '请输入内容',
            placeholder: '请输入内容',
            props: {
              class: '',
              style: {
                position: 'absolute',
                left: '150px',
                top: '150px',
                width: '100px',
                height: '20px'
              },
              type: 'number'
            },
            children: []
          }
        },
        charts: {
          line: {
            id: '',
            props: {
              class: '',
              style: {
                position: 'absolute',
                left: '250px',
                top: '250px',
                width: '250px',
                height: '250px'
              }
            },
            option: {
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [150, 230, 224, 218, 135, 147, 260],
                  type: 'line'
                }
              ]
            }
          },
          bar: {
            id: '',
            props: {
              class: '',
              style: {
                position: 'absolute',
                left: '350px',
                top: '350px',
                width: '350px',
                height: '350px'
              }
            },
            option: {
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar',
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                  }
                }
              ]
            }
          },
          pie: {
            id: '',
            props: {
              class: '',
              style: {
                position: 'absolute',
                left: '450px',
                top: '450px',
                width: '450px',
                height: '450px'
              }
            },
            option: {
              title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            }
          }
        }
      }
    }
  },
  created() {
    window.$ = $
    // this.searchData()
  },
  mounted() {
    window.count = 0
    // this.mount(JSON.parse(this.pageCode), document.getElementById('viewPort'))
  },
  methods: {
    add() {
      count++
      console.log(count)
    },
    searchData() {
      var param = []
      param[0] = ['ID', this.pageId]
      var Data = this.CreateData('11', '_editPageSearch', param) // 此处有修改 因为用原来的存储过程查不出来数据 故又重新创建了个
      this.ExecDatabase(Data).then(response => {
        this.$refs.viewPort.innerHTML = response.data[0].pageCode
      })
    },
    editData() {
      var param = []
      param[0] = ['ID', this.pageId]
      param[1] = ['pageCode', this.pageCode]
      var Data = this.CreateData('11', '_editPageDesign', param) // 此处有修改 因为用原来的存储过程查不出来数据 故又重新创建了个
      this.ExecDatabase(Data).then(response => {
        // this.searchData()
        this.test()
      })
    },
    h(vDom) {
      // 创建虚拟DOM
      // vnode实际上是一个JavaScript对象,把传过来的参数放到一个对象中进行返回就行
      const id = vDom.id
      const name = vDom.name
      const text = vDom.text
      const tag = vDom.tag
      const props = vDom.props
      const children = vDom.children
      return {
        id,
        name,
        text,
        tag,
        props,
        children
      }
    },
    mount(vnode, container) {
      // 将VNode生成真实节点元素
      // 1.创建真实标签元素,将标签元素保留到VNode上
      const el = vnode.el = document.createElement(vnode.tag)
      // 2.处理props
      el.id = vnode.id
      el.innerHTML = vnode.text
      if (vnode.props) {
        // 进行循环拿到key:value
        for (const key in vnode.props) {
          const value = vnode.props[key]
          // 判断如果是onClick类似事件,进行截取on之后的单词进行转换为小写
          if (key.startsWith('on')) {
            el.addEventListener(key.slice(2).toLowerCase(), new Function(value))
          } if (key === 'style') {
            for (const valueKey in value) {
              el.style[valueKey] = value[valueKey]
            }
          } else {
            // 设置属性
            el.setAttribute(key, value)
          }
        }
      }
      // 3.处理children
      if (vnode.children) {
        if (typeof vnode.children === 'string') {
          // 判断children是字符串,说明是元素的内容,直接赋值即可
          el.textContent = vnode.children
        } else {
          // 如果是数组表明是有子元素节点,进行遍历数组元素,继续调用mount函数
          vnode.children.forEach(item => {
            this.mount(item, el)
          })
        }
      }
      // 4.将元素挂载到contaniner
      container.appendChild(el)
    },
    test() {
      const button = this.componentList.common.button
      button.id = '33333333333333333333'
      // button.props.onclick = function() {
      //   count++
      //   console.log(count)
      //   $('#count1111111').text(count)
      //   $('#input1111111').val(count)
      // }

      button.props.onclick = `
        count++
        console.log(count)
        $('#count1111111').text(count)
        $('#input1111111').val(count)
      `
      const container = this.componentList.common.container
      const text = this.componentList.common.text
      text.id = 'count1111111'
      text.text = 'count1111111'

      const input = this.componentList.common.input
      input.id = 'input1111111'

      container.children.push(button)
      container.children.push(text)
      container.children.push(input)
      const vnode = this.h(container)
      this.pageCode = JSON.stringify(vnode)
      this.editData()
      // const vnode = this.g(this.$refs.button111._vnode)
      this.mount(vnode, document.getElementById('viewPort'))
    }
  }
}
</script>

<style>
  .hone{
    border: 1px solid #00893d;
  }
</style>
