<template>
  <div class="app-container">
    <el-tabs v-model="queryParams.classifyType" @tab-click="getList">
      <el-tab-pane label="秒送商品" :name="0"></el-tab-pane>
      <el-tab-pane label="批发商品" :name="1"></el-tab-pane>
    </el-tabs>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div>
            <h3>一级分类</h3>
            <el-input
              @change="search"
              v-model="queryParams.classifyName"
              placeholder="输入一级分类名称搜索"
            />
            <ul style="line-height: 40px; overflow: auto; height: 550px">
              <draggable
                :sort="true"
                v-model="sortList"
                group="people"
                @change="change"
                @start="start"
                @end="end"
              >
                  <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">
                      <i class="el-icon-rank"></i>
                    </div>
                  </li>
              </draggable>

              <el-empty description="暂无分类数据" v-if="sortList.length == 0"></el-empty>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div>
            <h3>二级分类</h3>
            <el-input
              @change="search"
              v-model="queryParamsChildren.classifyName"
              placeholder="输入二级分类名称搜索"
            />
            <ul style="line-height: 40px; overflow: auto; height: 550px">
              <draggable
                :sort="true"
                v-model="sortListChildren"
                group="people"
                @change="change1"
                @start="start"
                @end="end1"
              >
                  <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>
                      <i class="el-icon-rank"></i>
                    </div>
                  </li>
              </draggable>
              <el-empty
                description="暂无分类数据"
                v-if="sortListChildren.length == 0"
              ></el-empty>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import {
  getMerchantClassifyList,
  merchantClassifySave,
  merchantClassifyEdit,
  merchantClassifyDelete,
  merchantClassifyUpdateSort,
} from "@/api/sort/index.js";
export default {
  components: { draggable },
  data() {
    return {
      dialogVisible: false,
      queryParams: {
        classifyName: "",
        name: "",
        classifyType: 0,
      },
      queryParamsChildren: {
        classifyName: "",
        name: "",
      },
      form: {
        classifyName: "",
      },
      type: "f",
      sortList: [],
      sortListChildren: [],
      selectSort: {},
      itemIndex: null,
      rules: {
        classifyName: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
      },
      newList: [],
      newzList: [],
      eventsrot: 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // // 监听拖拽
    change1(event) {
      for (let index = 0; index < this.sortListChildren.length; index++) {
        let e = this.sortListChildren[index];
        if (this.queryParams.classifyType == 0) {
          if (e.sortSecond == event.moved.newIndex) {
            this.newzList.push({
              id: e.id,
              sort: event.moved.oldIndex,
            });
          }
        } else {
          if (e.sortWholesale == event.moved.newIndex) {
            this.newzList.push({
              id: e.id,
              sort: event.moved.oldIndex,
            });
          }
        }
      }
      this.newzList.push({
        id: event.moved.element.id,
        sort: event.moved.newIndex,
      });
    },
    end1(event, e) {
      merchantClassifyUpdateSort({
        classifyType: Number(this.queryParams.classifyType),
        list: this.newzList,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功！",
          });
          this.newzList = [];
          this.getChildren();
        }
      });
    },

    change(event) {
      this.eventsrot = event.moved.element.isDefault;
      if (event.moved.element.isDefault == 0) {
        return false;
      }
      for (let index = 0; index < this.sortList.length; index++) {
        let e = this.sortList[index];
        if (this.queryParams.classifyType == 0) {
          if (e.sortSecond == event.moved.newIndex) {
            this.newList.push({
              id: e.id,
              sort: event.moved.oldIndex,
            });
          }
        } else {
          if (e.sortWholesale == event.moved.newIndex) {
            this.newList.push({
              id: e.id,
              sort: event.moved.oldIndex,
            });
          }
        }
      }
      this.newList.push({
        id: event.moved.element.id,
        sort: event.moved.newIndex,
      });
      console.log(this.newList);
    },

    // 结束拖拽
    end(event, e) {
      console.log(this.eventsrot);
      if (this.eventsrot == 0) {
        return false;
      }

      // event.item  拖拽的本身
      // event.to      拖拽的目标列表
      // event.from    拖拽之前的列表
      // event.oldIndex    拖拽前的位置
      // event.newIndex    拖拽后的位置
      // console.log(event);
      for (let index = 0; index < this.sortList.length; index++) {
        let e = this.sortList[index];
        if (e.isDefault == 1) {
          e.sort = index;
        }
        if (e.classifyName == "其它") {
          e.sort = 999;
        }
      }
      merchantClassifyUpdateSort({
        classifyType: Number(this.queryParams.classifyType),
        list: this.sortList,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功！",
          });
          this.newList = [];
          this.getList();
        }
      });
    },

    rest() {
      this.queryParams = {
        classifyName: "",
        name: "",
      };
      this.queryParamsChildren = {
        classifyName: "",
        name: "",
        parentId: "",
      };
      this.getList();
    },
    search() {
      if (this.queryParams.classifyNameChildren) {
        this.queryParams.classifyName = this.queryParams.classifyNameChildren;
      }
      if (this.queryParams.name) {
        this.queryParams.classifyName = this.queryParams.name;
      }
      this.getList();
    },
    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({
                  type: "success",
                  message: "修改成功！",
                });
                if (this.type == "z") {
                  this.getChildren();
                } else {
                  this.getList();
                }

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

    getChildren() {
      this.loading = true;
      getMerchantClassifyList(this.queryParamsChildren).then((res) => {
        if (res.code == 200) {
          if (this.queryParams.classifyType == 0) {
            this.sortListChildren = res.data.sort((a, b) => a.sortSecond - b.sortSecond);
          }
          if (this.queryParams.classifyType == 1) {
            this.sortListChildren = res.data.sort(
              (a, b) => a.sortWholesale - b.sortWholesale
            );
          }
          console.log(this.sortListChildren);
        }
      });
    },

    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>
