<template>
  <a-modal
      class="funcNetDialog"
      :title="$t('functional-analysis.top-btn.statistical-analysis')"
      :visible="modalVisible"
      :maskClosable="false"
      @cancel="close"
      :keyboard="false"
      :width="1000"
      destroyOnClose
      :footer="false"
      @afterClose="close">
    <div ref="functionMatrixModal">
      <a-form layout="vertical">
        <a-row :gutter="24">
          <a-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
            <a-form-item :label="$t('functional-analysis.top-modal.structure')">
              <a-tree-select
                  ref="leftTree"
                  treeCheckable
                  treeCheckStrictly
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :placeholder="$t('measure-track.measure-track.please-select-a-structure')"
                  allow-clear
                  :maxTagCount="3"
                  :showArrow="true"
                  v-model="leftTreeSelectId"
                  :treeExpandedKeys="leftTreeExpandedKeys"
                  :replaceFields="replaceFields"
                  :filterTreeNode="leftFilterTreeNode"
                  :tree-data="leftTreeData"
                  @treeExpand="leftTreeExpand"
                  @change="leftTreeSelectChange">
                <template #title="{ value: val, title }">
                  <template>{{ title }}</template>
                </template>
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
            <a-form-item class="tr" :label="'\xa0'">
              <a-button class="ml10" @click="reset">
                {{ $t('global-btn.reset') }}
              </a-button>
              <a-button class="ml10" @click="search" type="primary">
                {{ $t('global-btn.search') }}
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-tabs
          class="mt10"
          v-model="tabKey"
          type="card"
          @change="tabChange">
        <a-tab-pane :tab="$t('functional-analysis.top-btn.statistics')" key="statistics">
          <Statistics ref="statistics"/>
        </a-tab-pane>
        <a-tab-pane :tab="$t('functional-analysis.top-btn.pareto-analysis')" key="paretoAnalysis">
          <ParetoAnalysis ref="paretoAnalysis"/>
        </a-tab-pane>
        <a-tab-pane :tab="$t('functional-analysis.top-btn.interval-statistics')" key="intervalStatistics">
          <IntervalStatistics ref="intervalStatistics"/>
        </a-tab-pane>
        <a-tab-pane :tab="$t('functional-analysis.top-btn.risk-matrix')" key="riskMatrix">
          <RiskMatrix ref="riskMatrix"/>
        </a-tab-pane>
        <a-tab-pane :tab="$t('functional-analysis.top-btn.risk-status')" key="riskStatus">
          <RiskStatus ref="riskStatus"/>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-modal>
</template>

<script>

import {arrayToTree} from "@/utils/tree";
import Statistics from './Statistics';
import ParetoAnalysis from './ParetoAnalysis';
import IntervalStatistics from './IntervalStatistics';
import RiskMatrix from './RiskMatrix';
import RiskStatus from './RiskStatus';

const defaultTopTableColumns = [{
  title: '',
  dataIndex: 'leftStructure',
  width: 150,
  fixed: 'left',
  align: 'center',
}];

export default {
  name: "StatisticalAnalysisModal",
  props: {
    showStatisticalAnalysisModal: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Statistics,
    ParetoAnalysis,
    IntervalStatistics,
    RiskMatrix,
    RiskStatus,
  },
  data() {
    return {
      /** tab */
      tabKey: undefined,
      /** 左侧Tree数据 */
      leftTreeData: [],
      /** 左侧树选中值 */
      leftTreeSelectValue: undefined,
      /** 左侧树选中ID */
      leftTreeSelectId: undefined,
      /** 替换 treeNode 中 title,key,children,value 字段为 treeData 中对应的字段 */
      replaceFields: {children: 'children', label: 'name', key: 'id', value: 'id'},
      /** 左侧(受控)展开指定的树节点 */
      leftTreeExpandedKeys: [],
      /** 模态框是否可见 */
      modalVisible: false,
    };
  },
  watch: {
    showStatisticalAnalysisModal(val) {
      // 默认
      this.tabKey = 'statistics';
      this.leftTreeSelectId = undefined;
      this.modalVisible = val;
    },
  },
  mounted() {

  },
  methods: {
    /**
     * 选项卡切换事件
     * @param activeKey 选项卡Key
     */
    tabChange(activeKey) {
      this.tabKey = activeKey;
    },
    /**
     * 重置
     */
    reset() {
      this.leftTreeSelectId = undefined;
      this.search();
    },
    /**
     * 搜索
     */
    search() {
      let struId = this.leftTreeSelectId ? this.leftTreeSelectId.map(item => item.value).toString() : undefined;
      switch (this.tabKey) {
        case 'statistics':
          this.$refs.statistics.list(struId);
          break;
        case 'paretoAnalysis':
          this.$refs.paretoAnalysis.list(struId);
          break;
        case 'intervalStatistics':
          this.$refs.intervalStatistics.list(struId);
          break;
        case 'riskMatrix':
          this.$refs.riskMatrix.list(struId);
          break;
        case 'riskStatus':
          this.$refs.riskStatus.list(struId);
          break;
      }
    },
    /**
     * 获取左侧下拉Tree
     */
    getLeftSelectTree() {
      let _that = this;
      _that.$api.getLeftTree({
        fmeaId: _that.$store.getters.rfmeaId
      }).then(res => {
        if (res.flag) {
          let targetNode = res.data.rdfmStruTreeModels.filter((item) => {
            return item.pid === '00000000000000000000000000000000';
          })[0];
          // 数组转Tree
          let treeData = arrayToTree(targetNode, res.data.rdfmStruTreeModels);
          _that.addScopedSlots(treeData);
          _that.defaultExpandedAllLTreeKeys(treeData);
          _that.leftTreeData = treeData;
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      });
    },
    /**
     * 添加插槽
     */
    addScopedSlots(nodes) {
      for (let i = 0, len = nodes.length; i < len; i++) {
        // 通过vue 自带的$set 给每条数据加上一个名为scopedSlots，值为{title: 'node'}，的插槽
        this.$set(nodes[i], "scopedSlots", {title: "treeDataSlot", checkable: "checkable"});
        if (nodes[i].children && nodes[i].children.length > 0) {
          this.addScopedSlots(nodes[i].children);
        }
      }
      return nodes;
    },
    /**
     * 默认展开左侧树全部节点
     * @param treeData tree绑定数据
     */
    defaultExpandedAllLTreeKeys(treeData) {
      let _that = this;
      for (let i = 0, len = treeData.length; i < len; i++) {
        _that.leftTreeExpandedKeys.push(treeData[i].id);
        if (treeData[i].children && treeData[i].children.length > 0) {
          _that.defaultExpandedAllLTreeKeys(treeData[i].children);
        }
      }
    },
    /**
     * 输入项筛选
     * @param inputValue
     * @param treeNode
     */
    leftFilterTreeNode(inputValue, treeNode) {
      return treeNode.data.props.name.includes(inputValue)
    },
    /**
     * 左侧树图标展开/收起节点时触发
     * @param expandedKeys
     * @param e
     */
    leftTreeExpand(expandedKeys, e) {
      this.leftTreeExpandedKeys = expandedKeys;
    },
    /**
     * 左侧树选中事件
     * @param value
     * @param label
     * @param extra
     */
    leftTreeSelectChange(value, label, extra) {
      this.leftTreeSelectId = value;
    },
    /**
     * 关闭模态框
     */
    close() {
      this.$emit("closeModal");
    },
  },
  destroyed() {
    this.$emit("closeModal");
  }
}
</script>
<style lang="less" scoped>

///deep/ .ant-table-fixed-left .ant-table-fixed {
//
//  .ant-table-thead tr {
//    height: 76px !important;
//  }
//
//  .ant-table-tbody tr {
//    height: 38px !important;
//  }
//
//  .ant-table-tbody td {
//    border-bottom: 1px solid #e8e8e8;
//  }
//}

</style>
