<template>
  <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="editCategoryVsible" width="30%">
    <el-form ref="editCategoryFormRef" :model="form" :rules="rules">
      <el-form-item label="分类名称" prop="categoryName">
        <el-input v-model="form.categoryName" placeholder="请填写分类名称"></el-input>
      </el-form-item>

      <el-form-item label="分类图片" prop="categoryImage">
        <ImageUpload :limit="1" v-model="form.categoryImage"></ImageUpload>
      </el-form-item>

      <el-form-item label="排序值" prop="categorySort">
        <el-input v-model="form.categorySort" placeholder="请填写排序值"></el-input>
        <div style="font-size: 14px; color: #ccc;">值越大，排序越靠前</div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="isLoading" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import ImageUpload from '@/components/ImageUpload'
import { addExplosiveProductCategory, editExplosiveProductCategory } from '@/api/explosiveProduct/category'

export default {
  components: { ImageUpload },
  data() {
    return {
      editCategoryVsible: false,
      dialogTitle: '新增分类',
      form: {
        id: '',
        categoryName: '',
        categoryImage: '',
        categorySort: ''
      },
      rules: {
        categoryName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        categoryImage: [{ required: true, message: '请上传分类图片', trigger: 'blur' }],
        categorySort: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                const sortValue = Number(value)
                // 检查转换后的值是否为有效数字
                if (Number.isNaN(sortValue)) {
                  callback(new Error('排序值必须是一个有效的数字'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            },
            trigger: ['change', 'blur']
          }
        ]
      },
      isLoading: false,
      categoryList: [],
    }
  },

  watch: {
    editCategoryVsible(val) {
      if (!val) {
        this.form = {
          id: '',
          categoryName: '',
          categoryImage: '',
          categorySort: ''
        }
        this.dialogTitle = '新增分类'
      }
    }
  },

  methods: {
    open(row) {
      if (row) {
        this.form.id = row.id
        this.form.categoryName = row.categoryName
        this.form.categoryImage = row.categoryImage
        this.form.categorySort = row.categorySort
        this.dialogTitle = '编辑分类'
      }

      this.editCategoryVsible = true
    },

    // 关闭弹窗
    handleClose() {
      this.editCategoryVsible = false
    },

    // 确定提交
    async handleConfirm() {
      try {
        this.isLoading = true
        await this.$refs.editCategoryFormRef.validate()
        const api = this.form.id ? editExplosiveProductCategory : addExplosiveProductCategory
        const res = await api(this.form)
        if (res.code === '200') {
          this.$message({
            message: this.form.id ? '编辑成功' : '添加成功',
            type: 'success'
          })
          this.$emit('refresh')
          this.handleClose()
        }
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
