<template>
  <div class="app-container">
    <el-form :inline="true" size="small" class="demo-form-inline">
      <el-row>
        <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="产品名称" clearable size="small"></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" size="small"></el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="search" icon="el-icon-search" size="small">搜索</el-button>
          <el-button @click="reset" size="small" icon="el-icon-refresh">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-form class="formBorder" :model="productFrom" label-width="0px" style="margin-top: 20px">
      <el-form-item>
        <el-button style="float: left" @click="addPush" size="mini" type="primary" plain icon="el-icon-plus">
          新增
        </el-button>
        <el-button style="float: left" @click="init" size="mini">
          刷新
        </el-button>
      </el-form-item>

      <el-form-item>
        <el-table :data="productFrom.productData">
          <el-table-column label="产品名称" prop="productName" />
          <el-table-column label="spid" prop="spid" />
          <el-table-column label="备注" prop="remark" />
          <el-table-column label="原价" prop="originalPrice" />
          <el-table-column label="时间" prop="createTime" />
          <el-table-column label="操作" prop="originalPrice">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="edit(scope.row.id)">编辑</el-button>
              <el-button size="mini" type="text" icon="el-icon-set-up" @click="addPush(scope.row)">复制</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="dele(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <pagination v-show="total>0" :total="total" :page.sync="productFrom.pageNo" :limit.sync="productFrom.pageSize" @pagination="getList" />

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listProductV2, delProductV2 } from "./api.js";
import { quillEditor } from "vue-quill-editor";
import getTime from "@/utils/getTime.js";
export default {
  components: {
    quillEditor,
  },
  data () {
    return {
      total: 100,
      pageSize: 10,
      pageNo: 1,
      productName: "",
      spid: "",
      productFrom: {
        productData: [],
        currenttPage: 1,
        pageSize: 10,
        pageNo: 1,
        totalResult: 0,

      },
    };
  },
  created () {
    this.getList();
  },
  methods: {
    init () {
      this.getList();
    },
    getTimeStr (timeStamp) {
      var now = new Date(timeStamp),
        y = now.getFullYear(),
        m = ("0" + (now.getMonth() + 1)).slice(-2),
        d = ("0" + now.getDate()).slice(-2);
      return y + "-" + m + "-" + d + " " + now.toTimeString().substr(0, 8);
    },

    getList () {
      listProductV2(this.productFrom).then((res) => {
        console.log(res)
        this.productFrom.productData = res.data.list;
        this.productFrom.productData.totalResult = res.data.total
        this.total = res.data.total;

        this.productFrom.productData.forEach((item) => {
          item.createTime = getTime(item.createTime);
        });
      });
    },
    // 编辑
    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) {
      // 删除
      delProductV2({ id: id }).then((res) => {
        if (res.code === 0) this.$message.success("删除成功");
        this.getList();
      });
    },
    // 搜索
    search () {
      let data = {
        pageNo: 1,
        pageSize: 100,
        productName: this.productName,
        spid: this.spid,
      };

      if (!data.productName || !data.spid) {
        this.$message.error("请输入内容");
      } else {
        listProductV2(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.pageNo;
        });
      }
    },
    // 重置
    reset () {
      this.productName = "";
      this.spid = "";
    },


  },
};
</script>
