<!--
 * @Author: yaolunmao
-->
<template>
  <div class="rightNav">
    <el-tabs
      type="card"
      v-model.trim="activeName"
      class="components-layout-right"
      @tab-click="handleClick"
    >
      <el-tab-pane name="first" label="属性">
        <el-form :inline="true" label-position="left" label-width="80px">
          <el-form-item label="id:" label-width="20px">
            <p style="font-size: 12px">{{ svgInfo.id }}</p> </el-form-item
          ><br />
          <el-form-item label="类型:">
            <p>{{ selectSvgInfo.typeName }}</p>
          </el-form-item>
          <el-form-item label="名称:" class="box">
            <el-input v-model="selectSvg.title" placeholder="请输入组件名称" />
          </el-form-item>
          <el-form-item label="X轴坐标:">
            <el-input-number
              v-model="selectSvg.svgPositionX"
              aline="center"
              @change="$emit('svgDrag', svgInfo.id)"
              :min="0"
              :max="1920"
            />
          </el-form-item>
          <el-form-item label="Y轴坐标:">
            <el-input-number
              v-model="selectSvg.svgPositionY"
              @change="$emit('svgDrag', svgInfo.id)"
              :min="0"
              :max="1080"
            />
          </el-form-item>
          <el-form-item label="颜色:">
            <input type="color" v-model="selectSvg.svgColor" />
          </el-form-item>
          <el-form-item label="大小:">
            <el-input-number
              v-model="selectSvg.size"
              @change="$emit('svgDrag', svgInfo.id)"
              :min="1"
              :max="3000"
              :step="0.1"
            />
          </el-form-item>
          <el-form-item label="旋转:">
            <el-input-number
              v-model="selectSvg.angle"
              @change="$emit('svgDrag', svgInfo.id)"
              :min="0"
              :max="360"
            />
          </el-form-item>

          <el-form-item label="图元显示:" label-width="100px">
            <el-switch
              @change="changeDisplay"
              v-model="selectSvg.display"
              active-color="#13ce66"
              inactive-color="#ccc"
            >
            </el-switch>
          </el-form-item>
          <el-form-item
            v-show="selectSvg.typeName == '自定义表格'"
            label="表格列配置:"
            label-width="100px"
          >
            <el-button type="primary" @click="clickFn3" round
              >表格列编辑</el-button
            >
          </el-form-item>
          <!-- <el-form-item label="斑马纹:" label-width="100px" v-show="selectSvg.typeName=='自定义表格'">
          <el-switch
            v-model="selectSvg.tableborder"
            active-color="#13ce66"
            inactive-color="#ccc">
          </el-switch>
        </el-form-item> -->
          <!-- <el-form-item v-show="selectSvg.typeName=='自定义表格'" label="表格高度:" class="box">
          <el-input-number v-model="selectSvg.tableheight" :min="1" :max="3000" :step='0.1'/>
        </el-form-item> -->
          <el-form-item
            label="表格数据:"
            label-width="100px"
            v-show="selectSvg.typeName == '自定义表格'"
          >
            <el-button type="primary" @click="clickFn2" round
              >数据编辑</el-button
            >
          </el-form-item>
          <!-- <el-form-item v-show="selectSvg.typeName=='自定义表格'" label="表格尺寸:"  class="box">
          <el-select
          v-model="selectSvg.tablesize"
          placeholder="请选择"
          clearable
          option-label-prop="value"
          @change="changeFn2"
        >
          <el-option
            v-for="item in SizeData"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          >
          </el-option>
        </el-select>
        </el-form-item> -->
          <el-form-item
            v-show="
              selectSvg.typeName == 'Echart饼图' ||
              selectSvg.typeName == 'Echart基础柱状图'
            "
            label="图表配置:"
            label-width="100px"
          >
            <el-button type="primary" @click="clickFn">点击编辑</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" class="btn-sure">
              确定
            </el-button>
          </el-form-item> -->
        </el-form>
        <el-dialog
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          title="配置编辑"
          width="60%"
        >
          <editor
            v-model="content"
            @init="editorInit"
            lang="json"
            :options="editorOptions"
            theme="chrome"
            width="100%"
            height="500"
          ></editor>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onYesBtnClick">确定</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >关闭</el-button
            >
          </span>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane name="second" label="数据">
        <div class="bg-code">{{ selectSvgInfo }}</div>
        <el-tabs
          type="card"
          v-model.trim="activeName1"
          class="components-layout-right"
        >
          <el-tab-pane name="first" label="元素节点">
            <div>
              <el-form :inline="true" label-position="left" label-width="75px">
                <el-form-item label="节点筛选:" class="box">
                  <el-input placeholder="输入关键字" v-model="filterText">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <div style="height: 400px; overflow: scroll">
              <el-tree
                class="bg-code1"
                :data="data"
                :props="defaultProps"
                @node-click="handleNodeClick"
                :filter-node-method="filterNode"
                ref="tree"
              ></el-tree>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane name="bind" label="绑定">
        <el-form :inline="true" label-position="left" label-width="80px">
          <el-form-item
            v-show="selectSvg.type == 'TextSvg'"
            label="监测点:"
            class="box"
          >
            <el-cascader
              v-model="MonitoringTextSvgId"
              :options="Monitoring"
              ref="MonitoringTextSvgId"
              :props="defaultProps1"
              @change="handleMonitoringTextSvgClick"
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            v-show="selectSvg.type == 'TextbandinSvg'"
            label="监测点:"
            class="box"
          >
            <el-cascader
              v-model="MonitoringTextbandinSvgId"
              :options="Monitoring"
              :props="defaultProps1"
              @change="handleMonitoringTextbandinSvgClick"
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            v-show="selectSvg.type == 'TextbandinSvg'"
            label="指标绑定:"
            class="box"
          >
            <el-cascader
              v-model="selectSvg.UID"
              :options="typeData"
              ref="cascaderArr"
              :props="defaultProps2"
              :show-all-levels="false"
              @change="changeFn"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            label="状态绑定:"
            class="box"
            v-show="
              selectSvg.typeName == '电线开关-连接' ||
              selectSvg.typeName == '电线开关-断开' ||
              selectSvg.typeName == '断路器'
            "
          >
            <el-select
              v-model="selectSvg.status"
              placeholder="请选择"
              clearable
              option-label-prop="value"
              @change="changeFn1"
            >
              <el-option
                v-for="item in statusData"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { lineTree, target } from "@/api/configuration/configuration.js";
export default {
  props: ["svgInfo", "svgListsInfo"],
  data() {
    return {
      activeName: "first",
      activeName1: "first",
      dialogVisible: false,
      statusData: [
        {
          id: 0,
          value: "ON",
        },
        {
          id: 1,
          value: "OFF",
        },
      ],
      SizeData: [
        {
          value: 0,
          label: "默认",
        },
        {
          value: 1,
          label: "大",
        },
        {
          value: 2,
          label: "小",
        },
      ],
      typeData: [],
      defaultProps1: {
        children: "children",
        label: "name",
        value: "id",
        // expandTrigger: "hover",
      },
      defaultProps2: {
        children: "children",
        label: "showName",
        value: "id",
        // expandTrigger: "hover",
      },
      MonitoringTextSvgId: "",
      MonitoringTextbandinSvgId: "",
      num: "###",
      MonitoringTextSvgName: "",
      MonitoringTextbandinSvgName: "",
      Monitoring: [],
      selectSvg: {
        title: "",
        svgPositionX: "",
        svgPositionY: "",
        svgColor: "",
        size: "",
        angle: "",
        UID: "",
        status: undefined,
        display: true,
        tablesize: 0,
        tableborder: true,
        tableheight: "",
      },
      data: this.svgListsInfo,
      filterText: "",
      defaultProps: {
        children: "children",
        label: "title",
      },
      content: "",
      flag: "",
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        tabSize: 2,
        fontSize: 14,
        showPrintMargin: false, //去除编辑器里的竖线
      },
    };
  },
  created() {
    // this.attribute();
    this.monitoringRuery();
  },
  mounted() {},
  computed: {
    selectSvgInfo() {
      return this.svgInfo;
    },
  },
  methods: {
    //监测点查询
    async monitoringRuery() {
      await lineTree().then((res) => {
        this.Monitoring = this.getTreeData(res.data);
      });
    },
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续递归调⽤本⽅法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },

    //指标绑定
    // attribute() {
    //   lineTree().then((res) => {
    //     var arr = [];
    //     for (var i = 0; i < res.data.length; i++) {
    //       res.data[i].code = "aaa";
    //       for (var j = 0; j < res.data[i].children.length; j++) {
    //         res.data[i].children[j].code = "aaa";
    //         for (var k = 0; k < res.data[i].children[j].children.length; k++) {
    //           arr.push(res.data[i].children[j].children[k]);
    //         }
    //       }
    //     }
    //     res.data.forEach((item) => {
    //       item.children.forEach((item1) => {
    //         item1.children.forEach((item2) => {
    //           item2.children.forEach((item3) => {
    //             delete item3.children;
    //           });
    //         });
    //       });
    //     });
    //     this.typeData = res.data;
    //   });
    // },
    //点击编辑
    clickFn() {
      this.dialogVisible = true;
      this.flag = "echart";
     // console.log(this.svgInfo);
      if (this.svgInfo.echartsOption != "") {
        this.content = JSON.stringify(
          { data: this.svgInfo.echartsOption.series[0].data },
          null,
          2
        ); // 格式化
      } else {
        return;
      }
    },

    changeFn2() {},
    //数据编辑
    clickFn2() {
      this.dialogVisible = true;
      this.flag = "list";
      // console.log(this.svgInfo);
      if (this.svgInfo.list != "") {
        this.content = JSON.stringify({ data: this.svgInfo.list }, null, 2); // 格式化
      } else {
        return;
      }
    },
    //图元显示
    changeDisplay(val) {
      //console.log(this.svgInfo);
      this.$emit("setTableAttrDisplay", val);
      // let svgData=this.svgListsInfo
      // if(val==false){
      //   this.svgListsInfo=this.svgListsInfo.splice(this.svgListsInfo.findIndex(item=>item.id===this.svgListsInfo.id), 1)
      // }
    },
    //表格列编辑
    clickFn3() {
      this.dialogVisible = true;
      this.flag = "header";
      // console.log(this.svgInfo);
      if (this.svgInfo.tableHeader != "") {
        this.content = JSON.stringify(
          { data: this.svgInfo.tableHeader },
          null,
          2
        ); // 格式化
      } else {
        return;
      }
    },
    //配置编辑确定
    onYesBtnClick() {
      if (this.flag == "list") {
        this.svgInfo.list = JSON.parse(this.content).data;
      } else if (this.flag == "header") {
        this.svgInfo.tableHeader = JSON.parse(this.content).data;
      } else if (this.flag == "echart") {
        this.svgInfo.echartsOption.series[0].data = JSON.parse(
          this.content
        ).data;
      }
      this.dialogVisible = false;
    },
    handleClick(tab, event) {},
    editorInit() {
      require("brace/theme/chrome");
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/mode/yaml");
      require("brace/mode/json");
      require("brace/mode/less");
      require("brace/snippets/json");
    },
    //属性数据点击
    handleNodeClick(data) {
      // console.log(data);
      this.selectSvg = data;
      this.$emit("setTableAttrTree", data);
    },
    //文字属性监测点
    handleMonitoringTextSvgClick(data) {
      if (data.length != 4) {
        this.$message({
          message: "请选择监测点",
          type: "warning",
        });
        this.MonitoringTextSvgId = [];
        return;
      }
      let list =
        this.$refs["MonitoringTextSvgId"].getCheckedNodes()[0].pathNodes;

      // this.MonitoringTextSvgId = data;
      this.selectSvg.title = list[3].label;
      this.selectSvg.lineId = data;
      if (this.svgInfo) {
        this.$emit("setTableAttrUID", data);
      }
    },
    //绑定数据属性监测点
    handleMonitoringTextbandinSvgClick(data) {
      if (data != undefined) {
        if (data.length != 4) {
          this.$message({
            message: "请选择监测点",
            type: "warning",
          });
          this.MonitoringTextbandinSvgId = [];
          return;
        }

        // this.MonitoringTextbandinSvgId = data.id;
        // this.MonitoringTextbandinSvgName = data.name;
        // this.$refs.selectTree1.blur();
        // this.selectSvg.title = data.name;
        this.selectSvg.lineId = data;
        let form = {
          lineId: data[3],
        };
        target(form).then((res) => {
          var arr = [];
          for (var i = 0; i < res.data.length; i++) {
            res.data[i].code = "aaa";
            for (var j = 0; j < res.data[i].children.length; j++) {
              res.data[i].children[j].code = "aaa";
              for (
                var k = 0;
                k < res.data[i].children[j].children.length;
                k++
              ) {
                arr.push(res.data[i].children[j].children[k]);
              }
            }
          }
          // res.data.forEach((item) => {
          //   if (item.children == []) {
          //     delete item.children;
          //   } else {
          //     item.children.forEach((item1) => {
          //       if (item1.children == []) {
          //         delete item1.children;
          //       } else {
          //         item1.children.forEach((item2) => {
          //           if (item2.children == []) {
          //             delete item2.children;
          //           } else {
          //             item2.children.forEach((item3) => {
          //               // if(item3.children == []){
          //               delete item3.children;
          //               // }
          //             });
          //           }
          //         });
          //       }
          //     });
          //   }
          // });
          this.typeData = this.getTreeData(res.data);
          // ;
          setTimeout(() => {
            this.selectSvg.UID = JSON.parse(JSON.stringify(this.selectSvg)).UID;
          }, 100);
        });
      }
    },

    //指标绑定
    changeFn(val) {
     // console.log(val);
      if (val) {
        const checkedNode =
          this.$refs["cascaderArr"].getCheckedNodes()[0].pathNodes;
       // console.log(checkedNode, "222");
        this.selectSvg.UName =
          checkedNode[1].data.name +
          "$" +
          checkedNode[2].data.name +
          "$" +
          checkedNode[3].data.name;
        this.selectSvg.title =
          (checkedNode[2].data.showName == "无相别"
            ? ""
            : checkedNode[2].data.showName + "相") +
          checkedNode[1].data.showName +
          "-" +
          checkedNode[3].data.showName +
          ":" +
          this.num;
      }
     // console.log(this.selectSvg);
      if (this.svgInfo) {
        this.$emit("setTableAttrUID", val);
      }
    },
    //状态绑定
    changeFn1(val) {
      // console.log(val, "11111111111111");
      if (this.svgInfo) {
        this.$emit("setTableAttrStatus", val);
      }
    },
    //过滤
    filterNode(value, data) {
      // console.log(value, data);
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
  },
  watch: {
    "selectSvgInfo.tableRowCount": function (newVal) {
      this.$emit(
        "setTableAttr",
        this.selectSvgInfo.id,
        newVal,
        this.selectSvgInfo.tableColCount
      );
    },
    "selectSvgInfo.tableColCount": function (newVal) {
      this.$emit(
        "setTableAttr",
        this.selectSvgInfo.id,
        this.selectSvgInfo.tableRowCount,
        newVal
      );
    },
    selectSvg: function (newVal) {
      if (newVal.lineId != undefined) {
        if (newVal.type == "TextbandinSvg") {
          this.MonitoringTextbandinSvgId = newVal.lineId;
        } else if (newVal.type == "TextSvg") {
          this.MonitoringTextSvgId = newVal.lineId;
        }
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>
<style scoped lang="less">
.components-layout-right {
  .ant-tabs-bar {
    margin-bottom: 0 !important;
  }
  .ant-form-item-label {
    width: 100px !important;
    flex-shrink: 0;
  }
  .ant-input-number,
  input {
    width: 160px;
    border-color: #ddd;
    border-radius: 4px;
  }
  .ant-form-item-control {
    line-height: 24px !important;

    p {
      margin-bottom: 0 !important;
    }
  }

  .ant-form-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 0;
    margin-bottom: 0;
    flex-flow: nowrap;

    &::after {
      position: absolute;
      right: 15px;
      bottom: 0;
      bottom: 0;
      left: 15px;
      height: 1px;
      content: "";
    }

    &:last-child::after {
      content: unset;
    }
  }
}
::v-deep .box {
  .el-input {
    width: 160px;
  }
}
.btn-sure {
  width: 260px;
}
.bg-code {
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px 10px;
  color: #fff;
  background: #444;
  border-radius: 4px;
}
.bg-code1 {
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px 10px;
  color: #fff;
  background: #338484;
  // overflow: scroll;
  border-radius: 4px;
}
.rightNav {
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 300px !important;
  max-width: unset !important;
  min-width: unset !important;
  padding: 10px 20px;
  overflow: auto;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  // max-height: 1000px;
  padding: 0;
  overflow: hidden;
  overflow-y: hidden;
}

.el-select-dropdown__item.selected {
  font-weight: normal;
}

ul li > .el-tree .el-tree-node__content {
  height: auto;
  padding: 0 20px;
}

.el-tree-node__label {
  font-weight: normal;
}

.el-tree > .is-current .el-tree-node__label {
  font-weight: 700;
  color: #409eff;
}

.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
  font-weight: normal;
  color: #606266;
}

.el-popper {
  z-index: 9999;
}
.ification_col {
  display: inline-block;
  width: 20px;
  height: 10px;
}
</style>
