<template>
  <div class="app_bgc">
    <template v-if="!isEdit">
      <div class="d-flex" style="width: 100%; flex: 1;">
        <div style="padding: 6px; width: 60%; margin-top: 6px;">
          <component
            v-for="item in left"
            :key="item.id"
            class="mb-3"
            :is="item.name"
            :card-title="item.label"
            :id="item.name + item.id"
            :title="item.meta && [1,3].includes(item.meta.homeType) ? item.label : null"
            :params="item.meta"
          ></component>
        </div>
        <div style="padding: 6px; width: 40%; margin: 6px 6px 0 0;">
          <component
            v-for="item in right"
            :key="item.id"
            class="mb-3"
            :is="item.name"
            :id="item.name + item.id"
            :card-title="item.label"
            :title="item.meta && [1,3].includes(item.meta.homeType) ? item.label : null"
            :params="item.meta"
          ></component>
        </div>
      </div>
    </template>
    <template v-else>
      <draggable
        v-model="rolesItem"
        chosenClass="chosen"
        forceFallback="true"
        ref="panel"
        class="panel"
        filter=".forbid"
        animation="300"
      >
        <transition-group>
          <div
            v-for="(item, index) in rolesItem"
            :key="item.id"
            :style="`width: ${index % 2 ? '40%' : '60%'}; padding: 6px`">
            <m-card
              :title="item.label"
              class="cursor_move"
            >
              <template #title>
                <v-btn :disabled="defaultList.findIndex(_e => _e.name === item.name) > -1" class="forbid" icon color="error" @click="handleDelete(item.id)">
                  <v-icon>mdi-trash-can</v-icon>
                </v-btn>
              </template>
              <div class="null grey lighten-3"></div>
            </m-card>
          </div>
        </transition-group>
      </draggable>
    </template>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import { loadDynamicComponents } from '@/utils'
import draggable from 'vuedraggable'

const vueComponent = require.context('./dynamic', true, /\.vue$/)
const autoComponent = loadDynamicComponents(vueComponent)

export default {
  name: 'feature-module',
  components: { MCard, draggable, ...autoComponent },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    roles: {
      type: Array,
      default: () => []
    },
    defaultList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      rolesItem: []
    }
  },
  watch: {
    roles: {
      handler (val) {
        this.handleChangeRoles(val)
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    left () {
      return this.rolesItem.filter((e, index) => index % 2 === 0)
    },
    right () {
      return this.rolesItem.filter((e, index) => index % 2 === 1)
    }
  },
  methods: {
    handleDelete (id) {
      this.$confirm('提示', '确定删除该模块吗？').then(() => {
        this.$emit('delete', id)
      })
    },
    handleChangeRoles (val) {
      const data = val
        .filter(e => !!+e.active)
        .sort((a, b) => a.sort - b.sort)
      const box = []
      let i = 0
      const rolesItem = []
      data.forEach(ele => {
        if (ele.efficacy) {
          // 已失效
          ele.name = 'notFound'
          ele.meta = null
        }
        if (!ele.meta) {
          rolesItem.push(ele)
          return
        }
        const meta = ele.meta
        // 处理快捷方式
        if (meta.homeType && meta.homeType === 2) {
          // console.log(meta)
          return
        }
        // 处理自定义组件
        if (meta.homeType && meta.homeType === 1) {
          ele.name = `addToHome-${i}`
          box.push(import(`@/views${meta.componentsPath}.vue`))
          i++
        }
        rolesItem.push(ele)
      })
      // console.log('数据：', rolesItem)
      if (!box.length) {
        this.rolesItem = rolesItem
        this.$emit('finish', rolesItem)
        return
      }
      // box 存在需要导入的组件
      Promise.all(box).then(res => {
        res.forEach((e, i) => {
          this.$options.components[`addToHome-${i}`] = e.default
        })
        this.rolesItem = rolesItem
      }).catch(error => {
        this.$snackbar.error(error)
      })
      this.$emit('finish', rolesItem)
    },
    getValue () {
      const rolesItem = this.rolesItem.map((item, index) => {
        item.sort = index
        return item
      })
      return this.roles.map(e => {
        const item = rolesItem.find(k => k.id === e.id)
        if (item) {
          return item
        }
        return e
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel {
  width: 100%;
  & > span {
  display: flex;
  flex-wrap: wrap;
}
}

.forbid {
  cursor: pointer;
}
// .body {
//   width: 1200px;
// }
.null {
  height: 200px;
}
.cursor_move {
  cursor: move;
}
.app_bgc {
  background-color: white;
  padding-left: 5px;
}
</style>
