import { Button, Col, Divider, Icon, Image, Row } from "vant";
import { defineComponent, PropType, ref } from "vue";
import styles from "./index.module.less";
import bookIcon from "../image/bookIcon.png";
import tree from "../image/tree.png";
import TheTitle from "@/components/TheTitle";
import VideoList from "../components/video-list";
import VideoItem from "../components/video-item";
import TheDown from "@/components/TheDown";
import { useRouter } from "vue-router";
import icon_teacher from "@/assets/icon_teacher.png";

export default defineComponent({
  name: "detailInfo",
  props: {
    videoList: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    teacher: {
      type: Object,
      default: () => {},
    },
    lessonGroup: {
      type: Object,
      default: () => {},
    },
  },
  setup(props) {
    const router = useRouter()
    const downRef = ref();
    return () => (
      <div class={styles.detailInfo}>
        <h2>{props.lessonGroup.lessonName}</h2>
        <div class={styles.tags}>
          {props.lessonGroup?.lessonSubjectName?.split(",").map((n: string) => (
            <span class={styles.tag}>{n}</span>
          ))}
        </div>
        <Row justify="space-between">
          <Col class={styles.col} style={{ color: "#FF6422" }}>
            <Icon name={tree} size={16} />
            <span>共{props.lessonGroup.lessonCount}课时</span>
          </Col>
          <Col class={styles.col}>
            <Icon name={bookIcon} size={16} />
            <span>{props.lessonGroup.countStudent} 人在学</span>
          </Col>
        </Row>
        <TheTitle title="课程介绍" isMore={false} />
        <div class={styles.des}>{props.lessonGroup.lessonDesc}</div>

        <Divider />

        <TheTitle title="教学老师" isMore={false} />
        <div class={styles.teacher}>
          <Image width={68} height={68} fit="cover" round src={props.teacher.heardUrl || icon_teacher} />
          <div class={styles.teacherContent}>
            <div class={styles.name}>{props.teacher.username}</div>
            <div class={styles.num}>
              <span>粉丝数</span>
              <span>{props.teacher.fansNum}</span>
            </div>
          </div>
          <Button
            round
            type="primary"
            icon="plus"
            onClick={() => downRef.value?.toggle()}
          >
            关注
          </Button>
        </div>

        <TheTitle title="老师介绍" isMore={false} />
        <div class={styles.des}>{props.teacher.introduction}</div>

        <TheTitle title="老师风采" isMore={false} />
        <VideoList
          list={props.teacher.styleVideo}
          onPlay={() => downRef.value?.toggle()}
        />

        <TheTitle title="其他课程" isMore={false} />
        <VideoItem
          list={props.videoList}
          onGoto={(item) =>
            router.push({
              path: "/videoDetail",
              query: { id: item.teacherId, groupId: item.id },
            })
          }
        />
        <TheDown ref={downRef} />
      </div>
    );
  },
});
