<!--
 * @Description: 添加机型弹窗
-->
<template>
  <x-modal
    :append-to-body="true"
    :destroy-on-close="true"
    :modalVisible.sync="visible"
    :wrapper-class="'add-engine-model-modal'"
    title="添加机型"
    :width="800"
  >
    <el-form
      ref="addForm"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      class="add-engine-form"
    >
      <div class="form-row">
        <el-form-item label="产品型号" prop="modelName">
          <el-input v-model="formData.modelName" placeholder="请输入" maxlength="100" />
        </el-form-item>
        <el-form-item :label="ycOrOth === '竞品' ? '产品编号' : '状态代号'" prop="productNumber">
          <el-input v-model="formData.productNumber" placeholder="请输入" maxlength="100" />
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="板块" prop="plate">
          <el-input v-model="formData.plate" placeholder="请输入" maxlength="100" />
        </el-form-item>
        <el-form-item label="平台" prop="platform">
          <el-input v-model="formData.platform" placeholder="请输入" maxlength="100" />
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="细分市场" prop="marketSegment">
          <el-input v-model="formData.marketSegment" placeholder="请输入" maxlength="100" />
        </el-form-item>
        <el-form-item label="系列" prop="series">
          <el-input v-model="formData.series" placeholder="请输入" maxlength="100" />
        </el-form-item>
      </div>
      <div class="form-row">
        
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="formData.projectName" placeholder="请输入" maxlength="100" />
        </el-form-item>
        <el-form-item label="项目编号" prop="projectNumber">
          <el-input v-model="formData.projectNumber" placeholder="请输入" maxlength="100" />
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="排放" prop="emission">
          <el-input v-model="formData.emission" placeholder="请输入" maxlength="100" />
        </el-form-item>
        <el-form-item label="燃烧类型" prop="burnType">
          <el-input v-model="formData.burnType" placeholder="请输入" maxlength="100" />
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="排量" prop="engineCapacity">
          <el-input v-model="formData.engineCapacity" placeholder="请输入" maxlength="100" />
        </el-form-item>
        <el-form-item label="任务分发状态" prop="dispatchStatus">
          <el-select
            v-model="formData.distributeStatus"
            disabled
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in dispatchStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="closeModal">
          取消
        </el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">
          确定
        </el-button>
      </div>
    </template>
  </x-modal>
</template>

<script>
import api from '@/api'
import { getUserId } from '@/utils'

export default {
  name: 'AddEngineModelModal',
  data() {
    return {
      visible: false,
      submitting: false,
      ycOrOth: '竞品', // 默认为竞品，根据打开的页面不同而不同
      formData: {
        modelName: '',
        productNumber: '',
        plate: '',
        plate2: '',
        platform: '',
        series: '',
        marketSegment: '',
        projectName: '',
        projectNumber: '',
        dispatchStatus: ''
      },
      formRules: {
        modelName: [{ required: true, message: '请输入产品型号', trigger: 'blur' }],
        productNumber: [{ required: true, message: '请输入编号', trigger: 'blur' }],
        plate: [{ required: true, message: '请输入板块', trigger: 'blur' }],
        plate2: [{ required: true, message: '请输入版块', trigger: 'blur' }],
        platform: [{ required: true, message: '请输入平台', trigger: 'blur' }],
        series: [{ required: true, message: '请输入系列', trigger: 'blur' }],
        marketSegment: [{ required: true, message: '请输入细分市场', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        projectNumber: [{ required: true, message: '请输入项目编号', trigger: 'blur' }]
        // 根据实际需求添加验证规则
      },
      dispatchStatusOptions: [
        { label: '已分发', value: '已分发' },
        { label: '未分发', value: '未分发' }
      ]
    }
  },
  methods: {
    showModal(ycOrOth = '竞品') {
      // 根据来源页面设置 ycOrOth 值
      // selfEnginedata.vue 传 "玉柴"，otherEnginedata.vue 传 "竞品"
      this.ycOrOth = ycOrOth
      this.visible = true
      // 重置表单
      this.resetForm(ycOrOth)
      // 清除表单验证
      this.$nextTick(() => {
        if (this.$refs.addForm) {
          this.$refs.addForm.clearValidate()
        }
      })
    },
    closeModal() {
      this.visible = false
      this.ycOrOth = '竞品' // 重置为默认值
      this.resetForm('竞品')
    },
    resetForm(ycOrOth) {
      this.formData = {
        loginUserId: getUserId(),
        ycOrOth: ycOrOth,
        modelName: '',
        productNumber: '',
        plate: '',
        platform: '',
        series: '',
        marketSegment: '',
        projectName: '',
        projectNumber: '',
        distributeStatus: '未分发'
      }
    },
    handleSubmit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.submitting = true
          const request = {
            ...api.ADD_ENGINE_MODEL,
            params: {
              ...this.formData
            }
          }
          this.$request(request)
            .asyncThen((resp) => {
              this.closeModal()
              // 触发父组件刷新列表
              this.$emit('success')
            })
            .asyncErrorCatch((err) => {
              console.error('添加失败:', err)
              this.$message.error(err.message || '添加失败')
            })
            .finally(() => {
              this.submitting = false
            })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.add-engine-model-modal {
  .add-engine-form {
    padding: 20px 0;

    .form-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0;

      .el-form-item {
        flex: 1;
        margin-right: 20px;
        margin-bottom: 20px;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .dialog-footer {
    text-align: right;
    padding-top: 20px;
  }
}
</style>
