import { defineComponent } from 'vue'
import styles from './select-subject.module.less'
import { Tag, Button, Sticky } from 'vant'
import { state } from '@/state'
import request from '@/helpers/request'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'

export default defineComponent({
  name: 'selectSubject',
  props: {
    isReset: {
      type: Boolean,
      default: false
    },
    searchParams: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {
        name: '',
        id: ''
      }
    },
    // 是否显示全部声部
    isShowAllSubject: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'MUSIC'
    },
    onComfirm: {
      type: Function,
      default: (item: any) => {}
    }
  },
  data() {
    return {
      subject: {
        name: '全部声部',
        id: ''
      },
      subjectList: [] as any,
      apiSuffix:
        state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
    }
  },
  mounted() {
    this.subject = {
      name: this.searchParams.id ? this.searchParams.name : '全部声部',
      id: this.searchParams.id || ''
    }
    this.getList()
  },
  methods: {
    async getList() {
      const { data } = await request.get(
        `${this.apiSuffix}/subject/subjectSelect?type=${this.type}`
      )
      if (Array.isArray(data)) {
        this.subjectList = data
      }
    }
  },
  render() {
    return (
      <>
        {/* <div class={styles.filterTitle}>全部声部</div> */}
        <div
          class={styles.searchResult}
          style={{ maxHeight: '45vh', overflowY: 'auto' }}
        >
          {this.isShowAllSubject && (
            <div
              class={[
                styles['radio-group'],
                styles.radio,
                styles['organ-radio']
              ]}
            >
              <Tag
                size="large"
                plain={'' == this.subject.id}
                type={'' == this.subject.id ? 'primary' : 'default'}
                round
                onClick={() => {
                  this.subject = { id: '', name: '全部声部' } as any
                }}
              >
                全部声部
              </Tag>
            </div>
          )}

          {this.subjectList.map(
            (item: any) =>
              item.subjects &&
              item.subjects.length > 0 && (
                <>
                  <div class={styles.searchTitle}>{item.name}</div>
                  <div
                    class={[
                      styles['radio-group'],
                      styles.radio,
                      styles['organ-radio']
                    ]}
                  >
                    {item.subjects.map((subject: any) => {
                      const isActive = subject.id === Number(this.subject.id)
                      const type = isActive ? 'primary' : 'default'
                      return (
                        <Tag
                          size="large"
                          plain={isActive}
                          type={type}
                          round
                          onClick={() => {
                            this.subject = { ...subject }
                          }}
                        >
                          {subject.name}
                        </Tag>
                      )
                    })}
                  </div>
                </>
              )
          )}
        </div>
        <Sticky position="bottom" offsetBottom={0}>
          <div class={[styles.btnGroup, this.isReset ? 'btnMore' : '']}>
            {this.isReset && (
              <Button
                // type="primary"
                plain
                round
                onClick={() => {
                  this.subject.name = '全部声部'
                  this.subject.id = ''
                  this.onComfirm({ ...this.subject })
                }}
              >
                重 置
              </Button>
            )}

            <Button
              type="primary"
              round
              block
              onClick={() => {
                this.onComfirm({ ...this.subject })
              }}
            >
              确 认
            </Button>
          </div>
        </Sticky>
      </>
    )
  }
})
