<template>
  <div class="productManagement">
    <el-row :gutter="24" class="rowBorder">
      <el-col :span="5">
        <span style="font-size: 14px; color: #606266; font-weight: bold">
          产品名称:</span
        >
        <el-input
          type="text"
          v-model="productName"
          style="width: 70%; margin-left: 15px"
          placeholder="产品名称"
        ></el-input>
      </el-col>
      <el-col :span="5">
        <span style="font-size: 14px; color: #606266; font-weight: bold"
          >spid:</span
        ><el-input
          style="width: 70%; margin-left: 15px"
          type="text"
          v-model="spid"
          placeholder="科创spid"
        ></el-input>
      </el-col>
      <el-col :offset="9" :span="3">
        <el-button style="margin-left: 10px" type="primary" @click="search"
          >搜索</el-button
        >
        <el-button style="margin-left: 10px" @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <el-form
      class="formBorder"
      :model="productFrom"
      label-width="0px"
      style="margin-top: 20px"
    >
      <el-form-item>
        <el-button style="float: left" @click="addPush"> 新增 </el-button>
        <el-button style="float: left" @click="search"> 刷新 </el-button>
      </el-form-item>
      <el-form-item>
        <vxe-table border :data="productFrom.productData">
          <vxe-table-column field="productName" title="产品名称" />
          <vxe-table-column field="spid" title="spid" />
          <vxe-table-column field="remark" title="备注" />
          <vxe-table-column field="originalPrice" title="原价" />
          <vxe-table-column field="createTime" title="时间" />
          <vxe-table-column title="操作">
            <template #default="{ row }">
              <vxe-button @click="edit(row.id)">编辑</vxe-button>
              <vxe-button @click="addPush(row)">复制</vxe-button>
              <vxe-button @click="dele(row.id)">删除</vxe-button>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-form-item>
      <el-form-item>
        <el-pagination
          style="float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="productFrom.currenttPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="productFrom.total"
          :page-size="productFrom.pageSize"
        >
        </el-pagination>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { post, get, del, put } from "@/api/common";
import { quillEditor } from "vue-quill-editor";
export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      productName: "",
      spid: "",
      productFrom: {
        productData: [],
        currenttPage: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {
    this.getProductv2List();
  },
  methods: {
    getProductv2List() {
      get("product/info/page").then((res) => {
        this.productFrom.productData = res.data.list;
        this.productFrom.total = res.data.total;
        this.productFrom.pageSize = res.data.pageSize;
        this.productFrom.currenttPage = res.data.pageNum;
      });
    },
    // 编辑
    edit(id) {
      this.$router.push("/produce/productV2/editProduct?ids=" + id);
      // this.$router.push("../../produce/productV2/editProduct.vue");
    },

    // 新增/复制
    addPush(row) {
      let id = row.id;
      console.log(id);
      if (row.id) {
        console.log("复制");
        this.$router.push("/produce/productV2/addProduct?copyId=" + id);
      } else {
        console.log("添加");
        this.$router.push("/produce/productV2/addProduct");
      }
    },
    dele(id) {
      // 删除
      this.$confirm("确定要删除么？").then((_) => {
        del("/product/info/delete", { id: id }).then((res) => {
          if (res.code === 0) this.$message.success("删除成功");
          this.getProductv2List();
        });
      });
    },
    // 搜索
    search() {
      let data = {
        pageNo: 1,
        pageSize: 100,
        // productName: "",
        // spid: "",
      };
      get("/product/info/page", data).then((res) => {
        // console.log(res,"搜索");
        // this.productFrom=res.data.list
        // console.log(this.form,"搜索");
        this.productFrom.productData = res.data.list;
        this.productFrom.total = res.data.total;
        this.productFrom.pageSize = res.data.pageSize;
        this.productFrom.currenttPage = res.data.pageNum;
      });
    },
    // 重置
    reset() {
      this.productName = "";
      this.spid = "";
    },
    handleSizeChange(val) {
      let data = {
        pageSize: val,
        pageNum: this.productFrom.pageNum,
        productName: this.productName,
      };
      get("/productInfo/page", data).then((res) => {
        this.productFrom.productData = res.data.list;
        this.productFrom.total = res.data.total;
        this.productFrom.pageSize = res.data.pageSize;
        this.productFrom.currenttPage = res.data.pageNum;
      });
    },
    handleCurrentChange(val) {
      let data = {
        pageSize: this.productFrom.pageSize,
        pageNum: val,
        productName: this.productName,
      };
      get("/productInfo/page", data).then((res) => {
        this.productFrom.productData = res.data.list;
        this.productFrom.total = res.data.total;
        this.productFrom.pageSize = res.data.pageSize;
        this.productFrom.currenttPage = res.data.pageNum;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.productManagement {
  width: 100%;
  height: 100%;
  ::v-deep .rowBorder {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: #bfbfbf 0 0 2px;
    height: unset !important;
    padding: 10px 10px;
  }
  .formBorder {
    padding: 20px 20px;
    margin-top: 20px;
    box-shadow: #bfbfbf 0 0 2px;
    box-sizing: border-box;
  }
}
</style>
