<template>
  <el-row>
    <el-form :label-position="labelPosition" :label-width="labelWidth" size="small" @submit.native.prevent>
      <MultiItemList v-if="labelPosition === 'top'"
        :label="label"
        :data="value"
        addText="添加脚本"
        @add="onEditEvent()"
        @edit="onEditEvent"
        @delete="onRemoveEvent"
        :prop="{
          label: 'showName',
          value: 'eventType'
        }"
      />
      <el-form-item v-else :label="label">
        <MultiItemBox :data="value"
          addText="添加脚本"
          @add="onEditEvent()"
          @edit="onEditEvent"
          @delete="onRemoveEvent"
          :prop="{
            label: 'showName',
            value: 'eventType'
          }"
        />
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
import refreshDataMixins from '@/views/thirdParty/refreshDataMixins.js';
import MultiItemBox from '@/components/MultiItemBox/index.vue';
import MultiItemList from '@/components/MultiItemList/index.vue';
import EditCustomEvent from './editCustomEvent.vue';

export default {
  name: 'customEventSetting',
  props: {
    value: {
      type: Array
    },
    label: {
      type: String,
      default: '表单脚本'
    },
    labelPosition: {
      type: String,
      default: 'top'
    },
    labelWidth: {
      type: String,
      default: '110px'
    },
    allowEventList: {
      type: Array,
      default: () => []
    },
    formConfig: {
      type: Object,
      required: true
    }
  },
  mixins: [refreshDataMixins],
  components: {
    MultiItemBox,
    MultiItemList
  },
  methods: {
    refreshData (data) {
      if (data.path === 'thirdEditCustomEvent' && data.isSuccess) {
        this.handlerEditOperate(data.rowData, data.data);
      }
    },
    handlerEditOperate (row, res) {
      let temp = [];
      if (row == null) {
        temp = [
          ...this.value,
          res
        ];
      } else {
        temp = (this.value || []).map(item => {
          return row.eventType === item.eventType ? res : item;
        });
      }
      this.$emit('input', temp);
    },
    onEditEvent (row) {
      this.$dialog.show(row ? '编辑脚本' : '添加脚本', EditCustomEvent, {
        area: ['1200px', '792px']
      }, {
        rowData: row,
        eventList: this.eventList,
        formConfig: this.formConfig,
        path: 'thirdEditCustomEvent'
      }, {
        width: '1200px',
        height: '800px',
        pathName: '/thirdParty/thirdEditCustomEvent'
      }).then(res => {
        this.handlerEditOperate(row, res);
      }).catch(e => {
        console.log(e);
      });
    },
    onRemoveEvent (row) {
      this.$confirm('是否移除此脚本？').then(res => {
        this.$emit('input', (this.value || []).filter(item => {
          return item.eventType !== row.eventType;
        }));
      });
    }
  },
  computed: {
    eventList () {
      let usedList = (this.value || []).map(eventItem => eventItem.eventType);
      return this.allowEventList.map(item => {
        return {
          id: item,
          name: this.OnlineFormEventType.getValue(item),
          disabled: usedList.indexOf(item) !== -1
        }
      });
    }
  }
}
</script>

<style>
</style>
