<template>
  <div>
    <el-drawer
      :title="mode === 'add' ? '批量新增商品配置' : '编辑商品配置'"
      :visible.sync="drawerVisible"
      direction="rtl"
      size="50%"
      :before-close="handleClose"
    >
      <div class="fixed-header">
        <el-button
          type="primary"
          icon="el-icon-plus"
          v-if="mode === 'add'"
          @click="addNewItem"
          >添加组</el-button
        >
      </div>

      <div class="scrollable-content">
        <el-form :model="batchForm" label-width="80px" ref="batchFormRef">
          <div
            v-for="(item, index) in batchForm.items"
            :key="index"
            class="product-card"
          >
            <div class="card-header">
              <span>组{{ index + 1 }}</span>
              <el-button
                type="danger"
                size="small"
                v-if="mode === 'add' || batchForm.items.length > 1"
                @click="removeItem(index)"
                >删除</el-button
              >
            </div>

            <div class="form-row">
                <el-form-item
                :prop="'items.' + index + '.storeId'"
                :rules="rules.storeId"
                label="店铺"
              >
                <el-select
                  style="width: 100%"
                  v-model="item.storeId"
                  placeholder="选择店铺"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="item in shopListData"
                    :key="item.store_id"
                    :label="item.store_name"
                    :value="item.store_id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                :prop="'items.' + index + '.productName'"
                :rules="rules.productName"
                label="商品名称"
              >
                <el-input
                  v-model="item.productName"
                  placeholder="请输入商品名称"
                ></el-input>
              </el-form-item>
            </div>

            <div class="form-row">
                <el-form-item
                :prop="'items.' + index + '.specValue'"
                :rules="rules.specValue"
                label="规格值"
              >
                <el-input
                  v-model.number="item.specValue"
                  type="number"
                  placeholder="请输入规格值"
                ></el-input>
              </el-form-item>
            </div>

            <div class="form-row">
              <el-form-item
                :prop="'items.' + index + '.specUnit'"
                :rules="rules.specUnit"
                label="规格单位"
              >
                <el-input
                  v-model="item.specUnit"
                  placeholder="请输入规格单位"
                ></el-input>
              </el-form-item>

              <el-form-item
                :prop="'items.' + index + '.sortOrder'"
                :rules="rules.sortOrder"
                label="排序"
              >
                <el-input
                  v-model.number="item.sortOrder"
                  type="number"
                  placeholder="请输入排序"
                ></el-input>
              </el-form-item>
            </div>

            <div class="form-row">
                <el-form-item
                :prop="'items.' + index + '.description'"
                :rules="rules.description"
                label="描述"
              >
                <el-input
                    style="display: block"
                  v-model="item.description"
                  type="textarea"
                  :rows="1"
                  placeholder="请输入描述"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>

      <div class="fixed-footer">
        <el-button @click="drawerVisible = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">{{
          mode === "add" ? "提交" : "保存"
        }}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import GoodsToolApi from "@/api/goodsTool";

export default {
  name: "BatchProductForm",
  props: {
    mode: {
      type: String,
      default: "add",
      validator: (value) => ["add", "edit"].includes(value),
    },
    initialData: {
      type: Array,
      default: () => [],
    },
    shopListData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      drawerVisible: false,
      loading: false,
      batchForm: {
        items: [],
      },
      rules: {
        productName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        storeId: [{ required: true, message: "请选择店铺", trigger: "change" }],
        specValue: [
          { required: true, message: "请输入规格值", trigger: "blur" },
          { type: "number", message: "规格值必须为数字", trigger: "blur" },
        ],
        specUnit: [
          { required: true, message: "请输入规格单位", trigger: "blur" },
        ],
        sortOrder: [
          { required: true, message: "请输入排序", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    // 监听props变化，更新表单数据
    initialData: {
      handler(newVal) {
        if (this.mode === "edit" && newVal && newVal.length > 0) {
          // 深拷贝初始数据，避免修改原始数据
          this.batchForm.items = JSON.parse(JSON.stringify(newVal));
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 打开抽屉
    open() {
      this.drawerVisible = true;

      // 如果是新增模式，确保有一个空项
      if (this.mode === "add" && this.batchForm.items.length === 0) {
        this.addNewItem();
      }
    },

    // 关闭抽屉前的确认
    handleClose(done) {
      if (this.hasUnsavedChanges()) {
        this.$confirm("确定要关闭吗？未保存的数据将会丢失。", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            done();
          })
          .catch(() => {
            // 取消关闭
          });
      } else {
        done();
      }
    },

    // 检查是否有未保存的更改
    hasUnsavedChanges() {
      if (this.mode === "add") {
        return this.batchForm.items.some(
          (item) =>
            item.productName || item.storeId || item.specValue || item.specUnit
        );
      }

      // 编辑模式下的比较逻辑
      if (this.initialData && this.initialData.length > 0) {
        return (
          JSON.stringify(this.batchForm.items) !==
          JSON.stringify(this.initialData)
        );
      }

      return false;
    },

    // 添加新项目
    addNewItem() {
      this.batchForm.items.push({
        productName: "",
        storeId: "",
        specValue: "",
        specUnit: "",
        description: "",
        sortOrder: "",
      });

      // 滚动到底部
      this.$nextTick(() => {
        const container = document.querySelector(".scrollable-content");
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      });
    },

    // 删除项目
    removeItem(index) {
      if (this.mode === "add" && this.batchForm.items.length > 1) {
          console.log(111);
        this.batchForm.items.splice(index, 1);
    } else {
        this.$message.warning("至少保留一个商品组配置");
      }
    },

    // 提交表单
    submitForm() {
      this.$refs.batchFormRef.validate(async(valid) => {
        if (valid) {
          this.loading = true;

          // 准备提交数据
          const submitData = this.batchForm.items.map((item) => ({
            productName: item.productName,
            storeId: item.storeId,
            specValue: item.specValue,
            specUnit: item.specUnit,
            description: item.description,
            sortOrder: item.sortOrder,
          }));

          // 过滤掉空项（新增模式下）
          const filteredData =
            this.mode === "add"
              ? submitData.filter(
                  (item) =>
                    item.productName ||
                    item.storeId ||
                    item.specValue ||
                    item.specUnit
                )
              : submitData;

          if (filteredData.length === 0) {
            this.$message.warning("请添加商品配置组数据");
            this.loading = false;
            return;
          }


          let res = null;
          if(this.mode=='add'){
            res = await GoodsToolApi.batchCreateGoods(submitData)
          }else{
            res = await GoodsToolApi.updateGoods({
              ...submitData?.[0],
              id: this.batchForm.items?.[0].id
            })
          }

          if(res.status==200){
            this.$message.success("操作成功");
          } else {
            this.loading = false;
          }
          
        } else {
          this.$message.error("请完善表单信息");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.fixed-header {
  padding: 0 12px 12px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
}

.scrollable-content {
  padding: 12px;
  height: calc(100vh - 195px);
  overflow-y: auto;
}

.fixed-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
}

.product-card {
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 12px 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.form-row .el-form-item {
  flex: 1 1 calc(33.33% - 12px);
  margin-bottom: 0;
}

.form-row .el-form-item:last-child {
  flex: 1 1 calc(33.34% - 12px);
}

.form-row .el-form-item:nth-child(3n) {
  flex: 1 1 100%;
}

.form-row .el-input__inner {
  height: 32px;
}

.form-row .el-input--textarea .el-input__inner {
  height: auto;
}
</style>
