<template>
  <div class="dfmea-page-tree-content">
    <!-- 顶部检索栏 Start -->
    <div class="top-button-bar">
      <a-form layout="inline">
        <a-row :gutter="24" class="ml5">
          <!-- 下拉选择 Start -->
          <a-form-item :label="$t('risk-analysis.top.filter')">
            <a-select v-model="typeValue" class="w80 ml10" @change="typeSelectChange">
              <a-select-option v-for="item in typeDict" :key="item.value" :value="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-select v-model="symbolValue" :disabled="typeValue === 'AP'" class="w60 ml10">
              <a-select-option v-for="item in symbolDict" :key="item.value" :value="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-select v-model="numberValue" v-show="typeValue === 'S' || typeValue === 'O' || typeValue === 'D'"
              class="w60 ml10">
              <a-select-option v-for="item in numberDict" :key="item.value" :value="item.value">
                {{ item.value }}
              </a-select-option>
            </a-select>
            <a-select v-model="apValue" v-show="typeValue === 'AP'" class="w60 ml10">
              <a-select-option v-for="item in apDict" :key="item.value" :value="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-input v-model="rpnInputValue" v-show="typeValue === 'RPN'" @change="watchRpn" class="w60 ml10">
            </a-input>
          </a-form-item>
          <!-- 下拉选择 End -->

          <a-form-item :label="$t('risk-analysis.top.search')">
            <a-input v-model="nameInputValue" allowClear class="ml10" />
          </a-form-item>

          <!-- 按钮 Start -->
          <span class="ml10">
            <a-form-item>
              <a-button v-prevent-re-click @click="reset" class="mr10">
                {{ $t('global-btn.reset') }}
              </a-button>
              <a-button v-prevent-re-click type="primary" @click="search" class="mr10">
                {{ $t('global-btn.search') }}
              </a-button>
              <!-- 导出图片 -->
              <a-button v-prevent-re-click type="primary" @click="exportImage">
                {{ $t('global-btn.export.picture') }}
              </a-button>
            </a-form-item>
          </span>
          <!-- 按钮 End -->

          <!-- switch Start -->
          <span class="fr mr5">
            <a-form-item :label="$t('risk-analysis.top.show-function')">
              <a-switch v-model="functionSwitch" />
            </a-form-item>
            <a-form-item :label="$t('risk-analysis.top.show-structure')">
              <a-switch v-model="structureSwitch" />
            </a-form-item>
            <a-form-item :label="$t('risk-analysis.top.show-measure')">
              <a-switch v-model="measureSwitch" />
            </a-form-item>
            <a-form-item>
              <a-tooltip placement="bottomRight" arrow-point-at-center :overlayStyle="{ width: '100px'}">
                <template slot="title">
                  {{ $t('risk-analysis.top.help') }}
                </template>
                <i class="iconfont iconwenhao help-icon" />
              </a-tooltip>
            </a-form-item>
          </span>
          <!-- switch End -->
        </a-row>
      </a-form>
    </div>
    <!-- 顶部检索栏 End -->

    <!-- 主界面 Start -->
    <div class="functional-analysis-content">
      <splitPane class="mainPane" :default-percent='28' :min-percent='15' split='vertical'>
        <template slot="paneL" class="abc">
          <div class="leftTree">
            <LeftTree ref="leftTree" @initRightRiskNet="initRightRiskNet"
              @cleanRightRiskNetData="cleanRightRiskNetData"
              :versionDiffCloseFlag="versionDiffCloseFlag"
              :versionLibraryDiffCloseFlag="versionLibraryDiffCloseFlag" />
          </div>
        </template>
        <template slot="paneR" class="over-hide">
          <div class="rightTree">
            <RightRiskNet ref="riskAnalysisNet" :functionSwitch="functionSwitch" :structureSwitch="structureSwitch"
              @updateNodeClassify="updateNodeClassify" :measureSwitch="measureSwitch"
              :versionDiffCloseFlag="versionDiffCloseFlag"
              :versionLibraryDiffCloseFlag="versionLibraryDiffCloseFlag" />
          </div>
        </template>
      </splitPane>
    </div>
    <!-- 主界面 End -->
  </div>
</template>

<script>

import "@/styles/fmea.scss";
import SplitPane from "vue-splitpane";
import DragModal from "@/components/DragModal";
import LeftTree from "./components/LeftTree";
import RightRiskNet from "./components/RightRiskNet";

export default {
  name: "riskAnalysis",
  components: {
    SplitPane,
    DragModal,
    LeftTree,
    RightRiskNet,
  },
  props: {
    versionDiffCloseFlag: {
      type: Boolean,
      default: undefined
    },
    versionLibraryDiffCloseFlag: {
      type: Boolean,
      default: undefined
    }
  },
  data() {
    return {
      /** 符号字典 */
      symbolDict: [
        {value: 1, name: "="},
        {value: 2, name: ">"},
        {value: 3, name: "<"}
      ],
      /** 数字字典 */
      numberDict: [
        {value: 10},
        {value: 9},
        {value: 8},
        {value: 7},
        {value: 6},
        {value: 5},
        {value: 4},
        {value: 3},
        {value: 2},
        {value: 1}
      ],
      /** AP字典 */
      apDict: [
        {value: 1, name: "H"},
        {value: 2, name: "M"},
        {value: 3, name: "L"}
      ],
      /** 类型字典 */
      typeDict: [
        {name: "AP", value: 1},
        {name: "S", value: 2},
        {name: "O", value: 3},
        {name: "D", value: 4},
        {name: "RPN", value: 5}
      ],
      /** 筛选类型 */
      typeValue: "",
      /** 判断类型 */
      symbolValue: "",
      /** 选择的数值 */
      numberValue: "",
      /** ap选择的值 */
      apValue: "",
      /** rpn输入框值 */
      rpnInputValue: "",
      /** 关键字搜索 */
      nameInputValue: "",
      /** 功能Switch */
      functionSwitch: true,
      /** 结构Switch */
      structureSwitch: true,
      /** 措施Switch */
      measureSwitch: true,
      /** 风险分析检索条件 */
      queryParameter: {
        fmeaId: this.$store.getters.rfmeaId,
        name: "",
        parameterKey: "",
        parameterSymbol: "",
        parameterValue: "",
      },
      /** 风险分析数据 */
      riskAnalysisNetData: [],
      /** 模态框状态 */
      modalVisible: false,
      /** 模态框唯一Key */
      actionName: "",
      /** 模态框标题 */
      title: "",
      /** 模态框，tab名称 */
      tab: "",
      /** 节点类型CODE */
      struTypeCode: "",
      /** 选中节点 */
      checkedNode: "",
    };
  },
  methods: {
    /**
     * 类型下拉选择改变事件
     */
    typeSelectChange(v) {
      this.symbolValue = "=";
      if (v === "AP") {
        this.apValue = "H";
      } else if (v === "RPN") {
        this.rpnInputValue = "";
      } else {
        this.numberValue = 10;
      }
    },
    /**
     * 修改节点潜在关键特性
     * @param node 节点
     * @param classify 特性标识
     */
    updateNodeClassify(node, classify) {
      let _that = this;
      _that.$api.updateNodeClassify({
        fmeaId: _that.$store.getters.fmeaId,
        rfmeaId: _that.$store.getters.rfmeaId,
        struId: node.id,
        struTypeCode: node.struTypeCode,
        classify: classify,
      }).then((res) => {
        if (res.flag) {
          _that.$message.success(res.message, 1);
          _that.initRightRiskNet();
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      });
    },
    /**
     * 监听Rpn值
     */
    watchRpn(e) {
      let reg = /^[1-9]\d*$/g; // 正整数
      if (e.target.value.replace(reg, '')) {
        this.$message.warning(this.$t('global-message.warn.rpn.positive-integer'), 1);
        return false;
      }
    },
    /**
     * 设置查询条件
     */
    setQueryParameter() {
      this.$refs.riskAnalysisNet.queryParameter = {
        fmeaId: this.$store.getters.rfmeaId,
        name: this.typeValue === 'S' ? '' : this.nameInputValue,
        parameterKey: this.typeValue === 'S' ? '' : this.typeValue,
        parameterSymbol: this.typeValue === 'S' ? '' : this.symbolValue,
        parameterValue: this.typeValue === "AP" ? this.apValue : this.typeValue === "RPN"
            ? this.rpnInputValue : this.typeValue === "S" ? '' : this.numberValue
      }
      let sVal = this.typeValue === 'S' ? String(this.numberValue) : '';
      let symbolValue = this.typeValue === 'S' ? this.symbolValue : '';
      let keywords = this.typeValue === 'S' ? this.nameInputValue : '';
      this.$refs.leftTree.filterNode(sVal, symbolValue, keywords);
    },
    /**
     * 搜索
     */
    search() {
      this.setQueryParameter();
    },
    /**
     * 重置
     */
    reset() {
      this.typeValue = "";
      this.symbolValue = "";
      this.numberValue = undefined;
      this.apValue = "";
      this.rpnInputValue = "";
      this.nameInputValue = "";
      this.setQueryParameter();
    },
    /**
     * 初始化右侧风险网
     */
    initRightRiskNet() {
      this.$refs.riskAnalysisNet.initRiskNet();
    },
    /**
     * 清空右侧风险网数据
     */
    cleanRightRiskNetData() {
      this.$refs.riskAnalysisNet.riskAnalysisNetData = [];
      this.$refs.riskAnalysisNet.isEmpty = true;
    },
    /**
     * 导出图片
     */
    exportImage() {
      this.$refs.riskAnalysisNet.exportImage();
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-control {
  position: relative;
  line-height: 34px;
  zoom: 1;
}

/deep/.ant-select-selection--single {
  margin-top: 3px;
  height: 28px;
}

/deep/.ant-input {
  height: 28px;
}

/deep/.ant-btn {
  height: 28px;
}

.help-icon {
  cursor: pointer;
  color: #FF9933;
}
</style>
