<template>
  <div style="height: 100%">
    <Container :needPadding="true">
      <template v-slot:header>
        <WlHeader :needBottomBorder="true">MtChooseGroupPopup 选择分组弹窗</WlHeader>
      </template>
      <template v-slot:main>
        <Title>基础使用</Title>
        <WlButton @onClick="onOpen('base')">打开弹窗</WlButton>
        <Title>添加分组时不提示文字</Title>
        <WlButton @onClick="onOpen('noWarning')">打开弹窗</WlButton>
      </template>
    </Container>
    <MtChooseGroupPopup v-model="visible" :groupList="groupList" :need_notify="need_notify" />
  </div>
</template>

<script>
import Title from "../components/Title";
import Container from "../components/Container";
export default {
  name: "MtChooseGroupPopup-Example",
  components: { Title, Container },
  data() {
    return {
      visible: false,
      need_notify: true,
      groupList: [
        {
          id: 1,
          group_name: "名称1",
        },
        {
          id: 2,
          group_name: "名称2",
        },
      ],
    };
  },
  methods: {
    onOpen(type) {
      if (type === "noWarning") {
        this.need_notify = false;
      }
      this.visible = true;
    },
  },
};
</script>

<style scoped lang="scss">
.pic-wrap {
  width: 100%;
}
.pic-tx-wrap {
  width: j(100);
  height: j(100);
}
</style>
