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

  import { createVNode, onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { AnyObject } from '@/types/global';
  import useLoading from '@/hooks/loading';
  import useProjectApi from '@/http/project';
  import { createModalVNode } from '@/utils/createVNode';
  import { Project } from '@/utils/model';
  import openNewTab from '@/utils/route-blank';
  import NumberTableColumn from '@/components/filter/number-table-column.vue';
  import FormContent from '@/views/audition/project/components/form-content.vue';
  import UserTableColumn from '@/components/filter/user-table-column.vue';
  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
  import usePermission from '@/hooks/permission';

  const { get, create, update, destroy, getExport } = useProjectApi;
  const { checkPermission } = usePermission();

  const router = useRouter();

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

  const onQuery = async (params?: AnyObject) => {
    setLoading(true);
    return get({
      ...filter.value,
      setWith: ['master:id,nick_name,identity'],
      setWithCount: ['activity_up', 'activity_match', 'activity_send', 'manage', 'member'],
      ...params,
    }).finally(() => setLoading(false));
  };

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

  const onReset = () => {
    filter.value = { name: '', masterName: '', status: '', isPromote: '', sortBy: 'id', sortType: 'desc' };
    tableRef.value?.resetSort();
    onSearch();
  };

  const onSort = (column: string, type: string) => {
    filter.value.sortBy = type ? column : 'id';
    filter.value.sortType = type || 'desc';
    tableRef.value?.onFetch();
  };

  onMounted(() => onReset());

  const onExport = () =>
    getExport('厂牌', {
      ...filter.value,
      setWith: ['master:id,nick_name,identity'],
      setWithCount: ['activity_up', 'activity_match', 'activity_send', 'manage', 'member'],
    });

  const onCreate = () => {
    const formRef = ref();
    const formValue = ref({ cover: '', name: '', intro: '', is_demo_audit: 0 });
    createModalVNode(
      () =>
        createVNode(FormContent, {
          'ref': formRef,
          'hide-master': true,
          'model-value': formValue.value,
          'onUpdate:model-value': (val: any) => (formValue.value = val),
          'submit': (value: Omit<Project, 'id'>) => create(value),
        }),
      {
        title: '新增厂牌',
        titleAlign: 'center',
        onBeforeOk: (done: any) =>
          formRef.value
            ?.onSubmit()
            .then(({ name }: Project) => {
              tableRef.value.onFetch();
              Message.success(`创建厂牌：${name}`);
              done(true);
            })
            .catch(() => done(false)),
      }
    );
  };

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

  const onDelete = (row: TableData) => {
    createModalVNode('请确认是否删除此厂牌', {
      title: '厂牌删除',
      onBeforeOk: () =>
        destroy(row.id)
          .then(() => true)
          .catch(() => false),
      onOk: () => tableRef.value.onFetch(),
    });
  };

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

<template>
  <PageView has-card has-bread>
    <FilterSearch :model="filter" :loading="loading" :inline="true" @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>
        <IconButton v-permission="['audition-project-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
      </template>
      <template #tool-right>
        <ExportButton v-permission="['audition-project-export']" :on-download="onExport" />
      </template>
      <UserTableColumn title="厂牌名称" data-index="id" nick-index="name" avatar-index="cover" :width="240" show-avatar />
      <UserTableColumn title="主理人" data-index="master_id" user="master" :width="160" show-href 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
        v-if="checkPermission(['audition-project-show', 'audition-project-edit', 'audition-project-delete'])"
        title="操作"
        data-index="operation"
        :width="120"
      >
        <template #default="{ record }">
          <Link v-permission="['audition-project-show']" class="link-hover" :hoverable="false" @click="onShow(record)">查看</Link>
          <Link v-permission="['audition-project-edit']" class="link-hover" :hoverable="false" @click="onUpdate(record)">编辑</Link>
          <Link v-permission="['audition-project-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">删除</Link>
        </template>
      </SpaceTableColumn>
    </FilterTable>
  </PageView>
</template>

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