<template>
  <div>
    <div class="top">
      <div class="title">
        页面编辑器
      </div>
      <el-cascader
          size="small"
          v-model="value"
          :options="options"
          @change="handleChange"></el-cascader>
      <el-button type="primary" size="small" style="margin-left: 12px;" @click="save">上传<i class="el-icon-upload"></i>
      </el-button>
    </div>
    <div class="container">
      <div class="component" v-for="(i,k) in components">
        <i class="del el-icon-circle-close" @click="components.splice(k, 1);"></i>
        <EditEl1 v-if="i.type === 1" :data="i.value"/>
        <EditEl2 v-if="i.type === 2" :data="i.value"/>
        <EditEl3 v-if="i.type === 3" :data="i.value"/>
        <EditEl4 v-if="i.type === 4" :data="i.value"/>
        <EditEl5 v-if="i.type === 5" :data="i.value"/>
        <EditEl6 v-if="i.type === 6" :data="i.value"/>
        <EditEl7 v-if="i.type === 7" :data="i.value"/>
        <EditEl8 v-if="i.type === 8" :data="i.value"/>
        <EditEl9 v-if="i.type === 9" :data="i.value"/>
        <EditEl10 v-if="i.type ===10" :data="i.value"/>
        <!--        <EditEl11 v-if="i.type === 11" :data="i.value"/>-->
      </div>
      <div class="addItem">
        <div style="width:100%;height:100%;" @click="add">
          <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 16.7vw"></i>
        </div>
      </div>
    </div>
    <el-dialog
        title="添加组件"
        :visible.sync="addEl"
        width="80%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addEl = false">关 闭</el-button>
  </span>
    </el-dialog>

  </div>
</template>
<script>
import EditEl1 from "@/components/editEl/editEl1.vue";
import EditEl2 from "@/components/editEl/editEl2.vue";
import EditEl3 from "@/components/editEl/editEl3.vue";
import EditEl4 from "@/components/editEl/editEl4.vue";
import EditEl5 from "@/components/editEl/editEl5.vue";
import EditEl6 from "@/components/editEl/editEl6.vue";
import EditEl7 from "@/components/editEl/editEl7.vue";
import EditEl8 from "@/components/editEl/editEl8.vue";
import EditEl9 from "@/components/editEl/editEl9.vue";
import EditEl10 from "@/components/editEl/editEl10.vue";
// import EditEl11 from "@/components/editEl/editEl11.vue";

export default {
  components: {
    EditEl1,
    EditEl2,
    EditEl3,
    EditEl4,
    EditEl5,
    EditEl6,
    EditEl7,
    EditEl8,
    EditEl9,
    EditEl10,
    // EditEl11,
  },
  data() {
    return {
      a: '1',
      addEl: false,
      value: [],
      options: [
        {
          value: 'index',
          label: '首页',
        },
        {
          value: 'guhw',
          label: '关于海威',
          children: [
            {
              value: 'gsgk',
              label: '公司概况',
            },
            {
              value: 'ryzz',
              label: '荣誉资质',
            }
          ]
        },
      ],
      components: [
        {
          type: 1,
          value: {
            title: '123',
            subTitle: '456',
            list: [
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '111',
                value: '222'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '222',
                value: '333'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '333',
                value: '444'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '444',
                value: '555'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '555',
                value: '666'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '666',
                value: '777'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '666',
                value: '777'
              },
            ],
          },
        },
        {
          type: 2,
          value: {
            title: '123',
            subTitle: '456',
            contentTitle: 'contentTitle',
            contentSubTitle: 'DEVELOPMENT PLATFORM',
            contentInfo: 'contentInfo',
            image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          },
        },
        {
          type: 3,
          value: {
            title: '123',
            subTitle: '456',
            list: [
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                itemTitle: '111',
                itemInfo: '222'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                itemTitle: '222',
                itemInfo: '333'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                itemTitle: '333',
                itemInfo: '444'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                itemTitle: '444',
                itemInfo: '555'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                itemTitle: '555',
                itemInfo: '666'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                itemTitle: '666',
                itemInfo: '777'
              },
            ],
          },
        },
        {
          type: 4,
          value: {
            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            title: '123',
            subTitle: '456',
            list: [
              {
                title: '111',
                value: '222'
              },
              {
                title: '111',
                value: '222'
              },
              {
                title: '111',
                value: '222'
              },
            ],
          },
        },
        {
          type: 5,
          value: {
            img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            title: '123',
            subTitle: '456',
          },
        },
        {
          type: 6,
          value: {
            img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            title: '123',
            subTitle: '456',
            info: '789',
          },
        },
        {
          type: 7,
          value: {
            title: '123',
            subTitle: '456',
            list: [
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '111',
                value: '222'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '222',
                value: '333'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '333',
                value: '444'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '444',
                value: '555'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '555',
                value: '666'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '666',
                value: '777'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '666',
                value: '777'
              },
            ],
          },
        },
        {
          type: 8,
          value: {
            title: '123',
            subTitle: '456',
            list: [
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '111',
                leftTitle: '222',
                leftInfo: '333',
                infos: [
                  {title: '111', info: '222'},
                  {title: '111', info: '222'},
                  {title: '111', info: '222'},
                ]
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '111',
                leftTitle: '222',
                leftInfo: '333',
                infos: [
                  {title: '111', info: '222'},
                  {title: '111', info: '222'},
                  {title: '111', info: '222'},
                ]
              },
            ],
          },
        },
        {
          type: 9,
          value: {
            title: '123',
            subTitle: '456',
            list: [
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                value: '222'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                value: '333'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                value: '444'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                value: '555'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                value: '666'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                value: '777'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                value: '777'
              },
            ],
          },
        },
        {
          type: 10,
          value: {
            title: '123',
            subTitle: '456',
            list: [
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '111',
                value: '222'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '222',
                value: '333'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '333',
                value: '444'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '444',
                value: '555'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '555',
                value: '666'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '666',
                value: '777'
              },
              {
                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                title: '666',
                value: '777'
              },
            ],
          },
        },
        // {
        //   type: 11,
        //   value: {
        //     title: '123',
        //     subTitle: '456',
        //     list: [
        //       {
        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        //         title: '111',
        //         value: '222'
        //       },
        //       {
        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        //         title: '222',
        //         value: '333'
        //       },
        //       {
        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        //         title: '333',
        //         value: '444'
        //       },
        //       {
        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        //         title: '444',
        //         value: '555'
        //       },
        //       {
        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        //         title: '555',
        //         value: '666'
        //       },
        //       {
        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        //         title: '666',
        //         value: '777'
        //       },
        //       {
        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        //         title: '666',
        //         value: '777'
        //       },
        //     ],
        //   },
        // },
      ]
    }
  },
  mounted() {

  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    edit(key, e) {
      this[key] = e.target.innerText
    },
    add() {
      this.addEl = true
    },
    save() {
      console.log(this.components)
    }
  }
}
</script>
<style scoped lang="less">
.top {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 50px;
  background: #fff;
  box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.2);
  text-align: left;

  .title {
    line-height: 50px;
    margin-left: 12px;
    display: inline-block;
    margin-right: 12px;
  }
}

.container {
  width: 90%;
  text-align: left;
  margin: 0 auto;
}

.component {
  text-align: center;
  position: relative;


  .del {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }
}

.addItem {
  width: 100%;
  text-align: center;
}
</style>