<template>
  <div class="product-management">
    <!-- 左侧产品分类 -->
    <!-- <div class="category-sidebar">
      <div class="category-header">
        <span>请选择产品分类</span>
        <el-button type="primary" size="small" @click="handleAddCategory"
          >新建分类</el-button
        >
      </div>

      <el-tree :data="categoryData" node-key="id" default-expand-all>
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="operations">
            <i class="el-icon-plus" @click="handleAdd(data)"></i>
            <i class="el-icon-minus" @click="handleDelete(node, data)"></i>
            <i class="el-icon-edit" @click="handleEdit(data)"></i>
          </span>
        </span>
      </el-tree>
    </div> -->

    <!-- 右侧产品列表 -->
    <div class="product-content">
      <div class="content-header">
        <!--  <div class="breadcrumb">首页—产品库—产品管理</div> -->
        <div class="search-area">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-form-item label="产品应用编号">
              <el-input
                v-model="searchForm.dcp_p_no"
                placeholder="请输入产品应用编号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
              <el-input
                v-model="searchForm.dcp_name"
                placeholder="请输入产品名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="产品类型">
              <el-input
                v-model="searchForm.dcp_model"
                placeholder="请输入产品类型"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="OA编号">
              <el-input
                v-model="searchForm.dcp_oa_code"
                placeholder="请输入OA编号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" @click="handleAddProduct">新建产品</el-button>
      </div>

      <el-table :data="productList">
        <el-table-column prop="dcp_oa_code" label="OA编号" />
        <el-table-column 
          prop="dcp_p_no" 
          label="产品应用编号"
          show-overflow-tooltip
          :min-width="120"
        >
          <template slot-scope="scope">
            <div class="ellipsis">{{ scope.row.dcp_p_no }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="dcp_name" label="产品名称" />
        <el-table-column prop="dcp_model" label="产品类型" />
        <!--<el-table-column prop="screenMaterial" label="屏幕材质" /> -->
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEditProduct(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDeleteProduct(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加分页组件 -->
      <div class="pagination-container">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          layout="total, prev, pager, next"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 添加分类对话框 -->
    <el-dialog
      :title="dialogType === 'add' ? '新增分类' : '编辑分类'"
      :visible.sync="categoryDialogVisible"
      width="500px"
    >
      <el-form :model="categoryForm" label-width="80px">
        <el-form-item label="分类名称">
          <el-input
            v-model="categoryForm.label"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="categoryDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCategorySubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 添加产品对话框 -->
    <el-dialog
      :title="dialogType === 'add' ? '新增产品' : '编辑产品'"
      :visible.sync="productDialogVisible"
      width="650px"
    >
      <el-form :model="productForm" label-width="100px">
        <el-form-item label="OA编号">
          <el-input v-model="productForm.oaNumber"></el-input>
        </el-form-item>
        <el-form-item label="产品应用编号">
          <el-input v-model="productForm.productCode"></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="productForm.productName"></el-input>
        </el-form-item>
        <el-form-item label="产品描述">
          <el-input
            type="textarea"
            v-model="productForm.description"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品型号">
          <el-input v-model="productForm.productType"></el-input>
        </el-form-item>
        <el-form-item label="长宽比">
          <el-input v-model="productForm.length"></el-input>
        </el-form-item>
        <el-form-item label="刷新率">
          <el-input v-model="productForm.resolution"></el-input>
        </el-form-item>
        <el-form-item label="屏幕材质">
          <el-input v-model="productForm.screenMaterial"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="productDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleProductSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
import { productList, deleteProduct } from "@/api/ProductMent/product";
export default {
  name: "ProductManagement",
  data() {
    return {
      searchForm: {
        dcp_p_no: '',
        dcp_name: '',
        dcp_model: '',
        dcp_oa_code: ''
      },
      categoryData: [
        {
          id: 1,
          label: "LED产品",
          children: [],
        },
        {
          id: 2,
          label: "LCD产品",
          children: [],
        },
        {
          id: 3,
          label: "集成产品",
          children: [
            {
              id: 31,
              label: "集成产品A",
            },
            {
              id: 32,
              label: "集成产品B",
            },
            {
              id: 33,
              label: "集成产品C",
            },
          ],
        },
      ],
      productList: [],
      // 添加对话框控制变量
      categoryDialogVisible: false,
      productDialogVisible: false,
      dialogType: "add", // 'add' 或 'edit'

      // 表单数据
      categoryForm: {
        label: "",
        parentId: null,
      },

      productForm: {
        oaNumber: "",
        productCode: "",
        productName: "",
        description: "",
        productType: "",
        length: "",
        resolution: "",
        screenMaterial: "",
        categoryId: null,
      },

      // 当前选中的分类
      currentCategory: null,

      // 分页参数
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {
    this.fetchCategoryList();
    this.fetchProductList();
  },
  methods: {
    // 获取分类列表
    async fetchCategoryList() {
      try {
        // const { data } = await this.$api.category.getList()
        // this.categoryData = data
        // 模拟API调用
        console.log("获取分类列表");
      } catch (error) {
        this.$message.error("获取分类列表失败");
      }
    },

    // 获取产品列表
    async fetchProductList() {
      try {
        const params = {
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          ...this.searchForm  // 展开所有搜索条件
        };

        productList(params).then((res) => {
          this.productList = res.rows;
          this.pagination.total = res.total;
        });
      } catch (error) {
        this.$message.error("获取产品列表失败");
      }
    },

    // 分类相关方法
    handleAddCategory() {
      this.dialogType = "add";
      this.categoryForm = { label: "", parentId: null };
      this.categoryDialogVisible = true;
    },
    /* 新增产品分类 */
    handleAdd(data) {
      this.dialogType = "add";
      this.categoryForm = { label: "", parentId: data.id };
      this.categoryDialogVisible = true;
    },
    /* 编辑产品分类 */
    handleEdit(data) {
      this.dialogType = "edit";
      this.categoryForm = { ...data };
      this.categoryDialogVisible = true;
    },

    async handleCategorySubmit() {
      try {
        if (!this.categoryForm.label.trim()) {
          return this.$message.warning("请输入分类名称");
        }

        if (this.dialogType === "add") {
          // await this.$api.category.create(this.categoryForm)
          this.$message.success("添加分类成功");
        } else {
          // await this.$api.category.update(this.categoryForm)
          this.$message.success("编辑分类成功");
        }

        this.categoryDialogVisible = false;
        this.fetchCategoryList();
      } catch (error) {
        this.$message.error("操作失败");
      }
    },
    /* 删除产品分类 */
    async handleDelete(node, data) {
      try {
        await this.$confirm("确认删除该分类吗？删除后无法恢复", "提示", {
          type: "warning",
        });

        // await this.$api.category.delete(data.id)
        this.$message.success("删除成功");
        this.fetchCategoryList();
      } catch (error) {
        if (error !== "cancel") {
          this.$message.error("删除失败");
        }
      }
    },

    // 产品相关方法
    handleAddProduct() {
      this.$router.push({
        path: "/cpk/ProductMent/newProduct/index",
        query: { title: "新建产品" }, // 添加标题参数
      });
    },
    /* 编辑产品 */
    handleEditProduct(row) {
      this.$router.push({
        path: "/cpk/ProductMent/newProduct/editor",
        query: {
          id: row.dcp_id,
          title: "编辑产品", // 添加标题参数
        },
      });
    },

    async handleProductSubmit() {
      try {
        if (!this.productForm.productName.trim()) {
          return this.$message.warning("请输入产品名称");
        }

        if (this.dialogType === "add") {
          // await this.$api.product.create(this.productForm)
          this.$message.success("添加产品成功");
        } else {
          // await this.$api.product.update(this.productForm)
          this.$message.success("编辑产品成功");
        }

        this.productDialogVisible = false;
        this.fetchProductList();
      } catch (error) {
        this.$message.error("操作失败");
      }
    },
    /* 删除产品列表 */
    async handleDeleteProduct(row) {
      try {
        await this.$confirm("确认删除该产品吗？删除后无法恢复", "提示", {
          type: "warning",
        });

        // 调用删除API
        await deleteProduct(row.dcp_id);
        this.$message.success("删除成功");
        this.fetchProductList(); // 重新加载列表
      } catch (error) {
        if (error !== "cancel") {
          this.$message.error("删除失败");
        }
      }
    },

    // 搜索和分页
    handleSearch() {
      this.pagination.currentPage = 1; // 重置到第一页
      this.fetchProductList();
    },

    handleCurrentChange(page) {
      this.pagination.currentPage = page;
      this.fetchProductList();
    },

    // 分类选择
    handleNodeClick(data) {
      this.currentCategory = data;
      this.pagination.currentPage = 1;
      this.fetchProductList();
    },

    resetForm() {
      // 重置表单引用
      this.$refs.searchForm.resetFields();
      // 手动清空 searchForm 对象的所有属性
      Object.keys(this.searchForm).forEach(key => {
        this.searchForm[key] = '';
      });
      this.pagination.currentPage = 1;
      this.fetchProductList();
    },
  },
};
</script>
  
  <style scoped>
.product-management {
  display: flex;
  height: 100%;
}

.category-sidebar {
  width: 250px;
  height: 91vh;
  border-right: 1px solid #ebeef5;
  padding: 20px;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.product-content {
  flex: 1;
  padding: 20px;
}

.content-header {
  margin-bottom: 20px;
}

.search-area {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}

.operations {
  display: none;
}

.custom-tree-node:hover .operations {
  display: inline-block;
}

.operations i {
  margin-left: 8px;
  cursor: pointer;
}

.breadcrumb {
  font-size: 14px;
  color: #606266;
}
/* .pagination-container {
  margin-top: 20px;
  text-align: right;
} */

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>