<template>
  <div class="vdr_basicInfo">
    <vue-draggable-resizable
      class="vdrbasicInfo"
      :parent="true"
      :w="350"
      :h="760"
      style="z-index: 1;"
      :minw="350"
      :minh="760"
      :active="true"
      :drag-cancel="'.cancel'"
      :handles="['br']"
      :x="modelView_x"
      :y="20"
      @deactivated="onDeactivated"
      :resizable="false"
    >
    <!-- :h="650" -->
      <div class="div_tree">
        <div class="tree_top">
          <span>基本信息</span>
          <img class="top_img" @click="hide" src="@/assets/shanchu.png">
        </div>
        <div
          class="filter-tree"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
        <div v-if="!tips" class="tree_tops">
          <p class="tops_p">类型名称：
            <el-tooltip
            class="item"
            effect="dark"
            :content="nameLeft"
            placement="top"
            :enterable="false"
            :disabled="nameLen <= 36"
          >
          <span>{{nameLeft}}</span>
          </el-tooltip>
          </p>
          <p class="tops_p">所属分类：{{nameCenter}}</p>
          <p class="tops_p">标识：{{nameRight}}</p>
          <p style="padding-top: 10px;">参数表：</p>
        </div>
        <div style="height:575px;width: 349px;">
          <el-scrollbar style="height:100%;width: 100%;" ref='myScrollbar'>
            <p class="tips" v-if="tips">暂无内容,请选择模型</p>
            <table style="width:100%;height:100%;">
              <tbody>
                <tr class="table_tr" v-for="item of fileList" :key="item.id">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.name"
                    placement="top"
                    :enterable="false"
                    :disabled="item.leftLength <= 12"
                  >
                    <td class="tr_left">{{item.name}}</td>
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.val + item.displayUnit"
                    placement="top"
                    :enterable="false"
                    :disabled="item.rightLength <= 23"
                  >
                    <td class="tr_right">{{item.val + item.displayUnit}}</td>
                  </el-tooltip>
                </tr>
              </tbody>
            </table>
          </el-scrollbar>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <!-- <el-button class="edits" @click="more">更 多</el-button> -->
        </div>
      </div>
    </vue-draggable-resizable>
  </div>
</template>

<script>
export default {
  name: 'basicInfo',
  data() {
    return {
      // 所属分类
      nameLeft: '',
      // 标识
      nameCenter: '',
      // 参数表
      nameRight: '暂无数据',
      loading: false,
      // 接口返回无数据是为true
      tips: false,
      // 横轴坐标（左上角0点）
      modelView_x: 700,
      // 竖轴坐标（左上角0点）
      modelView_y: 0,
      fileList: [],
      modelViewUid: '',
      nameLen: 0
    };
  },
  methods: {
    onDeactivated() { },
    strlen(str) {
      // 字符串长度精确算法
      let len = 0;
      for (let i = 0; i < str.length; i++) {
        const c = str.charCodeAt(i);
        // 单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
          len++;
        } else {
          len += 2;
        }
      }
      return len;
    },
    search() {
      // 列表查询
      const projectTem = {
        projectNo: '',
        stagingNo: ''
      };
      const projects = this.$store.state.tree.projectNoType
        ? JSON.parse(this.$store.state.tree.projectNoType) : projectTem;
      const projectNo = sessionStorage.getItem('uuIds')
        ? JSON.parse(sessionStorage.getItem('uuIds')).projectNo
        : projects.projectNo;
      const stagingNo = sessionStorage.getItem('uuIds')
        ? JSON.parse(sessionStorage.getItem('uuIds')).stagingNo
        : projects.stagingNo;
      console.log('stagingNo333333333333333333333====================', stagingNo);
      this.loading = true;
      this.$axios(
        '/artifacts/queryArtifactsAttrs',
        {
          viewId: sessionStorage.getItem('tree-viewId') || '',
          uId: this.modelViewUid || '',
          projectNo: projectNo || '',
          stagingNo: stagingNo || ''
        },
        'POST'
      ).then(data => {
        this.loading = false;
        this.nameLeft = '';
        this.nameCenter = '';
        this.nameRight = '';
        if (data && data.data && data.data.value && data.data.value.length > 0) {
          this.tips = false;
          this.fileList = [];
          // this.fileList = data.data.value;
          data.data.value.forEach(element => {
            // 拼接数据
            if (element && element.name) {
              if (element.name === '类型') {
                const nameLen = this.strlen(element.val);
                this.nameLeft = element.val;
                this.nameLen = nameLen;
              } else if (element.name === '构件归属') {
                this.nameCenter = element.val;
              } else if (element.name === '标识') {
                this.nameRight = element.val;
              } else {
                const leftLength = this.strlen(element.name);
                const valLength = this.strlen(element.val);
                const displayUnitLength = this.strlen(element.displayUnit);
                const rightLength = valLength + displayUnitLength;
                element.leftLength = leftLength;
                element.rightLength = rightLength;
                this.fileList.push(element);
              }
            }
          });
          // 刷新后滚动条回到顶部
          this.$refs['myScrollbar'].wrap.scrollTop = 0;
          console.log(this.fileList, this.names);
        } else {
          this.fileList = [];
          this.tips = true;
        }
      }).catch(resultMsg => {
        this.loading = false;
        // console.log('queryArtifactsAttrs requst error', resultMsg);
      });
    },
    hide() {
      // 关闭属性组件
      this.$emit('basicInfoSwitch', false);
      this.$eventHub.$emit('bus-basicInfoSwitch', false);
    }
  },
  computed: {
    getModelViewUid() {
      // 视图ID
      return this.$store.state.modelview.uid;
    },
    getModelInfoX() {
      return this.$store.state.modelview.viewX;
    },
    getModelInfoY() {
      return this.$store.state.modelview.viewY;
    }
  },
  watch: {
    getModelInfoX(val) {
      this.modelView_x = Number(val) - 490;
    },
    getModelViewUid(val) {
      this.modelViewUid = val;
      this.modelView_x = Number(this.$store.state.modelview.viewX) - 550;
      setTimeout(() => {
        // 表格数据实时变化
        this.search();
      }, 500);
    }
  },
  created: function() { },
  beforeMount: function() { },
  mounted() {
    this.modelViewUid = this.$store.state.modelview.uid;
    this.modelView_x = Number(this.$store.state.modelview.viewX) - 550;
    this.search();
  },
  beforeDestroy: function() { },
  destroyed: function() { },
  directives: {}
};
</script>
