import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Button, Cell, CellGroup, Field, Grid, GridItem, Image, showDialog, showToast } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './unbind.module.less'
import { state as baseState } from '@/state'
import { useRoute, useRouter } from 'vue-router'
import request from '@/helpers/request'
import OPopup from '@/components/o-popup'
import Teacher from './compontent/teacher'
import { courseEmnu } from '@/constant'
import ODialog from '@/components/o-dialog'

export default defineComponent({
  name: 'unbind',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      teacherStatus: false,
      classList: [] as any,
      selectTeacher: {} as any,
      teacherId: route.query.id,
      dialogStatus: false,
      dialogMessage: '',
      dialogStatus1: false,
      dialogMessage1: ''
    })
    const getClassDetail = async () => {
      try {
        const { data } = await request.post(
          '/api-school/classGroup/teacherHandoverList/' + state.teacherId,
          {}
        )
        state.classList = data || []
      } catch {
        //
      }
    }

    // 选择交接伴学老师
    const onSelectTeacher = (item: any) => {
      state.teacherStatus = true
      state.selectTeacher = item
    }
    // 选择了交接伴学老师之后
    const onSelectItem = (item: any) => {
      console.log(item, 'steacher')
      state.selectTeacher.sTeacher = item
    }

    const onSubmit = () => {
      console.log('submit')
      let isSelectAll = false // 是否有没有选择交接伴学老师的数据
      const courseInfo = [] as any
      state.classList.forEach((item: any) => {
        if (!item.sTeacher || (item.sTeacher && !item.sTeacher.id)) {
          isSelectAll = true
        }

        if (item.sTeacher) {
          courseInfo.push({
            courseType: item.courseType,
            teacherId: item.sTeacher.id
          })
        }
      })

      if (isSelectAll) {
        showToast('请选择交接伴学老师')
        return
      }

      try {
        state.dialogStatus = true

        // showDialog({
        //   title: '提示',
        //   message: '是否确认交接',
        //   showCancelButton: true
        // }).then(async () => {
        //   const { data } = await request.post('/api-school/classGroup/handoverTeacher', {
        //     data: {
        //       teacherId: route.query.id,
        //       courseUpdateList: [...courseInfo]
        //     }
        //   })
        //   if (data.finish === true) {
        //     router.replace('/companion-teacher')
        //   } else {
        //     router.push({
        //       path: '/course-preview',
        //       query: {
        //         cacheId: data.cacheId,
        //         type: 'unbind'
        //       }
        //     })
        //   }
        // })
      } catch {
        //
      }
    }
    const onConfirm = async () => {
      try {
        const courseInfo = [] as any
        state.classList.forEach((item: any) => {
          if (item.sTeacher) {
            courseInfo.push({
              courseType: item.courseType,
              teacherId: item.sTeacher.id
            })
          }
        })
        const res = await request.post('/api-school/classGroup/handoverTeacher', {
          hideLoading: false,
          data: {
            teacherId: route.query.id,
            courseUpdateList: [...courseInfo]
          }
        })
        if (res.code === 999) {
          state.dialogStatus1 = true
          state.dialogMessage1 = res.message
        } else {
          if (res.data.finish === true) {
            router.replace('/companion-teacher')
          } else {
            router.push({
              path: '/course-preview',
              query: {
                cacheId: res.data.cacheId,
                type: 'unbind'
              }
            })
          }
        }
      } catch {
        //
      }
    }

    onMounted(() => {
      getClassDetail()
    })
    return () => (
      <>
        <OHeader />

        <div class={styles.unbindTips}>该伴学老师存在班级或未开始课程，请选择交接人</div>

        {/* <CellGroup inset class={styles.detailCellGroup}> */}
        {state.classList.map((item: any) => (
          // <Cell
          //   center
          //   class={styles.detailCell}
          //   isLink
          //   onClick={() => onSelectTeacher(item)}
          //   valueClass={styles.valueClass}
          // >
          //   {{
          //     title: () => (
          //       <div class={styles.teacherContent}>
          //         <div class={styles.classInfo}>
          //           <p class={styles.className}>{item.name}</p>
          //           <p class={[styles.musicName, 'van-ellipsis']}>{item.orchestraName}</p>
          //         </div>
          //         <div class={styles.classNum}>
          //           <p class={styles.nums}>
          //             {item.courseScheduleNum - item.completeCourseScheduleNum}
          //           </p>
          //           <p class={styles.numTip}>剩余课时</p>
          //         </div>
          //       </div>
          //     ),
          //     value: () => (
          //       <div class={[styles.teacherName, 'van-ellipsis']}>
          //         {item.sTeacher && item.sTeacher.nickname}
          //       </div>
          //     )
          //   }}
          // </Cell>
          <CellGroup inset class={styles.classCellGroup} border={false}>
            {/* <Cell center titleStyle={{ flex: '0 auto' }}></Cell> */}
            <Field
              isLink
              placeholder="请选择交接老师"
              inputAlign="right"
              readonly
              modelValue={item.sTeacher ? item.sTeacher.nickname : ''}
              onClick={() => onSelectTeacher(item)}
            >
              {{ label: () => <div class={styles.classTitle}>{courseEmnu[item.courseType]}</div> }}
            </Field>
            <Grid border={false} columnNum={2}>
              <GridItem>
                <p class={styles.title}>{item.classNum}</p>
                <p class={styles.name}>班级数量</p>
              </GridItem>
              <GridItem>
                <p class={[styles.title]}>{item.courseNum}</p>
                <p class={styles.name}>剩余课时</p>
              </GridItem>
            </Grid>
          </CellGroup>
        ))}

        <OSticky position="bottom">
          <div class={['btnGroup']} style={{ paddingLeft: '13px', paddingRight: '13px' }}>
            <Button type="primary" round block onClick={onSubmit}>
              确认交接
            </Button>
          </div>
        </OSticky>

        <OPopup v-model:modelValue={state.teacherStatus} destroy style={{ background: '#F8F8F8' }}>
          <Teacher
            courseType={state.selectTeacher.courseType}
            teacherId={state.teacherId as any}
            onClose={() => (state.teacherStatus = false)}
            onSelect={onSelectItem}
          />
        </OPopup>

        <ODialog
          title="提示"
          v-model:show={state.dialogStatus}
          message={'是否确认交接?'}
          confirmButtonText="确定"
          showCancelButton
          onConfirm={onConfirm}
        />

        <ODialog
          title="提示"
          v-model:show={state.dialogStatus1}
          message={state.dialogMessage1}
          confirmButtonText="确定"
          onConfirm={() => {
            router.back()
          }}
        />
      </>
    )
  }
})
