import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import { state } from '@/state'
import { Button, Cell, CellGroup, Picker, Popup, Tab, Tabs } from 'vant'
import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
import styles from './index.module.less'
import iconOrchestra from './images/icon-or.png'
import MyClass from './my-class'
import OEmpty from '@/components/o-empty'
import OFullRefresh from '@/components/o-full-refresh'
import OrchestraDeeds from './orchestra-deeds'
import MyPhoto from './my-photo'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  name: 'my-orchestra',
  setup(props, ctx) {
    const route = useRoute()
    const router = useRouter()
    const tabActive = ref<'course' | 'photo' | 'deeds'>((route.query as any)?.tab || 'course')
    const data = reactive({
      orchestraList: [] as any[],
      loading: true,
      reshLoading: false
    })
    const modelData = reactive({
      orchestra: {} as any,
      orchestraStatus: false
    })
    /** 学生获取我的乐团 */
    const getStudentOrchestras = () => {
      data.loading = true
      request
        .post(`${state.platformApi}/orchestra/studentOrchestra`, {
          // hideLoading: data.reshLoading
        })
        .then((res: any) => {
          if (Array.isArray(res?.data)) {
            data.orchestraList = res.data.map((n: any) => {
              return {
                ...n,
                name: n.name || n.orchestraName || '',
                id: n.id || n.orchestraId || ''
              }
            })
            modelData.orchestra = data.orchestraList[0] || {}
          }
        })
        .finally(() => {
          setTimeout(() => {
            data.loading = false
          }, 300)
        })
    }
    const getTeacherOrchestras = async () => {
      data.loading = true
      request
        .post(`${state.platformApi}/orchestra/teacherOrchestra`, {
          // hideLoading: data.reshLoading
        })
        .then((res: any) => {
          if (Array.isArray(res?.data)) {
            data.orchestraList = res.data.map((n: any) => {
              return {
                ...n,
                name: n.name || n.orchestraName || '',
                id: n.id || n.orchestraId || ''
              }
            })
            modelData.orchestra = data.orchestraList[0] || {}
          }
        })
        .finally(() => {
          setTimeout(() => {
            data.loading = false
          }, 300)
        })
    }
    const getData = () => {
      if (state.platformType === 'STUDENT') {
        getStudentOrchestras()
      } else if (state.platformType === 'TEACHER') {
        getTeacherOrchestras()
      }
    }
    onMounted(() => {
      document.documentElement.style.setProperty('--footer-height', '0px')
      getData()
    })

    return () => (
      <div class={[styles.mineOrchestra]}>
        <OSticky
          onGetHeight={(height: number) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader title="我的乐团" />
        </OSticky>
        <OFullRefresh
          v-model:modelValue={data.loading}
          onRefresh={() => {
            data.reshLoading = true
            data.orchestraList = []
            nextTick(() => {
              getData()
            })
          }}
          style="min-height: calc(100vh - var(--van-nav-bar-height) - var(--header-height) - var(--footer-height))"
        >
          {!data.loading && !!data.orchestraList.length && (
            <>
              <CellGroup inset>
                <Cell
                  class={styles.select}
                  center
                  isLink
                  onClick={() => (modelData.orchestraStatus = true)}
                >
                  {{
                    icon: () => <img class={styles.icon} src={iconOrchestra} />,
                    title: () => <div class="van-ellipsis">{modelData.orchestra.name}</div>
                  }}
                </Cell>
              </CellGroup>
              <Tabs
                v-model:active={tabActive.value}
                class={styles.tabs}
                lazyRender={true}
                background="transparent"
                animated
                swipeable
                lineWidth={16}
                lineHeight={4}
              >
                <Tab name="course" title="我的班级">
                  <div class={styles.content}>
                    <MyClass
                      orchestraName={modelData.orchestra?.name || ''}
                      list={modelData.orchestra?.classGroupIdList || []}
                    />
                  </div>
                </Tab>
                {/* <Tab name="photo" title="乐团相册">
                  <div class={styles.content}>
                    <MyPhoto orchestraId={modelData.orchestra?.id || ''} />
                  </div>
                </Tab> */}
                <Tab name="deeds" title="乐团事迹">
                  <div class={styles.content}>
                    <OrchestraDeeds orchestraId={modelData.orchestra?.id || ''} />
                  </div>
                </Tab>
              </Tabs>
            </>
          )}
          {!data.loading && !data.orchestraList.length && (
            <div
              class={!data.orchestraList.length && 'emptyRootContainer'}
              style={{ minHeight: 'calc(100vh - var(--header-height))' }}
            >
              <OEmpty btnStatus={false} tips="暂无乐团" />
            </div>
          )}
        </OFullRefresh>

        {state.platformType == 'STUDENT' &&
          ['REGISTER', 'LEARNING', 'AUTH'].includes(modelData.orchestra?.status) && (
            <OSticky
              position="bottom"
              onGetHeight={(height: any) => {
                document.documentElement.style.setProperty('--footer-height', height + 'px')
              }}
            >
              <div class="btnGroup" style="padding-top: 12px">
                {(modelData.orchestra?.status === 'REGISTER' ||
                  modelData.orchestra?.status === 'LEARNING') && (
                  <Button
                    type="primary"
                    round
                    block
                    onClick={() => {
                      router.push({
                        path: '/apply-withdrawal',
                        query: {
                          id: modelData.orchestra?.orchestraId
                        }
                      })
                    }}
                  >
                    申请退团
                  </Button>
                )}
                {modelData.orchestra?.status === 'AUTH' && (
                  <Button type="primary" round block disabled>
                    申请退团中
                  </Button>
                )}
              </div>
            </OSticky>
          )}

        <Popup
          v-model:show={modelData.orchestraStatus}
          position="bottom"
          round
          class={'popupBottomSearch'}
        >
          <Picker
            columns={data.orchestraList}
            columnsFieldNames={{ text: 'name', value: 'id' }}
            onCancel={() => (modelData.orchestraStatus = false)}
            onConfirm={({ selectedValues }: any) => {
              const val = selectedValues[0] || ''
              modelData.orchestraStatus = false
              if (val == modelData.orchestra?.id) {
                return
              }
              const active = data.orchestraList.find((n: any) => n.id == val) || {}
              modelData.orchestra = active
            }}
          />
        </Popup>
      </div>
    )
  }
})