<template>
  <Container>
    <div
      v-if="$accessCheck($Access.GoodsBasicCategoryAddGoodsClassify)"
      slot="left"
    >
      <el-button size="small" type="primary" @click="openModel('新增分类')">
        新建分类
      </el-button>
    </div>
    <el-table
      class="tree-table"
      :data="classify_list"
      :row-class-name="tableRowClassName"
      row-key="id"
      :indent="20"
    >
      <el-table-column label="#" fixed="left" width="80"></el-table-column>
      <el-table-column prop="title" label="分类名称" min-width="200">
        <template slot-scope="scope">
          <span
            :style="{
              paddingLeft: scope.row.link
                ? scope.row.link.split(',').length * 30 + 'px'
                : '0px',
            }"
          ></span>
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column prop="categoryNo" label="图片" min-width="80">
        <template slot-scope="scope">
          <el-image fit="cover" :src="scope.row.images"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="code"
        label="分类编码"
        min-width="140"
      ></el-table-column>

      <el-table-column prop="num" label="商品数量" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.goodsBasicTotal || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="unitName" label="分类状态" min-width="80">
        <template slot-scope="scope">
          <el-switch
            v-if="$accessCheck($Access.GoodsBasicCategoryUpdateCategoryStatus)"
            v-model="scope.row.enableStatus"
            class="switchStyle"
            active-color="#36B365"
            :active-value="5"
            :inactive-value="4"
            active-text="启用"
            inactive-text="禁用"
            @change="updateCategoryStatus($event, scope.row)"
          ></el-switch>
          <div v-else>
            <span v-if="scope.row.enableStatus === 5" class="success-status">
              启用
            </span>
            <span v-else class="danger-status">禁用</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        min-width="80"
      ></el-table-column>
      <el-table-column label="操作" width="255" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-if="$accessCheck($Access.GoodsBasicCategoryAddGoodsClassify)"
            type="text"
            @click="openModel('新建子分类', scope.row)"
          >
            新建下级
          </el-button>
          <el-button
            v-if="$accessCheck($Access.GoodsBasicCategoryEditCategory)"
            type="text"
            @click="openModel('修改分类', scope.row)"
          >
            编辑
          </el-button>
          <el-button
            v-if="$accessCheck($Access.GoodsBasicCategoryDelCategory)"
            type="text"
            @click="deleteData(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-----------------    添加分类 ----------->
    <AddCate
      v-if="add_model"
      :dialog-title="dialogTitle"
      :is-show="add_model"
      :cate-id="cate_id"
      :pid-path="pid_arr"
      @confirm="subCategory"
      @cancel="modelClose"
    />
  </Container>
</template>

<script>
  import AddCate from "@/component/goods/AddCate.vue";
  import {
    updateCategoryStatus,
    getAllCategory,
    delCategory,
    updateEnableStatus,
  } from "@/api/goods";
  export default {
    name: "GoodsClassify",
    components: {
      AddCate,
    },
    data() {
      return {
        cate_id: 0,
        add_model: false,
        dialogTitle: "新建分类",
        pid_arr: [],
        cate_name: "",
        classify_list: [],
        dialogVisible: false,
      };
    },
    created() {
      this.getList();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getList();
    },
    methods: {
      modelClose() {
        this.add_model = false;
      },
      // 打开新增弹窗
      openModel(title, row) {
        this.add_model = true;
        this.dialogTitle = title;
        if (row) {
          this.cate_id = row.id;
        }
        if (title === "新建子分类") {
          let link = row.link
            ? row.link.split(",").map((item) => {
                return parseInt(item);
              })
            : [];
          link.push(row.id);
          this.pid_arr = link;
        }
      },
      // 新增/编辑分类
      async subCategory() {
        await this.getList();
      },
      // 分类的显示和隐藏
      async updateCategoryStatus(val, row) {
        try {
          const data = await updateCategoryStatus(row.id, {
            enableStatus: val,
          });
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        } catch (e) {
          await this.getList();
        }
      },
      // 获取分类列表
      async getList() {
        const { data } = await getAllCategory();
        if (JSON.stringify(data) === "{}") {
          this.classify_list = [];
        } else {
          this.classify_list = data;
        }
      },
      deleteData(id) {
        this.$confirm("确定要删除吗?", "删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await delCategory(id);

          this.$message({
            type: "success",
            message: "删除成功",
          });
          await this.getList();
        });
      },
      tableRowClassName({ row, rowIndex }) {
        let lever = 1;
        if (row.link && row.link !== "undefined") {
          lever = lever + row.link.split(",").length;
        }
        if (lever === 2) {
          return "success-row";
        } else if (lever === 3) {
          return "warning-row";
        } else if (lever === 4) {
          return "danger-row";
        } else if (lever === 5) {
          return "info-row";
        }
        return "";
      },
    },
  };
</script>
