import { computed, defineComponent, reactive, TransitionGroup, watch } from 'vue';
import styles from './index.module.less';
import OHeader from '@/components/o-header';
import OSearch from '@/components/o-search';
import request from '@/helpers/request';
import { state } from '@/state';
import { useRoute } from 'vue-router';
import OLoading from '@/components/o-loading';
import OEmpty from '@/components/o-empty';
import { Cell, Collapse, CollapseItem } from 'vant';
import ChildNode, { getImage } from './child-node';
import { useEventListener, usePageVisibility } from '@vant/use';
import iconMenu from './image/icon-menu.png';

export default defineComponent({
  name: 'course-list-search',
  setup() {
    const route = useRoute();
    const data = reactive({
      titleOpacity: 0,
      loading: true,
      detail: {
        // id: '',
        // cover: '',
        // name: '',
        // des: '',
        useStatus: '',
      },
      list: [] as any,
      search: '' as string | undefined,
      parentCollapse: '' as any
      // childrenCollapse: '' as any
    });
    const pageVisibility = usePageVisibility();
    /** 是否锁定 */
    const isLock = computed(() => {
      return  (data.detail.useStatus === 'LOCK' && state.platformType === 'STUDENT') ? true : false;
    })
    const formatDataList = (list: any = []) => {
      const tempList: any = [];
      list.forEach((item: any) => {
        let tempChild: any = {};
        item.collapse = '';
        tempChild = item;
        if (Array.isArray(item.children)) {
          tempChild.children = formatDataList(item.children);
        }
        tempList.push({
          ...tempChild
        });
      });
      return tempList;
    };
    /** 获取课件详情 */
    const getDetail = async () => {
      const res: any = await request.get(
        `${state.platformApi}/lessonCourseware/getLessonCoursewareDetail/${route.query.id}`
      );
      if (res?.data) {
        // data.detail.id = res.data.id;
        // data.detail.cover = res.data.coverImg;
        // data.detail.name = res.data.name;
        // data.detail.des = res.data.lessonTargetDesc;
        data.detail.useStatus = res.data.useStatus;
      }
    };
    const getList = async (search?: string) => {
      data.loading = true;
      try {
        const res: any = await request.get(
          state.platformApi +
            '/lessonCourseware/getLessonCoursewareCourseList/' +
            route.query.id, {
              requestType: 'form',
              params: {
                search
              }
            }
        );
        if (Array.isArray(res?.data)) {
          data.search = search
          res.data.forEach((item: any) => {
            item.children = item.knowledgePointList || [];
            item.id = item.coursewareDetailId;
            item.name = item.coursewareDetailName;
            formatDataList(item.children);
          });

          data.list = res.data;

          data.parentCollapse = data.list[0].id
        }
      } catch (error) {
        //
      }
      data.loading = false;
    };
    getDetail();
    getList();

    /** 页面显示和隐藏 */
    watch(
      () => pageVisibility.value,
      value => {
        if(value === "visible") {
          getDetail()
        }
      }
    );

    useEventListener('scroll', () => {
      const height =
        window.scrollY ||
        window.pageYOffset ||
        document.documentElement.scrollTop;
      data.titleOpacity = height > 100 ? 1 : height / 100;
    });
    return () => (
      <div class={styles.courseListSearch}>
        <OHeader
          background={`rgba(255,255,255, ${data.titleOpacity})`}
          border={false}>
          {{
            title: () => (
              <div class={styles.title}>
                <OSearch
                  background="transparent"
                  placeholder="请输入素材关键词"
                  onSearch={(val: string) => {
                    getList(val)
                  }}
                />
              </div>
            )
          }}
        </OHeader>

        <TransitionGroup name="van-fade">
          {!data.loading && (
            <Collapse
              key="courseListSearch"
              modelValue={data.parentCollapse}
              onUpdate:modelValue={(val: any) => {
                data.parentCollapse = val;
                // data.childrenCollapse = ''; // 重置子项选择
              }}
              class={styles.collapseParent}
              border={false}
              accordion>
              {data.list.map((item: any) => (
                <CollapseItem
                  center
                  name={item.coursewareDetailId}
                  clickable={false}
                  class={['parentCollapse__item']}>
                  {{
                    title: () => (
                      <div class={[styles.itemTitle]}>
                        <img src={iconMenu} class={styles.iconMenu} />
                        {item.coursewareDetailName}
                      </div>
                    ),
                    default: () => (
                      <>
                        {Array.isArray(item?.materialList) &&
                          item.materialList.map((n: any) => (
                            <Cell center isLink clickable={false}>
                              {{
                                title: () => (
                                  <div class={styles.materialSection}>
                                    <img
                                      src={getImage(n)}
                                      class={styles.iconMaterial}
                                    />
                                    {n.name}
                                  </div>
                                )
                              }}
                            </Cell>
                          ))}
                        {Array.isArray(item?.children) && (
                          <ChildNode
                            id={route.query.id as any}
                            search={data.search}
                            isLock={isLock.value}
                            list={item.children}
                            collapse={item.collapse}
                            onUpdate:collapse={(val: any) => {
                              item.collapse = val;
                            }}
                          />
                        )}
                      </>
                    ),
                    'right-icon': () => (
                      <i
                        class={[
                          styles.arrow,
                          data.parentCollapse === item.coursewareDetailId
                            ? styles.arrowActive
                            : ''
                        ]}></i>
                    )
                  }}
                </CollapseItem>
              ))}
            </Collapse>
          )}
        </TransitionGroup>
        {data.loading && <OLoading />}
        {!data.loading && !data.list.length && <OEmpty tips="暂无搜索结果" />}
      </div>
    );
  }
});
