<template>
  <div @click.stop="open">
    <InputModel
      :value="props.modelValue.name"
      :placeholder="t('配置推送消息')"
      style="width: 100%; min-width: 100px"
    />
    <ModalPanel
      :visible="visible"
      :width="1200"
      :title="t('推送消息配置')"
      @submit="submit"
      @close="close"
    >
      <NodeHead :nodeName="t('模板信息')" class="ml-4 my-4" />
      <SelectMessageTemplate :config="data.config" @set-config="setConfig" />
      <div :class="[prefixCls, 'px-4', '!h-50']">
        <a-table
          size="middle"
          :dataSource="data.config.configs"
          :columns="configColumns"
          :pagination="false"
          :scroll="{ y: '400px' }"
          ><template #headerCell="{ column }">
            <div class="header-cell__custom-title">{{ column.title }}</div>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'assignmentType'">
              <a-select
                v-model:value="record.assignmentType"
                style="width: 100%"
                :placeholder="t('请选择赋值类型')"
                allowClear
                @change="
                  () => {
                    record.config = null;
                  }
                "
              >
                <a-select-option
                  style="font-size: 12px"
                  :value="bind.value"
                  v-for="bind in paramTree"
                  :key="bind.value"
                >
                  {{ bind.label }}
                </a-select-option>
              </a-select>
            </template>
            <template v-else-if="column.key === 'value'">
              <a-input
                v-model:value="record.value"
                :placeholder="record.type ? t('请填写值') : t('请先选择赋值类型后再配置值')"
              />
            </template>
          </template>
        </a-table>
      </div>
    </ModalPanel>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { NodeHead, ModalPanel } from '/@/components/ModalPanel/index';
  import { InputModel } from '/@/components/ApiConfig';
  import { SelectMessageTemplate } from '/@/components/PushMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { MessageType } from '/@/enums/messageTemplate';
  import { cloneDeep } from 'lodash-es';

  import { MessageConfigure } from '/@/components/PushMessage/src/interface';
  import { useDesign } from '/@/hooks/web/useDesign';
  const { prefixCls } = useDesign('basic-table');
  const { t } = useI18n();
  const emit = defineEmits(['update:modelValue']);
  const defaultParams = {
    id: '',
    name: '',
    type: MessageType.EMAIL,
    configs: [],
    receiverConfiguration: [],
  };
  const props = withDefaults(defineProps<{ modelValue: MessageConfigure }>(), {
    modelValue: () => {
      return {
        id: '',
        name: '',
        type: MessageType.EMAIL,
        configs: [],
        receiverConfiguration: [],
      };
    },
  });
  const visible = ref<boolean>(false);
  let data = reactive({
    config: defaultParams as MessageConfigure,
  });

  function open() {
    if (props.modelValue.id) data.config = cloneDeep(props.modelValue);
    visible.value = true;
  }
  function close() {
    visible.value = false;
  }

  function submit() {
    emit('update:modelValue', cloneDeep(data.config));
    close();
  }
  function setConfig(config) {
    if (config.id) data.config.id = config.id;
    if (config.name) data.config.name = config.name;
    if (config.messageType) data.config.type = config.messageType;
    let jsonObj = JSON.parse(config.messageConfig);
    if (jsonObj.configureData && jsonObj.configureData.length > 0) {
      data.config.configs = jsonObj.configureData.map((ele) => {
        ele.assignmentType = 'value';
        ele.value = '';
        return ele;
      });
    }
  }

  const paramTree = [
    {
      label: t('值'),
      value: 'value',
    },
  ];
  let configColumns = [
    {
      title: t('参数名称'),
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: t('参数说明'),
      dataIndex: 'description',
      key: 'description',
      align: 'center',
    },
    {
      title: t('赋值类型'),
      dataIndex: 'assignmentType',
      key: 'assignmentType',
      align: 'center',
    },
    {
      title: t('赋值配置'),
      dataIndex: 'value',
      key: 'value',
      align: 'center',
    },
  ];
</script>

<style lang="less" scoped>
  :deep(.ant-btn-primary) {
    margin: 0 0 0 10px;
    border-radius: 4px;
  }

  .button-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 10px 10px 0;
  }

  .delete-icon {
    color: @clear-color;
  }
</style>
