<script setup lang="ts">
import { createVNode, ref, toRef } from 'vue';
import { createModalVNode } from '@/utils/createVNode';
import { Project } from '@/types/project';
import ImageDynamics from '@/views/project-show/components/image-dynamics.vue';
import AudioDynamics from '@/views/project-show/components/audio-dynamics.vue';
import VideoDynamics from '@/views/project-show/components/video-dynamics.vue';

const props = defineProps<{
  loading?: boolean;
  project: Project & {
    activity_count: number;
    activity_up_count: number;
    activity_match_count: number;
    activity_send_count: number;
    demo_count: number;
    demo_up_count: number;
    image_dynamic_count: number;
    audio_dynamic_count: number;
    video_dynamic_count: number;
  };
}>();
const project = toRef(props, 'project');
const coverVisible = ref(false);

const onViewImage = () =>
  createModalVNode(() => createVNode(ImageDynamics, { projectKey: project.value.id }), {
    title: '厂牌相册',
    titleAlign: 'center',
    closable: true,
    footer: false,
    escToClose: true,
    width: '780px',
  });

const onViewAudio = () =>
  createModalVNode(() => createVNode(AudioDynamics, { projectKey: project.value.id }), {
    title: '厂牌音频',
    titleAlign: 'center',
    closable: true,
    footer: false,
    escToClose: true,
    bodyStyle: { padding: '0 !important' },
    width: '540px',
  });

const onViewVideo = () =>
  createModalVNode(() => createVNode(VideoDynamics, { projectKey: project.value.id }), {
    title: '厂牌视频',
    titleAlign: 'center',
    closable: true,
    footer: false,
    escToClose: true,
    width: '780px',
  });
</script>

<template>
  <a-spin :loading="loading as boolean" style="width: 100%">
    <a-card :bordered="false">
      <a-form :model="project" size="small" auto-label-width>
        <a-row justify="start" align="start">
          <a-col flex="130px" style="border-radius: 60px; overflow: hidden">
            <a-image show-loader :height="130" :width="130" :src="project.cover" />
          </a-col>
          <a-col style="margin-left: 16px" flex="1">
            <a-row :gutter="16" justify="space-between">
              <a-col :span="20">
                <a-form-item label="厂牌名称" :show-colon="true">{{ project.name }}</a-form-item>
              </a-col>
            </a-row>
            <a-grid :cols="4" :col-gap="12" :row-gap="0">
              <a-grid-item :span="1">
                <a-form-item label="创建用户" :show-colon="true">
                  <span v-if="project.user">{{ project.user.nick_name }}</span>
                  <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
                </a-form-item>
              </a-grid-item>
              <a-grid-item :span="3">
                <a-form-item label="主理人" :show-colon="true">
                  <span v-if="project.master">{{ project.master.nick_name }}</span>
                  <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
                </a-form-item>
              </a-grid-item>
              <a-grid-item :span="1">
                <a-form-item label="试唱歌曲总数" :show-colon="true">
                  {{ project.activity_count || 0 }}
                </a-form-item>
              </a-grid-item>
              <a-grid-item :span="1">
                <a-form-item label="试唱进行中" :show-colon="true">
                  {{ project.activity_up_count || 0 }}
                </a-form-item>
              </a-grid-item>
              <a-grid-item :span="1">
                <a-form-item label="试唱已匹配" :show-colon="true">
                  {{ project.activity_match_count || 0 }}
                </a-form-item>
              </a-grid-item>
              <a-grid-item :span="1">
                <a-form-item label="歌曲已发行" :show-colon="true">
                  {{ project.activity_send_count || 0 }}
                </a-form-item>
              </a-grid-item>
              <a-grid-item :span="1">
                <a-form-item label="demo歌曲总数" :show-colon="true">
                  {{ project.demo_count || 0 }}
                </a-form-item>
              </a-grid-item>
              <a-grid-item :span="3">
                <a-form-item label="demo进行中" :show-colon="true">
                  {{ project.demo_up_count || 0 }}
                </a-form-item>
              </a-grid-item>
              <a-grid-item>
                <a-form-item label="头部封面" :show-colon="true">
                  <a-link v-if="project.head_cover" :hoverable="false" @click="coverVisible = !coverVisible">查看</a-link>
                  <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
                </a-form-item>
              </a-grid-item>
              <a-grid-item>
                <a-form-item label="厂牌相册" :show-colon="true">
                  <a-link v-if="project.image_dynamic_count" :hoverable="false" @click="onViewImage">查看</a-link>
                  <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
                </a-form-item>
              </a-grid-item>
              <a-grid-item>
                <a-form-item label="厂牌音频" :show-colon="true">
                  <a-link v-if="project.audio_dynamic_count" :hoverable="false" @click="onViewAudio">查看</a-link>
                  <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
                </a-form-item>
              </a-grid-item>
              <a-grid-item>
                <a-form-item label="厂牌视频" :show-colon="true">
                  <a-link v-if="project.video_dynamic_count" :hoverable="false" @click="onViewVideo">查看</a-link>
                  <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
                </a-form-item>
              </a-grid-item>
            </a-grid>
            <a-form-item label="厂牌简介" :show-colon="true">
              <a-typography-paragraph
                v-if="project.intro"
                style="margin-bottom: 0"
                type="secondary"
                :ellipsis="{ rows: 2, showTooltip: true }"
              >
                {{ project.intro }}
              </a-typography-paragraph>
              <span v-else style="color: #cccccc">无</span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </a-spin>

  <a-image-preview
    v-model:visible="coverVisible"
    :closable="false"
    :src="`${project.head_cover}?x-oss-process=image/format,webp`"
    :actions-layout="[]"
  />
</template>

<style scoped lang="less">
:deep(.arco-typography) {
  text-align: left;
  margin-bottom: 0;
  width: 100%;
}

:deep(.arco-form-item) {
  margin-bottom: 4px;
}

:deep(.arco-space-item) {
  margin-bottom: 0 !important;
}
</style>