<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :layout="'horizontal'">
      <a-form-item
        label="属性名"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 15 }"
      >
        <a-input v-model="data.key"></a-input>
      </a-form-item>
      <a-form-item
        label="条件"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 15 }"
      >
        <a-input v-model="data.comparison"></a-input>
      </a-form-item>
      <a-form-item
        label="属性值"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 15 }"
      >
        <a-input v-model="data.value"></a-input>
      </a-form-item>
      <a-form-item
        label="JavaScript"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 15 }"
      >
        <a-textarea :rows="10" v-model="data.fn"></a-textarea>
      </a-form-item>
      <a-form-item
        label="添加事件"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 15 }"
      >
        <a-button type="primary" @click="addEvent">添加事件</a-button>
      </a-form-item>
    </a-form>
    <add-wheres-event ref="addEvent" @ok="saveEvent"></add-wheres-event>
    <a-collapse v-model="activeKey">
      <a-collapse-panel
        v-for="(item, index) of data.actions"
        :key="String(index)"
        :header="'事件' + (index + 1)"
      >
        <a-tooltip slot="extra" placement="topLeft" title="删除">
          <a-icon type="delete" @click="remove(index)" style="font-size: 2vh" />
        </a-tooltip>
        <a-row :gutter="24">
          <a-col :span="24" style="padding: 0px 6%"
            ><span style="float: left">事件行为：</span
            ><a-input :value="getEventAction(item.action)" disabled
          /></a-col>
          <a-col :span="24" style="padding: 0px 6%"
            ><span style="float: left">事件动作：</span
            ><a-textarea :value="item.value" :rows="6" disabled
          /></a-col>
          <a-col :span="24" style="padding: 0px 6%"
            ><span style="float: left">事件标签：</span
            ><a-input :value="item.params" disabled
          /></a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
  </a-modal>
</template>
<script>
import AddWheresEvent from "@/components/topology/modules/AddWheresEvent";
export default {
  components: {
    AddWheresEvent,
  },
  data() {
    return {
      title: "",
      judge: true,
      visible: false,
      confirmLoading: false,
      activeKey: ["0"],
      data: {
        key: "",
        comparison: "",
        value: "",
        fn: "",
        actions: [],
      },
    };
  },
  methods: {
    remove(index) {
      this.$delete(this.data.actions, index);
    },
    add() {
      this.visible = true;
      this.title = "添加触发器";
    },
    handleOk() {
      this.$emit("ok", Object.assign({}, this.data));
      this.handleCancel();
    },
    handleCancel() {
      Object.assign(this.$data, this.$options.data());
    },
    addEvent() {
      this.$refs.addEvent.add();
    },
    saveEvent(data) {
      this.data.actions.push(data);
    },
    getEventAction(action) {
      switch (action) {
        case 0:
          return "打开链接";
        case 1:
          return "执行动画";
        case 2:
          return "停止动画";
        case 3:
          return "执行自定义函数";
        case 4:
          return "执行window函数";
      }
    },
  },
};
</script>
<style lang="scss">
</style>