import { routerBack } from 'press-ui/common/utils/router';

import { getDemoData, getTeamList, getGroupList, getTeamScoreList } from './data';


export function getScheduleDemoMixin() {
  return {
    data() {
      return {
        curTab: 0,
        teamMap: {
          list: [],
          finished: false,
          loading: false,
        },
        searchTeamMap: {
          list: [],
          finished: false,
          loading: false,
        },
        groupListMap: {
          list: [],
          finished: false,
          loading: false,
        },
        groupMap: {
          1: {
            list: [],
            finished: false,
            loading: false,
          },
        },
        searchTeamMapInGroup: {
          list: [],
          finished: false,
          loading: false,
        },

        isAllConfirmed: true,
        toSelectNumList: [1],

        numPerGroup: 1,
        curStartRoundId: 1,
        curScoreRoundId: 1,
        roundList: [],
        teamScoreMap: {
          ['1-1']: {
            list: getTeamScoreList(),
            loading: false,
            finished: false,
          },
        },
        teamMapInOneGroup: {
          title: '第1组-5支队伍',
          list: getTeamList(10),
          finished: true,
        },
        onlyShowDisabledButton: [],
        // onlyShowDisabledButton: [0, 1, 2, 3],
        curGoingTab: 0,
        publishedScore: false,
        showConfirmStartOB: true,
        showPublishScoreOB: true,
        historyScoreMap: {},
      };
    },
    mounted(this: any) {
      const { teamList, groupMap, roundList, toSelectNumList, groupList } = getDemoData();

      setTimeout(() => {
        this.teamMap.list = teamList;
        this.groupMap = groupMap;
        this.roundList = roundList;
        this.toSelectNumList = toSelectNumList;
        this.groupListMap.list = groupList;
      }, 1000);

      // setViewport();
    },
    beforeDestroy() {
      // resumeViewPort();
    },
    methods: {
      close() {
        routerBack.call(this);
      },
      changeTab(this: any, tab: any) {
        console.log('changeTab', tab);
        this.curTab = tab;
      },
      search(this: any, value: any) {
        console.log('[search] ', value);
        this.searchTeamMap.list = this.teamMap.list.filter((item: any) => item.teamname.indexOf(value) > -1);
      },
      searchTeamGroup(this: any, value: any) {
        console.log('[searchTeamGroup] ', value);
        this.searchTeamMapInGroup.list = this.teamMap.list.filter((item: any) => item.teamname.indexOf(value) > -1);
      },
      selectNumPerGroup(this: any, num: number) {
        console.log('[selectNumPerGroup]', num);
        this.numPerGroup = num;
      },
      confirmAdjustGroup(this: any) {
        this.onGTip('[confirmAdjustGroup]');
      },
      toggleAllQualification(this: any) {
        this.onGTip('[toggleAllQualification]');
        this.isAllConfirmed = !this.isAllConfirmed;
      },
      doneConfirmSignUp(this: any) {
        this.onGTip('[doneConfirmSignUp]');
      },
      publishScore(this: any) {
        this.onGTip('[publishScore]');
      },
      startGame(this: any) {
        this.onGTip('[startGame]');
      },
      startAllGame(this: any) {
        this.onGTip('[startAllGame]');
      },
      changeScoreRoundId(this: any, roundId: number) {
        console.log('[changeScoreRoundId] roundId', roundId);
        this.onGTip(`[changeScoreRoundId] ${roundId}`);
        this.curScoreRoundId = roundId;
      },
      changeStartRoundId(this: any, roundId: number) {
        console.log('[changeStartRoundId] roundId', roundId);
        this.onGTip(`[changeStartRoundId] ${roundId}`);
        this.curStartRoundId = roundId;
      },
      selectGroupInScore(this: any, groupSeq: number) {
        console.log('[selectGroupInScore] groupSeq', groupSeq);
        this.onGTip(`[selectGroupInScore] ${groupSeq}`);
      },
      checkTeam(this: any, team: any) {
        this.$set(team, 'checked', !team.checked);
      },
      loadMore(this: any, key: string) {
        console.log('[demo loadMore]');
        const loadMoreMap: any = {
          teamMap: this.loadMoreTeamList,
          searchTeamMap: this.loadMoreSearchTeamList,
          groupListMap: this.loadMoreGroupListMap,
          groupMap: this.loadMoreGroupMap,
          searchTeamMapInGroup: this.loadMoreSearchTeamMapInGroup,
          teamScoreMap: this.loadMoreTeamScoreMap,
        };
        if (typeof loadMoreMap[key] === 'function') {
          loadMoreMap[key]();
        }
      },
      loadMoreTeamList(this: any) {
        this.loadMoreCommon(
          'teamMap',
          getTeamList(10, this.teamMap.list.length),
        );
      },
      loadMoreSearchTeamList(this: any) {
        this.loadMoreCommon(
          'searchTeamMap',
          getTeamList(10, this.searchTeamMap.list.length),
        );
      },
      loadMoreSearchTeamMapInGroup(this: any) {
        this.loadMoreCommon(
          'searchTeamMapInGroup',
          getTeamList(10, this.searchTeamMapInGroup.list.length),
        );
      },
      loadMoreTeamScoreMap(this: any) {
        this.loadMoreCommon(
          'teamScoreMap',
          getTeamScoreList(),
          '1-1',
        );
      },
      loadMoreCommon(this: any, key: string, moreList: any, key2: string) {
        let data = this[key];
        if (key2) {
          data = data[key2];
        }

        return new Promise((resolve) => {
          setTimeout(() => {
            data.list = data.list.concat(moreList);
            data.loading = false;
            data.finished =  data.list.length >= 50;

            resolve(1);
          }, 300);
        });
      },
      loadMoreGroupListMap(this: any) {
        this.loadMoreCommon(
          'groupListMap',
          getGroupList(10, this.groupListMap.list.length),
        ).then(() => {
          console.log('groupMap', this.groupListMap);
        });
      },
      loadMoreGroupMap(this: any) {
        this.loadMoreCommon(
          'groupMap',
          getGroupList(10, this.groupMap[this.curStartRoundId].list.length),
          this.curStartRoundId,
        ).then(() => {
          console.log('groupMap', this.groupMap);
        });
      },
      updateLoading(this: any, key: string, value: string) {
        console.log('[updateLoading]', key, value);
        if (key === 'groupMap') {
          this.groupMap[this.curStartRoundId].loading = value;
          return;
        }
        if (key === 'teamScoreMap') {
          this.teamScoreMap['1-1'].loading = value;
          return;
        }

        this[key].loading = value;
      },
      clickSearchTeamCard(this: any, team: any, index: number) {
        console.log('[clickSearchTeamCard]', team, index);
      },
      clickTeamGroupCard(this: any, groupItem: any, groupIndex: number, groupList: any) {
        console.log('[clickTeamGroupCard]', groupItem, groupIndex, groupList);
      },
      cancelSearch() {
        console.log('[cancelSearch]');
      },
      clickConfirmStartOB(this: any) {
        console.log('[clickConfirmStartOB]');
        this.onGTip('[clickConfirmStartOB]');
      },
      clickPublishScoreOB(this: any, item: any, index: number) {
        this.onGTip('[clickPublishScoreOB]');
        console.log('[clickPublishScoreOB]', item, index);
      },
      clickScoreDetail(this: any, item: any, index: number) {
        console.log('[clickScoreDetail]', item, index);

        this.$set(this.historyScoreMap, index, [{
          roundStr: '第一场',
          rank: 1,
          score: 2,
        },
        {
          roundStr: '第二场',
          rank: 1,
          score: 2,
        }]);
      },
    },
  };
}