import ColHeader from '@/components/col-header'
import ColSearch from '@/components/col-search'
import { Button, Checkbox, CheckboxGroup, Icon, Popup, Sticky, Toast } from 'vant'
import {
  defineComponent,
  onMounted,
  PropType,
  reactive,
  ref,
  toRef,
  toRefs,
  watch
} from 'vue'
import styles from './index.module.less'
import Student from '../../components/student'
import request from '@/helpers/request'
import OrganSearch from '@/student/practice-class/model/organ-search'
import cleanDeep from 'clean-deep'
import Voice from '../../model/voice'

export type IStudent = {
  avatar: string
  phone: number
  realName: string
  subjectName: string
  userId: string
  userName: string
  checked: boolean
}

export default defineComponent({
  name: 'SelectStudents',
  props: {
    subjectList: {
      type: Array,
      default: []
    },
    onSetStudents: {
      type: Function,
      default: (n: any) => {}
    }
  },
  setup(props, { expose }) {
    const show = ref(false)
    const subjectName = ref('全部声部')

    const params = reactive({
      courseId: undefined, //课程id
      subjectId: undefined, // 声部ID
      userName: undefined as any // 学员姓名
    })
    const list = ref<IStudent[]>([])
    const getList = async () => {
      try {
        const { code, data } = await request.post(
          '/api-teacher/courseSchedule/selectStudent',
          {
            data: {
              ...params
            }
          }
        )
        if (code === 200) {
          data.rows.forEach((n: IStudent) => (n.checked = false))
          list.value = data.rows
        }
      } catch (error) {}
    }
    onMounted(() => {
      getList()
    })
    const onSearch = (val: string) => {
      params.userName = val || ''
      getList()
    }
    const toggle = (n: IStudent) => {
      let selectList = list.value.filter(n => n.checked)
      if (selectList.length === 7 && !n.checked) {
        Toast('最多选择7个学员')
        return 
      }
      n.checked = !n.checked
    }
    const onDelete = (n: IStudent) => {
      list.value.forEach((item: IStudent) => {
        if (item.userId === n.userId) item.checked = false
      })
    }
    expose({
      onDelete
    })
    return () => (
      <div class={styles.container}>
        <Sticky offsetTop={0}>
          <ColHeader title="选择学员" />
          <ColSearch
            placeholder="请输入学员名称"
            onSearch={onSearch}
            v-slots={{
              left: () => (
                <div
                  class={styles.label}
                  onClick={() => {
                    show.value = true
                  }}
                >
                  {subjectName.value}
                  <Icon
                    classPrefix="iconfont"
                    name="down"
                    size={12}
                    color="#333"
                  />
                </div>
              )
            }}
          />
        </Sticky>
        {list.value.map(n => (
          <div
            onClick={() => {
              toggle(n)
            }}
          >
            <Student item={n}>
              <div class={styles.check}>
                <Checkbox modelValue={n.checked} name={n.userId}></Checkbox>
              </div>
            </Student>
          </div>
        ))}
        <div class={styles.btnGroup}>
          <Button
            block
            round
            class={styles.confirmBtn}
            type="primary"
            onClick={() => {
              let stus = cleanDeep(list.value.filter(n => n.checked))
              // console.log(stus)
              props.onSetStudents && props.onSetStudents(stus)
            }}
          >
            确认
          </Button>
        </div>
        <Popup
          v-model:show={show.value}
          position="bottom"
          round
          closeable
          safe-area-inset-bottom
        >
          <Voice
            class={styles.voicePopupContent}
            single
            selectType={'Radio'}
            subjectList={props.subjectList}
            onChoice={val => {
              const voice: any = props.subjectList.filter(
                (n: any) => n.id === val
              )[0] || { name: '全部声部' }
              params.subjectId = voice.id
              subjectName.value = voice.name
              show.value = false
              getList()
            }}
          />
        </Popup>
      </div>
    )
  }
})
