import { Icon, NoticeBar, Tag, Image } from "vant";
import { defineComponent, PropType } from "vue";
import styles from "./index.module.less";
import IconPlay from "@/assets/icon-play.png";
import IconFine from "@/assets/icon_fine.png";
import IconAlbum from "@/assets/icon_album_active.png";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "TheSong",
  props: {
    list: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
  },
  setup(props) {
    const router = useRouter();
    const colors: any = {
      FREE: {
        color: "#01B84F",
        text: "免费",
      },
      VIP: {
        color: "#CD863E",
        text: "会员",
      },
      CHARGE: {
        color: "#3591CE",
        text: "点播",
      },
    };
    return () => (
      <div class={styles.theSong}>
        {props.list.map((n: any) => (
          <div
            class={styles.item}
            onClick={() =>
              router.push({ path: "/musicDetail", query: { id: n.id } })
            }
          >
            <div class={styles.content}>
              <div class={styles.top}>
                <Tag
                  style={{ color: colors[n.chargeType].color }}
                  class={styles.tag}
                  type="success"
                  plain
                >
                  {colors[n.chargeType].text}
                </Tag>
                {n.exquisiteFlag === 1 && (
                  <Image src={IconFine} class={styles.iconFine} />
                )}

                {n.albumNums > 0 && (
                  <Image src={IconAlbum} class={styles.iconAlbum} />
                )}

                <span class={[styles.title, "van-ellipsis"]}>
                  {n.musicSheetName}
                </span>
                <span class={[styles.singer, "van-ellipsis"]}>
                  -{n.composer}
                </span>
              </div>
              <div class={styles.user}>
                {n.addName ? (
                  <div class={styles.name}>上传者：{n.addName}</div>
                ) : (
                  <div class={styles.name}>作曲：{n.composer}</div>
                )}
                <div class={styles.tags}>
                  {n?.subjectNames.split(",").map((name: any) => (
                    <span>{name}</span>
                  ))}
                </div>
              </div>
            </div>
            <div style={styles.play}>
              <Icon name={IconPlay} size={28} />
            </div>
          </div>
        ))}
      </div>
    );
  },
});