<template>
  <div class="mod-category">
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="分类名称">
        <el-input
          v-model="searchForm.name"
          size="small"
          placeholder="请输入分类名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="search()"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      icon="el-icon-plus"
      size="small"
      @click="addOrUpdateHandle()"
      >新增一级分类</el-button
    >
    <el-button
      type="primary"
      size="small"
      @click="handleExport"
      >Excel导入分类</el-button
    >
    <el-table
      :data="dataList"
      border
      row-key="categoryId"
      :tree-props="{ children: 'children', hasChildren: 'seq' }"
      style="width: 100%"
    >
      <el-table-column
        prop="categoryName"
        header-align="center"
        treeKey="categoryId"
        align="center"
        width="150"
        label="分类名称"
      >
      </el-table-column>
      <el-table-column prop="categoryName" align="center" label="图标">
      </el-table-column>
      <el-table-column prop="categoryName" align="center" label="关联商品">
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        label="状态"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" size="small" type="danger"
            >下线</el-tag
          >
          <el-tag v-else size="small">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="seq"
        header-align="center"
        align="center"
        label="排序号"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleRelated(scope.row.categoryId)"
            >管理商品</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="addOrUpdateHandle(scope.row.categoryId)"
            >添加二级分类</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="addOrUpdateHandle(scope.row.categoryId)"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="deleteHandle(scope.row.categoryId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchForm.current"
      :page-sizes="[10, 20]"
      :page-size="searchForm.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>



    <!-- 导入 -->
    <export-excel v-if="exportVisible" ref="export" @close="exportVisible = false"></export-excel>

    
    <!-- 关联商品 -->
    <relate-goods v-if="relatedVisible" ref="related" @close="relatedVisible = false"></relate-goods>
  </div>
</template>

<script>
import AddOrUpdate from "./category-add-or-update";
import exportExcel from './exportExcel';
import relateGoods from './relateGoods';
export default {
  data() {
    return {
      total: 0,
      searchForm: {
        shopId: localStorage.getItem("shopId"),
        current: 1,
        size: 10,
      },
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false,
      exportVisible: true,
      relatedVisible: true,
      resourcesUrl: window.SITE_CONFIG.resourcesUrl,
    };
  },
  components: {
    AddOrUpdate,
    exportExcel,
    relateGoods
  },
  created() {
    this.getDataList();
  },
  methods: {
    handleExport(){
      this.exportVisible = true;
      this.$refs.export.open()
    },
    handleRelated(){
      this.relatedVisible = true;
      this.$refs.related.open()
    },
    search() {
      this.searchForm.current = 1;
      this.getDataList();
    },
    handleSizeChange(val) {
      this.searchForm.size = val;
      this.searchForm.current = 1;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.searchForm.current = val;
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/prod/category/listCategory"),
        method: "get",
        params: this.$http.adornParams(this.searchForm),
      }).then(({ data }) => {
        // this.dataList = treeDataTranslate(data, 'categoryId', 'parentId')
        this.dataList = data.records;
        this.total = data.total;
        this.dataListLoading = false;
      });
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(`确定进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl(`/prod/category/${id}`),
          method: "delete",
          data: this.$http.adornData(),
        }).then(({ data }) => {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.getDataList();
            },
          });
        });
      });
    },
  },
};
</script>
<style lang="scss">
.mod-category {
  img {
    height: 80px;
    width: 200px;
  }
}
</style>
