<template>
  <van-dialog
    v-model="dialogVisible"
    show-cancel-button
    get-container="body"
    @close="onClose"
    @confirm="onComfirm"
    confirmButtonColor="#1C9FFF"
  >
    <WlHeader title="分组名称" />
    <div class="form-wrap">
      <div class="form-item-input">
        <input
          v-model="group_name"
          label=""
          placeholder="请输入分组名称"
          maxlength="50"
          @keydown="onKeyDown"
        />
      </div>
    </div>
  </van-dialog>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: yangxin
 * @Last Modified time: 2022-01-21 14:46:50
 */
import useMessage from "@packages/hooks/useMessage";
import WlHeader from "@packages/components/Common/WlHeader/src/index.vue";
const { onWarning } = useMessage();
export default {
  name: "MtAddGroupDialog",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    need_notify: {
      type: Boolean,
      default: true,
    },
  },
  components: { WlHeader },
  data() {
    return {
      dialogVisible: false,
      group_name: "",
    };
  },
  methods: {
    onClose() {
      this.$emit("input", false);
      this.dialogVisible = false;
    },
    onComfirm() {
      const group_name = this.group_name.trim();
      if (!group_name) {
        const msg = "请输入分组名称";
        if (this.need_notify) {
          onWarning(msg);
        }
        this.$emit("onNotify", msg);
      } else if (group_name.length > 8) {
        const msg = "分组名称最大为8个字符";
        if (this.need_notify) {
          onWarning(msg);
        }
        this.$emit("onNotify", msg);
      } else {
        this.$emit("onConfirm", group_name);
      }
    },
    onKeyDown() {
      const evt = event.keyCode;
      if (evt === 13) {
        this.onComfirm();
        this.onClose();
      }
    },
  },
  watch: {
    value: {
      handler(val) {
        //默认要清除输入内容
        if (val) {
          this.group_name = "";
        }
        this.dialogVisible = val;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.form-wrap {
  color: #0e0e0e;
  padding: j(15);
  .form-item {
    &-title {
      margin: j(15) 0 j(6) 0;
    }
    &-input {
      border-radius: j(12);
      overflow: hidden;
      background-color: #f7f7f7;
      padding: j(10) j(16);
      > input {
        width: 100%;
      }
    }
  }
}
</style>
