<template>
  <div>
    <WlPopUp
      v-model="dialogVisible"
      :style="{ height: '60%' }"
      position="bottom"
      round
      v-bind="popUpProps"
      @close="onClose"
    >
      <div class="popUp-content">
        <WlHeader
          :showBack="showBack"
          :showClose="showClose"
          @onBack="onBack"
          @onClose="onClose"
          title="选择分组"
        ></WlHeader>
        <div class="choose-group" ref="groupMainRef">
          <div class="choose-group-item add-item" @click="onAdd">
            <div class="add-icon">
              <WlPic :src="require('@packages/assets/images/add-grey.png')" />
            </div>
            <p class="add-text">添加分组</p>
          </div>
          <div
            class="choose-group-item"
            v-for="item in groupList"
            :key="item.id"
            @click="onChoose(item)"
          >
            {{ item.group_name }}
          </div>
        </div>
      </div>
    </WlPopUp>
    <MtAddGroupDialog :need_notify="need_notify" v-model="addDialogVisible" @onConfirm="onAddDialogConfirm" @onNotify="onNotify"/>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: yangxin
 * @Last Modified time: 2022-01-21 14:46:52
 */
import WlPic from "@packages/components/Common/WlPic";
import WlPopUp from "@packages/components/Common/WlPopUp";
import WlHeader from "@packages/components/Common/WlHeader";
import MtAddGroupDialog from "@packages/components/Material/MtAddGroupDialog";
export default {
  name: "MtChooseGroupPopup",
  components: { WlPic, WlPopUp, WlHeader, MtAddGroupDialog },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    groupList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    sourceType: {
      type: String,
      default: "",
    },
    showBack: {
      type: Boolean,
      default: false,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    popUpProps: {
      type: Object,
      default: () => {
        return {};
      },
    },
    need_notify: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      groupMainRef: null,
      dialogVisible: false,
      addDialogVisible: false,
    };
  },
  methods: {
    onAdd() {
      this.addDialogVisible = true;
    },
    onClose() {
      this.$emit("input", false);
      this.$emit("onClose");
      this.dialogVisible = false;
    },
    onBack() {
      this.$emit("onBack");
    },
    onChoose(item) {
      this.$emit("onChooseGroup", item);
      this.onClose();
    },
    onAddDialogConfirm(group_name) {
      const params = {
        group_name,
        group_scope: this.sourceType,
      };
      this.$emit("onAddGroup", params);
    },
    setScrollTop() {
      this.$nextTick(() => {
        this.groupMainRef.scrollTop = this.groupMainRef.scrollHeight;
      });
    },
    onNotify(msg){
      this.$emit("onNotify", msg)
    }
  },
  watch: {
    value: {
      handler(val) {
        this.dialogVisible = val;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.popUp-content {
  @extend %flex-direction-column;
  @include container();
  .choose-group {
    flex: 1;
    font-size: j(17);
    @extend %overflow-auto;
    &-item {
      height: j(55);
      padding: 0 j(30);
      @extend %flex-middle;
      @include btnClick();
      @include halfBorder("bottom", #ebebeb);
    }
    .add-item {
      .add-icon {
        width: j(14);
        height: j(14);
        margin-right: j(5);
      }
      .add-text {
        color: #979797;
        font-size: j(16);
      }
    }
  }
}
</style>
