<template>
  <div v-if="notifyOptions.length > 0" :class="$style.itemrow">
    <a-form-model-item v-if="tag === 'form-model-item'" :label="label">
      <Notify v-bind="{ ...$props, label: null, options: notifyOptions }" v-on="$listeners" />
    </a-form-model-item>
    <a-col v-else-if="tag === 'col'" v-bind="$attrs">
      <Notify v-bind="{ ...$props, options: notifyOptions }" v-on="$listeners" />
    </a-col>
    <div v-else>
      <Notify v-bind="{ ...$props, options: notifyOptions }" v-on="$listeners" />
    </div>
  </div>
</template>

<script>
import { Checkbox } from 'ant-design-vue'
import { sdLocalStorage } from '@/common/services/storage-service'
import components from './_import-components/sd-notify-type-import'

export default {
  name: 'SdNotifyType',
  components: {
    ...components,
    Notify: {
      props: {
        value: {
          type: Array,
          default: () => [],
        },
      },
      render() {
        const { label, options } = this.$attrs
        return (
          <div class='row'>
            {label ? <label title={label}>{label}</label> : ''}
            <Checkbox.Group value={this.value} options={options} {...{ on: this.$listeners }} />
          </div>
        )
      },
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    label: {
      type: String,
      default: '通知处理人',
    },
    tag: {
      type: String,
      default: 'form-model-item',
    },
  },
  data() {
    return {
      notifyOptions:
        JSON.parse(sdLocalStorage.getItem('commonConfig') || '{}').notifyHandlerSendType
          ?.sendTypeList || [],
    }
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.itemrow {
  :global(.row) {
    > label::after {
      position: relative;
      top: -0.5px;
      margin: 0 8px 0 2px;
      content: ':';
    }
  }
}
</style>
