<template>
  <div class="flex-row" style="height: 100%;">
    <div class="flex1 panel flex-col" style="overflow: scroll">
      <div id="top">
        <span>所属实体类：{{classname}}</span>
        <h2 class="container-header-bj">
          <b>选择的实体: {{entityname}}</b>
          <a-button class="ant-btn ant-btn-primary" @click="handleEditEntity">编辑实体</a-button>
          <a-button v-if="version === 'base'" @click="goSta" style="margin-right: 100px">可视化统计</a-button>
        </h2>
      </div>

      <!-- 基础属性----------------------- -->
      <div id="attr01">
        <div style="position: relative">
          <h3>基础属性</h3>
        </div>

        <a-row class="attr-box" type="flex">
          <a-col
            style="margin-top: 20px;"
            :sm="24"
            :md="12"
            v-for="(item,index) in entAttr"
            :key="item.attrClsID"
          >
            <span class="attr-item-key" :title="item.attrClsName">{{item.attrClsName}}</span>：
            <a-input
              v-if="item.entAttrValueVO"
              style="width: 50%"
              type="text"
              v-model="item.entAttrValueVO.attrValue"
              :disabled="active1!==index"
            />
            <a-input
              v-else
              style="width: 50%"
              type="text"
              defaultValue
              :disabled="active1!==index"
            />&nbsp;
            <div class="attr-item-unit">{{item.attrUnit}}</div>
            <span v-show="isbtnshow">
              <button
                class="ant-btn ant-btn-primary"
                v-show="active1!==index"
                @click="edit(index,1)"
                :disabled="!item.entAttrValueVO"
              >编辑</button>
              <button
                class="ant-btn ant-btn-primary"
                v-show="active1==index"
                @click="save(index,1)"
              >保存</button>
            </span>
          </a-col>
        </a-row>
      </div>

      <!-- 能力属性----------------------- -->
      <div id="attr02">
        <div style="position: relative">
          <h3>能力属性</h3>
        </div>

        <a-row type="flex" class="attr-box">
          <a-col
            style="margin-top:20px;"
            :sm="24"
            :md="12"
            v-for="(item,index) in entAbleAttr"
            :key="item.attrClsID"
          >
            <span class="attr-item-key" :title="item.attrClsName">{{item.attrClsName}}</span>：
            <a-input
              v-if="item.entAttrValueVO"
              style="width: 50%"
              type="text"
              v-model="item.entAttrValueVO.attrValue"
              :disabled="active2!==index"
            />
            <a-input
              v-else
              style="width: 50%"
              type="text"
              defaultValue
              :disabled="active2!==index"
            />&nbsp;
            <div class="attr-item-unit">{{item.attrUnit}}</div>
            <span v-show="isbtnshow">
              <button
                class="ant-btn ant-btn-primary"
                v-show="active2!==index"
                @click="edit(index,2)"
                :disabled="!item.entAttrValueVO"
              >编辑</button>
              <button
                class="ant-btn ant-btn-primary"
                v-show="active2==index"
                @click="save(index,2)"
              >保存</button>
            </span>
          </a-col>
        </a-row>
      </div>

      <!-- 无类型属性---------------------- -->
      <div id="attr03">
        <div style="position: relative">
          <h3>无类型属性</h3>
        </div>

        <a-row type="flex" class="attr-box">
          <a-col
            style="margin-top:20px;"
            :sm="24"
            :md="12"
            v-for="(item,index) in entNoneAttr"
            :key="item.attrClsID"
          >
            <span class="attr-item-key" :title="item.attrClsName">{{item.attrClsName}}</span>：
            <a-input
              v-if="item.entAttrValueVO"
              style="width: 50%"
              type="text"
              v-model="item.entAttrValueVO.attrValue"
              :disabled="active3!==index"
            />
            <a-input
              v-else
              style="width: 50%"
              type="text"
              defaultValue
              :disabled="active3!==index"
            />&nbsp;
            <div class="attr-item-unit">{{item.attrUnit}}</div>
            <span v-show="isbtnshow">
              <button
                class="ant-btn ant-btn-primary"
                v-show="active3!==index"
                @click="edit(index,3)"
                :disabled="!item.entAttrValueVO"
              >编辑</button>
              <button
                class="ant-btn ant-btn-primary"
                v-show="active3==index"
                @click="save(index,3)"
              >保存</button>
            </span>
          </a-col>
        </a-row>
      </div>
      <!-- 关系属性----------------------- -->
      <div id="attr04">
        <div style="position: relative">
          <h3>关系属性</h3>
          <!-- <button @click="createRelation" class="attr-btn">新建关系</button> -->
        </div>
        <div class="attr-box">
          <relation-editor
            :entName="entityname"
            :entid="this.$route.params.entId"
            :classid="this.$route.params.entClsId"
          ></relation-editor>
        </div>
      </div>
    </div>
    <div id="leftPanel" class="flex-col tagAttr panel" style="position: relative;">
      <tag-editor :entid="this.$route.params.entId" :classid="this.$route.params.entClsId"></tag-editor>
      <div class="dingwei">
        <a class="dw-item" :class="{active:isactive==0}" @click="handleClick('#attr01',0)">基础属性</a>
        <a class="dw-item" :class="{active:isactive==1}" @click="handleClick('#attr02',1)">能力属性</a>
        <a class="dw-item" :class="{active:isactive==2}" @click="handleClick('#attr03',2)">无类型属性</a>
        <a class="dw-item" :class="{active:isactive==3}" @click="handleClick('#attr04',3)">关系属性</a>
        <a class="dw-item" :class="{active:isactive==4}" @click="handleClick('#top',4)">返回顶部</a>
      </div>
    </div>
  </div>
</template>




<script>
import { getEntityDetailById } from "@/api/graph/entity"
import { getEntityAttrById, updateEntityAttr } from "@/api/graph/entityAttrEditor"

// var odiv
export default {
  data() {
    return {
      // 版本控制
      version: window.global.const.version,
      // 多语言
      entID: "",
      classID: "",

      classname: "",
      entityname: "",
      entMemo: "",

      active1: -1,
      active2: -1,
      active3: -1,
      // 基础属性
      entAttr: [],
      //无属性
      entNoneAttr: [],
      // 能力属性
      entAbleAttr: [],
      isactive: -1,
      isbtnshow: false,
      
    };
  },
  components: {
  },
  mounted() {
    this.entID = this.$route.params.entId;
    this.classID = this.$route.params.entClsId;
    this.init();
    // this.getEntityAttr(this.entID, this.entType);
    // odiv = document.getElementById('move');
    // 基础
    this.getAttr(this.entID, "ELEM");
    // 无属性
    this.getAttr(this.entID, "NONE");
    // 能力
    this.getAttr(this.entID, "CIDX");
  },
  methods: {
    // 获取实体类名、实体名
    init() {
      const _vm = this;
      getEntityDetailById(this.entID).then(data => {
        this.entityname = data.entName;
        this.classname = data.entClsName;
        this.entMemo = data.entMemo;
      });
    },
    // 获取属性
    getAttr(id, type) {
      const data = {
        attrType: type
      };
      if (type == "ELEM") {
        getEntityAttrById(id, data).then(data => {
          this.entAttr = data;
        });
      }
      if (type == "NONE") {
        getEntityAttrById(id, data).then(data => {
          this.entNoneAttr = data;
        });
      }
      if (type == "CIDX") {
        getEntityAttrById(id, data).then(data => {
          this.entAbleAttr = data;
        });
      }
    },

    handleEditEntity() {
      this.$open(
        "addEntityModal",
        {
          title: "编辑实体",
          isLink: true, // 添加路由后改变路由
          entityName: this.entityname, // 实体名字
          entityMemo: this.entMemo,
          entityId: this.entID // 实体id
        },
        function(data) {
          if (data) {
            this.init();
            this.$trigger("entity:entityInfoEdited", data);
          }
        }
      );
      this.isbtnshow = true;
    },

    edit(index, type) {
      if (type == 1) {
        this.active1 = index;
      } else if (type == 2) {
        this.active2 = index;
      } else {
        this.active3 = index;
      }
    },
    save(index, type) {
      if (type == 1) {
        this.active1 = -1;
        let target = this.entAttr[index];
        var params = {
          attrID: !target.entAttrValueVO ? "" : target.entAttrValueVO.attrID,
          attrMemo: !target.entAttrValueVO
            ? ""
            : target.entAttrValueVO.attrMemo,
          attrType: "ELEM",
          attrValue: target.entAttrValueVO.attrValue,
          entID: this.entID,
          attrClsID: target.attrClsID
        };
        updateEntityAttr(params).then(result => {
          if (result !== false) {
            this.init();
          }
        });
      } else if (type == 2) {
        this.active2 = -1;
        let target = this.entAbleAttr[index];
        var params = {
          attrID: !target.entAttrValueVO ? "" : target.entAttrValueVO.attrID,
          attrMemo: !target.entAttrValueVO
            ? ""
            : target.entAttrValueVO.attrMemo,
          attrType: "CIDX",
          attrValue: target.entAttrValueVO.attrValue,
          entID: this.entID,
          attrClsID: target.attrClsID
        };
        updateEntityAttr(params).then(result => {
          if (result !== false) {
            this.init();
          }
        });
      } else {
        this.active3 = -1;
        let target = this.entNoneAttr[index];
        var params = {
          attrID: !target.entAttrValueVO ? "" : target.entAttrValueVO.attrID,
          attrMemo: !target.entAttrValueVO
            ? ""
            : target.entAttrValueVO.attrMemo,
          attrType: "NONE",
          attrValue: target.entAttrValueVO.attrValue,
          entID: this.entID,
          attrClsID: target.attrClsID
        };
        updateEntityAttr(params).then(result => {
          if (result !== false) {
            this.init();
          }
        });
      }
    },

    handleClick(link, index) {
      this.isactive = index;
      document.querySelector(link).scrollIntoView(true);
    },
    goSta () {
      window.location.href = `#/sta?entId=${this.entID}&entName=${this.entityname}`
    }
  }
};
</script>

<style scoped>
.container-header-bj {
  position: relative;
}
.container-header-bj .ant-btn {
  position: absolute;
  right: 0;
  top: 0;
}
.tagAttr {
  width: 300px;
  background: #fff;
}
.ant-tag {
  margin-top: 20px !important;
}
#attr01,
#attr02,
#attr03,
#attr04 {
  margin-top: 50px;
}
#attr01 h3,
#attr02 h3,
#attr03 h3,
#attr04 h3 {
  padding-left: 20px;
  padding-bottom: 10px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}
#attr01 h3:before,
#attr02 h3:before,
#attr03 h3:before,
#attr04 h3:before {
  content: "";
  display: block;
  width: 4px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 3px;
  background: #0aa679;
}

.attr-btn {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -15px;
}

.ant-input:read-only {
  border: none;
}

.ant-input:read-only:focus {
  box-shadow: none;
}
.attr-box {
  margin-top: 30px;
  padding: 10px 20px 40px;
  border-radius: 4px;
  background: #edf2f9;
}
.attr-item-key {
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
.attr-item-unit {
  display: inline-block;
  min-width: 30px;
}
input:disabled {
  color: #333;
  border: none;
  background: none;
  border: 1px solid #edf2f9;
  border-bottom: 1px solid #d9d9d9;
}
input:disabled:hover {
  border: none;
  background: none;
  border: 1px solid #edf2f9;
  border-bottom: 1px solid #d9d9d9;
  box-shadow: none;
}
.dingwei {
  position: absolute;
  bottom: 150px;
  height: 180px;
  left: 0;
  right: 0;
  box-sizing: border-box;
  background: #fff;
}
.dw-item {
  position: relative;
  width: 100%;
  padding: 5px 30px;
  display: block;
  color: #999;
}
.dw-item.active {
  color: #27b386;
  font-weight: bold;
}

.dw-item.active:before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 20px;
  top: 50%;
  margin-top: -2px;
  background: #27b386;
  border-radius: 2px;
}
</style>
