<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" style="margin-bottom: 20px">
        <span style="color: orange">*固定分类不可删除以及编辑添加</span></el-col
      >
      <el-col :span="6">
        <el-card class="box-card">
          <div>
            <h3>一级分类</h3>
            <el-input
              @change="search(1)"
              v-model="queryParams.classifyName"
              placeholder="输入一级分类名称搜索"
            />
            <ul style="line-height: 40px; overflow: auto; height: 550px">
              <li
                class="items"
                v-for="(item, index) in sortList"
                :key="index"
                :class="itemIndex == index ? 'itemActive' : ''"
                @click="itemsChange(item, index)"
              >
                <div>
                  <el-tag type="danger" v-if="item.classifyType == 0">秒送</el-tag>
                  <el-tag type="warning" v-if="item.classifyType == 1">批发</el-tag>
                  {{ item.classifyName }}
                </div>
                <div v-if="item.isDefault == 1">
                  <el-button size="small" round @click.prevent="edit(item)"
                    >编辑</el-button
                  >
                  <el-button size="small" round @click.prevent="remove(item, '1')"
                    >删除</el-button
                  >
                </div>
              </li>
              <el-empty description="暂无分类数据" v-if="sortList.length == 0"></el-empty>
            </ul>
          </div>
        </el-card>
        <div style="text-align: center; margin-top: 20px">
          <el-button type="primary" @click="addPrimary('f')">添加一级分类</el-button>
        </div>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div>
            <h3>二级分类</h3>
            <el-input
              @change="search(2)"
              v-model="queryParamsChildren.classifyName"
              placeholder="输入二级分类名称搜索"
            />
            <ul style="line-height: 40px; overflow: auto; height: 550px">
              <li
                class="items"
                v-for="(item, index) in sortListChildren"
                :key="index"
                :class="itemIndex == index ? 'itemActive' : ''"
              >
                <div>
                  <el-tag type="danger" v-if="item.classifyType == 0">秒送</el-tag>
                  <el-tag type="warning" v-if="item.classifyType == 1">批发</el-tag>
                  {{ item.classifyName }}
                </div>
                <div v-if="item.isDefault == 1">
                  <el-button size="small" round @click.prevent="edit1(item)"
                    >编辑</el-button
                  >
                  <el-button size="small" round @click.prevent="remove(item, '2')"
                    >删除</el-button
                  >
                </div>
              </li>
              <el-empty
                description="暂无分类数据"
                v-if="sortListChildren.length == 0"
              ></el-empty>
            </ul>
          </div>
        </el-card>
        <div
          style="text-align: center; margin-top: 20px"
          v-if="selectSort.isDefault == 1"
        >
          <el-button type="primary" @click="addPrimary('z')">添加二级分类</el-button>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="添加分类"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="分类名称" prop="classifyName">
          <el-input v-model="form.classifyName" placeholder="请输入分类名称" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSort">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import {
  getMerchantClassifyList,
  merchantClassifySave,
  merchantClassifyEdit,
  merchantClassifyDelete,
} from "@/api/sort/index.js";
export default {
  components: { draggable },
  data() {
    return {
      dialogVisible: false,
      queryParams: {
        classifyName: "",
        name: "",
      },
      queryParamsChildren: {
        classifyName: "",
        name: "",
      },
      form: {
        classifyName: "",
      },
      type: "f",
      sortList: [],
      sortListChildren: [],
      selectSort: {},
      itemIndex: null,
      rules: {
        classifyName: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    rest() {
      this.queryParams = {
        classifyName: "",
        name: "",
      };
      this.queryParamsChildren = {
        classifyName: "",
        name: "",
        parentId: "",
      };
      this.getList();
    },
    search(index) {
      if (index == 1) {
        this.getList();
      } else {
        this.getChildren();
      }
    },
    getList() {
      this.loading = true;
      getMerchantClassifyList(this.queryParams).then((res) => {
        if (res.code == 200) {
          if (this.queryParams.parentId) {
            this.sortListChildren = res.data;
          } else {
            this.sortList = res.data;
          }
        }
      });
    },
    addSort() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.type == "z") {
            this.form.parentId = this.queryParamsChildren.parentId;
          } else {
            this.form.parentId = "";
          }
          if (this.form.id) {
            merchantClassifyEdit(this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success("修改成功！");
                if (this.type == "z") {
                  this.getChildren();
                } else {
                  this.getList();
                }

                this.dialogVisible = false;
              }
            });
          } else {
            merchantClassifySave(this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success("添加成功！");
                if (this.type == "z") {
                  this.getChildren();
                } else {
                  this.getList();
                }
                this.dialogVisible = false;
              }
            });
          }
          this.form.classifyName = "";
        } else {
          return false;
        }
      });
    },
    remove(item, type) {
      this.$confirm("是否确认删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          merchantClassifyDelete({ id: item.id }).then((res) => {
            console.log("11", res);

            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              if (type == "1") {
                this.rest();
              } else {
                this.getChildren();
              }
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    edit(item) {
      this.form = item;
      this.dialogVisible = true;
      this.type = "f";
    },
    edit1(item) {
      this.form = item;
      this.dialogVisible = true;
      this.type = "z";
    },
    itemsChange(item, index) {
      this.selectSort = item;
      this.itemIndex = index;
      this.queryParamsChildren.parentId = item.id;
      console.log(this.queryParamsChildren.parentId);
      this.getChildren();
    },

    getChildren() {
      this.loading = true;
      getMerchantClassifyList(this.queryParamsChildren).then((res) => {
        if (res.code == 200) {
          this.sortListChildren = res.data;
        }
      });
    },

    addPrimary(type) {
      this.form = {};
      this.type = type;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
.items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.itemActive {
  background: #f4f4f4;
}
/* .items:hover {
  background: #f4f4f4;
} */
.box-card {
  height: 700px;
}
</style>
