<template>
  <a-modal
      :title="$t('plan.change-record.edit-Record')"
      :visible="visible"
      :maskClosable="false"
      @cancel="close"
      :keyboard="false"
      width="50%"

      destroy-on-close
      :footer="false"
      @afterClose="close">
    <a-card class="mb_8">
      <a-form layout="vertical">
        <a-row :gutter="24">
          <a-col :xl="16" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('plan-change-record.version')">
              <a-input
                  allowClear
                  v-model="queryParam.version"
                  disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :xl="16" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item  required :label="$t('plan-change-record.content')">
              <a-textarea
                  style="height:150px"
                  v-model="queryParam.content"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :xl="16" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item required :label="$t('plan.change-record.cause')">
              <a-textarea
                  style="height:150px"
                  v-model="queryParam.cause"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <div style="text-align: right">
      <a-button type="primary" @click="save">
        {{ $t('plan.change-record.save') }}
      </a-button>
    </div>
  </a-modal>
</template>

<script>
export default {
  name: "EditChangeRecord",
  data() {
    return {
      visible: false,
      queryParam: {
        content:undefined,
        cause:undefined
      },
      record: {},
    }
  },
  methods: {
    close() {
      this.visible = false;
    },
    //初始化
    init(record) {
      if(record){
        this.record = record;
        this.queryParam.cause = this.record.cause;
        this.queryParam.version = this.record.versionCode;
        this.queryParam.content = this.record.description;
      }

    },
    // 保存
    save() {
      if (this.queryParam.content == null || this.queryParam.content == undefined ||  this.queryParam.content == '') {
        this.$notification.warning({message: this.$t('plan-change-record.please-enter-content')});
        return;
      }
      if (this.queryParam.cause == null || this.queryParam.cause == undefined || this.queryParam.cause == '') {
        this.$notification.warning({message: this.$t('plan.change-record.please-enter-cause')});
        return;
      }
      if (this.queryParam.content.length > 600) {
        this.$message.error(this.$t('plan-change-record.content')+this.$t('plan-change-record.max-number'));
        return;
      }
      if (this.queryParam.cause.length > 600) {
        this.$message.error(this.$t('plan.change-record.cause')+this.$t('plan-change-record.max-number'));
        return;
      }
      let data = {
        changeId: this.record.changeId,
        cause: this.queryParam.cause,
        description: this.queryParam.content,
        rfmeaId:this.$route.query.rfmeaId,
      };
      this.$api.updateChangeRecord(data).then(res => {
        if (res.flag) {
          this.$message.success(res.message, 1);
          this.$emit("getchangeRecordPageList");
          this.close();
        } else {
          this.$message.error(res.message, 1);
        }
      })
    },


  },
  mounted() {
    this.init();
  }
}
</script>

<style scoped>
/deep/ .ant-modal-body {
  height: 60%;
}
</style>