<template>
  <el-form label-position="left"
           label-width="90px"
           style="padding:0 5px;">

    <el-collapse accordion>
      <el-form-item label="默认屏幕">
        <avue-select :dic="contain.config.group"
                     v-model="contain.config.groupId"
                     :empty-values="[null,undefined]"
                     :props="{label:'name',value:'id'}"
                     placeholder="默认主屏幕"></avue-select>
      </el-form-item>
      <el-button type="primary"
                 style="margin:10px 10px;"
                 @click="handleAdd()">新增大屏</el-button>
      <ul class="menu__ul">
        <li @click="contain.group=item.id"
            :class="['menu__item',{'is-active':contain.group==item.id}]"
            v-for="(item,index) in contain.config.group"
            :key="index">
          <el-tooltip class="item"
                      effect="dark"
                      :content="item.id"
                      placement="left">
            <span class="menu__icon">
              <svg-icon icon-class="screen" />
            </span>
          </el-tooltip>
          <span class="menu__label">
            <input type="text"
                   @keyup.enter="item.isname=false"
                   v-if="item.isname"
                   v-model="item.name">
            <span v-else
                  class="menu__name">{{item.name}}</span>
          </span>
          <span class="menu__menu">
            <el-icon @click.stop="handleAdd(index)">
              <el-icon-plus></el-icon-plus>
            </el-icon>
            <el-icon v-if="index!=0"
                     @click.stop="handleDel(item,index)">
              <el-icon-delete></el-icon-delete>
            </el-icon>
          </span>
        </li>
      </ul>
      <el-collapse-item title="轮播（预览模式生效）">
        <el-form-item label="开启">
          <avue-switch v-model="contain.config.groupCarousel"></avue-switch>
        </el-form-item>
        <template v-if="contain.config.groupCarousel">
          <el-form-item label="轮播时间">
            <el-input v-model="contain.config.groupTime"
                      placeholder="3000">
              <template #append>
                <span>毫秒</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="轮播屏幕">
            <el-dropdown>
              <el-button type="primary"
                         style="margin:10px 10px;"
                         icon="el-icon-plus">
                选择轮播屏幕
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <template v-for="(item,index) in groupList">
                    <el-dropdown-item v-if="index!=0"
                                      @click="addList(item)"
                                      :key="index">{{ item.name }}</el-dropdown-item>
                  </template>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <draggable ghost-class="menu__ghost"
                       class="menu__ul"
                       style="width:100%;"
                       :group="{ name: 'group' }"
                       v-model="contain.config.groupList"
                       :list="contain.config.groupList"
                       item-key="index">
              <template #item="{ element,index }">
                <li class="menu__item"
                    :key="index">
                  <span class="menu__icon">
                    <svg-icon icon-class="screen" />
                  </span>
                  <span class="menu__label">
                    <span class="menu__name">{{element.name}}</span>
                  </span>
                  <span class="menu__menu">
                    <el-icon @click.stop="delList(index)">
                      <el-icon-delete></el-icon-delete>
                    </el-icon>
                  </span>
                </li>
              </template>
            </draggable>
          </el-form-item>
        </template>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>

import vuedraggable from 'vuedraggable';
import { uuid } from '@/utils/utils'
export default {
  components: {
    draggable: vuedraggable
  },
  inject: ["contain"],
  data () {
    return {
      obj: {},
      item: {},
      index: ''
    }
  },
  computed: {
    groupList () {
      return this.contain.config.group.filter(item => {
        return !this.contain.config.groupList.map(ele => ele.id).includes(item.id)
      })
    }
  },
  methods: {
    addList (item) {
      this.contain.config.groupList.push(item)
    },
    delList (index) {
      this.contain.config.groupList.splice(index)
    },
    handleCopy (item) {
      this.$Clipboard({
        text: item.id
      }).then(() => {
        this.$message.success('复制成功')
      }).catch(() => {
        this.$message.error('复制失败')
      });
    },
    handleAdd (index) {
      if (!this.contain.config.group) {
        this.contain.config.group = []
      }
      let id = uuid();
      let item = this.contain.config.group[index] || {};
      let obj = {
        name: '新增屏幕',
        id: id,
        isname: true
      }
      const callback = () => {
        if (!this.validatenull(index)) {
          this.contain.config.group.splice(index + 1, 0, obj)
        } else {
          this.contain.config.group.push(obj)
        }
      }
      if (!index) {
        callback();
        return
      }
      this.$confirm('是否复制当前内容?', '提示', {
        confirmButtonText: '复制',
        cancelButtonText: '不复制',
        type: 'warning'
      }).then(() => {
        let list = this.deepClone(this.contain.nav).filter(ele => ele.group == item.id)
        const findEle = (result) => {
          result.forEach(ele => {
            ele.index = uuid()
            ele.group = id;
            if (ele.children) findEle(ele.children)
          })
        }
        findEle(list);
        this.contain.nav = this.contain.nav.concat(list);
        callback()
      }).catch(() => {
        callback()
      });

    },
    handleDel (item, index) {
      this.$confirm(`是否删除【${item.name}】屏幕?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for (let i = 0; i < this.contain.nav.length; i++) {
          const ele = this.contain.nav[i], index = i;
          if (ele.group == this.contain.group) {
            this.contain.nav.splice(index, 1);
            i--
          }
        }
        this.contain.config.group.splice(index, 1)
        if (this.contain.group == item.id) {
          this.contain.group = index != 0 ? this.contain.config.group[index - 1].id : ''
        }
      })
    },
  }
}
</script>

<style>
</style>