<!-- 网关通道 -->
<template>
  <div>
    <!-- 设置树形控件 -->
    <el-button type="info" plain @click="dialogVisible = true"
      >网关通道</el-button
    >
    <div class="tree_menu" v-show="dialogVisible">
      <el-tree
        :data="datas"
        :props="defaultProps"
        @node-contextmenu="rightClick"
        @node-click="treeNodeClick"
      ></el-tree>
      <!-- 树形控件右键组件 -->
      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
        <el-menu
          class="el-menu-vertical-demo"
          @select="selectMenuNode"
          default-active="#0078FE"
        >
          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
            <span slot="title">新建通道</span>
          </el-menu-item>
          <el-menu-item index="2" style="font-size: 12px">
            <span slot="title">取 消</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="pas_params">
      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="通道名称:"
                :label-width="formLabelWidth"
                prop="pass_name"
              >
                <el-input
                  v-model="input1"
                  placeholder=""
                  style="width: 200px; height: 30px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="通道:"
                :label-width="formLabelWidth"
                prop="passage"
              >
                <el-select
                  v-model="value"
                  placeholder=""
                  style="width: 200px; height: 30px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="驱动名称:"
                :label-width="formLabelWidth"
                prop="drive_name"
              >
                <el-row>
                  <el-col :span="18">
                    <el-input
                      v-model="input1"
                      placeholder=""
                      style="width: 200px; height: 30px"
                    ></el-input>
                  </el-col>
                  <el-col :span="6">
                    <el-button
                      style="width: 50px; height: 30px"
                      @click="getDriveName"
                      >...</el-button
                    >
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="IP地址:"
                :label-width="formLabelWidth"
                prop="ip_address"
              >
                <el-row>
                  <el-col :span="5">
                    <el-input
                      v-model="input1"
                      style="width: 43px; height: 30px"
                    ></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input
                      v-model="input1"
                      style="width: 43px; height: 30px"
                    ></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input
                      v-model="input1"
                      style="width: 43px; height: 30px"
                    ></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input
                      v-model="input1"
                      style="width: 43px; height: 30px"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="端口号:"
                :label-width="formLabelWidth"
                prop="port_number"
              >
                <el-input
                  v-model="input1"
                  placeholder=""
                  style="width: 200px; height: 30px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="超过时间(ms):"
                :label-width="formLabelWidth"
                prop="time_exceeded"
              >
                <el-input
                  v-model="input1"
                  placeholder=""
                  style="width: 200px; height: 30px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="间隔时间(ms):"
                :label-width="formLabelWidth"
                prop="time_interval"
              >
                <el-input
                  v-model="input1"
                  placeholder=""
                  style="width: 200px; height: 30px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="轮询时间(ms):"
                :label-width="formLabelWidth"
                prop="time_polling"
              >
                <el-input
                  v-model="input1"
                  placeholder=""
                  style="width: 200px; height: 30px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="重复次数:"
                :label-width="formLabelWidth"
                prop="repeate_count"
              >
                <el-input
                  v-model="input1"
                  placeholder=""
                  style="width: 200px; height: 30px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="super_parmams">
          <h3>高级参数</h3>
          <div>
            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
            <i class="el-icon-caret-top" v-else="is_retract"></i>
            <el-button
              type="text"
              plain
              @click="getRetract"
              style="
                width: 28px;
                height: 20px;
                color: rgba(16, 16, 16, 1);
                font-size: 14px;
                text-align: left;
              "
            >
              收起</el-button
            >
          </div>
        </div>
        <div class="super_con" v-show="is_retract">
          <el-form
            :label-position="labelPosition"
            :rules="rules"
            ref="ruleForm"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item>
                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
                  <el-input
                    v-model="input1"
                    placeholder=""
                    style="width: 200px; height: 30px"
                    :disabled="isdisabled"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
                  <el-row>
                    <el-col :span="10">
                      <el-input
                        v-model="input1"
                        style="width: 91px; height: 30px"
                      ></el-input>
                    </el-col>
                    <el-col :span="4">: </el-col>
                    <el-col :span="10">
                      <el-input
                        v-model="input1"
                        style="width: 91px; height: 30px"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="05/0F:" :label-width="formLabelWidth">
                  <el-row>
                    <el-col :span="8"
                      ><el-radio v-model="radio" label="1"
                        >auto</el-radio
                      ></el-col
                    >
                    <el-col :span="8"
                      ><el-radio v-model="radio" label="2">05</el-radio></el-col
                    >
                    <el-col :span="8"
                      ><el-radio v-model="radio" label="3">0F</el-radio></el-col
                    >
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="06/10:" :label-width="formLabelWidth">
                  <el-row>
                    <el-col :span="8"
                      ><el-radio v-model="radio" label="1"
                        >auto</el-radio
                      ></el-col
                    >
                    <el-col :span="8"
                      ><el-radio v-model="radio" label="2">06</el-radio></el-col
                    >
                    <el-col :span="8"
                      ><el-radio v-model="radio" label="3">10</el-radio></el-col
                    >
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="add_passage = false">取 消</el-button>
          <el-button type="primary" @click="add_passage = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="drvieName_All">
      <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
        <el-tree :data="datas" :props="defaultProps"></el-tree>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "TestTreeView",

  data() {
    return {
      diag_drive: false,
      options: [
        {
          value: "选项1",
          label: "测试1",
        },
        {
          value: "选项2",
          label: "测试2",
        },
        {
          value: "选项3",
          label: "测试3",
        },
        {
          value: "选项4",
          label: "测试4",
        },
        {
          value: "选项5",
          label: "测试5",
        },
      ],
      value: "网口",
      isdisabled: true,
      radio: "1",
      checked1: false,
      checked2: true,
      is_retract: true,
      labelPosition: "left",
      formLabelWidth: "116px",
      input1: 192,
      add_passage: false,
      rightMenu: "",
      dialogVisible: false,
      menuShow: false,
      datas: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      rules: {
        pass_name: [
          { required: true, message: "请输入通道名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
        drive_name: [
          { required: true, message: "请输入驱动名称", trigger: "blur" },
        ],
        ip_address: [
          { required: true, message: "请输入ip地址", trigger: "blur" },
        ],
        port_number: [
          { required: true, message: "请输入端口号", trigger: "blur" },
        ],
        time_exceeded: [
          { required: true, message: "请输入超出时间", trigger: "blur" },
        ],
        time_interval: [
          { required: true, message: "请输入间隔时间", trigger: "blur" },
        ],
        time_polling: [
          { required: true, message: "请输入轮询时间", trigger: "blur" },
        ],
        repeate_count: [
          { required: true, message: "请输入重复次数", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    console.log(document.querySelector(".body"));
  },

  methods: {
    rightClick(e, data, node) {
      this.menuShow = false;
      this.menuShow = true;
      e.preventDefault(); //关闭浏览器右键默认事件
      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
      document.addEventListener("click", (ev) => {
        ev.stopImmediatePropagation();
        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
          this.foo();
        }
      });
    },
    // 点击时候的判断,判断是否为新增网关
    selectMenuNode(index, indexPath) {
      console.log(index);
      if (index == 1) {
        this.add_passage = true;
      }
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuShow = false;
      document.removeEventListener("click", this.foo); // 关掉监听，
    },
    treeNodeClick() {
      this.foo();
    },
    // 收起点击事件的判断
    getRetract() {
      if (this.is_retract == true) {
        this.is_retract = false;
      } else {
        this.is_retract = true;
      }
    },
    getDriveName() {
      this.diag_drive = true;
    },
  },
  watch: {
    checked1: {
      handler(old) {
        if (old) {
          this.isdisabled = false;
        } else {
          this.isdisabled = true;
        }
      },
    },
  },
  directives: {
    clickoutside: {
      bind: function (el, binding, vnode) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
            return false;
          }
          if (binding.expression) {
            binding.value(e);
          }
        }
        el._vueClickOutside_ = documentHandler;
        document.addEventListener("click", documentHandler);
      },
      unbind: function (el, binding) {
        document.removeEventListener("click", el._vueClickOutside_);
        delete el._vueClickOutside_;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.tree_menu {
  position: absolute;
  width: 286px;
  height: 753px;
  left: 64px;
  top: 104px;
  width: 286px;
  height: 753px;
  line-height: 20px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 1);
  text-align: center;
  border: 1px solid rgba(220, 220, 220, 1);
}

.tree_rightmenu {
  position: fixed;
  width: 120px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  z-index: 1000;
}

.super_parmams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 668px;

  i {
    width: 24px;
    height: 24px;
    display: inline-block;
  }
}

/deep/ .pas_params {
  .el-col-12:last-child {
    padding-right: 150px;
  }

  .el-col-12:first-child {
    padding-right: 42px;
  }

  .el-input__inner {
    height: 30px;
    text-align: left;
    padding: 0px 8px;
  }

  .el-row {
    display: flex;
    align-items: flex-end;

    .el-col-1 {
      text-align: center;
      line-height: 20px;
      height: 20px;
    }

    .el-col-6 {
      height: 40px;
      top: 5px;
      left: 77px;
      position: relative;
      width: 50px;
    }
  }
}

.super_con {
  .el-col-12:last-child {
    padding-right: 28px;
  }

  .el-col-12:first-child {
    padding-right: 42px;
  }

  .el-input__inner {
    text-align: left;
    padding: 0 8px;
  }

  .el-row {
    display: flex;
    align-items: flex-end;

    .el-col-4 {
      padding-left: 5px;
      width: 14px;
      text-align: center;
      line-height: 4px;
      height: 20px;
    }
  }
}
</style>
