<template>
  <div class="group-main" ref="groupMainRef">
    <div class="group-main-item-style group-main-add-item" @click="addDialogVisible = true">
      <div class="add-icon">
        <WlPic :src="require('@/assets/images/add-grey.png')" />
      </div>
      <p class="add-text">添加分组</p>
    </div>
    <vuedraggable
      v-model="groupList"
      handle=".group-icon"
      chosenClass="chosenClass"
      ghostClass="ghostClass"
      @end="onDragEnd"
    >
      <transition-group type="transition">
        <div
          v-for="item in groupList"
          :key="item.id"
          v-show="!item.is_default"
          class="group-main-item group-main-item-style"
        >
          <div class="input-wrap">
            <input
              type="text"
              v-model="item.group_name"
              @keydown="onFieldKeyDown(item)"
              @focus="onFieldFocus(item)"
            />
          </div>
          <div class="operation">
            <div class="save-btn" @click="onFieldEdit(item)" v-show="item.is_edit">
              保存
            </div>
            <div class="del-icon" @click="onDelete(item)" v-show="!item.is_edit">
              <WlPic :src="require('@/assets/images/del.png')" />
            </div>
            <div class="group-icon" v-show="!item.is_edit">
              <WlPic :src="require('@/assets/images/group.png')" />
            </div>
          </div>
        </div>
      </transition-group>
    </vuedraggable>
    <DeleteGroupDialog
      v-model="deleteDialogVisible"
      @onConfirm="onDeleteDialogConfirm"
      :title="deleteDialogTitle"
      :description="deleteDialogDescription"
    />
    <MtAddGroupDialog v-model="addDialogVisible" @onConfirm="onAddDialogConfirm" />
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:19:49
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2021-11-01 19:29:58
 */
import vuedraggable from "vuedraggable";
import useMessage from "@packages/hooks/useMessage";
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
import DeleteGroupDialog from "./components/DeleteGroupDialog/index.vue";
import MtAddGroupDialog from "@packages/components/Material/MtAddGroupDialog/src/index.vue";
const { onWarning } = useMessage();
export default {
  name: "MtGroupList",
  components: { vuedraggable, DeleteGroupDialog, WlPic, MtAddGroupDialog },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    group_scope: {
      type: String,
      default: "",
    },
    deleteDialogTitle: {
      type: String,
      default: "标题",
    },
    deleteDialogDescription: {
      type: String,
      default: "描述",
    },
  },
  data() {
    return {
      groupMainRef: null,
      groupList: [],
      chosedItem: null,
      deleteDialogVisible: false,
      addDialogVisible: false,
    };
  },
  methods: {
    onJudgeBlank(group_name) {
      let bool = true;
      if (group_name.length > 8) {
        onWarning("分组名字不能大于8个字");
        bool = false;
      }
      return bool;
    },
    onDelete(item) {
      this.chosedItem = item;
      this.deleteDialogVisible = true;
    },
    //如果聚焦的话需要把当前的item的is_edit设置为true
    onFieldFocus(item) {
      this.groupList = this.groupList.map((res) => {
        return {
          ...res,
          is_edit: item.id === res.id,
        };
      });
    },
    onFieldEdit(item) {
      item.is_edit = false;
      if (!this.onJudgeBlank(item.group_name)) return;
      this.$emit("onEdit", item);
    },
    onFieldKeyDown(item) {
      const evt = event.keyCode;
      if (evt === 13) {
        this.$emit("onEdit", item);
      }
    },
    onAddDialogConfirm(group_name) {
      if (!this.onJudgeBlank(group_name)) return;
      const params = {
        group_name,
        group_scope: this.group_scope,
      };
      this.$emit("onAdd", params);
      this.$nextTick(() => {
        this.groupMainRef.scrollTop = this.groupMainRef.scrollHeight;
      });
    },
    onDeleteDialogConfirm(delete_all) {
      const { id, group_scope } = this.chosedItem;
      const params = {
        id,
        group_scope,
        delete_all,
      };
      this.$emit("onDelete", params);
    },
    onDragEnd() {
      const params = {
        group_scope: this.group_scope,
        sort_list: this.groupList.map((res) => res.id),
      };
      this.$emit("onDragEnd", params);
    },
  },
  watch: {
    list: {
      handler(list) {
        this.groupList = list.map((item) => {
          return {
            ...item,
            is_edit: false,
          };
        });
      },
      immediate: true,
    },
  },
};
</script>
<style scoped lang="scss">
.group-main {
  flex: 1;
  font-size: j(16);
  @extend %overflow-auto;
  .chosenClass {
    background-color: #fff;
    box-shadow: j(4) j(4) j(10) rgba(0, 0, 0, 0.1);
  }
  .ghostClass {
    background-color: #f7f7f7;
    box-shadow: none;
    color: #c1c1c1;
  }
  &-item-style {
    height: j(55);
    padding: 0 j(15);
    font-weight: 500;
    @include halfBorder("bottom", #ebebeb);
  }
  &-add-item {
    @extend %flex-middle;
    @include btnClick();
    .add-icon {
      width: j(14);
      height: j(14);
      margin-right: j(5);
    }
    .add-text {
      color: #979797;
      font-size: j(16);
    }
  }
  &-item {
    &.shadow {
      box-shadow: j(4) j(4) j(10) rgba(0, 0, 0, 0.1);
    }
    @extend %flex-between;
    .input-wrap {
      width: 100%;
    }
    .operation {
      @extend %flex-middle;
      .save-btn {
        width: j(50);
        height: j(28);
        color: #fff;
        cursor: pointer;
        font-size: j(16);
        margin-right: j(5);
        border-radius: j(5);
        background-color: #1c9fff;
        @extend %flex-middle-center;
      }
      .del-icon {
        width: j(20);
        height: j(20);
        padding: j(5);
        margin-right: j(10);
      }
      .group-icon {
        width: j(16);
        height: j(16);
        padding: j(5);
      }
    }
  }
}
</style>
