<template>
  <div @click.stop="open">
    <InputModel
      :value="props.modelValue.name"
      :placeholder="t('配置推送消息')"
      style="width: 100%; min-width: 100px"
    />
    <ModalPanel
      :visible="visible"
      :width="1100"
      :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
              >
                <a-select-option :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-if="record.assignmentType === 'value'"
                v-model:value="record.value"
                :placeholder="record.type ? t('请填写值') : t('请先选择赋值类型后再配置值')"
              />
            </template>
          </template>
        </a-table>
      </div>

      <NodeHead :nodeName="t('接收人配置')" class="ml-4" />
      <div class="button-box">
        <div v-for="(item, index) in allComponentList" :key="index">
          <component
            v-if="item.show"
            :is="item.component"
            :memberList="data.config.receiverConfiguration"
            @change="changeList"
          >
            <a-button type="primary">{{ item.name }}</a-button>
          </component>
        </div>
      </div>
      <div :class="[prefixCls, 'px-4', '!h-50']">
        <a-table
          size="middle"
          :dataSource="data.config.receiverConfiguration"
          :columns="memberTypeConfigColumns"
          :pagination="false"
        >
          <template #headerCell="{ column }">
            <div class="header-cell__custom-title">{{ column.title }}</div>
          </template>
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'memberType'">
              {{ getMemberType(record.memberType) }}
            </template>
            <template v-if="column.key === 'operation'">
              <Icon
                icon="ant-design:delete-outlined"
                class="delete-icon"
                @click="deleteItem(index)"
              />
            </template>
          </template>
        </a-table>
      </div>
    </ModalPanel>
  </div>
</template>

<script setup lang="ts">
  import { computed, 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 Icon from '/@/components/Icon/index';
  import { MessageConfigure } from '/@/components/PushMessage/src/interface';
  import Posts from '/@bpmn/components/member/Posts.vue';
  import Roles from '/@bpmn/components/member/Roles.vue';
  import Users from '/@bpmn/components/member/Users.vue';
  import { MemberType } from '/@/enums/workflowEnum';
  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,
    dataSource: [],
  });
  const allComponentList = computed(() => {
    return [
      { name: t('添加岗位'), component: Posts, show: true },
      { name: t('添加角色'), component: Roles, show: true },
      { name: t('添加人员'), component: Users, show: true },
    ];
  });

  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.type) data.config.type = config.type;
    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;
      });
    }
  }
  function deleteItem(index) {
    let list = data.config.receiverConfiguration;
    list.splice(index, 1);
  }
  // 类型
  function getMemberType(val: MemberType) {
    if (val === MemberType.POST) return t('岗位');
    if (val === MemberType.ROLE) return t('角色');
    if (val === MemberType.USER) return t('人员');
    return val;
  }
  function changeList(list) {
    data.config.receiverConfiguration = list;
  }
  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',
    },
  ];
  const memberTypeConfigColumns = [
    {
      title: t('类型'),
      dataIndex: 'memberType',
      key: 'memberType',
      align: 'center',
    },
    {
      title: t('名称'),
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: t('操作'),
      dataIndex: 'operation',
      key: 'operation',
      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>
