<template>
  <el-form label-width="80px"
           label-position="left">
    <el-form-item label-width="0px">
      <el-button type="primary"
                 icon="el-icon-edit"
                 @click="open()">新增交互事件</el-button>
    </el-form-item>
    <draggable ghost-class="ghost"
               class="transfer__menu menu__ul"
               :group="{ name: 'event' }"
               v-if="contain.activeObj.child.paramList&&contain.activeObj.child.paramList.length!==0"
               v-model="contain.activeObj.child.paramList"
               :list="contain.activeObj.child.paramList"
               :animation="300">
      <template #item="{ element,index }">
        <div class="menu__item"
             @click="open(index)">
          <div class="menu__label"
               style="width:calc(100% - 30px)">
            <el-tooltip effect="dark"
                        content="激活"
                        placement="top">
              <el-checkbox v-model="element.switch"
                           size="small"></el-checkbox>
            </el-tooltip>
            <div class="index"> {{ index+1 }}.</div>
            <input type="text"
                   style="width:80px;margin-right: 8px;flex:inherit"
                   @click.stop="()=>{}"
                   :disabled="!element.switch"
                   v-model="element.name">
            <el-button size="small"
                       type="primary"
                       plain>{{getEventLabel(element) }}</el-button>
            <el-button size="small"
                       type="primary"
                       plain>{{getTypeLabel(element) }}</el-button>
          </div>
          <div class="menu__menu">
            <el-icon @click.stop="handleDel(element,index)">
              <el-icon-delete></el-icon-delete>
            </el-icon>
          </div>
        </div>
      </template>
    </draggable>
    <el-empty v-else
              description="暂无交互事件">
      <template #image>
        <svg-icon icon-class="empty" />
      </template>
    </el-empty>
    <el-drawer v-model="box"
               :close-on-click-modal="false"
               class="avue-dialog"
               title="交互编辑器"
               size="60%">
      <div class="avue-collapse__top">
        <el-button type="primary"
                   icon="el-icon-plus"
                   @click="handleAdd()">
          新增交互事件
        </el-button>
      </div>

      <template v-if="list&&list.length!=0">
        <el-collapse class="avue-collapse"
                     v-model="activeName">
          <el-collapse-item :name="index"
                            v-for="(item,index) in list"
                            :key="index">
            <template #title>
              <div class="avue-collapse__header">
                <div class="avue-flex"
                     @click="stopCollapse">
                  <el-tooltip effect="dark"
                              content="激活"
                              placement="top">
                    <el-checkbox v-model="item.switch"
                                 size="small"></el-checkbox>
                  </el-tooltip>
                  <div class="index">{{ index+1 }}.</div>
                  <avue-input v-model="item.name"
                              placeholder="交互名称"
                              :disabled="!item.switch"></avue-input>
                  <avue-select :dic="dicOption.transferEvent"
                               v-model="item.event"
                               :disabled="!item.switch"
                               placeholder="事件"></avue-select>
                </div>
                <el-icon @click.stop="handleDel(item,index,true)">
                  <el-icon-delete></el-icon-delete>
                </el-icon>
              </div>
            </template>
            <div class="avue-collapse transfer__box">
              <div class="header">条件</div>
              <event-condition :item="item"></event-condition>
            </div>
            <div class="avue-collapse transfer__box">
              <div class="header">
                <span>动作</span>
                <avue-select :dic="dicOption.transfer"
                             style="width:150px"
                             v-model="item.type"
                             placeholder="请选择操作"></avue-select>
              </div>
              <event-temp :item="item"></event-temp>
            </div>
          </el-collapse-item>
        </el-collapse>
      </template>
      <el-empty v-else
                description="暂无交互事件">
        <template #image>
          <svg-icon icon-class="empty" />
        </template>
      </el-empty>

      <span class="avue-dialog__footer avue-dialog__footer--right">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary"
                   @click="submit()">确 定</el-button>
      </span>
    </el-drawer>

  </el-form>
</template>

<script>
import vuedraggable from 'vuedraggable';
import { dicOption } from '@/option/config'
import eventTemp from '@/page/setup/event-temp.vue'
import eventCondition from '@/page/setup/event-condition.vue'
import template from '../list/template.vue'
export default {
  inject: ["contain"],
  components: {
    eventTemp,
    eventCondition,
    template,
    draggable: vuedraggable
  },
  data () {
    return {
      list: [],
      dicOption,
      box: false,
    }
  },
  methods: {
    getEventLabel (item) {
      return this.dicOption.transferEvent.find(ele => ele.value == item.event).label
    },
    getTypeLabel (item) {
      return this.dicOption.transfer.find(ele => ele.value == item.type).label
    },
    stopCollapse (e) {
      return e.stopPropagation()
    },
    open (index = 0) {
      this.list = this.deepClone(this.contain.activeObj.child.paramList)
      this.activeName = index
      this.box = true;
    },
    submit () {
      this.contain.activeObj.child.paramList = this.list
      this.close()
    },
    close () {
      this.box = false;
    },
    handleDel (item, index, flag) {
      this.$confirm(`是否删除【${item.name}】交互?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const targetList = flag ? this.list : this.contain.activeObj.child.paramList;
        targetList.splice(index, 1);
      })
    },
    handleAdd () {
      this.list = this.list || [];
      this.list.push({
        name: '新增交互',
        condition: `(params,refs,safe)=>{
   return true
}`,
        switch: true,
        event: 'clickFormatter',
        index: [],
        type: 'params',
        fun: `(params,refs,safe)=>{
    console.log(params,refs,safe)
}`,
        child: []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>