<template>
  <div>
    <div class="product-content">
      <div class="content-header">
        <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="handleUseProduct(scope.row)"
              >使用</el-button
            >
            <!-- <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>
  </div>
</template>

<script>
import { productList, deleteProduct } from "@/api/ProductMent/product";
import { getInfoDCPPNO } from "@/api/document";
export default {
  name: "CodeJson",
  /*组件参数 接收来自父组件的数据*/
  props: {},
  /*局部注册的组件*/
  components: {},
  /*组件状态值*/
  data() {
    return {
      searchForm: {
        dcp_p_no: "",
        dcp_name: "",
        dcp_model: "",
        dcp_oa_code: "",
      },
      typeList: [],
      dcpInfo: null,
      // 分页参数
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      productList: [],
    };
  },

  /*计算属性*/
  computed: {},

  /*侦听器*/
  watch: {},

  /*
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {
    this.fetchProductList();
  },

  /*组件方法*/
  methods: {
    // 搜索和分页
    handleSearch() {
      this.pagination.currentPage = 1; // 重置到第一页
      this.fetchProductList();
    },
    // 获取产品列表
    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("获取产品列表失败");
      }
    },
    /* 使用 */
    handleUseProduct() {},
    /*  getDCPPNOInfo() {
      getInfoDCPPNO(this.queryForm.type).then((res) => {
        this.dcpInfo = res;
      });
    },

    onBtnSearch() {
      this.getDCPPNOInfo();
    }, */
  },
};
</script>
<style lang='css' scoped>
</style>