<template>
  <div id="component-library">
    <div class="component-library">
      <!-- 内置组件 -->

      <!-- 折叠面板开始 -->

      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="常用组件" name="0">
          <div class="item-box">
            <component-item
              v-for="(item, index) in componentsData"
              :key="index"
              :icon="item.icon"
              :name="item.label"
              @click.native="handleComponentClick(item)"
            />
          </div>
        </el-collapse-item>

        <el-collapse-item title="自定义组件" name="1" />

        <el-collapse-item title="外部组件" name="2" />
      </el-collapse>

      <!-- 折叠面板结束 -->
    </div>
  </div>
</template>
<script>
import componentsData from '@/config/components'
import componentItem from '@/components/ComponentItem/index'
import uuid from 'node-uuid'
export default {
  name: 'ComponentLibrary',
  inject: ['app'],
  components: {
    componentItem
  },
  data() {
    return {
      componentsData, // 图表的数据结构
      activeNames: ['0'], // 当前选中的折叠面板
      id: '', // 瑞神传过来的id先拿id去请求接口看有没有数据，有数据就是编辑，没有数据就是编辑
      components: [], // 接口获取的有数据的时候存放数据的数组
      token: '' // 从localstorage获取的token，请求接口要用的headers要传的参数
    }
  },
  mounted() {
    // 获取url上边的id，用来请求接口，看是编辑还是新增，编辑的话就展示接口获取过来的数据，没有接口数据的话就新增
    // 存放id
    this.id = this.$common.getQueryString('id')
    // 获取token
    // this.token = localStorage.getItem("portal_token");
    this.token = this.$common.getCookie('portal_token')
    console.log('token是什么123：', this.token)
    // 如果url上边有id的话就走接口看接口有没有返回数据
    if (this.id) {
      this.$request({
        method: 'get',
        url: `portal/${this.id}`,
        headers: {
          token: this.token
        }
      })
        .then(res => {
          console.log('如果有数据的res:', res)
          if (res.errcode == 0 && res.data.portalSetting.components.length > 0) {
            this.components = res.data.portalSetting.components
            console.log('最后组装的数据', this.components)
            for (var i = 0; i < this.components.length; i++) {
              this.app.setComponentList(
                JSON.parse(JSON.stringify(this.components[i]))
              )
            }
          }
        })
        .catch(error => {
          console.log('错误：', error)
          this.$message({
            message: '服务错误，请联系服务端',
            type: 'error'
          })
        })
    }
  },
  methods: {
    // 点击事件，视图图表出现
    handleComponentClick(item) {
      item.key = uuid.v1()
      console.log('啥玩意：', item)
      this.app.setComponentList(JSON.parse(JSON.stringify(item)))
      console.log('loremllllllllllllllllll')
    },
    // 折叠面板事件
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>
<style lang="scss">
@import "../../styles/theme.scss";
#component-library {
  width: 220px; // height: calc(100hv - 0px);
  background: $component-library-theme;
  .component-box {
    width: 100%;
    .component-box-header {
      height: 42px;
      background: #f0ffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      .title {
        color: #333;
      }
    }
    .component-box-content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin: 20px 0;
    }
  }
}

.component-library {
  // border: 1px solid #f00;
  height: auto;
}

.component-library .el-collapse-item__content {
  padding-bottom: 0px;
}

.component-library .el-collapse-item__header {
  box-sizing: border-box;
  padding: 20px;
  height: 34px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}

.item-box {
  width: 100%;
  height: auto; // border: 1px solid yellowgreen;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 10px 10px;
  flex-wrap: wrap;
}
</style>
