<template>
  <div class="diy-widget-wrap" :id="widget.widgetTheme" :style="widget.style && widget.style.css" :class="widget.borderClass + ' ' + widget.blockList" @click.stop="handleCheck(widget)">
    <!-- <template v-if="widget.status !== 'small'">
      <div v-if="widget.border && widget.border.name != ''">
        <div class="border-header" v-if="widget.border">
          <x-icon class="border-header-icon" v-if="widget.border.icon" :icon="widget.border.icon" :color="widget.border.fontColor" :size="14"></x-icon>
          <view class="border-header-title" :style="'color:' + widget.border.fontColor + '!important;'" v-if="widget.border.title">{{ widget.border.title }}</view>
          <view class="border-header-desc" v-if="widget.border.intro">{{ widget.border.intro }}</view>
          <view class="border-header-tools"></view>
        </div>
        <div class="border-body">
          <component :is="widget.name" :widget="widget" :title="widget.title" ref="moduleId" />
        </div>
      </div>
      <component v-else :is="widget.name" :widget="widget" :title="widget.title" ref="moduleId" />
    </template>
    <div v-else class="diy-widget-small">{{ widget.title }}</div>
    <div class="diy-dottedbox" />
    <div class="redact-buttom" @click="editWidget(widget)">设置数据源</div>
    <div class="diy-masker" v-if="showChecked" />
    <div class="diy-widget-actions">
      <span class="diy-widget-actions-span" @click="testClick()">{{ widget.title }}({{ widget.name }})</span>
      <span class="diy-widget-actions-span" @click="switchWidget(widget)">切换</span>
      <span class="diy-widget-actions-span" @click="editWidget(widget)">编辑</span>
      <span class="diy-widget-actions-span" @click="removeWidget(widget, removeIndex)">删除</span>
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      showChecked: false,
      checkedWidgetIndex: -1
    }
  },
  props: {
    widget: {},
    removeIndex: {},
    testType: {}
  },
  mounted() {
    this.$nextTick(() => {
      this.$bus.$off('layoutItemCheck').$on('layoutItemCheck', index => {
        if (index === this.removeIndex) {
          this.showChecked = true
        } else {
          this.showChecked = false
        }
      })
    })
  },
  methods: {
    handleCheck(widget) {
      if (this.$refs.moduleId && this.$refs.moduleId.$el) {
        if (widget.style) {
          widget.style.styleId = this.$refs.moduleId.$el.id
        } else {
          widget.style = {
            styleId: this.$refs.moduleId.$el.id
          }
        }
      }
      let value = {
        widget: widget,
        index: this.removeIndex
      }
      this.$emit('handleCheck', value)
    },
    switchWidget(widget) {
      if (widget.status !== 'small') {
        this.$set(widget, 'status', 'small')
      } else {
        this.$set(widget, 'status', 'normal')
      }
    },
    removeWidget(widget, removeIndex) {
      let removeData = {
        widget: widget,
        removeIndex: removeIndex
      }
      this.$emit('removeWidget', removeData)
    },
    editWidget(widget) {
      this.$emit('editWidget', widget)
    }
  }
}
</script>

<style lang="scss" scoped>
// #ifndef APP-PLUS
// app-plus-css
@import './layout-item.scss';
// app-plus-css
// #endif
</style>
