<script setup lang="ts">
import { Input, Link, TableData, Message } from '@arco-design/web-vue';

import { onMounted, ref, computed, createVNode } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { AnyObject } from '@/types/global';
import useLoading from '@/hooks/loading';
import useProjectApi from '@/api/project';
import NumberTableColumn from '@/components/filter/number-table-column.vue';
import UserTableColumn from '@/components/filter/user-table-column.vue';
import SpaceTableColumn from '@/components/filter/space-table-column.vue';
import { createModalVNode } from '@/utils/createVNode';
import { Project } from '@/types/project';
import FormContent from '@/views/project/components/form-content.vue';

const { get, update, getExport } = useProjectApi;

const router = useRouter();

const filter = ref<AnyObject>({});
const tableRef = ref();
const { loading, setLoading } = useLoading(false);

const queryParams = computed(() => {
  return {
    ...filter.value,
    setWith: ['master:id,nick_name,identity'],
    setWithCount: ['activity_up', 'activity_match', 'activity_send', 'manage', 'member'],
  };
});

const onQuery = async (params?: AnyObject) => {
  setLoading(true);
  return get({ ...queryParams.value, ...params }).finally(() => setLoading(false));
};

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

const onReset = () => {
  filter.value = { name: '', masterName: '', status: '', isPromote: '', setSort: ['-id'] };
  tableRef.value?.resetSort();
  onSearch();
};

const onSort = (column: string, type: string) => {
  filter.value.setSort = type ? [(type === 'desc' ? '-' : '') + column, '-id'] : ['-id'];
  tableRef.value?.onFetch();
};

onMounted(() => onReset());

const onExport = () => getExport('厂牌', queryParams.value);

const onShow = (record: TableData) => router.push({ name: 'project-show', params: { id: record.id } });

const showRoute = computed(() => {
  return useRoute().name === 'project-show';
});

const onUpdate = (row: TableData) => {
  const formRef = ref();
  const formValue = ref({ ...row });
  createModalVNode(
    () =>
      createVNode(FormContent, {
        'ref': formRef,
        'model-value': formValue.value,
        // eslint-disable-next-line no-return-assign
        'onUpdate:model-value': (val: any) => (formValue.value = val),
        'submit': (value: Omit<Project, 'id'>) => update(row.id, value),
      }),
    {
      title: '厂牌编辑',
      titleAlign: 'center',
      onBeforeOk: (done) =>
        formRef.value
          ?.onSubmit()
          .then(({ name }: Project) => {
            tableRef.value.onFetch();
            Message.success(`更新厂牌：${name}`);
            done(true);
          })
          .catch(() => done(false)),
    }
  );
};
</script>

<template>
  <router-view v-if="showRoute" :key="$route.path" />
  <PageView v-show="!showRoute" has-card has-bread>
    <FilterSearch :model="filter" :loading="loading" :split="3" inline @search="onSearch" @reset="onReset">
      <FilterSearchItem label="厂牌名称" field="name">
        <Input v-model="filter.name" allow-clear placeholder="请输入" />
      </FilterSearchItem>
      <FilterSearchItem label="主理人" field="masterName">
        <Input v-model="filter.masterName" allow-clear placeholder="请输入" />
      </FilterSearchItem>
    </FilterSearch>
    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery" @row-sort="onSort">
      <template #tool-right>
        <ExportButton :on-download="onExport" />
      </template>
      <UserTableColumn title="名称" data-index="id" avatar-index="cover" nick-index="name" :width="260" show-avatar />
      <UserTableColumn title="主理人" data-index="master_id" user="master" :width="160" dark-value="" />
      <NumberTableColumn title="厂牌管理员人数" data-index="manage_count" :dark-value="0" :width="120" has-sort />
      <NumberTableColumn title="厂牌成员人数" data-index="member_count" :dark-value="0" :width="120" has-sort />
      <NumberTableColumn title="上架歌曲数" data-index="activity_up_count" :dark-value="0" :width="110" has-sort />
      <NumberTableColumn title="已匹配歌曲数" data-index="activity_match_count" :dark-value="0" :width="110" has-sort />
      <NumberTableColumn title="已发行歌曲数" data-index="activity_send_count" :dark-value="0" :width="110" has-sort />
      <SpaceTableColumn title="操作" data-index="operation" :width="100">
        <template #default="{ record }">
          <Link class="link-hover" :hoverable="false" @click="onShow(record)">查看</Link>
          <Link class="link-hover" :hoverable="false" @click="onUpdate(record)">编辑</Link>
        </template>
      </SpaceTableColumn>
    </FilterTable>
  </PageView>
</template>

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