<template>
  <div class="productManagement">
    <el-form size="small" inline>
      <el-form-item label="产品名称">
        <el-input type="text" v-model="productName" placeholder="产品名称"></el-input>
      </el-form-item>
      <el-form-item label="spid">
        <el-input type="text" v-model="spid" placeholder="科创spid"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="addPush" icon="el-icon-plus">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">刷新</el-button>
      </el-form-item>
    </el-form>
    <div style="margin:30px 0">
      <el-table max-height="700" border highlight-current-row :data="productFrom.productData" :header-cell-style="{ 'background-color': '#E4E7ED', color: '#000' }" style="width: 100%;">
        <el-table-column prop="productName" label="产品名称" />
        <el-table-column prop="spid" label="spid" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="originalPrice" label="原价" />
        <el-table-column prop="createTime" label="时间" />
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="addPush(scope.row)">复制</el-button>
            <el-button type="text" size="small" @click="dele(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <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>
      </div>
    </div>
  </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,
      },
      productId: ""
    };
  },
  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 = {
        spid: this.spid,
        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 = {
        spid: this.spid,
        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 {
  padding: 20px !important;
  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>
