<template>
  <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" :hide-page="true">
    <template #tool>
      <icon-button v-permission="['operation-broker-push-config-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
      <div style="color: rgba(44, 44, 44, 0.5); margin-right: 10px">
        名单外的经纪人，如果Ta的歌手达成合作，对应到分类：
        <span style="color: #1d2129">{{ identifierOptions.find((item) => item.value === defaultIdentifier.content)?.label || '无' }}</span>
      </div>
      <a-link
        v-permission="['operation-broker-push-config-relation']"
        :hoverable="false"
        style="text-decoration: underline"
        @click="onSetting"
        >设置关联
      </a-link>
    </template>
    <filter-table-column title="分类" data-index="identifier" :width="80" />
    <filter-table-column title="等级通知(标题)" data-index="level_title" :width="160" />
    <filter-table-column title="等级通知(内容)" data-index="level_intro" :width="240" />
    <filter-table-column title="合作通知(标题)" data-index="match_title" :width="160" />
    <filter-table-column title="合作通知(内容)" data-index="match_intro" :width="240" />
    <user-table-column title="创建人" data-index="user_id" user="user" show-href :width="140" />
    <space-table-column
      v-if="
        usePermission().checkPermission([
          'operation-broker-push-config-show',
          'operation-broker-push-config-edit',
          'operation-broker-push-config-delete',
        ])
      "
      title="操作"
      :width="120"
    >
      <template #default="{ record }">
        <a-link v-permission="['operation-broker-push-config-show']" class="link-hover" :hoverable="false" @click="onView(record)">
          查看
        </a-link>
        <a-link v-permission="['operation-broker-push-config-edit']" class="link-hover" :hoverable="false" @click="onUpdate(record)">
          编辑
        </a-link>
        <a-link v-permission="['operation-broker-push-config-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">
          删除
        </a-link>
      </template>
    </space-table-column>
  </filter-table>
</template>

<script setup lang="ts">
  import { AnyObject } from '@/types/global';
  import { createFormVNode, createModalVNode, createSelectionFormItemVNode } from '@/utils/createVNode';
  import { computed, createVNode, h, onMounted, ref } from 'vue';

  import ConfigForm from '@/views/operation/broker/components/config-form.vue';
  import { usePushConfigApi } from '@/http/broker';
  import useLoading from '@/hooks/loading';
  import UserTableColumn from '@/components/filter/user-table-column.vue';
  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
  import { TableData } from '@arco-design/web-vue';
  import { clone } from 'lodash';
  import useConfigApi from '@/http/config';
  import { SystemConfig } from '@/types/system-config';
  import { promiseToBoolean } from '@/utils';
  import usePermission from '@/hooks/permission';

  const { get, create, update, destroy } = usePushConfigApi;

  const { loading, setLoading } = useLoading(false);
  const tableRef = ref();

  const defaultIdentifier = ref<Pick<SystemConfig, 'id' | 'content'>>({ id: 0, content: '' });

  const onQuery = async (params: AnyObject) => {
    setLoading(true);
    return get({ ...params, fetchType: 'all', setWith: ['user:id,nick_name,identity'], sortBy: 'id', sortType: 'desc' }).finally(() =>
      setLoading(false)
    );
  };

  onMounted(async () => {
    tableRef.value?.onPageChange();
    defaultIdentifier.value = (await useConfigApi.getOne({ identifier: 'g65owmrgKSUhxV2afndUg', parent_id: 0 })) || { id: 0, content: '' };
  });

  const identifierOptions = computed(() => {
    return [{ value: '', label: '无' }].concat(
      tableRef.value?.getList()?.map((item: { id: number; identifier: string }) => {
        return { value: item.identifier, label: item.identifier };
      })
    );
  });

  const onSetting = () => {
    const formValue = ref(clone(defaultIdentifier.value.content));
    createModalVNode(
      () =>
        createFormVNode({ model: formValue, autoLabelWidth: true }, [
          createSelectionFormItemVNode(
            formValue,
            identifierOptions.value,
            { label: '关联分类', style: { marginBottom: '8px' } },
            { fallbackOption: false, placeholder: '请选择' }
          ),
          h(
            'div',
            { style: { color: 'rgba(44, 44, 44, 0.5)' } },
            '注意：此处设置名单外的经纪人用户，如果Ta的歌手合作后，经纪人是否收到 [合作通知]，如需要收到合作通知，根据哪种分类进行推送'
          ),
        ]),
      {
        title: '其他关联设置',
        titleAlign: 'center',
        onBeforeOk: () => promiseToBoolean(useConfigApi.update(defaultIdentifier.value.id, { content: formValue.value })),
        onOk: () => (defaultIdentifier.value.content = formValue.value),
      }
    );
  };

  const onView = (record: TableData) => {
    createModalVNode(() => h(ConfigForm, { initValue: record, disabled: true }), {
      title: '查看',
      titleAlign: 'center',
      width: '640px',
      hideCancel: true,
      okText: '我知道了',
    });
  };

  const onCreate = () => {
    const formRef = ref<InstanceType<typeof ConfigForm>>();
    createModalVNode(() => createVNode(ConfigForm, { ref: formRef, submit: (val: AnyObject) => create(val) }), {
      title: '新增',
      titleAlign: 'center',
      width: '640px',
      onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
      onOk: () => tableRef.value?.onFetch(),
    });
  };

  const onUpdate = (record: TableData) => {
    const formRef = ref<InstanceType<typeof ConfigForm>>();
    createModalVNode(
      () => createVNode(ConfigForm, { initValue: record, ref: formRef, submit: (val: AnyObject) => update(record.id, val) }),
      {
        title: '编辑',
        titleAlign: 'center',
        width: '640px',
        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
        onOk: () => {
          if (defaultIdentifier.value?.content === record.identifier) {
            const content = formRef.value?.getIdentifier();
            useConfigApi.update(defaultIdentifier.value.id, { content });
            defaultIdentifier.value.content = content ?? '';
          }
          tableRef.value?.onFetch();
        },
      }
    );
  };

  const onDelete = (record: TableData) =>
    createModalVNode(`删除推送模版配置：${record.identifier}`, {
      title: '删除操作',
      onBeforeOk: () => promiseToBoolean(destroy(record.id)),
      onOk: () => {
        if (defaultIdentifier.value?.content === record.identifier) {
          useConfigApi.update(defaultIdentifier.value.id, { content: '' });
          defaultIdentifier.value.content = '';
        }
        tableRef.value?.onFetch();
      },
    });
</script>

<style scoped lang="less"></style>