import { defineComponent } from 'vue'
import styles from './all-search.module.less'
import { RadioGroup, Radio, Tag, Button, Sticky } from 'vant'
import { join } from 'path'

export default defineComponent({
  name: 'organ-search',
  props: {
    isReset: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: [Number, String],
      default: 0
    },
    subjectName: {
      type: String,
      default: ''
    },
    subjectList: {
      type: Array,
      default: () => []
    },
    onSort: {
      type: Function,
      default: (item: any) => {}
    }
  },
  data() {
    return {
      subjectId: 0,
      subName: ''
    }
  },
  mounted() {
    this.subjectId = Number(this.modelValue)
    this.subName = this.subjectName
  },
  render() {
    return (
      <>
        <div class={styles.filterTitle}>全部声部</div>
        <div
          class={styles.searchResult}
          style={{ maxHeight: '45vh', overflowY: 'auto' }}
        >
          {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.subjectId)
                      const type = isActive ? 'primary' : 'default'
                      return (
                        <Tag
                          size="large"
                          plain={isActive}
                          type={type}
                          round
                          onClick={() => {
                            console.log(subject)
                            this.subjectId = subject.id
                            this.subName = subject.name
                          }}
                        >
                          {subject.name}
                        </Tag>
                      )
                    })}
                  </div>
                </>
              )
          )}
        </div>
        <Sticky position="bottom" offsetBottom={0}>
          <div class={['btnGroup', this.isReset ? 'btnMore' : '']}>
            {this.isReset && (
              <Button
                type="primary"
                plain
                round
                onClick={() => {
                  this.$emit('update:modelValue', null)
                  this.$emit('update:subjectName', '全部声部')
                  this.onSort()
                }}
              >
                重置
              </Button>
            )}

            <Button
              type="primary"
              round
              block
              onClick={() => {
                this.$emit('update:modelValue', this.subjectId)
                this.$emit('update:subjectName', this.subName)
                this.onSort()
              }}
            >
              确认
            </Button>
          </div>
        </Sticky>
      </>
    )
  }
})
