import MHeader from '@/components/m-header';
import { Cell, CellGroup, Col, Icon, Row, Tag, Image } from 'vant';
import { defineComponent, onMounted, reactive } from 'vue';
import styles from './detail.module.less';
import { toChinesNum } from '@/helpers/utils';
import SOLO from './images/SOLO.png';
import REPRISE from './images/REPRISE.png';
import ENSEMBLE from './images/ENSEMBLE.png';
import UNISON from './images/UNISON.png';
import MImagePreview from '@/components/m-image-preview';
import SkeletionIndexModal from './skeletion-index-modal';
import SkeletionDetailModal from './skeletion-detail-modal';
import request from '@/helpers/request';
import { useRoute, useRouter } from 'vue-router';
import { activeStatus, activityStatus } from '@/helpers/constant';
import dayjs from 'dayjs';
import { formatterTimer } from './operation';
import MPopup from '@/components/m-popup';
import CastModal from './components/cast-modal';
import iconEdit from './images/icon-edit.png';

export default defineComponent({
  name: 'detail-page',
  setup() {
    const route = useRoute();
    const router = useRouter();
    // console.log(toChinesNum(11));
    const forms = reactive({
      id: route.query.id,
      imageShow: false,
      imagePreview: [] as any,
      startPosition: 0,
      headerLoading: true,
      detailLoading: true,
      detail: [] as any[],
      headerDetail: {} as any,
      castStatus: false,
      studentAllList: [] as any
    });

    const getDetail = async () => {
      try {
        const { data } = await request.get(
          '/api-web/schoolActivity/detail/' + forms.id
        );
        const { detail, ...res } = data || {};
        detail.forEach((item: any) => {
          item.attachmentUrl = item.attachmentUrl
            ? item.attachmentUrl.split(',')
            : [];
        });
        forms.detail = detail;
        forms.headerDetail = { ...res };
      } catch {
        //
      } finally {
        forms.headerLoading = false;
        forms.detailLoading = false;
      }
    };

    const formatterStudentList = (list: any[]) => {
      const tempList: any[] = [];
      list.map((student: any) => {
        let count = 0;
        const students: any[] = [];

        student.studentList.forEach((item: any) => {
          if (item.selected) {
            count++;
            students.push(item);
          }
        });

        if (count > 0) {
          tempList.push({
            studentCount: student.studentCount,
            subjectId: student.subjectId,
            subjectName: student.subjectName,
            studentList: students
          });
        }
      });
      forms.studentAllList = tempList;
      forms.castStatus = true;
    };

    const formatterImage = (name: string) => {
      let image: string = '';
      switch (name) {
        case 'SOLO':
          image = SOLO;
          break;
        case 'REPRISE':
          image = REPRISE;
          break;
        case 'ENSEMBLE':
          image = ENSEMBLE;
          break;
        case 'UNISON':
          image = UNISON;
          break;
        default:
          image = SOLO;
          break;
      }
      return image;
    };

    onMounted(() => {
      // setTimeout(() => {
      //   // forms.headerLoading = false;
      //   // forms.detailLoading = false;
      // }, 1000);
      getDetail();
    });
    return () => (
      <div class={styles.detail}>
        <MHeader>
          {{
            right: () => (
              <Icon
                name={iconEdit}
                class={styles.iconEdit}
                onClick={() => {
                  router.push({
                    path: '/activity-record-operation',
                    query: {
                      id: forms.id
                    }
                  });
                }}
              />
            )
          }}
        </MHeader>

        <SkeletionIndexModal
          v-model:show={forms.headerLoading}
          showCount={[1]}
          isLink={false}>
          <CellGroup inset class={styles.cellGroup}>
            <Cell center class={styles.cellTitle}>
              {{
                icon: () => (
                  <Tag plain type="primary" class={styles.tag}>
                    {activityStatus[forms.headerDetail.type]}
                  </Tag>
                ),
                title: () => (
                  <div class={[styles.title, 'van-ellipsis']}>
                    {forms.headerDetail.name}
                  </div>
                )
              }}
            </Cell>
            <Cell
              class={styles.cellTimer}
              center
              title={`活动日期：${dayjs(forms.headerDetail.startTime).format(
                'YYYY年MM月DD日'
              )}`}
              value={activeStatus[forms.headerDetail.status]}
              valueClass={
                forms.headerDetail.status === 'PROCESSING' ? styles.ing : ''
              }></Cell>
          </CellGroup>
        </SkeletionIndexModal>

        <SkeletionDetailModal
          v-model:show={forms.detailLoading}
          showCount={[1, 2]}>
          {forms.detail.map((item: any, index: number) => (
            <>
              <div class={styles.pTitle}>节目{toChinesNum(index + 1)}</div>

              <CellGroup inset class={styles.pCellGroup}>
                <Cell center>
                  {{
                    icon: () => (
                      <img
                        src={formatterImage(item.type)}
                        class={styles.imgType}
                      />
                    ),
                    title: () => (
                      <div class={[styles.title, 'van-ellipsis']}>
                        {item.name}
                      </div>
                    ),
                    value: () => {
                      const timer = formatterTimer(item.time);
                      return (
                        <span class={styles.time}>
                          {timer.minute}分{timer.secord}秒
                        </span>
                      );
                    }
                  }}
                </Cell>
                <Cell
                  center
                  class={styles.moreCell}
                  valueClass={styles.valueClass}>
                  <Row class={styles.item}>
                    <Col span={5} class={styles.label}>
                      表演乐团
                    </Col>
                    <Col span={19} class={styles.content}>
                      {item.musicGroupName}
                      <span
                        onClick={() => {
                          if (item.studentNum <= 0) return;
                          formatterStudentList(item.studentList);
                        }}>
                        共{item.studentNum}名 <Icon name="arrow" />
                      </span>
                    </Col>
                  </Row>
                  <Row class={styles.item} style={{ marginBottom: '0' }}>
                    <Col span={5} class={styles.label}>
                      表演团队
                    </Col>
                    <Col span={19} class={styles.content}>
                      {item.subjectNameList}
                    </Col>
                  </Row>
                  {item.attachmentUrl ? (
                    <div class={styles.photoList}>
                      {item.attachmentUrl.map(
                        (i: any, index: number) =>
                          index <= 3 && (
                            <div
                              class={styles.photo}
                              onClick={() => {
                                forms.imagePreview = item.attachmentUrl;
                                forms.imageShow = true;
                                forms.startPosition = index;
                              }}>
                              <Image
                                src={i + '@base@tag=imgScale&w=120'}
                                fit="cover"
                              />
                              {item.attachmentUrl.length > 4 && index === 3 ? (
                                <div class={styles.photoMore}>
                                  +{item.attachmentUrl.length - 4}
                                </div>
                              ) : (
                                ''
                              )}
                            </div>
                          )
                      )}
                    </div>
                  ) : (
                    ''
                  )}
                </Cell>
              </CellGroup>
            </>
          ))}
        </SkeletionDetailModal>

        <MImagePreview
          v-model:show={forms.imageShow}
          images={forms.imagePreview}
          startPosition={forms.startPosition}
        />

        {/* 演员名单 */}
        <MPopup v-model:modelValue={forms.castStatus}>
          <CastModal
            type="look"
            subjectAllList={forms.studentAllList}
            onClose={() => (forms.castStatus = false)}
          />
        </MPopup>
      </div>
    );
  }
});
