import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import Item from './item';
import {
  Button,
  Cell,
  Field,
  Skeleton,
  SkeletonParagraph,
  showToast
} from 'vant';
import MSticky from '@/components/m-sticky';
import MHeader from '@/components/m-header';
import SkeletionDetailItem from './skeletion-detail-item';
import { useRoute } from 'vue-router';
import { MusicGroupQuitDetailDto } from '../schedule';
import {
  api_musicGroupQuitAuditPass,
  api_musicGroupQuitAuditReject,
  api_musicGroupQuitGetDetail
} from '../api';
import { STUDENTSTATUS } from '@/helpers/constant';

export default defineComponent({
  name: 'schedule-manage-detail',
  setup() {
    const route = useRoute();
    const detailData = reactive({
      student: {} as MusicGroupQuitDetailDto,
      skeleton: true,
      /** 审核意见 */
      reason: '',
      musicGroupQuitId: route.query.musicGroupQuitId as any
    });

    /** 获取退团详情 */
    const getDetail = async () => {
      const musicGroupQuitId: string = detailData.musicGroupQuitId;
      api_musicGroupQuitGetDetail(musicGroupQuitId)
        .then(res => {
          const data: MusicGroupQuitDetailDto = res?.data || {};
          detailData.student = data;
        })
        .finally(() => {
          detailData.skeleton = false;
        });
    };

    /** 通过 */
    const musicGroupQuitAuditPass = async () => {
      if (!detailData.reason) return showToast('请填写审核意见');
      if (detailData.reason.length < 2) return showToast('审核意见最少2个字');
      const res = await api_musicGroupQuitAuditPass(
        detailData.musicGroupQuitId,
        detailData.reason
      );
      showToast('操作成功');
      if (res.code === 200) {
        getDetail();
      }
    };
    /** 拒绝 */
    const musicGroupQuitAuditReject = async () => {
      if (!detailData.reason) return showToast('请填写审核意见');
      if (detailData.reason.length < 2) return showToast('审核意见最少2个字');
      const res = await api_musicGroupQuitAuditReject(
        detailData.musicGroupQuitId,
        detailData.reason
      );
      showToast('操作成功');
      if (res.code === 200) {
        getDetail();
      }
    };
    onMounted(() => {
      getDetail();
    });
    return () => (
      <div class={styles.detail}>
        <MSticky position="top">
          <MHeader></MHeader>
        </MSticky>

        <Skeleton loading={detailData.skeleton}>
          {{
            template: () => (
              <div style={{ width: '100%' }}>
                <SkeletionDetailItem />
              </div>
            ),
            default: () => <Item item={detailData.student} />
          }}
        </Skeleton>


        <div class={styles.item}>
          <div class={styles.itemTitleDes}>
            <div class={styles.line}></div>
            <div>乐团名称</div>
          </div>
          <Skeleton class={styles.skeleton} loading={detailData.skeleton}>
            {{
              template: () => (
                <div class={styles.info}>
                  <SkeletonParagraph />
                  <SkeletonParagraph />
                </div>
              ),
              default: () => (
                <div class={styles.info} style={{margin: 0}}>
                  {detailData.student.musicGroupName}
                </div>
              )
            }}
          </Skeleton>
        </div>

        <div class={styles.item}>
          <div class={styles.itemTitleDes}>
            <div class={styles.line}></div>
            <div>退团原因</div>
          </div>
          <Skeleton class={styles.skeleton} loading={detailData.skeleton}>
            {{
              template: () => (
                <div class={styles.info}>
                  <SkeletonParagraph />
                  <SkeletonParagraph />
                </div>
              ),
              default: () => (
                <div class={styles.info}>
                  {STUDENTSTATUS[detailData.student.reasonEnum]}
                </div>
              )
            }}
          </Skeleton>

          <div class={styles.itemTitleDes}>
            <div class={styles.line}></div>
            <div>具体原因</div>
          </div>

          <Skeleton class={styles.skeleton} loading={detailData.skeleton}>
            {{
              template: () => (
                <div class={styles.info}>
                  <SkeletonParagraph />
                  <SkeletonParagraph />
                </div>
              ),
              default: () => (
                <div class={styles.info}>{detailData.student.userComment}</div>
              )
            }}
          </Skeleton>
        </div>
        <div class={styles.item}>
          <div class={styles.itemTitleDes}>
            <div class={styles.line}></div>
            <div>
              审批意见 <span style={{ color: 'red' }}>*</span>
            </div>
          </div>

          <Skeleton class={styles.skeleton} loading={detailData.skeleton}>
            {{
              template: () => (
                <div class={styles.info}>
                  <SkeletonParagraph />
                  <SkeletonParagraph />
                </div>
              ),
              default: () => (
                <>
                  {detailData.student.status === 'ING' ? (
                    <Field
                      class={styles.info}
                      required
                      rows={2}
                      type="textarea"
                      placeholder="请输入审批意见..."
                      border={false}
                      v-model:modelValue={detailData.reason}
                      maxlength={35}
                    />
                  ) : (
                    <div class={styles.info}>
                      {detailData.student.schoolStaffAuditReason}
                    </div>
                  )}
                </>
              )
            }}
          </Skeleton>
        </div>

        {/* {!detailData.skeleton &&
          ['PASS', 'REJECT'].includes(detailData.student.status) && (
            <div class={styles.item}>
              <div class={styles.itemTitleDes}>
                <div class={styles.line}></div>
                <div>审批时间</div>
              </div>
              <div class={styles.info}>{}</div>
            </div>
          )} */}

        {!detailData.skeleton && detailData.student.status === 'ING' && (
          <div class={[styles.btns, 'van-safe-area-bottom']}>
            <Button
              class={styles.cancelBtn}
              round
              block
              onClick={musicGroupQuitAuditReject}>
              拒绝
            </Button>
            <Button
              type="primary"
              round
              block
              onClick={musicGroupQuitAuditPass}>
              通过
            </Button>
          </div>
        )}
      </div>
    );
  }
});
