import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import MSticky from '@/components/m-sticky';
import MHeader from '@/components/m-header';
import MSearch from '@/components/m-search';
import SkeletonModal from './skeleton-modal';
import { Cell, CellGroup, DropdownItem, DropdownMenu, Image, List } from 'vant';
import { useRouter } from 'vue-router';
import MFullRefresh from '@/components/m-full-refresh';
import request from '@/helpers/request';
import iconTeacher from '@/common/images/icon-student-default.png';
import MEmpty from '@/components/m-empty';
import { coursesType } from '@/helpers/constant';
import DropDownModal from './drop-down-modal';
import dayjs from 'dayjs';
import DropDownMoreModal from './drop-down-more-modal';

export default defineComponent({
  name: 'student-leave-record',
  setup() {
    const dropDownItemRef = ref();
    const dropDownItemRef1 = ref();
    const router = useRouter();
    const forms = reactive({
      listState: {
        loading: true,
        dataShow: true,
        finished: false,
        refreshing: false
      },
      isClick: false,
      params: {
        createTime: [dayjs().format('YYYY'), dayjs().format('MM')],
        musicGroupIds: '',
        classGroupType: '',
        courseScheduleType: '',
        search: '',
        page: 1,
        rows: 20
      },
      orchestraColumns: [] as any,
      list: []
    });

    const onDropDownClose = (item: any) => {
      item.value && item.value.toggle();
    };

    const getList = async () => {
      try {
        if (forms.isClick) return;
        forms.isClick = true;
        const { createTime, ...res } = forms.params;

        const startTime = createTime.join('-') + '-01';

        const endTime = dayjs(startTime).endOf('month').format('YYYY-MM-DD');

        const { data } = await request.post(
          '/api-web/schoolStudentHomework/queryStudentLeave',
          {
            data: {
              ...res,
              startTime,
              endTime
            }
          }
        );
        const result = data || {};

        // 判断是否有数据
        if (forms.listState.refreshing) {
          forms.list = result.rows || [];
        } else {
          forms.list = forms.list.concat(result.rows || []);
        }

        forms.listState.finished = result.pageNo >= result.totalPage;
        forms.params.page = result.pageNo + 1;
      } catch {
        // forms.listState.finished = true;
      } finally {
        forms.listState.dataShow = forms.list.length > 0;
        forms.listState.refreshing = false;
        forms.listState.loading = false;
        forms.isClick = false;
      }
    };

    const formatTime = (time: string) => {
      if (!time) {
        return '';
      }

      return time.substring(0, 5);
    };

    const onRefresh = () => {
      forms.params.page = 1;
      getList();
    };

    // 乐团列表
    const musicGroupPage = async () => {
      try {
        const { data } = await request.get(
          '/api-web/cooperationOrgan/musicGroupPage'
        );
        (data || []).forEach((item: any) => {
          forms.orchestraColumns.push({
            text: item.name,
            value: item.id
          });
        });
      } catch {
        //
      }
    };
    onMounted(() => {
      musicGroupPage();
      getList();
    });
    return () => (
      <div class={styles.studentLeaveRecord}>
        <MSticky position="top">
          <MHeader />
          <MSearch
            placeholder="请输入学员姓名/手机号"
            onSearch={(val: string) => {
              forms.params.search = val;
              forms.listState.dataShow = true;
              forms.listState.refreshing = true;
              forms.list = [];
              onRefresh();
            }}
          />
          <DropdownMenu>
            <DropdownItem
              ref={dropDownItemRef}
              title={forms.params.createTime.join('-')}>
              <DropDownModal
                selectValues={forms.params.createTime}
                open={dropDownItemRef.value.state.showPopup}
                onDropDownClose={() => onDropDownClose(dropDownItemRef)}
                onDropDownConfirm={(values: any) => {
                  forms.params.createTime = values;
                  onDropDownClose(dropDownItemRef);
                  forms.listState.dataShow = true;
                  forms.listState.refreshing = true;
                  forms.list = [];
                  onRefresh();
                }}
              />
            </DropdownItem>
            <DropdownItem ref={dropDownItemRef1} title={'筛选'}>
              <DropDownMoreModal
                selectValues={{
                  musicGroupIds: forms.params.musicGroupIds,
                  classGroupType: forms.params.classGroupType,
                  courseScheduleType: forms.params.courseScheduleType
                }}
                columns={forms.orchestraColumns}
                open={dropDownItemRef1.value.state.showPopup}
                onDropDownClose={() => onDropDownClose(dropDownItemRef1)}
                onDropDownConfirm={(values: any) => {
                  forms.params.musicGroupIds = values.musicGroupIds;
                  forms.params.classGroupType = values.classGroupType;
                  forms.params.courseScheduleType = values.courseScheduleType;

                  onDropDownClose(dropDownItemRef1);
                  forms.listState.refreshing = true;
                  forms.listState.dataShow = true;
                  forms.list = [];
                  onRefresh();
                }}
              />
            </DropdownItem>
          </DropdownMenu>
        </MSticky>

        <SkeletonModal v-model:show={forms.listState.loading}>
          <MFullRefresh
            v-model:modelValue={forms.listState.refreshing}
            onRefresh={() => onRefresh()}
            style={{
              minHeight: `calc(100vh - var(--header-height))`
            }}>
            <List
              finished={forms.listState.finished}
              finishedText=" "
              style={{ overflow: 'hidden' }}
              onLoad={getList}
              immediateCheck={false}>
              <div class={styles.cellGroup}>
                {forms.listState.dataShow ? (
                  forms.list.map((item: any) => (
                    <CellGroup class={styles.cellGroupIn}>
                      <Cell center clickable={false} class={styles.cell}>
                        {{
                          icon: () => (
                            <Image
                              src={item.avatar || iconTeacher}
                              fit="cover"
                              class={styles.iconTeacher}
                            />
                          ),

                          title: () => (
                            <div class={styles.username}>
                              <p class={styles.name}>
                                {coursesType[item.courseScheduleType]}·
                                {item.classGroupName}
                              </p>
                              <p class={styles.class}>
                                <span class={styles.userName}>
                                  {item.username}
                                </span>
                                {item.phone && <span>{item.phone}</span>}
                              </p>
                            </div>
                          )
                        }}
                      </Cell>
                      <Cell
                        center
                        clickable={false}
                        class={styles.cell}
                        titleClass={styles.cellInfo}>
                        {{
                          title: () => (
                            <div class={styles.info}>
                              <div class={[styles.times, styles.time1]}>
                                <span class={styles.title}>课程时间</span>
                                <span>
                                  {item.classDate}{' '}
                                  {formatTime(item.endClassTime)}-
                                  {formatTime(item.startClassTime)}
                                </span>
                              </div>
                              <div class={[styles.times]}>
                                <span class={styles.title}>提交时间</span>
                                <span>{item.leaveTime}</span>
                              </div>

                              {item.remark && (
                                <div class={styles.remark}>
                                  <div class={styles.remarkTitle}>请假事由</div>
                                  <p>{item.remark}</p>
                                </div>
                              )}
                            </div>
                          )
                        }}
                      </Cell>
                    </CellGroup>
                  ))
                ) : (
                  <MEmpty
                    style={{
                      minHeight: `calc(100vh - var(--header-height))`
                    }}
                    description="暂无学员请假统计"
                  />
                )}
              </div>
            </List>
          </MFullRefresh>
        </SkeletonModal>
      </div>
    );
  }
});