<template>
  <filter-search :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
    <filter-search-item label="名称">
      <a-input v-model="filter.title" placeholder="请输入" />
    </filter-search-item>
    <filter-search-item label="创建人">
      <a-input v-model="filter.userNickName" placeholder="请输入" />
    </filter-search-item>
    <filter-search-item label="创建时间">
      <a-range-picker
        v-model="filter.createBetween"
        :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
        :day-start-of-week="1"
        value-format="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD"
      />
    </filter-search-item>
    <filter-search-item label="状态">
      <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
    </filter-search-item>
  </filter-search>
  <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
    <template #tool>
      <icon-button v-permission="['operation-broker-user-config-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
    </template>
    <filter-table-column title="名称" data-index="title" :width="240" />
    <filter-table-column title="经纪人(人数)" data-index="match_items_count" :width="140" />
    <filter-table-column title="开始时间" data-index="begin_at" :width="180" />
    <filter-table-column title="结束时间" data-index="end_at" :width="180" />
    <user-table-column title="创建人" data-index="user_id" user="user" show-href :width="140" />
    <filter-table-column title="创建时间" data-index="created_at" :width="170" />
    <filter-table-column title="状态" :width="80">
      <template #default="{ record }: { record: { begin_at: string, end_at: string } }">
        <template v-if="dayjs(record.begin_at).isBefore(dayjs()) && dayjs(record.end_at).isAfter(dayjs())">应用中</template>
        <template v-else-if="dayjs(record.end_at).isBefore(dayjs())">已过期</template>
        <template v-else-if="dayjs(record.begin_at).isAfter(dayjs())">待应用</template>
        <template v-else>未知状态</template>
      </template>
    </filter-table-column>
    <space-table-column
      v-if="
        usePermission().checkPermission([
          'operation-broker-user-config-show',
          'operation-broker-user-config-edit',
          'operation-broker-user-config-delete',
        ])
      "
      title="操作"
      :width="200"
    >
      <template #default="{ record }: { record: { end_at: string } }">
        <a-link v-permission="['operation-broker-user-config-show']" class="link-hover" :hoverable="false" @click="onShow(record)">
          查看
        </a-link>
        <a-link v-permission="['operation-broker-user-config-edit']" class="link-hover" :hoverable="false" @click="onUpdate(record)">
          修改
        </a-link>
        <a-link
          v-if="dayjs(record.end_at).isAfter(dayjs())"
          v-permission="['operation-broker-user-config-edit']"
          class="link-hover"
          :hoverable="false"
          @click="onCreateLevel(record)"
        >
          生成等级通知
        </a-link>
        <a-link v-permission="['operation-broker-user-config-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">
          删除
        </a-link>
      </template>
    </space-table-column>
  </filter-table>
</template>

<script setup lang="ts">
  import useLoading from '@/hooks/loading';
  import { AnyObject, AttributeData } from '@/types/global';
  import { createVNode, h, onMounted, ref } from 'vue';
  import { createFormItemVNode, createFormVNode, createModalVNode } from '@/utils/createVNode';
  import { useUserConfigApi } from '@/http/broker';

  import UserForm from '@/views/operation/broker/components/user-form.vue';
  import UserTableColumn from '@/components/filter/user-table-column.vue';
  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
  import { Alert, DatePicker, Select, TableData } from '@arco-design/web-vue';
  import { promiseToBoolean } from '@/utils';
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  import dayjs, { OpUnitType } from 'dayjs';
  import { range } from 'lodash';
  import usePermission from '@/hooks/permission';

  const { get, show, create, createLevel, update, destroy } = useUserConfigApi;

  const { loading, setLoading } = useLoading(false);
  const filter = ref({ title: '', userNickName: '', createBetween: [], status: '' });
  const tableRef = ref();

  const statusOption = [
    { value: 0, label: '待应用' },
    { value: 1, label: '应用中' },
    { value: 2, label: '已过期' },
  ];

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

  const onSearch = () => tableRef.value?.onPageChange(1);

  const onReset = () => {
    filter.value = { title: '', userNickName: '', createBetween: [], status: '' };
    onSearch();
  };

  onMounted(() => onReset());

  const onCreate = () => {
    const formRef = ref();
    createModalVNode(() => createVNode(UserForm, { ref: formRef, submit: (value: AttributeData) => create(value) }), {
      title: '新增',
      titleAlign: 'center',
      width: '540px',
      bodyStyle: { padding: '24px 20px 0' },
      onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
      onOk: () => tableRef.value?.onFetch(),
    });
  };

  const onShow = async (record: TableData) => {
    const row = await show(record.id);

    createModalVNode(() => h(UserForm, { initValue: row, disabled: true, disabledType: true, disabledUpload: true }), {
      title: '查看',
      titleAlign: 'center',
      width: '540px',
      bodyStyle: { padding: '24px 20px 0' },
    });
  };

  const onUpdate = async (record: TableData) => {
    const row = await show(record.id);
    const formRef = ref();
    createModalVNode(
      () =>
        createVNode(UserForm, {
          ref: formRef,
          initValue: row,
          disabledType: true,
          submit: (value: AttributeData) => update(record.id, value),
        }),
      {
        title: '查看',
        titleAlign: 'center',
        width: '540px',
        bodyStyle: { padding: '24px 20px 0' },
        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
        onOk: () => tableRef.value?.onFetch(),
      }
    );
  };

  const onDelete = (record: TableData) =>
    createModalVNode(`删除经纪人配置：${record.title}`, {
      title: '删除操作',
      titleAlign: 'center',
      onBeforeOk: () => promiseToBoolean(destroy(record.id)),
      onOk: () => tableRef.value?.onFetch(),
    });

  const isSameTime = (date: dayjs.ConfigType, unit: OpUnitType) => dayjs().isSame(dayjs(date), unit);

  const onCreateLevel = (row: TableData) => {
    const formValue = ref({ is_alert: 0, publish_at: '' });
    const alertOption = [
      { value: 0, label: '否' },
      { value: 1, label: '是' },
    ];
    createModalVNode(
      () =>
        createFormVNode({ model: formValue }, [
          createVNode(
            Alert,
            { showIcon: false, banner: true, center: true, style: { marginBottom: '10px' } },
            '将根据当前配置名单生成待发送等级通知'
          ),
          createFormItemVNode(
            { label: '发送时间', field: 'publish_at', required: true },
            h(DatePicker, {
              'style': { width: '100%' },
              'modelValue': formValue.value.publish_at,
              'showTime': true,
              'dayStartOfWeek': 1,
              'showNowBtn': false,
              'allowClear': false,
              'format': 'YYYY-MM-DD HH:mm',
              'valueFormat': 'YYYY-MM-DD HH:mm:ss',
              'timePickerProps': { hideDisabledOptions: true },
              'onUpdate:modelValue': (val: any) => (formValue.value.publish_at = val),
              'disabledDate': (current?: Date) => dayjs(current).isBefore(dayjs().subtract(1, 'day')),
              'disabledTime': (current?: Date) => {
                return {
                  disabledHours: () => range(0, 23).filter((item) => isSameTime(current, 'day') && item < dayjs().hour()),
                  disabledMinutes: () =>
                    range(0, 59).filter(
                      (item) => isSameTime(current, 'day') && isSameTime(current, 'hour') && item < dayjs().add(5, 'minute').minute()
                    ),
                };
              },
            })
          ),
          createFormItemVNode(
            { label: '面板提醒', field: 'is_alert', required: true, rowClass: 'mb-0' },
            h(Select, {
              'options': alertOption,
              'modelValue': formValue.value.is_alert,
              'onUpdate:modelValue': (val?: unknown) => (formValue.value.is_alert = Number(val)),
            })
          ),
          // createFormItemVNode({ label: '注', rowClass: 'mb-0' }, '将根据当前配置名单生成待发送等级通知'),
        ]),
      {
        title: '生成等级通知',
        titleAlign: 'center',
        onBeforeOk: () => promiseToBoolean(createLevel(row.id, formValue.value)),
        onOk: () => tableRef.value?.onFetch(),
      }
    );
  };
</script>

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