<template>
  <ContainerQuery>
    <div v-if="$accessCheck($Access.GoodsGroupingAddGoodsGrouping)" slot="left">
      <el-button size="small" type="primary" @click="addGoodsGroupsFlag">
        添加商品分组
      </el-button>
    </div>
    <div slot="more">
      <el-form :inline="true" size="small">
        <el-form-item>
          <el-input
            v-model="keyword"
            style="width: 220px"
            placeholder="商品分组名称"
            clearable
            @keyup.enter.native="pageChange(1)"
            @clear="pageChange(1)"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="pageChange(1)"
            ></el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <vxe-table :data="tableData" border="inner">
      <vxe-table-column field="name" title="分组名称"></vxe-table-column>
      <vxe-table-column field="explain" title="描述"></vxe-table-column>
      <vxe-table-column field="createTime" title="创建时间">
        <template #default="{ row }">
          {{ $_common.formatDate(row.createTime) }}
        </template>
      </vxe-table-column>
      <vxe-table-column field="sort" title="排序"></vxe-table-column>
      <vxe-table-column field="status" title="状态">
        <template #default="{ row }">
          <el-switch
            v-if="$accessCheck($Access.GoodsGroupingUpdateGoodsGrouping)"
            v-model="row.status"
            class="switchStyle"
            active-color="#36B365"
            :active-value="5"
            :inactive-value="4"
            active-text="启用"
            inactive-text="禁用"
            @change="enableGoodsGroups($event, row)"
          ></el-switch>
          <div v-else>
            <span v-if="row.status === 5" class="success-status">启用</span>
            <span v-else class="danger-status">禁用</span>
          </div>
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作">
        <template #default="{ row }">
          <el-button
            v-if="$accessCheck($Access.GoodsGroupingEditGoodsGrouping)"
            type="text"
            @click="getReservoirInfo(row)"
          >
            编辑
          </el-button>
          <el-button
            v-if="$accessCheck($Access.GoodsGroupingDelGoodsGrouping)"
            type="text"
            @click="deleteGoodsGroups(row.id)"
          >
            删除
          </el-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
    <!--    添加商品分组弹框-->
    <vxe-modal
      v-model="grouping_bounced_flag"
      :title="title"
      width="400"
      height="350"
      resize
      remember
      @close="closeGrouping('form')"
    >
      <template #default>
        <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
          <el-form-item label="商品分组" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入商品分组名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="form.explain"
              type="textarea"
              :autosize="{ minRows: 5 }"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number
              v-model="form.sort"
              :min="0"
              :controls="false"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              @click="addGoodsGroups"
            >
              保存
            </el-button>
            <el-button @click="closeGrouping('form')">返回</el-button>
          </el-form-item>
        </el-form>
      </template>
    </vxe-modal>
  </ContainerQuery>
</template>
<script>
  import {
    getAllGoodsGroups,
    addGoodsGroups,
    enableGoodsGroups,
    updateGoodsGroups,
    getReservoirInfo,
    deleteGoodsGroups,
  } from "@/api/goods";
  export default {
    data() {
      return {
        keyword: "",
        tableData: [],
        page: 1,
        pageSize: 10,
        total: 0,
        grouping_bounced_flag: false,
        form: {
          name: "",
          explain: "",
          sort: "",
        },
        formRules: {
          name: [{ required: true, message: "请输入分组名称" }],
        },
        title: "",
        goods_id: "",
        loading: false,
      };
    },
    created() {
      this.getAllGoodsGroups();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getAllGoodsGroups();
    },
    methods: {
      pageChange(val) {
        this.page = val;
        this.getAllGoodsGroups();
      },
      sizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },
      async getAllGoodsGroups() {
        const { data, pageTotal } = await getAllGoodsGroups({
          page: this.page,
          pageSize: this.pageSize,
          name: this.keyword,
        });
        this.tableData = data;
        this.total = pageTotal;
      },
      addGoodsGroupsFlag() {
        this.title = "添加商品分组";
        this.grouping_bounced_flag = true;
      },
      async addGoodsGroups() {
        if (!this.form.name.trim()) {
          this.$message.warning("分类名称不能为空");
          return;
        }
        this.loading = true;
        try {
          if (this.goods_id) {
            const { data } = await updateGoodsGroups(this.goods_id, this.form);
            this.$message.success("编辑成功");
          } else {
            const { data } = await addGoodsGroups(this.form);
            this.$message.success("添加成功");
          }
          this.loading = false;
          this.grouping_bounced_flag = false;
          this.pageChange(1);
        } catch {
          this.loading = false;
          this.grouping_bounced_flag = false;
          this.pageChange(1);
        }
      },
      async enableGoodsGroups(val, row) {
        try {
          const { data } = await enableGoodsGroups(row.id, {
            status: val,
          });
          this.$message.success("操作成功");
        } catch (e) {
          await this.getAllGoodsGroups();
        }
      },
      async getReservoirInfo(row) {
        this.grouping_bounced_flag = true;
        this.title = "编辑商品分组";
        this.goods_id = row.id;
        const { data } = await getReservoirInfo(this.goods_id);
        this.form.name = data.name;
        this.form.explain = data.explain;
        this.form.sort = data.sort;
      },
      closeGrouping(formName) {
        this.form.name = "";
        this.form.explain = "";
        this.form.sort = "";
        this.grouping_bounced_flag = false;
        this.$refs[formName].resetFields();
      },
      deleteGoodsGroups(id) {
        this.$confirm("确定删除此分组?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const { data } = await deleteGoodsGroups(id);
          this.pageChange(1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      },
    },
  };
</script>
<style></style>
