import OHeader from '@/components/o-header'
import OPopup from '@/components/o-popup'
import OSticky from '@/components/o-sticky'
import { Button, Cell, CellGroup, Dialog, Field, showDialog, showToast } from 'vant'
import { defineComponent, reactive } from 'vue'
import TeacherList from '../modal/teacher-list'
import styles from './select-teacher.module.less'
import { state as baseState } from '@/state'
import { createState as state, resestState } from './create'
import { useRouter } from 'vue-router'
import request from '@/helpers/request'
import ODialog from '@/components/o-dialog'

export default defineComponent({
  name: 'teacher-list',
  emits: ['close'],
  setup() {
    const router = useRouter()
    const forms = reactive({
      teacherStatus: false,
      status: false
    })

    console.log(state.selectLastTeacherSubjects)

    const onSubmit = async () => {
      // forms.status = true
      showDialog({
        title: '提示',
        message: '是否创建乐团？',
        showCancelButton: true
      }).then(async () => {
        try {
          const selectSubjects = state.selectLastTeacherSubjects || []
          const tempSelects: any = []
          selectSubjects.forEach((item: any) => {
            tempSelects.push({
              teacherId: item.teacher.id,
              type: item.type,
              subjectId: item.id,
              studentIdList: [...item.students]
            })
          })

          console.log(tempSelects, 'tempselects')
          // return
          await request.post('/api-school/orchestra/addOrchestra', {
            hideLoading: false,
            data: {
              schoolId: baseState.user.data.school.id,
              name: state.orchestraName,
              classGroupList: [...tempSelects]
            }
          })

          showToast('创建成功')
          forms.status = true
        } catch {
          //
        }
      })
    }

    const formatSubjectIds = (id: any) => {
      if (id) {
        const tempId = id.toString()
        return tempId.split(',')
      }
      return id
    }

    const onConfirm = () => {
      resestState()
      router.replace('/train-planning')
    }
    // 取消
    const onCancel = () => {
      resestState()
      router.replace('/my-orchestra')
    }

    return () => (
      <div class={styles.selectTeacher}>
        <OHeader title="选择伴学指导" />

        <CellGroup inset class={styles.cellGroup}>
          {state.selectLastTeacherSubjects.map((subject: any) => (
            <Cell
              center
              onClick={() => {
                forms.teacherStatus = true
                state.selectTeacher = subject
              }}
              isLink
            >
              {{
                title: () => <span class={styles.title}>{subject.name}</span>,
                value: () => (
                  <>
                    {subject.teacher?.nickname ? (
                      <p class={styles.name}>{subject.teacher?.nickname || ''}</p>
                    ) : (
                      <p class={styles.tips}>请选择伴学指导</p>
                    )}
                  </>
                )
              }}
            </Cell>
          ))}
        </CellGroup>

        <OSticky position="bottom">
          <div class={['btnGroup']}>
            <Button type="primary" round block onClick={onSubmit}>
              创建完成
            </Button>
          </div>
        </OSticky>

        <OPopup v-model:modelValue={forms.teacherStatus} position="bottom">
          <TeacherList
            subjectIdList={formatSubjectIds(state.selectTeacher.id)}
            onClose={() => (forms.teacherStatus = false)}
            onSelect={(item: any) => {
              state.selectTeacher.teacher = item
              forms.teacherStatus = false

              // console.log(state.selectTeacher, 'select')
              // console.log(state.selectSubjects, 'state.selectSubjects')
            }}
          />
        </OPopup>

        <ODialog
          v-model:show={forms.status}
          title="创建成功"
          messageAlign="left"
          confirmButtonText="去排课"
          cancelButtonText="暂不排课"
          showCancelButton
          message="乐团创建完成，是否需要排课？"
          onConfirm={onConfirm}
          onCancel={onCancel}
        ></ODialog>
      </div>
    )
  }
})