<template>
  <div class="event-panel-config">

    <el-collapse :value="eventArray.map(item => item.eventName)" v-if="eventArray.length">
      <el-collapse-item :key="item.eventName" :name="item.eventName" :title="$lang == 'zh-CN' ? eventEnum[item.eventName] : item.eventName" v-for="(item, index) in eventArray">
        <div class="event-panel-item">
          <el-select
            size="mini"
            style="width: 100%;margin-bottom: 5px;"
            v-model="item.functionKey">
            <el-option
              v-for="item in eventscripts"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          
          <i class="iconfont icon-code" @click="handleCode(item)"  :title="$t('fm.eventscript.config.code')"></i>
          <i class="iconfont icon-trash" @click="handleRemove(item, index)"  :title="$t('fm.tooltip.trash')"></i>
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-dropdown style="width: 100%; margin-top: 5px;" trigger="click" @command="handleCommand" szie="mini">
      <el-button type="primary" plain style="width: 100%;" size="mini"> 
        {{$t('fm.eventscript.config.create')}}<i class="el-icon-plus el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown" style="width: 280px;">
        <template v-for="e in Object.keys(events)">
          <el-dropdown-item v-if="$lang == 'zh-CN'" :key="e" :disabled="eventArray.filter(item => item.eventName == e).length != 0" :command="e">{{eventEnum[e]}}</el-dropdown-item>
          <el-dropdown-item v-else :key="e" :disabled="eventArray.filter(item => item.eventName == e).length != 0" :command="e">{{e}}</el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'event-config',
  props: ['events', 'eventscripts'],
  data () {
    return {
      eventArray: Object.keys(this.events).map(item => ({
        eventName: item,
        functionKey: this.events[item]
      })).filter(item => item.functionKey),
      eventEnum: {
        onChange: 'onChange 值发生变化',
        onClick: 'onClick 单击',
        onFocus: 'onFocus 获取焦点',
        onBlur: 'onBlur 失去焦点',
        onRowAdd: 'onRowAdd 子表单添加行',
        onRowRemove: 'onRowRemove 子表单删除行',
        onUploadSuccess: 'onUploadSuccess 上传成功',
        onUploadError: 'onUploadError 上传失败',
        onRemove: 'onRemove 移除',
        onUploadProgress: 'onUploadProgress 上传中'
      }
    }
  },
  methods: {
    handleCommand (command) {
      this.$emit('on-add', command)
    },

    handleRemove (item, index) {
      this.events[item.eventName] = ''
    },

    handleCode (item) {
      this.$emit('on-edit', item)
    }
  },
  watch: {
    events: {
      deep: true,
      handler (val) {
        this.eventArray = Object.keys(this.events).map(item => ({
          eventName: item,
          functionKey: this.events[item]
        })).filter(item => item.functionKey)
      }
    },
    eventArray: {
      deep: true,
      handler (val) {
        for(let i = 0; i < val.length; i++) {
          this.$set(this.events, val[i].eventName, val[i].functionKey)
        }
      }
    }
  }
}
</script>

<style lang="scss">
.event-panel-config{
  .el-collapse-item{
    border: 1px solid #EBEEF5;
    border-bottom-color: #e1e1e1;
  }

  .el-collapse-item__header{
    background: #EBEEF5;
    height: 30px;
    line-height: 30px;
    padding: 5px;
    font-size: 12px;
  }

  .el-collapse-item__wrap{
    border: 0;

    .el-collapse-item__content{
      padding: 5px;
    }
  }

  .event-panel-item{
    vertical-align: top;
    display: flex;

    > i {
      margin-left: 5px;
      cursor: pointer;
    }
  }
}
</style>