<template>
  <!-- 产品分类 -->
  <div class="abtestIndex">
    <!--搜索-->
    <el-form :inline="true" :model="searchForm" size="small" class="demo-form-inline">
      <el-form-item label="分类名称">
        <el-input v-model="searchForm.categoryName" placeholder="分类名称" clearable />
      </el-form-item>
      <el-form-item label="CPID">
        <el-input v-model="searchForm.cpid" placeholder="CPID" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchBtn">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="add">新增</el-button>
      </el-col>
    </el-row>
    <!--表格-->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column prop="parentCategory" label="产品大类" />
      <el-table-column prop="categoryName" label="分类名称" />
      <el-table-column prop="cpid" label="CPID" />
      <el-table-column prop="pwd" label="会员pwd" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="edit(scope.row.id, scope.row)" icon="el-icon-edit">编辑</el-button>
          <el-button type="text" size="mini" @click="dele(scope.row.id)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNo" :limit.sync="searchForm.pageSize" @pagination="getList" />

    <!--新增抽屉-->
    <el-drawer ref="addDrawer" title="编辑产品分类" size="50%" :before-close="addHandleClose" :with-header="false" :visible.sync="addDialog" direction="rtl" custom-class="demo-drawer">
      <div class="demo-drawer__content">
        <span>编辑产品分类</span>
        <el-form :model="addForm">
          <el-form-item label="分类名称" label-width="80px">
            <el-input v-model="addForm.categoryName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="CPID" label-width="80px">
            <el-input v-model="addForm.cpid" autocomplete="off" />
          </el-form-item>
          <el-form-item label="大类名称" label-width="80px">
            <el-input v-model="addForm.parentCategory" autocomplete="off" />
          </el-form-item>
          <el-form-item label="会员pwd" label-width="80px">
            <el-input v-model="addForm.pwd" placeholder="科创会员兑换专用pwd，根据映射表填写" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="$refs.addDrawer.closeDrawer()">{{ loading ? "提交中 ..." : "确 定" }}</el-button>
        </div>
      </div>
    </el-drawer>

    <!--编辑抽屉-->
    <el-drawer ref="editDrawer" title="编辑产品分类" size="50%" :before-close="editHandleClose" :with-header="false" :visible.sync="editDialog" direction="rtl" custom-class="demo-drawer">
      <div class="demo-drawer__content">
        <span>编辑产品分类</span>
        <el-form :model="editForm">
          <el-form-item label="分类名称" label-width="80px">
            <el-input v-model="editForm.categoryName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="CPID" label-width="80px">
            <el-input v-model="editForm.cpid" autocomplete="off" />
          </el-form-item>
          <el-form-item label="大类名称" label-width="80px">
            <el-input v-model="editForm.parentCategory" autocomplete="off" />
          </el-form-item>
          <el-form-item label="会员pwd" label-width="80px">
            <el-input v-model="editForm.pwd" placeholder="科创会员兑换专用pwd，根据映射表填写" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="$refs.editDrawer.closeDrawer()">{{ loading ? "提交中 ..." : "确 定" }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { listProduct, addProduct, delProduct, editProduct } from "../api.js";
import getTime from "@/utils/getTime.js";
export default {
  data () {
    return {
      loading: false,
      editDialog: false,
      addDialog: false,
      total: 100,
      searchForm: {
        cpid: null,
        categoryName: null,
        pageSize: 10,
        pageNo: 1,
      },
      addForm: {
        cpid: "",
        categoryName: "",
        parentCategory: "",
        pwd: "",
      },
      editForm: {
        cpid: "",
        categoryName: "",
        parentCategory: "",
        pwd: "",
        id: "",
      },
      tableData: [],

    };
  },

  created () {
    this.getList();
  },
  methods: {


    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 () {
      listProduct(this.searchForm).then((res) => {
        this.tableData = res.data.list;

        this.tableData.forEach((item) => {
          item.createTime = getTime(item.createTime);
        });

        this.total = res.data.total;
      });
    },

    searchBtn () {
      // 搜索按钮
      if (!this.searchForm.categoryName || !this.searchForm.cpid) {
        this.$message.error("请输入内容");
      } else {
        this.getList();
      }
    },
    reset () {
      // 重置
      this.searchForm = {};
      this.editForm = {
        cpid: "",
        categoryName: "",
        parentCategory: "",
        pwd: "",
        id: "",
      };
    },
    add () {
      // 新增
      this.addDialog = true;
      this.bannerList = [];
      this.logoUrl = "";
      this.proUrl = "";
      this.guidUrl = "";

      this.getList();
    },

    addHandleClose (done) {
      //   // 新增数据
      if (this.loading) return;
      this.$confirm("确定要提交吗？").then((_) => {
        done();
        this.addDialog = true;
        addProduct(this.addForm).then((res) => {
          if (res.code == 0) {
            this.$message.success("新增成功!");
            this.getList();
            this.reset();
            setTimeout(() => {
              this.addDialog = false;
            }, 400);
          }
        });
      });
    },
    edit (id, e) {
      // 编辑
      this.editForm.id = id;
      this.editForm = e;
      this.editDialog = true;
    },
    editHandleClose (done) {
      // 修改数据
      if (this.loading) return;
      this.$confirm("确定要提交吗？")
        .then((_) => {
          done();
          this.editDialog = true;
          editProduct(this.editForm)
            .then((res) => {
              if (res.code === 0) this.getList();
              this.reset();
              setTimeout(() => {
                this.editDialog = false;
              }, 400);
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((_) => {
          this.editDialog = false;
        });
    },
    dele (id) {
      // 删除
      this.$confirm("确定要删除么？").then((_) => {
        delProduct({ id: id }).then((res) => {
          if (res.code === 0) this.getList();
          this.reset();
        });
      });
    },
    cancelForm () {
      // 关闭抽屉

      this.loading = false;
      this.editDialog = false;
      this.addDialog = false;
      clearTimeout(this.timer);
    },

  },
};
</script>

<style scoped lang="scss">
.abtestIndex {
  padding: 20px;
  box-sizing: border-box;
}

.searchBox {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
  height: unset !important;
  form {
    margin: auto;
  }
}
.el-header {
  padding: 20px;
}
.el-form-item {
  margin-bottom: unset;
}
.tableBox {
  margin-top: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
}
.block {
  margin-top: 20px;
  float: right;
}
.demo-drawer__content {
  padding: 20px 5%;
  line-height: 32px;
  .el-form-item {
    margin-top: 20px;
  }
  .demo-drawer__footer {
    position: fixed;
    bottom: 30px;
    width: 45%;
    margin-top: 20px;
    display: flex;
    button {
      flex: 1;
    }
  }
}
</style>
