import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import CardType from '@/components/card-type';
import Pagination from '@/components/pagination';
import SearchGroupResources from './search-group-resources';
import { favorite, materialQueryPage, materialRemove } from '../../api';
import {
  NButton,
  NModal,
  NSpace,
  NSpin,
  useDialog,
  useMessage
} from 'naive-ui';
import TheEmpty from '@/components/TheEmpty';
import CardPreview from '@/components/card-preview';
import MyCollogeGuide from '@/custom-plugins/guide-page/myColloge-guide';
import { modalClickMask } from '/src/state';
export default defineComponent({
  name: 'share-resources',
  setup() {
    const message = useMessage();
    const dialog = useDialog();
    const state = reactive({
      searchWord: '',
      loading: false,
      pageTotal: 0,
      pagination: {
        page: 1,
        rows: 20
      },
      searchGroup: {
        type: 'MUSIC', //
        name: '',
        bookVersionId: null,
        musicalInstrumentId: null,
        subjectId: null,
        sourceType: 4
      },
      tableList: [] as any,
      show: false,
      item: {} as any,
      removeVisiable: false,
      removeContent: '该资源已下架，是否删除？',
      removeItem: {} as any
    });
    const getList = async () => {
      try {
        state.loading = true;
        const { data } = await materialQueryPage({
          ...state.searchGroup,
          ...state.pagination
        });
        state.loading = false;
        state.pageTotal = Number(data.total);
        const tempRows = data.rows || [];
        const temp: any = [];
        tempRows.forEach((row: any) => {
          temp.push({
            id: row.id,
            coverImg: row.coverImg,
            type: row.type,
            title: row.name,
            isCollect: !!row.favoriteFlag,
            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
            refFlag: row.refFlag,
            content: row.content,
            subjectId: row.subjectIds,
            background: row.background,
            audioPlayTypeArray: row.audioPlayTypes
              ? row.audioPlayTypes.split(',')
              : [],
            enableFlag: row.enableFlag ? 1 : 0,
            openFlag: row.openFlag
          });
        });
        state.tableList = temp || [];
        setTimeout(() => {
          showGuide.value = true;
        }, 500);
      } catch {
        state.loading = false;
      }
    };
    const showGuide = ref(false);
    const onSearch = async (item: any) => {
      state.pagination.page = 1;

      const { subjectId, ...res } = item;
      state.searchGroup = Object.assign(state.searchGroup, {
        ...res,
        musicalInstrumentId: subjectId,
        subjectId: null
      });

      getList();
    };
    // 收藏
    const onCollect = async (item: any) => {
      try {
        await favorite({
          materialId: item.id,
          favoriteFlag: item.isCollect ? 0 : 1,
          type: item.type
        });
        item.isCollect = !item.isCollect;

        // onSearch(state.searchGroup);
      } catch {
        //
      }
    };

    // 单个删除
    const onRemove = async () => {
      try {
        // await materialRemove({ ids: state.removeItem.id });
        await favorite({
          materialId: state.removeItem.id,
          favoriteFlag: 0,
          type: state.removeItem.type
        });
        message.success('删除成功');
        onSearch(state.searchGroup);
      } catch {
        //
      }
    };

    onMounted(() => {
      // getList();
    });
    return () => (
      <>
        <SearchGroupResources onSearch={(item: any) => onSearch(item)} />

        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
          <div class={styles.list} id="myColloge-0">
            {state.tableList.map((item: any) => (
              <div class={styles.itemWrap}>
                <div class={styles.itemWrapBox}>
                  <CardType
                    item={item}
                    offShelf={item.enableFlag ? false : true}
                    onOffShelf={() => {
                      state.removeVisiable = true;
                      state.removeItem = item;
                    }}
                    disabledMouseHover={false}
                    onClick={(val: any) => {
                      if (val.type === 'IMG' || !item.enableFlag) return;
                      state.show = true;
                      state.item = {
                        instrumentId:
                          state.searchGroup.musicalInstrumentId || null,
                        ...val
                      };
                    }}
                    onCollect={(item: any) => onCollect(item)}
                  />
                </div>
              </div>
            ))}

            {!state.loading && state.tableList.length <= 0 && (
              <TheEmpty
                style={{ minHeight: '50vh' }}
                description="暂无收藏资源"
              />
            )}
          </div>
        </NSpin>

        <Pagination
          v-model:page={state.pagination.page}
          v-model:pageSize={state.pagination.rows}
          v-model:pageTotal={state.pageTotal}
          onList={getList}
        />

        {/* 弹窗查看 */}
        <CardPreview v-model:show={state.show} item={state.item} />
        {showGuide.value ? <MyCollogeGuide></MyCollogeGuide> : null}

        <NModal
          maskClosable={modalClickMask}
          v-model:show={state.removeVisiable}
          preset="card"
          class={['modalTitle', styles.removeVisiable]}
          title={'提示'}>
          <div class={styles.studentRemove}>
            <p>{state.removeContent}</p>

            <NSpace class={styles.btnGroupModal} justify="center">
              <NButton
                round
                type="primary"
                onClick={() => {
                  onRemove();
                  state.removeVisiable = false;
                }}>
                确定
              </NButton>
              <NButton round onClick={() => (state.removeVisiable = false)}>
                取消
              </NButton>
            </NSpace>
          </div>
        </NModal>
      </>
    );
  }
});