<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: 8 }"
        :wrapper-col="{ span: 15 }"
      >
        <a-select v-model="data.type">
          <a-select-option :value="0">单击</a-select-option>
          <a-select-option :value="1">双击</a-select-option>
          <a-select-option :value="2">Websocket事件</a-select-option>
          <a-select-option :value="3">MQTT</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="事件行为"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 15 }"
      >
        <a-select v-model="data.action" @change="changeAction">
          <a-select-option v-for="item,index of eventAction" :key="index" :value="item.value">{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        :label="name"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 15 }"
      >
        <a-input v-if="data.action != 2" v-model="data.value"></a-input>
        <a-textarea
          v-else
          :rows="15"
          :placeholder="msg"
          v-model="data.value"
        ></a-textarea>
      </a-form-item>
      <a-form-item
        :label="name1"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 15 }"
        v-show="judge"
      >
        <a-input v-model="data.params"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
let msg=""
import {eventAction} from "@/utils/topology/topologysetting.js"
export default {
  data() {
    return {
      title: "",
      judge: true,
      visible: false,
      msg,
      confirmLoading: false,
      data: {
        type: 0,
        action: 0,
        value: "",
        params: "",
      },
      name: "链接地址",
      name1: "打开方式",
      eventAction
    };
  },
  methods: {
    add() {
      this.visible = true;
    },
    handleOk() {
      this.$emit("ok",Object.assign({},this.data));
      this.handleCancel();
    },
    handleCancel() {
      Object.assign(this.$data, this.$options.data());
    },
    changeAction(val) {
      switch (val) {
        case 0:
          this.name = "链接地址";
          this.name1 = "打开方式";
          this.judge = true;
          break;
        case 1:
          this.name = "动画标签";
          this.judge = false;
          break;
        case 5:
          this.name = "动画标签";
          this.judge = false;
          break;
        case 6:
          this.name = "动画标签";
          this.judge = false;
          break;
        case 2:
          this.name = "JavaScript";
          this.judge = false;
          break;
        case 3:
          this.name = "函数名称";
          this.name1 = "函数参数";
          this.judge = true;
          break;
        case 7:
          this.name = "消息名称";
          this.name1 = "消息参数";
          this.judge = true;
          break;
      }
    },
  },
};
</script>
<style lang="scss">
</style>