<!--
 * @Author: zqm
 * @Date: 2021-06-25 13:46:11
 * @LastEditTime: 2022-01-11 16:26:12
 * @LastEditors: Please set LastEditors
 * @Description: 填表说明以及校验信息展示
 * @FilePath: \taxFormToolFramework\src\components\informationBar.vue
-->
<template>
  <el-tabs ref="informationBar" id="information" class="informationBar" v-model="selectInfoBar" @tab-click="handleClick">
    <el-tab-pane label="填表说明" name="first">
      <div class="elTabPane">
        <el-scrollbar style="height: 100%;">
          <pre class="bar-pre" v-html="instruction"></pre>
        </el-scrollbar>
      </div>
    </el-tab-pane>
    <el-tab-pane label="审核公式" name="second">
      <div class="elTabPane">
        <el-scrollbar style="height: 100%;">
          <pre class="bar-pre" id="checkInfo"></pre>
        </el-scrollbar>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  props: ['parentName'],
  data() {
    return {
      selectInfoBar: "first", // 默认标签为1
      instruction: "", // 组件内填表说明
    };
  },
  watch: {
    '$store.state.data.selectInfoBar': {
      handler(newName, oldName) {
        this.selectInfoBar = newName
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      this.$store.commit("selectInfoBar", tab.name);
    },
    //获取填表说明
    getInstruction() {
      var engines = this.$store.state.data.engines
      var description = engines.getCompletionDescription()
      if (!["", undefined, null].includes(description)) {
        this.instruction = description
      } else {
        this.instruction = "暂无填表说明"
      }
    },
    initCheck(data) {
      var engines = this.$store.state.data.engines
      var _self = this
      var str = "<div>";
      var color = 'red';
      for (let i = 0; i < data.length; i++) {
        var obj = data[i];
        if (obj.mesType == '1') {
          color = 'red';
        } else {
          color = "green";
        }
        str += `<div style="color:` + color + `" data-id="` + obj.cellNode + `" class="errorDiv">` + obj.mes + `</div><br>`;
      }
      str += "</div>";
      $("#checkInfo").html(str);
      this.$store.commit("selectInfoBar", "second");
      $(".bar").show();
      $("#closeBar").show();
      $(".errorDiv").on('click', "", function (e) {
        var target = Enumerable.From(data).Where(function (val) {
          return val.cellNode == e.target.getAttribute('data-id')
        }).ToArray()[0]
        engines.defectLOcation({ defectLOcation: target })
      });
    },
    //表间取值
    resolveMcList(bbDm, node) {
      // console.log(this.$parent.$parent.$parent.$parent.initializationData);
      var initializationData = this.$parent.$parent.$parent.$parent.initializationData.data;
      var tableData = linq.from(initializationData).where(function (item) { return item.header.bbDm == bbDm }).defaultIfEmpty([]).toArray();
      var returnData = "";
      if (tableData.length > 0 && JSON.stringify(tableData) != '[]') {
        if (tableData[0].pageData != "") {
          returnData = eval("tableData[0].pageData." + node);
        }
      }
      return returnData
    }
  },
  mounted: function () {
    $(".bar").css({
      height: document.documentElement.clientHeight - 60,/* @Author ygy @Date 10:42 2020/7/7 @Description 浏览器工作区域减去按钮操作区域 */
    })
    $(".elTabPane").css({
      height: document.documentElement.clientHeight - 60 - 70, /* @Author ygy @Date 10:42 2020/7/7 @Description 浏览器工作区域减去按钮操作区域，减去公共区域 */
    })
    $("#taxForm").css({
      height: document.documentElement.clientHeight - 60, /* @Author ygy @Date 10:42 2020/7/7 @Description 浏览器工作区域减去按钮操作区域，减去公共区域 */
    })
    $(".bar").hide();
  },
};
</script>
<style>
.informationBar {
  top: 90px;
  right: 20px;
  padding: 12px 0px 0px 12px;
  border-radius: 4px;
  background-color: #e4e7ed !important;
}
.el-scrollbar {
  padding: 12px 15px;
  height: 100%;
  text-align: left;
  font-size: 13px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.el-scrollbar__wrap {
  overflow: scroll;
  width: 110% !important;
  height: 120% !important;
}
#informationBar .el-scrollbar__wrap {
  padding-right: 12px !important;
}
.bar-pre {
  height: 100%;
  padding-bottom: 50px;
}
.el-tabs__content {
  padding-right: 20px;
}
.errorDiv {
  line-height: 25px;
  cursor: pointer;
}
#informationBar .el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #e4e7ed !important;
  z-index: 1;
}
</style>

