<template>
  <page-view has-card has-bread>
    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" :default-expand-all-rows="true" :hide-expand-button-on-empty="true">
      <template #tool>
        <IconButton v-permission="['system-config-create']" icon="plus" label="新增" type="primary" @click="onCreateTopVNode()" />
      </template>
      <filter-table-column title="名称" data-index="name" :width="240" />
      <filter-table-column title="标识(KEY)" data-index="identifier" :width="140" />
      <filter-table-column title="内容" data-index="content" :width="140" />
      <filter-table-column title="备注" data-index="remark" :width="160" />
      <enum-table-column title="状态" data-index="status" :option="useConfigApi.statusOptions" :width="64" />
      <number-table-column title="权重值" data-index="weight" :width="80" />
      <filter-table-column title="创建时间" data-index="created_at" :width="140" />
      <space-table-column
        v-if="usePermission().checkPermission(['system-config-create', 'system-config-edit'])"
        title="操作"
        data-index="operation"
        :width="120"
      >
        <template #default="{ record }">
          <a-link v-permission="['system-config-create']" class="link-hover" :hoverable="false" @click="onCreateChild(record)">新增</a-link>
          <a-link v-permission="['system-config-edit']" class="link-hover" :hoverable="false" @click="onUpdate(record)">编辑</a-link>
          <a-link
            v-permission="['system-config-edit']"
            class="link-hover"
            :hoverable="false"
            @click="onChangeStatus(record, Number(!record.status))"
          >
            {{ useConfigApi.statusOptions.find((item) => item.value === Number(!record.status))?.label }}
          </a-link>
        </template>
      </space-table-column>
    </filter-table>
  </page-view>
</template>

<script lang="ts" setup>
  import { createVNode, onMounted, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import useConfigApi from '@/http/config';
  import { AnyObject } from '@/types/global';
  import NumberTableColumn from '@/components/filter/number-table-column.vue';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
  import FormContent from '@/views/system/config/components/form-content.vue';

  import { createModalVNode } from '@/utils/createVNode';
  import { Message, TableData } from '@arco-design/web-vue';
  import useRoleApi from '@/http/role';
  import { promiseToBoolean } from '@/utils';
  import usePermission from '@/hooks/permission';

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

  onMounted(async () => {
    tableRef.value?.onPageChange();
  });

  const onQuery = async (params: AnyObject) => {
    setLoading(true);
    return useConfigApi
      .get({ setWith: ['children'], parent_id: 0, ...params, sortBy: 'weight', sortType: 'desc' })
      .finally(() => setLoading(false));
  };

  const onCreateTopVNode = () => {
    const formRef = ref();
    const formValue = ref({ parent_id: 0, weight: 0, expand: { type: 'none' } });

    createModalVNode(
      () => createVNode(FormContent, { ref: formRef, modelValue: formValue.value, submit: () => useConfigApi.create(formValue.value) }),
      {
        hideTitle: true,
        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
        onOk: () => {
          Message.success('添加成功');
          tableRef.value?.onFetch();
        },
      }
    );
  };

  const onCreateChild = (row: TableData) => {
    const formRef = ref();
    const formValue = ref({ parent_id: row.id, weight: 0, expand: { type: 'none' } });

    createModalVNode(
      () => createVNode(FormContent, { ref: formRef, modelValue: formValue.value, submit: () => useConfigApi.create(formValue.value) }),
      {
        hideTitle: true,
        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
        onOk: () => {
          Message.success('添加成功');
          tableRef.value?.onFetch();
        },
      }
    );
  };

  const onUpdate = (row: TableData) => {
    const formRef = ref();
    const formValue = ref({ ...row });

    createModalVNode(
      () =>
        createVNode(FormContent, {
          ref: formRef,
          modelValue: formValue.value,
          hideKeyBtn: true,
          lockField: ['identifier'],
          submit: () => useConfigApi.update(row.id, formValue.value),
        }),
      {
        hideTitle: true,
        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
        onOk: () => {
          Message.success('更新成功');
          tableRef.value?.onFetch();
        },
      }
    );
  };

  const onChangeStatus = (row: TableData, status: number) => {
    createModalVNode(`是否将配置《${row.name}》的状态变更为：${useRoleApi.statusOption.find((item) => item.value === status)?.label}`, {
      title: '状态变更',
      titleAlign: 'center',
      onBeforeOk: () => promiseToBoolean(useConfigApi.changeStatus(row.id, status)),
      onOk: () => tableRef.value?.onFetch(),
    });
  };
</script>

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