<template>
  <div class="airportInfo">
    <DataTable :data-id="dataId" :rows="12" :withnodeSet="true" labelWidth="70px" :minHeight="70" width="800px" tableHeight="685" :isStatuser="true" :isAuth="true" authAdd="add_node_information" authEdit="node_information_editing" authDel="node_information_deletion" authWithnodeSet="position_setting_button">
      <template v-slot:header>
        <div class="status flex-wrap">
          <div class="manageTitle">节点信息维护</div>
        </div>
      </template>
    </DataTable>
  </div>
</template>

<script>
import orgTree from "@/layout/components/OrgTree";
import Dialog from "@/layout/components/Dialog/index.vue";
import { getQuery, generalDataReception } from "@/api/flight";
import DataTable from "@/components/Table";
export default {
  name: "NodeLnformation",
  components: { orgTree, Dialog, DataTable },
  data () {
    return {
      dataId: DATACONTENT_ID.deployNodeId,
      dataList: {
        id: 0,
        nodeCode: "BSM",
        Type: 0,
        locationCode: "行李源报文",
        children: [],
      },
      removeDialogVisible: false,
      editDialogVisible: false,
      rmObj: {
        protocolName: "",
      },
      editDialogTitle: "新增节点信息",
      ruleForm: {
        // 协议信息表单
        locationCode: "",
        nodeCode: "",
        locationCodeDescribe: "",
      },
      rules: {
        // 协议信息表单验证
        locationCode: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
        nodeCode: [{ required: true, message: "请输入跟踪节点标识符", trigger: "blur" }],
      },
      type: "",
      disFlag: false,
      typeObj: {},
    };
  },
  created () {
    // this.getTreeData();
  },
  methods: {
    //渲染节点
    renderContent (h, data) {
      return (
        <div onClick={() => this.renderSub(data)} class="account-left-content-teams">
          <div class="team">
            <div class="list">
              <div class="flex info">
                <div class="name">
                  <span>{data.locationCode}</span>
                  <span v-show={data.Type === 1 || data.Type === 2} onClick={(e) => this.onNodeEdit(data, e)} class="cap cap-edit icon"></span>
                </div>
                <div class="icon">
                  <span v-show={data.Type === 0 || data.Type === 1} onClick={(e) => this.onNodeSub(data, e)} class="cap cap-sub"></span>
                </div>
              </div>
              <div class="details">
                <div class="details-msg">{data.nodeCode}</div>
              </div>
            </div>
          </div>
          <div v-show={data.Type == 1 || data.Type >= 2} onClick={(e) => this.onNodeClick(data, e)} class="info-close">
            <i class={[data.Type === 1 ? "close1" : data.Type > 2 ? "close2" : "", "icon", "el-icon-close"]}></i>
          </div>
        </div>
      );
    },
    onNodeClick (data, e) {
      e.stopPropagation();
      this.rmObj = data;
      this.removeDialogVisible = true;
    },
    renderSub (data) {

    },
    onNodeSub (data, e) {
      e.stopPropagation();
      const { Type, nodeCode } = data;
      this.editDialogTitle = "新增节点信息";
      this.editDialogVisible = true;
      this.type = "add";
      this.typeObj = data;
      if (Type != 0) {
        this.disFlag = true;
        this.ruleForm.nodeCode = nodeCode;
      } else {
        this.disFlag = false;
        this.ruleForm.nodeCode = "";
      }
      this.ruleForm.locationCode = "";
      this.ruleForm.locationCodeDescribe = "";
    },
    onNodeEdit (data, e) {
      e.stopPropagation();
      this.editDialogTitle = "编辑节点信息";
      this.editDialogVisible = true;
      this.type = "edit";
      this.typeObj = data;
      this.ruleForm = data;
      this.disFlag = true;
    },
    // 新增/编辑-确认
    submitClickHandler () {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          const { Type } = this.typeObj;
          if (this.ruleForm.operate) {
            delete this.ruleForm.operate;
          }
          delete this.ruleForm.Type;
          delete this.ruleForm.children;
          if (this.type == "add") {
            if (Type == 0) {
              this.nodeTreeData(20, this.ruleForm);
            } else {
              this.nodeTreeData(21, this.ruleForm);
            }
          } else {
            this.ruleForm.operate = "2";
            this.nodeTreeData(21, this.ruleForm);
          }
          setTimeout(() => {
            this.resetForm("ruleForm");
          }, 100);
        }
      });
    },
    // 重置
    resetForm (formName) {
      // this.ruleForm = {}
      // if (this.type == 'add') {
      //   this.$refs[formName].resetFields()
      // }
      this.editDialogVisible = false;
    },
    // 删除-弹框
    showRemoveDialog (item) {
      this.rmObj = item;
      this.removeDialogVisible = true;
    },
    // 确认删除
    removeSubmit () {
      this.ruleForm = this.rmObj;
      this.ruleForm.operate = "3";
      this.nodeTreeData(21, this.ruleForm);
      this.removeDialogVisible = false;
      // this.$message.success('删除成功')
    },
    // 获取二级节点
    async getTreeData () {
      try {
        const { returnData, message } = await getQuery({
          id: DATACONTENT_ID.deployNodeId,
          dataContent: [],
        });
        if (returnData && returnData.length) {
          returnData.forEach((item) => {
            item["Type"] = 1;
            item["children"] = [{}];
          });
          this.dataList.children = returnData;
        } else {
          this.$message.error(message ?? "获取节点信息数据失败");
        }
      } catch (error) {
this.$message.error("失败");
      }
    },
    //节点操作
    async nodeTreeData (serviceId, dataContent) {
      try {
        const { message, code } = await generalDataReception({
          serviceId: `${serviceId}`,
          dataContent: JSON.stringify(dataContent),
        });
        if (code == 0) {
          this.$message.success(message ?? "操作成功");
          this.getTreeData();
        } else {
          this.$message.error(message ?? "操作失败");
        }
      } catch (error) {
this.$message.error("失败");
      }
    },
    //三级展开获取数据
    async expandData (data) {
      try {
        const { returnData, message } = await getQuery({
          id: DATACONTENT_ID.deployNodeThreeId,
          dataContent: [data.nodeCode],
        });
        if (returnData && returnData.length) {
          const datas = this.dataList.children;
          returnData.forEach((item) => {
            item["Type"] = 2;
          });
          datas.forEach((item) => {
            if (item.nodeCode == data.nodeCode) {
              item.children = returnData;
            }
          });
        } else {
          const arrs = this.dataList.children;
          arrs.forEach((item) => {
            if (item.locationCodeID == data.locationCodeID) {
              item["children"] = [];
            }
          });
          this.$message.error(message ?? "获取节点信息失败");
        }
      } catch (error) {
        this.$message.error("失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 20px;
}
</style>
