<template>
  <div>
    <div class="mb10">
      {{ $t('functional-analysis.add-modal.function-type-function-product-features') }}
    </div>
    <HotTable
        ref="addMultilevelElement"
        key="addMultilevelElement"
        :formData="multilevelElementData"
        :headers="headers"
        :columns="columns"
        :focusCol="focusCol"
        @formDataChange="formDataChange"
    />
  </div>
</template>
<script>

import HotTable from "@/components/HotTable";

export default {
  name: "AddMultilevelElement",
  components: {
    HotTable
  },
  data() {
    return {
      multilevelElementData: [],
      columns: [
        {data: "funType", type: "dropdown", source: ['1', '2']},
        {data: "fun", type: "text"},
        {data: "require", type: "text"},
        {data: "failure", type: "text"},
        {data: "conPre", type: "text"},
        {data: "occurrence", type: "dropdown", source: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']},
        {data: "conDet", type: "text"},
        {data: "detection", type: "dropdown", source: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']},
      ],
      headers: [
        this.$t('functional-analysis.add-modal.function-type'),
        this.$t('functional-analysis.add-modal.function'),
        this.$t('functional-analysis.add-modal.require'),
        this.$t('functional-analysis.add-modal.failure'),
        this.$t('functional-analysis.add-modal.control-prevention'),
        this.$t('functional-analysis.add-modal.o'),
        this.$t('functional-analysis.add-modal.control-detection'),
        this.$t('functional-analysis.add-modal.d'),
      ],
      focusCol: 0,
    };
  },
  methods: {
    /**
     * 接受子组件handsontable数据
     */
    formDataChange(data) {
      this.multilevelElementData = data;
      this.$emit("dataChange", data);
    },
  }
};
</script>
<style lang="less">

</style>
