<template>
  <div id="divGraphEdit" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="firstRow">
      <div class="firstOperDivContainer">
        <img
          class="imgBar"
          src="../../assets/images/systemGraph/editLogo.svg"
        />
        <span class="headerTitle">系统图编辑器</span>
        <div class="operBtnDiv" v-if="operState === 0">
          <!-- <span>回到首页</span> -->
          <span @click="intoEditState">编辑系统图</span>
          <span
            v-if="(graphInfo.extraProps || {}).state == 'Draft'"
            @click="publishGraph"
            >上架系统图</span
          >
          <span
            v-if="(graphInfo.extraProps || {}).state == 'Publish'"
            @click="draftGraph"
            >下架系统图</span
          >
        </div>
        <div class="operBtnDiv" v-if="operState === 1">
          <span>保存图纸</span>
          <span @click="cancelClick">放弃编辑</span>
        </div>
        <span class="delBtn" @click="delGraph">删除图纸</span>
      </div>
      <div class="secondOperDivContainer">
        <img
          class="imgBar"
          src="../../assets/images/systemGraph/barController.svg"
        />
        <span class="el-icon-caret-bottom sanjiaoBar"></span>
        <hr class="splitLine" />
        <el-select v-model="selectScale" value-key="value">
          <el-option
            v-for="item in scaleArr"
            :key="item.value"
            :label="item.name"
            :value="item"
          >
          </el-option>
        </el-select>
        <span class="el-icon-zoom-in zoomin"></span>
        <span class="el-icon-zoom-out zoomout"></span>
        <hr class="splitLine" v-if="operState == 1" />
        <img
          v-if="operState == 1"
          class="imgLeftTop"
          src="../../assets/images/systemGraph/leftTop.svg"
        />
        <img
          v-if="operState == 1"
          class="rightLeftTop"
          src="../../assets/images/systemGraph/rightTop.svg"
        />
        <hr class="splitLine" v-if="operState == 1" />
        <img
          v-if="operState == 1"
          class="imgLeftTop"
          src="../../assets/images/systemGraph/text.svg"
        />
        <span class="resetBtn" v-if="operState == 1">重置为自动出图样式</span>
      </div>
    </div>
    <div class="secondRow">
      <div class="graphInfoContainer" v-if="operState === 0 || operState === 1">
        <div class="graphInfoFirst">
          <span class="graphInfoName">系统图名称</span>
          <span class="graphInfoFirstEdit" @click="intoEditState">编辑</span>
        </div>
        <div class="graphInfoContent">
          <span>高压系统1#系统图</span>
        </div>

        <div class="graphInfoName">
          <span>系统图类型</span>
        </div>
        <div class="graphInfoContent">
          <span>高压配电</span>
        </div>

        <div class="graphInfoName">
          <span>系统实例</span>
        </div>
        <div class="graphInfoContent">
          <span>实例1</span>
        </div>

        <div class="graphInfoName">
          <span>系统图模版</span>
        </div>
        <div class="graphInfoContent">
          <span>模版1</span>
        </div>

        <div class="graphInfoName">
          <span>所属项目</span>
        </div>
        <div class="graphInfoContent">
          <span>银泰中心</span>
        </div>

        <div class="graphInfoName">
          <span>当前状态</span>
        </div>
        <div class="graphInfoContent">
          <span>草稿</span>
        </div>
      </div>
      <div class="graphRegion">
        <graph ref="graphc" @click="graphClickCall"></graph>
      </div>
      <div class="rightDetail" v-if="selGraphPartType != -1">
        <div v-if="selGraphPartType == 1">
          <div class="title titleMargin">设备类</div>
          <div class="titleText eqName" v-text="selEquip.name">进线柜</div>
          <div class="detailSplitLine"></div>
          <div class="title titleMargin">
            <span>x</span>
            <span
              class="coridTitleText titleText"
              v-text="(selEquip.absolutePosition || {}).x"
              >100</span
            >
            <span class="coridTitle2">y</span>
            <span
              class="coridTitleText titleText"
              v-text="(selEquip.absolutePosition || {}).y"
              >100</span
            >
          </div>
          <div class="title titleMargin">
            <span>比例</span>
            <span class="scaleTitleText titleText">100%</span>
          </div>
          <div class="detailSplitLine"></div>
          <div class="title titleMargin">锚点</div>
          <div
            class="anchorContainer"
            v-for="anchor in selEquip.anchorArr"
            :key="anchor.name"
          >
            <span v-text="anchor.name">T3</span>
            <span>已连接</span>
          </div>
        </div>
        <div v-if="selGraphPartType == 2">
          <div class="title titleMargin">连线</div>
          <div class="detailSplitLine"></div>
          <div>
            <div class="title titleMargin">起点</div>
            <div class="coridGroup title">
              <span>x</span>
              <span class="coridTitleText titleText">100</span>
              <span class="coridTitle2">y</span>
              <span class="coridTitleText titleText">100</span>
            </div>
          </div>
          <div>
            <div class="title titleMargin">拐点1</div>
            <div class="coridGroup title">
              <span>x</span>
              <span class="coridTitleText titleText">100</span>
              <span class="coridTitle2">y</span>
              <span class="coridTitleText titleText">100</span>
            </div>
          </div>
          <div class="detailSplitLine"></div>
          <div class="title titleMargin">连接关系</div>
          <div class="titleMargin">
            <el-select
              v-model="selLineStartPoint"
              value-key="id"
              @change="selStartPointChange"
            >
              <div slot="prefix" class="selectPrefix">起点</div>
              <el-option
                v-for="item in lineStartPointArr"
                :key="item.id"
                :label="item.name"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <div class="titleMargin">
            <el-select
              v-model="selLineEndPoint"
              value-key="id"
              @change="selEndPointChange"
            >
              <div slot="prefix" class="selectPrefix">终点</div>
              <el-option
                v-for="item in lineEndPointArr"
                :key="item.id"
                :label="item.name"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div v-if="selGraphPartType == 3">
          <div class="title titleMargin">文字</div>
          <div class="titleText eqName">1#进线柜</div>
          <div class="detailSplitLine"></div>
          <div class="title titleMargin">
            <span>x</span>
            <span class="coridTitleText titleText">100</span>
            <span class="coridTitle2">y</span>
            <span class="coridTitleText titleText">100</span>
          </div>
          <div class="detailSplitLine"></div>
          <div class="title titleMargin">字体样式</div>
          <div class="titleMargin fontSizeContainer">
            <img
              src="@/assets/images/systemGraph/fontStyle.svg"
              class="fontStyleSvg"
            />
            <el-select
              v-model="selFontSize"
              value-key="id"
              @change="selFontSizeChange"
              placeholder=""
            >
              <el-option
                v-for="item in fontSizeArr"
                :key="item.id"
                :label="item.name"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <div class="title titleMargin">字体颜色</div>
          <div class="titleMargin fontColor">
            <input type="color" v-model="fontColor" />
            <div v-text="fontColor"></div>
            <div>100%</div>
          </div>
          <div class="title titleMargin">背景颜色</div>
          <div class="titleMargin fontColor">
            <input type="color" v-model="backColor" />
            <div v-text="backColor"></div>
            <div>100%</div>
          </div>
        </div>
        <div class="delBtn" v-if="selGraphPartType == 1">删除设备</div>
        <div class="delBtn" v-if="selGraphPartType == 2">删除管线</div>
        <div class="delBtn" v-if="selGraphPartType == 3">删除文字</div>
      </div>
    </div>

    <addGraph
      :isVisible="operState == 2"
      @created="createSuccessed"
      v-if="operState == 2"
    ></addGraph>
  </div>
</template>
<script>
import { sysGraphController } from "@/controller/sysGraphController";
import addGraph from "./addGraph.vue";
import graph from "./graph.vue";
import { logicConfig } from "@/logicConfig";
import { Message } from "element-ui";
import Vue from "vue";

export default {
  props: [],
  data() {
    return {
      fullscreenLoading: false,
      //缩放范围
      scaleArr: [
        {
          name: "25%",
          value: 25,
        },
        {
          name: "50%",
          value: 50,
        },
        {
          name: "75%",
          value: 75,
        },
        {
          name: "100%",
          value: 100,
        },
        {
          name: "150%",
          value: 150,
        },
      ],
      //选择的缩放范围
      selectScale: {},
      //操作状态  0 预览； 1 编辑；  2 新建
      operState: -1,
      //系统图ID
      diagramId: "",
      /**
       * 选择的系统图上的区域的类型
       * -1 什么也没选； 1 设备;    2 线;   3 文字
       */
      selGraphPartType: -1,
      //线的起点数组，用于右侧详情选择
      lineStartPointArr: [
        {
          id: "111",
          name: "1#设备-B1",
        },
        {
          id: "222",
          name: "1#设备-B2",
        },
      ],
      //选择的线的起点，用于右侧详情选择
      selLineStartPoint: {
        id: "111",
        name: "1#设备-B1",
      },
      //线的终点数组，用于右侧详情选择
      lineEndPointArr: [
        {
          id: "111",
          name: "2#设备-B1",
        },
        {
          id: "222",
          name: "2#设备-B2",
        },
      ],
      //选择的线的终点，用于右侧详情选择
      selLineEndPoint: {
        id: "111",
        name: "2#设备-B1",
      },
      //字号数组
      fontSizeArr: [
        {
          id: 12,
          name: "12px",
        },
        {
          id: 14,
          name: "14px",
        },
        {
          id: 16,
          name: "16px",
        },
      ],
      //选择的字号
      selFontSize: {},
      //字体颜色
      fontColor: "#eb5757",
      //背景颜色
      backColor: "#ffffff",
      //系统图数据
      graphInfo: {},
      /**
       * 选择的设备，格式如下：
       * {
            id: "",
            name:'',
            legendObj: {
              content: "图的地址或base64串",
              size: {
                width: 12,
                height: 12,
              },
            },
            //设备的绝对位置
            absolutePosition: {
              x: 1,
              y: 1,
            },
            anchorArr:[{
              name:'锚点名称',
              //锚点相对于设备图例的位置
              relativePosition:{
                x:1,y:1
              }
            }]
          }
       */
      selEquip: {},
    };
  },
  computed: {},
  methods: {
    /**
     * 新建成功后执行的操作
     * graphInfo 系统图数据
     */
    createSuccessed: function (graphInfo) {
      //进入编辑状态
      this.operState = 1;
      this.graphInfo = graphInfo;
      this.$refs.graphc.drawEntry(graphInfo);
    },
    //线的起点选择事件
    selStartPointChange: function () {
      console.log(this.selLineStartPoint);
    },
    //线的终点选择事件
    selEndPointChange: function () {
      console.log(this.selLineEndPoint);
    },
    //字号选择事件
    selFontSizeChange: function () {},
    //根据系统图ID获取系统图数据
    getDiagramById: async function () {
      this.fullscreenLoading = true;
      var resultObj = await sysGraphController.getDiagramById(this.diagramId);
      if (resultObj.result != logicConfig.resultObj.success) {
        this.fullscreenLoading = false;
        Message.error(resultObj.reason);
        return;
      }
      this.graphInfo = resultObj.data;
      this.fullscreenLoading = false;
    },
    //进入编辑模式
    intoEditState: function () {
      this.operState = 1;
    },
    /**
     * 设备、线、文本点击事件的回调
     * dataObj 解析后的数据
     * type 1 设备；  2 线；  3 文本
     */
    graphClickCall: function (dataObj, type) {
      this.selGraphPartType = type;
      this.selEquip = dataObj || {};
      var _this = this;
      Vue.nextTick(function () {
        _this.$refs.graphc.resetDraw();
      });
    },
    /**
     * 放弃编辑按钮事件
     */
    cancelClick: function () {
      this.operState = 0;
    },
    //上架系统图
    publishGraph: async function () {
      this.fullscreenLoading = true;
      var resultObj = await sysGraphController.publishSysGraph(this.diagramId);
      this.fullscreenLoading = false;
      switch (resultObj.result) {
        case logicConfig.resultObj.success:
          // this.graphInfo.
          return Message.success("上架成功");
        case logicConfig.resultObj.failure:
          return Message.success("上架失败，原因：" + (resultObj.reason || ""));
      }
    },
    //下架系统图
    draftGraph: async function () {
      this.fullscreenLoading = true;
      var resultObj = await sysGraphController.draftGraph(this.diagramId);
      this.fullscreenLoading = false;
      switch (resultObj.result) {
        case logicConfig.resultObj.success:
          return Message.success("下架成功");
        case logicConfig.resultObj.failure:
          return Message.success("下架失败，原因：" + (resultObj.reason || ""));
      }
    },
    //删除系统图
    delGraph: async function () {
      this.fullscreenLoading = true;
      var resultObj = await sysGraphController.delSysGraph(this.diagramId);
      this.fullscreenLoading = false;
      switch (resultObj.result) {
        case logicConfig.resultObj.success:
          return Message.success("删除图纸成功");
        case logicConfig.resultObj.failure:
          return Message.success("删除图纸失败，原因：" + (resultObj.reason || ""));
      }
    },
  },
  created() {
    this.operState = !this.$route.query.ost
      ? -1
      : parseInt(this.$route.query.ost);
    this.diagramId = !this.$route.query.did ? -1 : this.$route.query.did;
    this.selectScale = this.scaleArr[3];
  },
  mounted() {
    var _this = this;
    (async function () {
      //操作状态  0 预览； 1 编辑；  2 新建
      if (_this.operState === 0 || _this.operState === 1) {
        await _this.getDiagramById();
        _this.$refs.graphc.drawEntry(_this.graphInfo);
      }
    })();
  },
  components: {
    addGraph,
    graph,
  },
};
</script>

<style>
#divGraphEdit {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#divGraphEdit .firstRow {
  height: 96px;
  background: #ffffff;
  box-shadow: 0px 2px 10px rgb(31 36 41 / 10%);
  display: flex;
  flex-direction: column;
  z-index: 2;
}

#divGraphEdit .firstOperDivContainer {
  flex: 1;
  border-bottom: solid 1px #f2f2f2;
  line-height: 48px;
}

#divGraphEdit .firstOperDivContainer > span:not(:first-child),
#divGraphEdit .operBtnDiv span {
  cursor: pointer;
}

#divGraphEdit .secondOperDivContainer {
  flex: 1;
}

#divGraphEdit .headerTitle {
  font-weight: 600;
  margin-left: 15px;
}

#divGraphEdit .operBtnDiv {
  display: inline-block;
  margin-left: 52px;
  font-weight: 500;
}

#divGraphEdit .operBtnDiv span {
  margin-left: 20px;
}

#divGraphEdit .delBtn {
  float: right;
  margin-right: 49px;
}

#divGraphEdit .imgBar {
  margin-left: 33px;
}

#divGraphEdit .sanjiaoBar {
  vertical-align: middle;
}

#divGraphEdit .splitLine {
  display: inline-block;
  height: 30px;
  border-left: solid 1px #d8d8d8;
  vertical-align: middle;
  margin-left: 26px;
  border-top: none;
}

#divGraphEdit .secondOperDivContainer input {
  border: none !important;
  width: 66px;
  padding: 0;
}

#divGraphEdit .secondOperDivContainer .el-select {
  margin-left: 26px;
}

#divGraphEdit .zoomin {
  margin-left: 20px;
}

#divGraphEdit .zoomout {
  margin-left: 14px;
}

#divGraphEdit .imgLeftTop {
  margin-left: 26px;
}

#divGraphEdit .rightLeftTop {
  margin-left: 22px;
}

#divGraphEdit .resetBtn {
  float: right;
  margin-right: 49px;
  line-height: 48px;
  cursor: pointer;
}

#divGraphEdit .secondRow {
  flex: 1;
  display: flex;
  flex-direction: row;
}

#divGraphEdit .graphInfoContainer {
  background: #fafafa;
  width: 200px;
  height: 100%;
  box-shadow: 0px 0px 1px rgb(0 0 0 / 25%);
}

#divGraphEdit .graphInfoFirst {
  margin-top: 31px;
}

#divGraphEdit .graphInfoName {
  margin-left: 12px;
  margin-top: 21px;
}

#divGraphEdit .graphInfoFirstEdit {
  margin-right: 12px;
  float: right;
  color: #0091ff;
  cursor: pointer;
}

#divGraphEdit .graphInfoContent {
  margin-top: 12px;
  margin-left: 36px;
}

#divGraphEdit .graphRegion {
  flex: 1;
  height: 100%;
  overflow: hidden;
}

#divGraphEdit .rightDetail {
  width: 200px;
  height: 100%;
  background: #fafafa;
  box-shadow: -1px 0px 1px rgb(0 0 0 / 25%);
  box-sizing: border-box;
  padding: 6px 12px 12px 12px;
}

#divGraphEdit .rightDetail > div:first-child {
  height: 100%;
}

#divGraphEdit .rightDetail .title {
  color: #6f777f;
  font-size: 12px;
}

#divGraphEdit .rightDetail .titleMargin {
  margin-top: 19px;
}

#divGraphEdit .rightDetail .coridGroup {
  margin-top: 9px;
}

#divGraphEdit .rightDetail .titleText {
  font-size: 14px;
  color: #000000;
}

#divGraphEdit .rightDetail .eqName {
  margin-top: 11px;
}

#divGraphEdit .rightDetail .detailSplitLine {
  width: 100%;
  height: 0;
  margin-top: 19px;
  border-bottom: 1px solid #979797;
}

#divGraphEdit .rightDetail .coridTitle2 {
  margin-left: 45px;
}

#divGraphEdit .rightDetail .coridTitleText {
  margin-left: 23px;
}

#divGraphEdit .rightDetail .scaleTitleText {
  margin-left: 6px;
}

#divGraphEdit .rightDetail .anchorContainer {
  margin-top: 15px;
}

#divGraphEdit .rightDetail .anchorContainer > span:last-child {
  margin-left: 22px;
}

#divGraphEdit .rightDetail .delBtn {
  color: #eb5757;
  position: absolute;
  bottom: 16px;
  margin-left: 62px;
}

#divGraphEdit .rightDetail .selectPrefix {
  color: #000000;
  font-size: 14px;
  height: 100%;
  line-height: 32px;
}

#divGraphEdit .rightDetail .el-input__inner {
  padding-left: 42px;
}

#divGraphEdit .rightDetail .fontSizeContainer .el-input__inner {
  padding: 0 15px;
  width: 80px;
}

#divGraphEdit .rightDetail .fontSizeContainer .el-select {
  margin-left: 42px;
}

#divGraphEdit .rightDetail .fontColor {
  position: relative;
}

#divGraphEdit .rightDetail .fontColor input {
  border: none;
  background: none;
  width: 30px;
  height: 31px;
  padding: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}

#divGraphEdit .rightDetail .fontColor > div {
  line-height: 31px;
  display: inline-block;
}

#divGraphEdit .rightDetail .fontColor div:nth-child(2) {
  margin-left: 43px;
}

#divGraphEdit .rightDetail .fontColor div:nth-child(3) {
  margin-left: 16px;
}

#divGraphEdit img {
  vertical-align: middle;
}
</style>