<template>
  <page-view has-card has-bread>
    <filter-search :loading="loading" @search="onSearch" @reset="onReset">
      <filter-search-item label="歌曲名称">
        <a-input v-model="filter.songName" :allow-clear="true" placeholder="请输入搜索歌曲名称" />
      </filter-search-item>
      <filter-search-item label="厂牌名称">
        <a-input v-model="filter.projectName" :allow-clear="true" placeholder="请输入搜索厂牌名称" />
      </filter-search-item>
      <filter-search-item label="标签名称">
        <a-input v-model="filter.tagName" :allow-clear="true" placeholder="请输入搜索标签名称" />
      </filter-search-item>
      <filter-search-item label="创建人">
        <a-input v-model="filter.userName" :allow-clear="true" placeholder="请输入搜索创建人名称" />
      </filter-search-item>
      <filter-search-item label="创建时间">
        <a-range-picker v-model="filter.createBetween" :allow-clear="true" />
      </filter-search-item>
      <filter-search-item label="状态">
        <a-select v-model.number="filter.auditStatus" :options="useApply.auditStatusOption" placeholder="请选择搜索审核状态" />
      </filter-search-item>
    </filter-search>
    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
      <template #tool="{ size }">
        <a-button v-if="canCreate" :size="size" type="primary" @click="handleCreate">Demo上架</a-button>
      </template>
      <activity-table-column :width="540" data-index="id" title="歌曲" hide-sub-title />
      <user-table-column :width="180" data-index="user_id" title="创建人" user="user" />
      <date-table-column :width="120" data-index="created_at" title="创建时间" split />
      <enum-table-column :width="120" data-index="audit_status" title="状态" :option="useApply.auditStatusOption" />
      <space-table-column :width="80" data-index="operations" title="操作" direction="vertical">
        <template #default="{ record }">
          <span v-if="record.audit_status === 0" style="color: rgba(44, 44, 44, 0.5)">无</span>
          <template v-else>
            <a-link class="link-hover" :hoverable="false" @click="handleUpdate(record)">编辑</a-link>
            <a-link class="link-hover" :hoverable="false" @click="handleDelete(record)">删除</a-link>
          </template>
        </template>
      </space-table-column>
    </filter-table>
  </page-view>
</template>

<script lang="ts" name="audition-apply" setup>
import useLoading from '@/hooks/loading';
import { computed, createVNode, onActivated, ref } from 'vue';
import { AnyObject, QueryForParams } from '@/types/global';
import { useApply } from '@/api/activity';

import FilterTable from '@/components/filter/table.vue';
import UserTableColumn from '@/components/filter/user-table-column.vue';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import SpaceTableColumn from '@/components/filter/space-table-column.vue';
import DateTableColumn from '@/components/filter/date-table-column.vue';
import ActivityTableColumn from '@/components/filter/activity-table-column.vue';

import { Message, Table, TableData, TabPane, Tabs } from '@arco-design/web-vue';
import FormContent from '@/views/audition/demo-apply/components/form-content.vue';

import { useRouteQuery } from '@vueuse/router';
import { useRoute } from 'vue-router';
import { createModalVNode } from '@/utils/createVNode';
import { promiseToBoolean } from '@/utils';

import { Project } from '@/types/project';
import { useSelectionStore } from '@/store';
import { findIndex } from 'lodash';

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

const canCreate = computed(() => {
  return findIndex(useSelectionStore().projectOptions, (item) => item.is_can_demo_apply === 1) !== -1;
});

const queryParams = computed(() => {
  return {
    ...filter.value,
    createdForm: 0,
    songType: 2,
    setColumn: ['id', 'song_name', 'cover', 'user_id', 'project_id', 'lyric', 'expand', 'audit_status', 'created_at'],
    setWith: [
      'project:id,name',
      'user:id,real_name,nick_name,role',
      'tags:id,name',
      'applyRecords:id,activity_id,current,audit_msg,created_at',
    ],
    setSort: ['-audit_status', '-updated_at'],
  } as QueryForParams;
});

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

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

const initAuditStatus = useRouteQuery('auditStatus', '');

const onReset = (initParams: AnyObject) => {
  filter.value = { songName: '', projectName: '', tagName: '', userName: '', auditStatus: '', createBetween: [], ...initParams };
  onSearch();
};

onActivated(() => {
  if (useRoute()?.meta?.reload) {
    onReset({ auditStatus: initAuditStatus.value ? Number(initAuditStatus.value) : '' });
  } else {
    tableRef.value?.onFetch();
  }
});

const handleCreate = () => {
  const dialog = createModalVNode(
    () =>
      createVNode(FormContent, {
        initValue: { song_type: 2, cover: useSelectionStore().appleDemoCover, created_form: 0, is_push: 0, expand: { push_type: [] } },
        filterProject: (value: Project) => value.is_can_demo_apply === 1,
        onSubmit: (data: AnyObject) =>
          useApply.create(data).then(() => {
            Message.success(`申请上架活动：${data.song_name}`);
            tableRef.value?.onFetch();
            dialog.close();
          }),
      }),
    { title: '创建Demo', footer: false, closable: true, width: 'auto' }
  );
};

const handleUpdate = (row: TableData) => {
  const column = [
    { title: '操作人', dataIndex: 'id', width: 100, ellipsis: true, tooltip: true, render: () => '平台运营' },
    { title: '操作时间', dataIndex: 'created_at', width: 170, ellipsis: true, tooltip: true },
    { title: '驳回说明', dataIndex: 'audit_msg', width: 500, ellipsis: true, tooltip: true },
  ];

  const dialog = createModalVNode(
    () =>
      createVNode(Tabs, { type: 'rounded', size: 'mini' }, [
        createVNode(TabPane, { title: '试唱Demo上架', key: 'applyRef' }, () =>
          createVNode(FormContent, {
            initValue: row,
            filterProject: (value: Project) => value.is_can_demo_apply === 1 || value.id === row.project_id,
            onSubmit: (data: AnyObject) =>
              useApply.update(row.id, Object.assign(data, { song_type: 2 })).then(() => {
                Message.success(`重新申请上架活动：${row.song_name}`);
                tableRef.value?.onFetch();
                dialog.close();
              }),
          })
        ),
        createVNode(TabPane, { title: `审核驳回记录（${row.apply_records?.length || 0}）`, key: 'record' }, () => {
          return createVNode(Table, {
            columns: column,
            data: row.apply_records || [],
            bordered: false,
            tableLayoutFixed: true,
            pagination: false,
            scroll: { y: 370 },
            size: 'medium',
            rowKey: 'id',
          });
        }),
      ]),
    { title: '编辑Demo', footer: false, closable: true, width: '860px' }
  );
};

const handleDelete = (row: TableData) => {
  createModalVNode(`确认要将Demo：${row.song_name} 删除吗？`, {
    title: '删除操作',
    onBeforeOk: () => promiseToBoolean(useApply.destroy(row.id)),
    onOk: () => tableRef.value?.onFetch(),
  });
};
</script>

<style scoped></style>