<template>
  <Spin :spinning="loading">
    <div class="notify-type-warp" :class="{ disabled: disabled }">
      <div
        :key="item.id"
        v-for="item in options"
        class="notify-type-item"
        :class="{ active: notifyType === item.value }"
        @click="onSelect(item.value)"
      >
        <div class="notify-type-item-image">
          <img :width="106" :src="item.iconUrl" />
        </div>
        <div class="notify-type-item-title">{{ item.label }}</div>
      </div>
    </div>
  </Spin>
</template>

<script lang="ts" setup>
  import { getImage } from '@jdlinker/utils';
  import notice from '../../../../../../api/notice/config';
  import { ref, watch, onMounted } from 'vue';
  import { Spin } from 'linker-ui-components';

  const iconMap = new Map();
  iconMap.set('dingTalk', getImage('/notice/dingtalk.png'));
  iconMap.set('weixin', getImage('/notice/wechat.png'));
  iconMap.set('email', getImage('/notice/email.png'));
  iconMap.set('voice', getImage('/notice/voice.png'));
  iconMap.set('sms', getImage('/notice/sms.png'));
  iconMap.set('webhook', getImage('/notice/webhook.png'));

  const props = defineProps({
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  });

  const emit = defineEmits(['update:value', 'change']);

  const loading = ref<boolean>(false);
  const notifyType = ref('');
  const options = ref<any[]>([]);

  watch(
    () => props.value,
    (newVal) => {
      notifyType.value = newVal;
    },
    { deep: true, immediate: true }
  );

  const onSelect = (val: string) => {
    if (!props.disabled) {
      emit('update:value', val);
      emit('change', val);
    }
  };

  onMounted(() => {
    loading.value = true;
    notice.queryMessageType().then((resp) => {
      if (resp.code === 200) {
        options.value = (resp.result as any[]).map((item) => {
          return {
            label: item.name,
            value: item.id,
            iconUrl: iconMap.get(item.id)
          };
        });
      }
      loading.value = false;
    });
    notifyType.value = props.value;
  });
</script>

<style lang="less" scoped>
  .notify-type-warp {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    width: 100%;

    .notify-type-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 172px;
      border: 1px solid #e0e4e8;
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.3s;

      .notify-type-item-title {
        margin-bottom: 8px;
        font-weight: 500;
        font-size: 14px;
      }

      .notify-type-item-image {
        width: 106px;
        margin: 16px 33px;
      }

      &:hover {
        color: @primary-color-hover;
        opacity: 0.8;
      }

      &.active {
        border-color: @primary-color-active;
        opacity: 1;
      }
    }

    &.disabled {
      .notify-type-item {
        cursor: not-allowed;

        &:hover {
          color: initial;
          opacity: 0.6;
        }

        &.active {
          opacity: 1;
        }
      }
    }
  }
</style>
