import { Search } from '@element-plus/icons-vue'
import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElIcon
} from 'element-plus'
import { state as baseSate } from '@/state'

// import white from './while.module.less'
import classes from './index.module.less'
import request from '@/helpers/request'
import searchIcon from './images/searchIcon.png'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
export default defineComponent({
  name: 'searchInput',
  props: {
    title: {
      type: String,
      default: ''
    },
    isWhile: {
      type: Boolean,
      default: true
    },
    searchVal: {
      type: Object,
      default: {}
    },
    showSearch: {
      type: Boolean,
      default: false
    },
    holder: {
      type: String,
      default: '搜一搜你想练习的曲目'
    },
    type: {
      type: String,
      default: 'search'
    }
  },
  emits: ['startSearch'],
  setup(props, conent) {
    const state = reactive({
      title: props.title,
      search: props.searchVal.search,
      subject: null as null | number | string,
      subjectList: [],
      holder: props.holder
    })
    watch(
      () => props.searchVal,
      searchVal => {
        // console.log(searchVal,'searchVal')
        state.search = searchVal.search ? searchVal.search : ''
        state.subject = Number(
          props.searchVal.subject || props.searchVal.lessonSubject
        )
          ? Number(props.searchVal.subject || props.searchVal.lessonSubject)
          : ''
      },
      {
        deep: true
      }
    )
    const getSubjectList = async () => {
      console.log('调用')
      try {
        const res = await request.get(
          '/api-website/open/subject/subjectSelect',
          { params: { type: 'MUSIC' } }
        )
        const result = res.data || []
        const tempSubject: any = []
        result.forEach((item: any) => {
          if (item.subjects && item.subjects.length > 0) {
            item.subjects.forEach((subject: any) => {
              tempSubject.push(subject)
            })
          }
        })
        const subjects: any = useSubjectId(
          SubjectEnum[props.type === 'search' ? 'SEARCH' : 'VIDEO']
        )
        console.log(subjects, 'subjects found')
        state.subjectList = tempSubject
        const subjectIds = baseSate.user.data?.subjectId || ''
        // 判断是否已有数据
        if (subjects.id) {
          state.subject = Number(subjects.id)
        } else {
          if (subjectIds) {
            const subjectId = Number(subjectIds.split(',')[0])
            state.subject = subjectId

            tempSubject.forEach((subject: any) => {
              if (subject.id == subjectId) {
                // 设置默认查询声部
                useSubjectId(
                  SubjectEnum[props.type === 'search' ? 'SEARCH' : 'VIDEO'],
                  JSON.stringify({
                    id: subjectId,
                    name: subject.name
                  }),
                  'set'
                )
              }
            })
          }
        }
      } catch (e) {
        console.log(e)
      }
    }

    const startSearch = () => {
      conent.emit('startSearch', {
        search: state.search,
        subject: state.subject
      })
      const subjects = {
        id: state.subject,
        name: ''
      }
      state.subjectList.forEach((subject: any) => {
        if (subject.id == subjects.id) {
          subjects.name = subject.name
        }
      })

      // 设置声部
      useSubjectId(
        SubjectEnum[props.type === 'search' ? 'SEARCH' : 'VIDEO'],
        JSON.stringify(subjects),
        'set'
      )
    }
    onMounted(() => {
      getSubjectList()
      console.log(props.showSearch, 'showSearch')
    })
    // let classStyle = classes

    return () => (
      <>
        {/* props.isWhile ? classStyle.While : '' */}
        <div class={[classes.wrap, props.showSearch ? classes.active : '']}>
          <div class={classes.selectWrap} id="selectWrap">
            <ElSelect
              // clearable
              v-model={state.subject}
              placeholder="请选择声部"
              style="width: 175px"
              class={['subSelect', state.subject ? 'hasVal' : '']}
              v-slots={{
                suffix: () => <div class={classes.san}></div>
              }}
            >
              {state.subjectList.map((item: any) => (
                <ElOption label={item.name} value={item.id} />
              ))}
            </ElSelect>
            <div class={classes.line}></div>
          </div>
          <div class={classes.searchWrap}>
            <img src={searchIcon} alt="" />
          </div>
          <ElInput
            v-model={state.search}
            placeholder={state.holder}
            clearable
            class={classes.inputSelect}
            // onKeyup={e => {
            //   if (e.keyCode === 13) {
            //     startSearch()
            //   }
            // }}
          ></ElInput>
          <div class={classes.searchline}></div>
          <div class={classes.searchBtn} onClick={startSearch}>
            搜索
          </div>
        </div>
      </>
    )
  }
})
