<template>
  <!-- 废标项新增/编辑弹窗 -->
  <el-dialog
    class="rejection-form-dialog"
    :title="title"
    :visible.sync="dialogVisible"
    :show-close="true"
    :close-on-click-modal="false"
    @close="handleClose"
    :append-to-body="true"
    width="600px"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="form-container"
    >

      <el-form-item label="废标项名称" prop="itemName">
        <el-input
          v-model="form.itemName"
          clearable
          placeholder="请输入"
          maxlength="128"
          show-word-limit
          style="width: 100%;"
        />
      </el-form-item>

      <el-form-item label="状态" prop="itemState">
        <el-switch
          v-model="form.itemState"
          :active-value="'0'"
          :inactive-value="'1'"
          :show-text="false"
          class="custom-switch"
        />
      </el-form-item>

      <el-form-item label="废标项描述" prop="itemDesc">
        <el-input
          v-model="form.itemDesc"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 5 }"
          clearable
          placeholder="请输入"
          maxlength="256"
          show-word-limit
          style="width: 100%;"
        />
      </el-form-item>
    </el-form>

    <!-- 底部按钮（右对齐） -->
    <span slot="footer" class="dialog-footer">
      <el-button class="cancel-btn" @click="handleClose">取消</el-button>
      <el-button type="primary" class="confirm-btn" @click="submitForm('ruleForm')">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addRejectionItem, updateRejectionItem } from '@/api/enterpriseLibrary/rejectionItem/rejectionItem'
import _ from 'lodash'

export default {
  name: 'RejectionItemForm',
  props: {
    title: {
      type: String,
      default: '新增废标项'
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    isAdd: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      dialogVisible: true,
      form: {
        enterpriseId: '',
        itemId: '',
        itemName: '',
        itemState: '0', // 初始为启用
        itemDesc: ''
      },
      rules: {
        itemName: [
          { required: true, message: '请输入废标项名称', trigger: 'blur' }
        ],
        itemState: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        itemDesc: [
          { required: true, message: '请输入废标项描述', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  watch: {
    isAdd: {
      handler(newVal) {
        this.initEditData()
      },
      immediate: true
    }
  },
  methods: {
    initEditData() {
      if (this.rowData && this.rowData.itemId) {
        this.form = {
          enterpriseId: this.rowData.enterpriseId,
          itemId: this.rowData.itemId,
          itemName: this.rowData.itemName || '',
          itemState: this.rowData.itemState || '0',
          itemDesc: this.rowData.itemDesc || ''
        }
      } else if (this.rowData && this.rowData.enterpriseId) {
        this.form.enterpriseId = this.rowData.enterpriseId;
      }
    },

    handleClose() {
      this.dialogVisible = false
      this.$emit('closeDialog')
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = this.$loading({
            lock: true,
            text: '数据提交中，请稍候...',
            background: 'rgba(0, 0, 0, 0.5)',
            target: this.$el.querySelector('.el-dialog')
          })

          const params = _.cloneDeep(this.form)
          const api = this.isAdd === 'add' ? addRejectionItem : updateRejectionItem

          api(params).then(res => {
            this.loading.close()
            if (res.code === 200) {
              this.$modal.msgSuccess(res.msg)
              this.$emit('handleQuery')
              this.handleClose()
            } else {
              this.$modal.msgError(res.msg)
            }
          }).catch(error => {
            this.loading.close()
            this.$modal.msgError('废标项已存在')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.rejection-form-dialog {
  ::v-deep .el-dialog {
    font-family: 'Source Han Sans CN', sans-serif;
    border-radius: 8px;
  }

  ::v-deep .el-dialog__header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 20px;
  }

  ::v-deep .el-dialog__footer {
    padding: 16px 20px;
    border-top: 1px solid #eee;
    text-align: right;
  }
}

.form-container {
  .el-form-item {
    margin-bottom: 16px;
    flex-wrap: nowrap; // 禁止整行换行

    .el-form-item__label {
      /* 强制标签不换行 */
      white-space: nowrap;
    }

    .el-input,
    .el-textarea {
      width: 100%;
    }
  }
}

/* 开关样式（无文字） */
::v-deep .custom-switch .el-switch__core {
  width: 40px !important;
  height: 20px !important;
}

::v-deep .custom-switch .el-switch__label {
  display: none;
}

.confirm-btn {
  width: 98px;
  height: 36px;
  background: #1F72EA;
  box-shadow: 0px 4px 8px rgba(51, 135, 255, 0.5);
  border-radius: 4px;
  color: #fff;
  border: none;
  font-size: 14px;
  transition: all 0.3s;

  &:hover {
    background: #4A8BFF;
    box-shadow: 0px 6px 12px rgba(51, 135, 255, 0.6);
  }
}

.cancel-btn {
  width: 98px;
  height: 36px;
  background: #E5E5E5;
  box-shadow: 0px 4px 8px rgba(76, 76, 76, 0.2);
  border-radius: 4px;
  color: #333;
  border: none;
  font-size: 14px;
  margin-right: 10px;
  transition: all 0.3s;

  &:hover {
    background: #d0d0d0;
    box-shadow: 0px 6px 12px rgba(76, 76, 76, 0.3);
  }
}
</style>
