<template>
  <!-- 页面卡片容器 -->
  <el-card class="form-container" shadow="never">
    <!-- 表单定义 -->
    <el-form :model="brand" :rules="rules" ref="brandForm" label-width="150px">
      <!-- 品牌名称输入框 -->
      <el-form-item label="品牌名称：" prop="name">
        <el-input v-model="brand.name"></el-input>
      </el-form-item>

      <!-- 品牌首字母输入框 -->
      <el-form-item label="品牌首字母：">
        <el-input v-model="brand.firstLetter"></el-input>
      </el-form-item>

      <!-- 品牌LOGO上传组件 -->
      <el-form-item label="品牌LOGO：" prop="logo">
        <single-upload v-model="brand.logo"></single-upload>
      </el-form-item>

      <!-- 品牌专区大图上传组件 -->
      <el-form-item label="品牌专区大图：">
        <single-upload v-model="brand.bigPic"></single-upload>
      </el-form-item>

      <!-- 品牌故事文本域 -->
      <el-form-item label="品牌故事：">
        <el-input
          placeholder="请输入内容"
          type="textarea"
          v-model="brand.brandStory"
          :autosize="true"
        ></el-input>
      </el-form-item>

      <!-- 排序输入框（数字类型） -->
      <el-form-item label="排序：" prop="sort">
        <el-input v-model.number="brand.sort"></el-input>
      </el-form-item>

      <!-- 是否显示单选按钮组 -->
      <el-form-item label="是否显示：">
        <el-radio-group v-model="brand.showStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 品牌制造商单选按钮组 -->
      <el-form-item label="品牌制造商：">
        <el-radio-group v-model="brand.factoryStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 提交和重置按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit('brandForm')">提交</el-button>
        <el-button v-if="!isEdit" @click="resetForm('brandForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { createBrand, getBrand, updateBrand } from "@/api/brand";
import SingleUpload from "@/components/Upload/singleUpload";

export default {
  name: "BrandDetail", // 组件名称
  components: {
    SingleUpload, // 注册上传组件
  },
  props: {
    // 是否编辑模式的标志
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    // 定义表单默认数据和校验规则
    const defaultBrand = {
      bigPic: "", // 品牌大图
      brandStory: "", // 品牌故事
      factoryStatus: 0, // 是否品牌制造商
      firstLetter: "", // 品牌首字母
      logo: "", // 品牌LOGO
      name: "", // 品牌名称
      showStatus: 0, // 是否显示
      sort: 0, // 排序
    };

    return {
      brand: Object.assign({}, defaultBrand), // 表单数据初始化
      rules: {
        name: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
          { min: 2, max: 140, message: "长度在 2 到 140 个字符", trigger: "blur" },
        ],
        logo: [{ required: true, message: "请输入品牌logo", trigger: "blur" }],
        sort: [{ type: "number", message: "排序必须为数字" }],
      },
    };
  },
  created() {
    // 根据编辑模式加载数据
    if (this.isEdit) {
      getBrand(this.$route.query.id).then((response) => {
        this.brand = response.data; // 加载品牌数据
      });
    } else {
      this.brand = Object.assign({}, this.defaultBrand); // 重置表单
    }
  },
  methods: {
    // 提交表单
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("是否提交数据", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            if (this.isEdit) {
              // 编辑模式下更新品牌数据
              updateBrand(this.$route.query.id, this.brand).then(() => {
                this.$refs[formName].resetFields();
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1000,
                });
                this.$router.back();
              });
            } else {
              // 新增品牌数据
              createBrand(this.brand).then(() => {
                this.$refs[formName].resetFields();
                this.brand = Object.assign({}, this.defaultBrand);
                this.$message({
                  message: "提交成功",
                  type: "success",
                  duration: 1000,
                });
              });
            }
          });
        } else {
          this.$message({
            message: "验证失败",
            type: "error",
            duration: 1000,
          });
          return false;
        }
      });
    },
    // 重置一下表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.brand = Object.assign({}, this.defaultBrand);
    },
  },
};
</script>
