<template>
  <el-dialog
    title="添加积分商品"
    :visible.sync="visible"
    width="80%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <!-- 查询条件 -->
    <div class="search-form">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="店铺名称">
          <el-input
            v-model="searchForm.shopName"
            placeholder="请输入店铺名称搜索"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input
            v-model="searchForm.productName"
            placeholder="请输入商品名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="商品ID">
          <el-input
            v-model="searchForm.productId"
            placeholder="请输入商品ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchProducts">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 商品列表 -->
    <div class="product-list">
      <el-table
        :data="productList"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="productId" label="商品ID" align="center">
        </el-table-column>
        <el-table-column prop="shopName" label="商品店铺" align="center">
        </el-table-column>
        <el-table-column prop="attributeValue" label="商品规格" align="center">
        </el-table-column>
        <el-table-column prop="marketPrice" label="商品价格" align="center">
          <template slot-scope="scope"> ¥{{ scope.row.marketPrice }} </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="350">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="addToPointsMall(scope.row, 1)"
              style="margin-right: 10px"
            >
              添加为积分换购商品
            </el-button>
            <el-button
              type="success"
              size="small"
              @click="addToPointsMall(scope.row, 2)"
            >
              添加为积分优惠购商品
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        style="margin-top: 20px; text-align: center"
      >
      </el-pagination>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>

    <!-- 积分商品配置弹框 -->
    <points-product-config
      ref="pointsProductConfig"
      @success="handleConfigSuccess"
    ></points-product-config>
  </el-dialog>
</template>

<script>
import PointsProductConfig from "./points-product-config.vue";

export default {
  name: "ProductSelector",
  components: {
    PointsProductConfig
  },
  props: {
    storeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      searchForm: {
        shopName: "",
        productName: "",
        productId: ""
      },
      productList: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  methods: {
    show(shopIdList) {
      this.visible = true;
      this.loadProducts();
    },
    handleClose() {
      this.visible = false;
      this.resetData();
    },
    resetData() {
      this.searchForm = {
        shopName: "",
        productName: "",
        productId: ""
      };
      this.productList = [];
      this.pagination = {
        currentPage: 1,
        pageSize: 10,
        total: 0
      };
    },
    searchProducts() {
      this.pagination.currentPage = 1;
      this.loadProducts();
    },
    resetSearch() {
      this.searchForm.shopName = "";
      this.searchForm.productName = "";
      this.searchForm.productId = "";
      this.searchProducts();
    },
    loadProducts() {
      this.loading = true;
      // 调用新的商品规格分页接口
      this.$api.mer_admin
        .getProductSpecificationPage({
          shopIdList: [], // 暂时忽略
          shopName: this.searchForm.shopName || "",
          productName: this.searchForm.productName || "",
          productId: this.searchForm.productId || ""
        })
        .then(res => {
          console.log("商品规格列表:", res);
          this.productList = res.data.data.data || [];
          this.pagination.total = this.productList.length; // 暂时使用数组长度作为总数
          this.loading = false;
        })
        .catch(err => {
          console.error("获取商品规格列表失败:", err);
          this.productList = [];
          this.pagination.total = 0;
          this.loading = false;
          this.$message.error("获取商品规格列表失败");
        });
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.loadProducts();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.loadProducts();
    },
    addToPointsMall(product, exchangeType) {
      // 打开积分商品配置弹框，传递积分类型
      this.$refs.pointsProductConfig.show(
        {
          ...product,
          productSpecId: product.id
        },
        null,
        exchangeType
      );
    },
    handleConfigSuccess() {
      this.$emit("success");
      this.handleClose();
    }
  }
};
</script>

<style lang="scss" scoped>
.search-form {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 20px;
}

.product-list {
  min-height: 400px;
}
</style>
