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

  const props = defineProps<{
    project: Project & { 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-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">
                <user-link :user="project.user" />
              </a-form-item>
            </a-grid-item>
            <a-grid-item :span="3">
              <a-form-item label="主理人" :show-colon="true">
                <user-link v-if="project.master" :user="project.master" />
                <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-image-preview v-model:visible="coverVisible" :closable="false" :src="project.head_cover" :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>