import { defineComponent } from 'vue'
import { practiceNumType, classPriceType, scoreType } from '../practice'
import styles from './all-search.module.less'
import { RadioGroup, Radio, Tag, Button } from 'vant'

export default defineComponent({
  name: 'allSearch',
  props: {
    onSort: {
      type: Function,
      default: (item: any) => {}
    }
  },
  data() {
    return {
      popupParams: {
        starGrade: 'ALL',
        expTime: 'ALL',
        subjectPrice: 'ALL'
      }
    }
  },
  render() {
    return (
      <>
        <div class={styles.filterTitle}>全部筛选</div>
        <div class={styles.searchResult}>
          <div class={styles.searchTitle}>陪练课数</div>
          <RadioGroup
            class={styles['radio-group']}
            modelValue={this.popupParams.expTime}
            onUpdate:modelValue={val => (this.popupParams.expTime = val)}
          >
            {Object.keys(practiceNumType).map((item: string) => {
              const isActive = item === this.popupParams.expTime
              const type = isActive ? 'primary' : 'default'
              return (
                <Radio class={styles.radio} name={item}>
                  <Tag size="large" plain={isActive} type={type} round>
                    {practiceNumType[item]}
                  </Tag>
                </Radio>
              )
            })}
          </RadioGroup>

          <div class={styles.searchTitle}>课时单价</div>
          <RadioGroup
            class={styles['radio-group']}
            modelValue={this.popupParams.subjectPrice}
            onUpdate:modelValue={val => (this.popupParams.subjectPrice = val)}
          >
            {Object.keys(classPriceType).map((item: string) => {
              const isActive = item === this.popupParams.subjectPrice
              const type = isActive ? 'primary' : 'default'
              return (
                <Radio class={styles.radio} name={item}>
                  <Tag size="large" plain={isActive} type={type} round>
                    {classPriceType[item]}
                  </Tag>
                </Radio>
              )
            })}
          </RadioGroup>

          <div class={styles.searchTitle}>评分</div>
          <RadioGroup
            class={styles['radio-group']}
            modelValue={this.popupParams.starGrade}
            onUpdate:modelValue={val => (this.popupParams.starGrade = val)}
          >
            {Object.keys(scoreType).map((item: string) => {
              const isActive = item === this.popupParams.starGrade
              const type = isActive ? 'primary' : 'default'
              return (
                <Radio class={styles.radio} name={item}>
                  <Tag size="large" plain={isActive} type={type} round>
                    {scoreType[item]}
                  </Tag>
                </Radio>
              )
            })}
          </RadioGroup>
        </div>
        <div class="btnGroup btnMore">
          <Button
            type="primary"
            plain
            round
            onClick={() => {
              this.popupParams = {
                starGrade: 'ALL',
                expTime: 'ALL',
                subjectPrice: 'ALL'
              }
              this.onSort(this.popupParams)
            }}
          >
            重置
          </Button>
          <Button
            type="primary"
            round
            onClick={() => {
              this.onSort(this.popupParams)
            }}
          >
            确认
          </Button>
        </div>
      </>
    )
  }
})
