<!-- 网关通道 -->
<template>
  <div>
    <!-- v-click-outside="closeMenu" -->
    <div>
      <div class="tree_menu" v-show="dialogVisible">
        <el-tree :data="datas" :props="defaultProps" default-expand-all @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>
    <div class="pas_params">
      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
        <el-form
          :model="FormData"
          :label-position="labelPosition"
          :rules="rules"
          ref="ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="通道名称:"
                :label-width="formLabelWidth"
                prop="tdpz_tdmc"
              >
                <el-select
                  v-model="FormData.tdpz_tdmc"
                  placeholder=""
                  style="width: 200px; height: 30px"
                >
                  <el-option
                    v-for="(item, index) in options1"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="通道:"
                :label-width="formLabelWidth"
                prop="tdpz_td"
              >
                <el-select
                  v-model="FormData.tdpz_td"
                  placeholder=""
                  style="width: 200px; height: 30px"
                >
                  <el-option
                    v-for="(item, index) in options2"
                    :key="index"
                    :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="tdpz_qdmc"
              >
                <el-row>
                  <el-col :span="18">
                    <el-input
                      v-model="FormData.tdpz_qdmc"
                      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="tdpz_ip"
              >
                <el-row>
                  <el-col :span="5">
                    <el-input
                      v-model="tdpz_ip1"
                      style="width: 43px; height: 30px"
                    ></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input
                      v-model="tdpz_ip2"
                      style="width: 43px; height: 30px"
                    ></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input
                      v-model="tdpz_ip3"
                      style="width: 43px; height: 30px"
                    ></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input
                      v-model="tdpz_ip4"
                      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="tdpz_port"
              >
                <el-input
                  v-model="FormData.tdpz_port"
                  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="tdpz_cssj"
              >
                <el-input
                  v-model="FormData.tdpz_cssj"
                  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="tdpz_jgsj"
              >
                <el-input
                  v-model="FormData.tdpz_jgsj"
                  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="tdpz_lxsj"
              >
                <el-input
                  v-model="FormData.tdpz_lxsj"
                  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="tdpz_cfcs"
              >
                <el-input
                  v-model="FormData.tdpz_cfcs"
                  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;
                border: none;
                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="FormData.tdpz_watchtime"
                    >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="FormData.tdpz_cjsylxdz"
                    >采集使用连续地址</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="FormData.tdpz_dxzkb1"
                        style="width: 91px; height: 30px"
                      ></el-input>
                    </el-col>
                    <el-col :span="4">: </el-col>
                    <el-col :span="10">
                      <el-input
                        v-model="FormData.tdpz_dxzkb2"
                        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="FormData.tdpz_050F" label="auto"
                        >auto</el-radio
                      ></el-col
                    >
                    <el-col :span="8"
                      ><el-radio v-model="FormData.tdpz_050F" label="05"
                        >05</el-radio
                      ></el-col
                    >
                    <el-col :span="8"
                      ><el-radio v-model="FormData.tdpz_050F" label="0F"
                        >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="FormData.tdpz_0610" label="auto"
                        >auto</el-radio
                      ></el-col
                    >
                    <el-col :span="8"
                      ><el-radio v-model="FormData.tdpz_0610" label="06"
                        >06</el-radio
                      ></el-col
                    >
                    <el-col :span="8"
                      ><el-radio v-model="FormData.tdpz_0610" label="10"
                        >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 type="primary" @click="saveGate">保 存</el-button>
          <el-button @click="add_passage = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="drvieName_All" v-show="diag_drive">
      <div class="title">
        <p class="title_l">协议选择</p>
        <i class="el-icon-close title_r" @click="diag_drive = false"></i>
      </div>
      <el-divider></el-divider>
      <el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
    </div>
  </div>
</template>

<script>
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";

export default {
  name: "TestTreeView",

  data() {
    return {
      FormData: {
        tdpz_tdmc: "有线区Channel1",
        tdpz_td: "网口",
        tdpz_qdmc: "ModbusTCPClient",
        tdpz_watchtime: true,
        tdpz_cjsylxdz: false,
        tdpz_dxzkb: "",
        tdpz_dxzkb1: "1",
        tdpz_dxzkb2: "1",
        tdpz_050F: "auto",
        tdpz_0610: "auto",
      },
      tdpz_ip1: "",
      tdpz_ip2: "",
      tdpz_ip3: "",
      tdpz_ip4: "",
      options1: [
        {
          value: "有线区Channel1",
          label: "有线区Channel1",
        },
        {
          value: "无线区Channel1",
          label: "无线区Channel1",
        },
      ],
      options2: [
        {
          value: "网口",
          label: "网口",
        },
        {
          value: "串口",
          label: "串口",
        },
      ],
      value1: "有线区Channel1",
      value2: "网口",
      diag_drive: false,
      isdisabled: true,
      radio: "1",
      is_retract: true,
      labelPosition: "left",
      formLabelWidth: "116px",
      input1: 192,
      add_passage: false,
      rightMenu: "",
      dialogVisible: true,
      menuShow: false,
      datas: [
        {
          label: "Gateway",
          children: [
            {
              label: "数据采集",
              children: [
                {
                  label: "I/O点",
                },
                {
                  label: "用户点",
                },
                {
                  label: "计算点",
                },
                {
                  label: "系统点",
                },
              ],
            },
            {
              label: "数据服务",
              children: [
                {
                  label: "Modbus",
                },
              ],
            },
            {
              label: "IOT",
              children: [
                {
                  label: "Mqtt Client",
                },
                {
                  label: "Alink",
                },
                {
                  label: "Tlink",
                },
                {
                  label: "loTDDC",
                },
                {
                  label: "Ulink",
                },
              ],
            },
          ],
        },
      ],
      datas2: [
        {
          label: "通用标准",
          children: [
            {
              label: "ModbusTCPClient",
            },
            {
              label: "ModbusRTU_over_TCP",
            },
            {
              label: "OPCUAClient",
            },
            {
              label: "OPCDAClient",
            },
            {
              label: "MQTTClient",
            },
            {
              label: "OPCXMLDAClient",
            },
            {
              label: "环保212协议网口监听",
            },
          ],
        },
        {
          label: "PLC",
          children: [
            {
              label: "Slemens S7-200 Network",
            },
            {
              label: "Slemens S7-300 Network",
            },
            {
              label: "Slemens S7-400 Network",
            },
            {
              label: "Slemens S7-1200 Network",
            },
            {
              label: "Slemens S7-1500 Network",
            },
            {
              label: "EtherNet/IP CIP协议(AB OMR ON)",
            },
            {
              label: "MC_Qna-3E(三菱 基恩士 松下)",
            },
            {
              label: "MC_A-1E_Binary",
            },
            {
              label: "OMRON-FINS",
            },
            {
              label: "横河PLC",
            },
            {
              label: "西门子FetchWirte",
            },
            {
              label: "富机 FUJI_SPH_NET",
            },
            {
              label: "基恩士上位链路通讯",
            },
          ],
        },
        {
          label: "智能建筑",
          children: [],
        },
        {
          label: "厂家定制",
          children: [],
        },
        {
          label: "电力行业标准",
          children: [
            {
              label: "IEC104",
            },
            {
              label: "DLT645_over_TCP",
            },
          ],
        },
        {
          label: "CNC数控",
          children: [],
        },
        {
          label: "私有协议",
          children: [],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      rules: {
        tdpz_tdmc: [
          { required: true, message: "请输入通道名称", trigger: "change" },
        ],
        tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
        tdpz_qdmc: [
          { required: true, message: "请输入驱动名称", trigger: "change" },
        ],
        tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
        tdpz_port: [
          { required: true, message: "请输入端口号", trigger: "blur" },
        ],
        tdpz_cssj: [
          { required: true, message: "请输入超出时间", trigger: "blur" },
        ],
        tdpz_jgsj: [
          { required: true, message: "请输入间隔时间", trigger: "blur" },
        ],
        tdpz_lxsj: [
          { required: true, message: "请输入轮询时间", trigger: "blur" },
        ],
        tdpz_cfcs: [
          { required: true, message: "请输入重复次数", trigger: "blur" },
        ],
      },
    };
  },
  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;
    },
    Merge(value, value1, value2, value3, value4) {
      value = value1 + "." + value2 + "." + value3 + "." + value4;
      return value;
    },
    async saveGate() {
      this.add_passage = false;
      this.FormData.tdpz_watchtime = Number(this.FormData.tdpz_watchtime);
      this.FormData.tdpz_cjsylxdz = Number(this.FormData.tdpz_cjsylxdz);
      this.FormData.tdpz_ip = this.Merge(
        this.FormData.tdpz_ip,
        this.tdpz_ip1,
        this.tdpz_ip2,
        this.tdpz_ip3,
        this.tdpz_ip4
      );
      let datas = sessionStorage.getItem("answer");
      this.FormData = { ...this.FormData, ...JSON.parse(datas) };
      let res = await SaveUserAnswer({
        mark: "DB-IotLite_yx",
        user_id: "USER202307301109254198",
        mark_value: JSON.stringify(this.FormData),
      });
      sessionStorage.setItem("answer", JSON.stringify(this.FormData));
      console.log(res);
      console.log(res.data.data.mark_value);
      this.$router.push("/dbcollectdevice");
    },
    handleDetailClick(data,node,value){
      console.log(data.label);
      this.FormData.tdpz_qdmc=data.label;
    }
  },
  async created() {
    let res2 = GetUserAnswer()
  },
  watch: {
    tdpz_watchtime: {
      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;
  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: 38px;
  }

  .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: 6px;
      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;
    }
  }
}

.el-dialog__footer {
  padding: 18px 1.25rem 50px;

}

.dialog-footer {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
}

/deep/ .drvieName_All {
  position: absolute;
  left: 1408px;
  top: 140px;
  width: 435px;
  max-height: 720px;
  z-index: 10000;
  border: 1px solid #f5f5f5;

  .title {
    background-color: #fff;
    padding: 5px 6px 5px 25px;
    display: flex;
    justify-content: space-between;

    .title_l {
      width: 103px;
      height: 26px;
      color: rgba(16, 16, 16, 1);
      font-size: 18px;
      text-align: left;
    }

    .title_r {
      width: 24px;
      height: 24px;
      line-height: 24px;
      cursor: pointer;
      color: rgba(111, 103, 103, 1);
    }
  }

  // h3 {
  //   padding-bottom: 10px;
  //   background-color: #fff;
  // }

  .el-divider--horizontal {
    margin: 0px;
  }
}
</style>
