<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)">删除</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 { quillEditor } from "vue-quill-editor";
export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      productName: "",
      spid: "",
      productFrom: {
        productData: [],
        currenttPage: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  async created() {
    await this.$get("/productInfo/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;
    });
    // let a = 0; // 每个分流人数
    // let b = 0;
    // let c = 0;
    // let member = 1; // 总人数=uv
    //
    //   for(let i=0; i<member;i++) {
    //       let num = Math.ceil(Math.random()*100); // 随机数
    //       if(num <= (100*0.15) && a < (member*0.15)) {
    //           a++
    //       }else if(num >=(100*0.15) && num < (100*0.7) && b < (member*0.55)){
    //           b++
    //       }else{
    //           if (c > (member*0.3) && a < (member*0.15)) {
    //               a++
    //           }else if(c > (member*0.3) && b < (member*0.55)) {
    //               b++
    //           }else{
    //               c++
    //           }
    //           // c++
    //       }
    //
    //       if(member === 3000) {
    //           console.log('a`15%`标准：'+Math.ceil(member*0.15),'结果：'+a)
    //           console.log('b`55%`标准：'+Math.ceil(member*0.55),'结果：'+b)
    //           console.log('c`30%`标准：'+Math.ceil(member*0.3),'结果：'+c)
    //           console.log('1%流量：'+Math.ceil(member*0.01))
    //           break
    //       }
    //       member++
    //   }
  },
  methods: {
    // 编辑
    edit(id) {
      const routeUrl = this.$router.resolve({
        path: "/productV2/editProduct",
        query: { id: id },
      });
      window.open(routeUrl.href, "_blank");
    },
    // 新增
    addPush(row) {
        let routeUrl
        if(row.id) {
            routeUrl = this.$router.resolve({
                path: "/productV2/addProduct",
                query: { copyId: row.id },
            });
        }else{
            routeUrl = this.$router.resolve({
              path: "/productV2/addProduct",
            });
        }
        window.open(routeUrl.href, "_blank");
    },
    dele(e) {
      // 删除
      this.$confirm("确定要删除么？").then((_) => {
        this.$post("/productInfo/delete", { ids: [e.id] }).then((res) => {
          if (res.code === 10000) this.$message.success("删除成功");
          this.reset();
        });
      });
    },
    // 搜索
    search() {
      let data = {
        productName: this.productName,
        spid: this.spid,
      };
      this.$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;
      });
    },
    // 重置
    reset() {
      this.productName = "";
      this.spid = "";
      this.$get("/productInfo/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;
      });
    },
    handleSizeChange(val) {
      let data = {
        pageSize: val,
        pageNum: this.productFrom.pageNum,
        productName:this.productName
      };
      this.$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
      };
      this.$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>
