<template>
  <div>
    <a-tabs default-active-key="1" size="small">
      <a-tab-pane key="1" tab="图片设置">
        <div class="div-scoll">
          <a-form :label-position="'right'" label-width="80px">
            <a-row :gutter="24">
              <a-col :span="23">
                <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="图文名称"
                >
                  <a-input
                    placeholder="请输图文名称"
                    v-model="canvasData.name"
                    @change="changeData"
                  />
                </a-form-item>
              </a-col>

              <a-col :span="23">
                <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="背景颜色"
                >
                  <!-- <input-color
                    v-model="canvasData.bkColor"
                    @change="changeData"
                  ></input-color> -->
                  <el-color-picker
                    v-model="canvasData.bkColor"
                    @change="changeData"
                    style="width: 100%"
                  ></el-color-picker>
                </a-form-item>
              </a-col>

              <a-col :span="23">
                <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="背景网格"
                >
                  <a-switch v-model="canvasData.grid" @change="changeData" />
                </a-form-item>
              </a-col>

              <a-col :span="23">
                <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="网格颜色"
                >
                <el-color-picker
                    v-model="canvasData.gridColor"
                    @change="changeData"
                    style="width: 100%"
                  ></el-color-picker>
                </a-form-item>
              </a-col>

              <a-col :span="23">
                <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="网格大小"
                >
                  <a-input v-model="canvasData.gridSize" @input="changeData" />
                </a-form-item>
              </a-col>

              <a-col :span="23">
                <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="标尺"
                >
                  <a-switch v-model="canvasData.rule" @change="changeData" />
                </a-form-item>
              </a-col>
              <a-col :span="23">
                <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="标尺颜色"
                >
                <el-color-picker
                    v-model="canvasData.ruleColor"
                    @change="changeData"
                    style="width: 100%"
                  ></el-color-picker>
                </a-form-item>
              </a-col>
            </a-row>

            <a-divider />
            <div
              _ngcontent-noe-c49=""
              class="abs"
              style="bottom: 0.1rem; text-align: left"
            >
              <ul class="ml30 mv10">
                <li>← ↑ → ↓ ：移动5个像素</li>
                <li>Ctrl + 鼠标点击：多选</li>
                <li>Ctrl + 鼠标滚轮：缩放画布</li>
                <li>Ctrl + ← ↑ → ↓ ：移动1个像素</li>
                <li>Ctrl + 鼠标拖拽空白：移动整个画布</li>
                <li>Shift/Alt + 鼠标拖拽节点：独立拖拽（子）节点</li>
                <li>Ctrl + Shift + Alt +鼠标点击：添加锚点</li>
                <li>鼠标移动到锚点上 Ctrl + Del：删除锚点</li>
              </ul>
            </div>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="消息通信">
        <div style="width: 100%; height: 86vh; overflow-y: scroll">
          <a-row>
            <div style="text-align: left; margin: 5px 3%">Websocket地址</div>
            <a-divider />
            <div style="text-align: left; margin: 5px">
              <a-input v-model="canvasData.websocket" @change="changeData" />
            </div>
            <!-- <div style="text-align: left; margin: 0 10%; color: #c4c4c4">
              用于Pen“事件”中的websocket使用。 消息格式为json字符串： {event:
              "自定义消息名", data:"数据"}
            </div> -->
          </a-row>
          <a-row>
            <div style="margin: 1vh 0">
              <div style="text-align: left; margin: 5px 3%">MQTT地址</div>
              <a-divider />
              <div>
                <a-form :label-position="'right'" label-width="80px">
                  <a-form-item
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol"
                    label="URL地址"
                  >
                    <a-input
                      placeholder="请输入url地址"
                      v-model="form.mqttUrl"
                    />
                  </a-form-item>
                  <a-form-item
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol"
                    label="Client ID"
                  >
                    <a-input
                      v-model="mqttOptions.clientId"
                      placeholder="请输入Client ID"
                    />
                  </a-form-item>
                  <a-form-item
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol"
                    label="用户名"
                  >
                    <a-input
                      v-model="mqttOptions.username"
                      placeholder="请输入用户名"
                    />
                  </a-form-item>
                  <a-form-item
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol"
                    label="密码"
                  >
                    <a-input
                      v-model="mqttOptions.password"
                      placeholder="请输入密码"
                    />
                  </a-form-item>
                  <a-form-item
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol"
                    label="Topics"
                  >
                    <a-input
                      placeholder="请输入Topics"
                      v-model="form.mqttTopics"
                    />
                  </a-form-item>
                  <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
                    <a-button type="primary" block @click="handleSubmit"
                      >连接
                    </a-button>
                  </a-form-item>
                </a-form>
              </div>
            </div>
          </a-row>
          <a-row>
            <div style="margin: 1vh 0">
              <div style="text-align: left; margin: 5px 3%">
                消息处理JavaScript
              </div>
              <a-divider />
              <div style="margin-left: 5%; margin-right: 5%">
                <a-form>
                  <a-form-item>
                    <a-input
                      type="textarea"
                      rows="10"
                      v-model="canvasData.socketFn"
                      @change="changeData"
                    />
                  </a-form-item>
                </a-form>
              </div>
            </div>
          </a-row>
        </div>
      </a-tab-pane>
      <!-- <a-tab-pane key="3" tab="排版布局"> </a-tab-pane> -->
    </a-tabs>
  </div>
</template>
<script>
import pick from "lodash.pick";
import InputColor from "@/components/topology/color/InputColor";
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 15 },
};
export default {
  props: {
    canvas: {
      type: Object,
      require: true,
    },
  },
  components: {
    InputColor,
  },
  watch: {
    canvas: {
      handler(n, o) {
        if (!!n) {
          if (n.mqttOptions) {
            if (n.mqttOptions.clientId) {
              this.mqttOptions.clientId = n.mqttOptions.clientId;
            }
            if (n.mqttOptions.username) {
              this.mqttOptions.username = n.mqttOptions.username;
            }
            if (n.mqttOptions.password) {
              this.mqttOptions.password = n.mqttOptions.password;
            }
          }
          this.canvasData = pick(
            Object.assign({}, n),
            "name",
            "bkColor",
            "grid",
            "gridColor",
            "gridSize",
            "rule",
            "ruleColor",
            "websocket",
            "mqttUrl",
            "mqttTopics",
            "socketFn"
          );
        }
      },
      immediate: true,
      deep: true,
    },
    bkColor: {
      handler(n, o) {
        this.canvasData.bkColor = n;
        this.changeData(n);
      },
      deep: true,
    },
    gridColor: {
      handler(n, o) {
        this.canvasData.gridColor = n;
        this.changeData(n);
      },
      deep: true,
    },
    ruleColor: {
      handler(n, o) {
        this.canvasData.ruleColor = n;
        this.changeData(n);
      },
      deep: true,
    },
  },
  data() {
    return {
      formItemLayout,
      canvasData: {
        name: "",
        bkColor: "",
        grid: false,
        gridColor: "",
        gridSize: 0,
        rule: false,
        ruleColor: "",
        websocket: "",
        mqttUrl: "",
        mqttTopics: "",
        socketEvent: true,
        socketFn: "",
      },
      form: {
        mqttUrl: "",
        mqttTopics: "",
      },
      mqttOptions: {
        clientId: "",
        username: "",
        password: "",
      },
      bkColor: "#000",
      gridColor: "#000",
      ruleColor: "#000",
    };
  },
  methods: {
    handleSubmit(e) {
      if (!this.form.mqttUrl) {
        this.$message.warning("请填写mqttURL");
        return;
      }
      if (!this.form.mqttTopics) {
        this.$message.warning("请填写Topics");
        return;
      }
      this.canvasData.mqttUrl = this.form.mqttUrl;
      this.canvasData.mqttTopics = this.form.mqttTopics;
      this.changeData("");
    },
    changeData(val) {
      let params = Object.assign({}, this.canvas);
      params.name = this.canvasData.name;
      params.bkColor = this.canvasData.bkColor;
      params.grid = this.canvasData.grid;
      params.gridColor = this.canvasData.gridColor;
      params.gridSize = this.canvasData.gridSize;
      params.rule = this.canvasData.rule;
      params.ruleColor = this.canvasData.ruleColor;
      params.websocket = this.canvasData.websocket;
      params.mqttUrl = this.canvasData.mqttUrl;
      params.mqttTopics = this.canvasData.mqttTopics;
      params.mqttOptions = this.mqttOptions;
      params.socketEvent = this.canvasData.socketEvent;
      params.socketFn = this.canvasData.socketFn;
      this.$emit("ok", params);
    },
  },
};
</script>
<style lang="scss">
.ant-form-vertical {
  .ant-form-item {
    padding-bottom: 8px;
    margin: 8px;
  }
}
.a-form-item {
  margin-bottom: 10px;
}
.m-colorPicker {
  .box[data-v-29accc04] {
    position: absolute;
    width: 190px;
    left: 0px;
    background: #fff;
    border: 1px solid rgb(202, 202, 202);
    visibility: hidden;
    border-radius: 2px;
    margin-top: 2px;
    padding: 3px;
    padding-bottom: 5px;
    -webkit-box-shadow: 0 0 5px rgb(202, 202, 202);
    box-shadow: 0 0 5px rgb(202, 202, 202);
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
}
</style>