<template>
  <a-modal
      :title="$t('plan.change-record.add-Record')"
      :visible="visible"
      :maskClosable="false"
      @cancel="close"
      :keyboard="false"
      width="55%"
      destroy-on-close
      :footer="false"
      @afterClose="close">
    <div>
      <a-form>
        <HotTable
            ref="addStructure"
            key="addStructure"
            :formData="structureData"
            :headers="headers"
            :columns="columns"
            :focusCol="focusCol"
            @formDataChange="structureDataChange"
        />
      </a-form>
      <div slot="footer" class="mt10 text-right">
        <a-button @click="close">
          {{ $t('global-btn.cancel') }}
        </a-button>
        <a-button
            type="primary"
            class="ml10"
            @click="save()"
            :loading="saveLoading"
            v-preventReClick>
          {{ $t('global-btn.confirm') }}
        </a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
import HotTable from "@/components/HotTable";
export default {
  name: "ChangeRecordAdd",
  components: {
    HotTable,
  },
  data() {
    let _this = this;
    return {
      visible: false,
      structureData: [],
      saveLoading: false,
      headers: ['<span class="colHeader" style="color:red">*</span>'+this.$t('plan-change-record.content'),
        '<span class="colHeader" style="color:red">*</span>'+this.$t('plan.change-record.cause')],
      columns: [
        {data: "description", type: "text"},
        {data: "cause", type: "text"}
      ],
      focusCol: 0,
      tabName: '',
    }
  },
  methods: {
    //关闭模态窗
    close() {
      this.visible = false;
      this.structureData = [];
    },
    //保存按钮
    save() {
      this.buildStructureData();
      let structureData = this.structureData;
      if(structureData.length > 1){
        for (let i = 0; i < structureData.length - 1; i++) {
          if (this.structureData[i].description === null || this.structureData[i].description === undefined || this.structureData[i].description === '') {
            this.$notification.warning({message: this.$t('plan-change-record.please-enter-content')});
            return;
          }
          if (this.structureData[i].cause === null || this.structureData[i].cause === undefined || this.structureData[i].cause === '') {
            this.$notification.warning({message: this.$t('plan.change-record.please-enter-cause')});
            return;
          }
          if (this.structureData[i].description.length > 600) {
            this.$message.error(this.$t('plan-change-record.row-column-number',{rowIndex:`${i+1}`,colIndex:`${1}`,msg: this.$t('plan-change-record.max-number')}));
            return;
          }
          if (this.structureData[i].cause.length > 600) {
            this.$message.error(this.$t('plan-change-record.row-column-number',{rowIndex:`${i+1}`,colIndex:`${2}`,msg: this.$t('plan-change-record.max-number')}));
            return;
          }

        }
      }else{
        this.$notification.warning({message: this.$t('plan-change-record.please-enter-content')});
        return;
      }
      this.structureData=this.structureData.slice(0,-1);
      let data = {
        fmeaId: this.$route.query.rfmeaId,
        changeModels: this.structureData,
      };
      this.$api.changeRecordAdd(data).then(res => {
        if (res.flag) {
          this.$message.success(res.message, 1);
          this.close();
          this.$emit("getchangeRecordPageList");
        } else {
          this.$message.error(res.message, 1);
        }
      })


    },
    /**
     * 接受子组件handsontable数据
     */
    structureDataChange(val) {
      this.structureData = val;
    },
    /**
     * 构建：结构数据
     */
    buildStructureData() {
      return this.structureData.map((item) => {
        return {name: item.description, code: item.cause}
      }).filter((item) => {
        return item.description;
      });
    },


  }
}
</script>

<style scoped>

</style>