import OEmpty from '@/components/o-empty'
import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import TeacherList from '@/school/orchestra/modal/teacher-list'
import { Button, Cell, Popup, showToast, Sticky } from 'vant'
import { defineComponent, onMounted, reactive, watch } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'class-list',
  props: {
    classList: {
      type: Array,
      default: () => []
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { slots, attrs, emit }) {
    const state = reactive({
      teacherStatus: false,
      list: [] as any,
      isClick: false,
      selectItem: {} as any // 选择的班级
    })

    // 可以不用全部设置完
    const onSubmit = async () => {
      try {
        const tempList: any = []
        state.list.forEach((item: any) => {
          // 判断是否已经设置过伴学老师
          if (item.teacherId) {
            tempList.push({
              classGroupId: item.id,
              teacherId: item.teacherId
            })
          }
        })
        if (tempList.length <= 0) {
          emit('close')
          return
        }
        state.isClick = true
        await request.post('/api-school/classGroup/updateTeacher', {
          data: tempList
        })

        setTimeout(() => {
          showToast('设置成功')
        }, 100)

        setTimeout(() => {
          state.isClick = false
          emit('confirm')
          emit('close')
        }, 1100)
      } catch {
        //
        state.isClick = false
      }
      // emit('close')
    }

    // 监听变化
    watch(
      () => props.classList,
      () => {
        state.list = [...props.classList]
      }
    )

    onMounted(() => {
      state.list = [...props.classList]
    })
    return () => (
      <div class={styles.classList}>
        <OHeader title="指定伴学老师" desotry={false} />

        {state.list.map((item: any) => (
          <Cell
            class={styles.cell}
            center
            isLink
            onClick={() => {
              state.selectItem = item
              state.teacherStatus = true
            }}
          >
            {{
              title: () => (
                <div class={styles.content}>
                  <div class={styles.title}>
                    <i></i>
                    {item.name}
                  </div>
                  <div class={styles.name}>{item.orchestraName}</div>
                </div>
              ),
              value: () => <span class={styles.teacherName}>{item.teacherName}</span>
            }}
          </Cell>
        ))}
        {/* 判断是否有班级没有设置伴学指导 */}
        {props.classList.length <= 0 && (
          <OEmpty btnStatus={false} classImgSize="SMALL" tips="暂无班级" />
        )}

        <Sticky position="bottom">
          <div class={'btnGroup'}>
            <Button
              round
              block
              type="primary"
              size="large"
              onClick={onSubmit}
              disabled={state.isClick}
            >
              完成
            </Button>
          </div>
        </Sticky>

        <Popup v-model:show={state.teacherStatus} position="bottom" round style={{ height: '80%' }}>
          <TeacherList
            header={false}
            mode={'sticky'}
            courseType={state.selectItem.type}
            onClose={() => (state.teacherStatus = false)}
            onSelect={(val: any) => {
              state.selectItem.teacherId = val.id
              state.selectItem.teacherName = val.nickname
            }}
          />
        </Popup>
      </div>
    )
  }
})