<template>
  <div id="left-copy-1tomany">
    <el-tabs v-model="activeTabName">
      <el-tab-pane v-if="sup8.role.permissionLevel>1" label="新增组件" name="first">
        <el-collapse v-model="activeCompType" accordion>
          <el-collapse-item
            class="moduleViewList"
            v-for="(val, key) in compList"
            :title="key"
            :name="key"
            :key="key"
          >
            <div
              v-for="comp in val"
              class="moduleAloneArea"
              :class="comp.iconUrl||'moduleAloneArea moduleArea_cubeNavigation'"
              draggable="true"
              @click="onAddComp(comp)"
              :key="comp.id"
              :title="comp.name"
            >
              <div class="moduleAloneIcon"></div>
              <div class="moduleAloneText">{{comp.name}}</div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>

      <el-tab-pane label="已使用" name="second">
        <el-table :show-header="false" :data="selectedPage.components" style="width: 100%">
          <el-table-column prop="name" label="标题" width>
            <template slot-scope="scope">
              <el-input class="page-title" v-model="scope.row.title" title="单击修改页面标题"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope" class="option">
              <div class="option-bar">
                <i
                  class="option el-icon-edit"
                  :class="scope.row.isSelected===true?'':''"
                  title="设计"
                  @click="setEditComp(scope.row.id)"
                ></i>
                <i
                  v-if="sup8.role.permissionLevel>1"
                  class="option el-icon-delete"
                  title="删除"
                  @click="removeComp(scope.row)"
                ></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import "../assets/css/colModuleManagePanel.css";
import _ from "lodash";
import eventBus from "../assets/js/eventBus.js";

export default {
  name: "PartCompList",
  props: ["cfg", "selectedPage", "selectedComp"],
  data() {
    return {
      activeCompType: [], // 表示组件列表展开哪个类型
      compList: [],
      activeTabName: "first"
    };
  },
  methods: {
    onAddComp: function(comp) {
      this.$emit("onAddComp", comp);
    },
    setEditComp(compId) {
      console.log("PartCompList::methods:setEditComp:compId", compId);
      this.selectedPage.components.forEach(element => {
        var isCurrent = element.id === compId;
        element.isSelected = isCurrent;
      });

      var c = _.find(this.selectedPage.components, {
        id: compId
      });

      this.$emit("changeData", {
        selectedComp: c,
        partRightActiveTab: "tab_compprops"
      });
    },
    removeComp(comp) {
      let compId = comp.id;
      console.log("PartCompList::methods:removeComp:compId", compId);

      let that = this;

      this.$confirm("删除后数据将无法恢复，是否继续？", "提示", {
        confirmButtonText: "继续",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(c => {
          that.selectedPage.components = that.selectedPage.components.filter(
            t => t.id != compId
          );

          // 如果删除的是背景图片，要及时的清除相关样式
          if (comp.componentViewName === "CompBgImg") {
            $(".part_phone_screen").css({
              "background-image": "unset",
              "background-size": "auto",
              "background-color": "white"
            });
          }

          if (
            this.selectedComp.id === compId &&
            that.selectedPage.components.length > 0
          ) {
            this.$emit("changeData", {
              selectedComp: that.selectedPage.components[0]
            });
          }
          this.$forceUpdate();
        })
        .catch(c => {});
    }
  },
  created() {
    var that = this;

    this.activeTabName = this.sup8.role.permissionLevel > 1 ? "first" : "second";
	eventBus.subscribe("getBaseComponentListDone", data => {
      that.compList = _.groupBy(that.sup8._baseComponentList, "typeTitle");
    });
    // let cnt = 0;
    // let hander = setInterval(function() {
    //   console.log("that.sup8._baseComponentList", that.sup8._baseComponentList);
    //   cnt++;
    //   if (that.sup8._baseComponentList || cnt >= 50) {
    //     clearInterval(hander);
    //     that.compList = _.groupBy(that.sup8._baseComponentList, "typeTitle");
    //   }
    // }, 100);
  },
  mounted: function() {}
};
</script>

<style lang="css" scoped>
.comp-icon {
  opacity: 0.5;
}

.comp-icon:hover {
  opacity: 1;
}

.moduleAloneText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}
</style>
