import OSticky from '@/components/o-sticky'
import { useRect } from '@vant/use'
import { Button, Sticky, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
import ClassList from './component/class-list'
import ManageList from './component/manage-list'
import StudentList from './component/student-list'
import TeacherList from './component/teacher-list/teacher-list'
import styles from './index.module.less'

export default defineComponent({
  name: 'select-send',
  props: {
    selectList: {
      type: Object,
      default: {}
    },
    selectStatus: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close', 'confirm', 'update:selectList'],
  setup(props, { emit, expose }) {
    const state = reactive({
      height: 'auto' as any,
      tabValue: 'class',
      selectClass: [] as any,
      selectStudent: [] as any,
      selectTeacher: [] as any,
      selectManage: [] as any
    })

    const onSubmit = async () => {
      const params = {
        class: state.selectClass,
        student: state.selectStudent,
        teacher: state.selectTeacher,
        school: state.selectManage
      }
      emit('close')
      emit('update:selectList', params)
      emit('confirm', params)
    }

    watch(
      () => props.selectList,
      () => {
        console.log('watch', props.selectList)
        resetSelectItems()
      },
      { deep: true }
    )

    const resetSelectItems = () => {
      const list = props.selectList || {}
      state.selectClass = list.class || []
      state.selectTeacher = list.teacher || []
      state.selectManage = list.manage || []
      state.selectStudent = list.student || []
    }

    onMounted(() => {
      const { height } = useRect(document.querySelector('.van-tab') as HTMLElement)
      state.height = height

      resetSelectItems()
      console.log(state, 'select')
    })

    return () => (
      <div class={styles.orchestraDetail} style={{ background: '#f6f6f6', minHeight: '100vh' }}>
        <Tabs sticky lineWidth={20} lineHeight={4} v-model:active={state.tabValue}>
          <Tab title="班级" name="class">
            <ClassList height={state.height} v-model:selectItem={state.selectClass} />
          </Tab>
          <Tab title="学员" name="student">
            <StudentList height={state.height} v-model:selectItem={state.selectStudent} />
          </Tab>
          <Tab title="伴学老师" name="teacher">
            <TeacherList height={state.height} v-model:selectItem={state.selectTeacher} />
          </Tab>
          <Tab title="管理老师" name="manage">
            <ManageList height={state.height} v-model:selectItem={state.selectManage} />
          </Tab>
        </Tabs>

        <OSticky position="bottom">
          <div class={'btnGroup'}>
            <Button round block type="primary" onClick={onSubmit}>
              确认
            </Button>
          </div>
        </OSticky>
      </div>
    )
  }
})