<template>
  <a-modal
    :title=" $t('base.info.change-content')"
    :visible="isShowChangeContentModal"
    :maskClosable="false"
    :width="800"
    @ok="save"
    @cancel="closeModal"
    :footer="null"
  >
    <div>
      <!-- 表单 -->
      <a-form layout='vertical'>
        <!--第一行-->
        <a-row :gutter='24'>
          <!--变更编号-->
          <a-col :lg='8' :md='12' :sm='24' :xl='8' :xs='24'>
            <a-form-item :label="$t('base.info.change-number')">
              <a-input disabled v-model="formData.serialNumber"/>
            </a-form-item>
          </a-col>
          <!--变更来源-->
          <a-col :lg='8' :md='12' :sm='24' :xl='8' :xs='24'>
            <a-form-item  :label="$t('base.info.change-source')">
              <a-input disabled v-model="formData.changeResource"/>
            </a-form-item>
          </a-col>
          <!--产品类型-->
          <a-col :lg='8' :md='12' :sm='24' :xl='8' :xs='24'>
            <a-form-item  :label="$t('base.info.product-type')">
              <a-input disabled v-model="formData.productType"/>
            </a-form-item>
          </a-col>
        </a-row>
        <!--第二行-->
        <a-row :gutter='24'>
          <!--系列号-->
          <a-col :lg='8' :md='12' :sm='24' :xl='8' :xs='24'>
            <a-form-item  :label="$t('base.management.serial-number')">
              <a-input disabled v-model="formData.serialNumber"/>
            </a-form-item>
          </a-col>
          <!--车型代号-->
          <a-col :lg='8' :md='12' :sm='24' :xl='8' :xs='24'>
            <a-form-item  :label="$t('base.info.vehicle-model-code')">
              <a-input disabled v-model="formData.vehicleModel"/>
            </a-form-item>
          </a-col>
          <!--项目名称-->
          <a-col :lg='8' :md='12' :sm='24' :xl='8' :xs='24'>
            <a-form-item  :label="$t('base.info.project.name')">
              <a-input disabled v-model="formData.projectName"/>
            </a-form-item>
          </a-col>
        </a-row>
        <!--第三行-->
        <a-row :gutter='24'>
          <!--CPAC编号-->
          <a-col :lg='8' :md='12' :sm='24' :xl='8' :xs='24'>
            <a-form-item  :label="$t('verity.dvp.cpac.number')">
              <a-input disabled v-model="formData.cpacCoding"/>
            </a-form-item>
          </a-col>
          <!--系统名称-->
          <a-col :lg='8' :md='12' :sm='24' :xl='8' :xs='24'>
            <a-form-item  :label="$t('base.info.system-name')">
              <a-input disabled v-model="formData.cpacCn"/>
            </a-form-item>
          </a-col>
          <!--变更时间-->
          <a-col :lg='8' :md='12' :sm='24' :xl='8' :xs='24'>
            <a-form-item  :label="$t('base.info.change-time')">
              <a-input disabled v-model="formData.updateTime"/>
            </a-form-item>
          </a-col>
        </a-row>
        <!--第四行-->
        <a-row :gutter='24'>
          <!--变更原因-->
          <a-col :lg='24' :md='24' :sm='24' :xl='24' :xs='24'>
            <a-form-item :label="$t('base.info.change-reason')">
              <a-textarea disabled v-model="formData.reason" :rows="4"/>
            </a-form-item>
          </a-col>
        </a-row>
        <!--第五行-->
        <a-row :gutter='24'>
          <!--技术方案-->
          <a-col :lg='24' :md='24' :sm='24' :xl='24' :xs='24'>
            <a-form-item :label="$t('base.info.technical-solution')">
              <a-textarea disabled v-model="formData.technicalSolution" :rows="4"/>
            </a-form-item>
          </a-col>
        </a-row>
        <!--第六行-->
        <a-row :gutter='24'>
          <!--变更前后-->
          <a-col :lg='24' :md='24' :sm='24' :xl='24' :xs='24'>
            <a-form-item :label="$t('base.info.before-and-after-the-change')">
              <a-textarea disabled v-model="formData.changeBeforeAfter" :rows="4"/>
            </a-form-item>
          </a-col>
        </a-row>
        <!--第七行-->
        <a-row :gutter='24'>
          <!--变更内容-->
          <a-col :lg='24' :md='24' :sm='24' :xl='24' :xs='24'>
            <a-form-item :label="$t('base.info.change-content')">
              <a-textarea :disabled="isDisabled || !isLook" v-model="formData.description" :rows="4" :maxLength="200" allowClear :placeholder="$t('base.info.please-enter-change-content')"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- footer按钮组 -->
      <div slot="footer" v-if="isLook && formData.isComplete === 1" class="mt10 text-right">
        <a-button @click="closeModal">
          {{ $t('global-btn.cancel') }}
        </a-button>
        <a-button
          type="primary"
          class="ml10"
          @click="save()">
          {{ $t('global-btn.confirm') }}
        </a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>

export default {
  name: "ChangeContentModal",
  components: {},
  data() {
    return {
      // 是否显示模态框
      isShowChangeContentModal: false,
      // 是否可以编辑变更内容
      isDisabled: false,
      // 表单数据
      formData: {
        // 变更内容简述
        description: undefined,
        // 变更原因
        reason: undefined,
        // 变更来源
        changeResource: undefined,
        // 系列号
        serialNumber: undefined,
        // 车型代号
        vehicleModel: undefined,
        // 项目名称
        projectName: undefined,
        // 版本
        version: undefined,
        // 变更人
        userName: undefined,
        // 更新时间
        updateTime: undefined,
        // 是否完成
        isComplete: undefined,
        // CPAC编号
        cpacCoding: undefined,
        // 系统名称
        cpacCn: undefined,
        // 变更前后
        changeBeforeAfter: undefined,
        // 技术方案
        technicalSolution: undefined
      },
      // 是否是查看权限进入编制
      isLook: undefined,
      // 变更前后 显示用
      changeBeforeAfter: undefined,
      changeContentId: undefined
    };
  },

  mounted() {
    // 判断是编辑权限还是查看权限进入的编制，是编制就为true，否则为false
    this.isLook = this.$api.isLook === '2';
  },
  methods: {

    /**
     * 初始化表单数据
     */
    initFormData(val) {

      this.changeContentId = val.id;

      let data = {
        id: val.id,
        dvpType: this.$store.getters.dvpType
      };

      this.$api.getChangeDetail(data).then(res => {
        if (res.flag) {
          this.formData = res.data;
          this.changeBeforeAfter = res.data.changeBeforeAfter === '0' ? this.$t('base.info.before-the-change') : this.$t('base.info.after-the-change');
        } else {
          this.$message.error(res.message);
        }
      });
    },


    /**
     * 关闭模态框
     */
    closeModal() {
      this.isDisabled = false;
      this.formData = {};
      this.isShowChangeContentModal = false;
    },

    /**
     * 保存
     * @returns {boolean}
     */
    save() {
      let data = {
        id: this.changeContentId,
        description: this.formData.description
      };
      this.$api.updateChangeDescription(data).then(res => {
        if (res.flag) {
          this.$emit("initData");
          this.closeModal();
        } else {
          this.$message.error(res.message);
        }
      });
    },
  }
};
</script>
<style lang='less' scoped>

</style>
