<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.action" @change="changeAction">
          <a-select-option :value="0">打开链接</a-select-option>
          <a-select-option :value="1">执行动画</a-select-option>
          <a-select-option :value="2">停止动画</a-select-option>
          <a-select-option :value="3">执行自定义函数</a-select-option>
          <a-select-option :value="4">执行window函数</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 != 3" 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>
const msg =
  "示例：console.log(pen, params, client, window.topology);\npen - 画笔数据。\nparams - 填写的函数参数/websocket中json格式下的data/MQTT的message。\nclient - websocket/MQTT（mqtt.js）的连接客户端。window.topology - 画布组件";
export default {
  data() {
    return {
      title: "",
      judge: true,
      visible: false,
      msg,
      confirmLoading: false,
      data: {
        type: 0,
        action: 0,
        value: "",
        params: "",
      },
      name: "链接地址",
      name1: "新标签页",
    };
  },
  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 2:
          this.name = "动画标签";
          this.judge = false;
          break;
        case 3:
          this.name = "函数代码";
          this.judge = false;
          break;
        case 4:
          this.name = "函数名称";
          this.name1 = "函数参数";
          this.judge = true;
          break;
      }
    },
  },
};
</script>
<style lang="scss">
</style>