import { useIncidentStore } from '@/store';
import clsx from 'clsx';
import { defineComponent, PropType } from 'vue-demi';
import './index.scss';
export type CardType =
  | 'message-list'
  | 'incident-info'
  | 'command-chain'
  | 'incident-plan'
  | 'emergency-linkage'
  | 'execution-log'
  | 'accident-scene'
  | 'wz-all'
  | 'em-ex'
  | 'live-monitoring'
  | 'vdeo-userlist';

export default defineComponent({
  name: 'Card',
  props: {
    cardType: {
      type: String as PropType<CardType>,
      default: 'incident-info',
    },
  },
  setup(props, ctx) {
    const className = clsx('card-container', {
      [`card-container-bg-${props.cardType}`]: props.cardType,
    });
    const store = useIncidentStore();

    return () => (
      <div v-loading={store.loading} class={className}>{ctx.slots.default && ctx.slots.default()}</div>
    );
  },
});
