import { defineComponent, reactive, watch } from 'vue'
import styles from './index.module.less'
import { Button } from 'vant'

export default defineComponent({
  name: 'searchGroup',
  props: {
    searchList: {
      type: Object,
      default: () => ({ albumLevelList: [], albumTypeList: [] })
    },
    searchObj: {
      type: Object,
      default: () => ({ albumCategoryLevelId: null, albumCategoryTypeId: null })
    }
  },
  emits: ['confirm'],
  setup(props, { emit }) {
    const searchList = reactive({
      albumCategoryLevelId: props.searchObj.albumCategoryLevelId,
      albumCategoryTypeId: props.searchObj.albumCategoryTypeId
    })

    watch(
      () => props.searchObj,
      () => {
        ;(searchList.albumCategoryLevelId =
          props.searchObj.albumCategoryLevelId),
          (searchList.albumCategoryTypeId = props.searchObj.albumCategoryTypeId)
      }
    )

    /** 重置 */
    const onReset = () => {
      searchList.albumCategoryLevelId = null
      searchList.albumCategoryTypeId = null
    }
    /** 确认 */
    const onSubmit = () => {
      emit('confirm', searchList)
    }
    return () => (
      <div class={styles.popupContainer}>
        <div class={styles.popupSearchList}>
          {props.searchList.albumLevelList.length > 0 ? (
            <div class={styles.popupSection}>
              <div class={styles.title}>
                <span>级别</span>
              </div>

              <div class={[styles.timeCount, styles.timeSubject]}>
                {props.searchList.albumLevelList.map((item: any) => (
                  <p
                    class={
                      searchList.albumCategoryLevelId === item.id &&
                      styles.active
                    }
                    onClick={() => {
                      searchList.albumCategoryLevelId = item.id
                    }}
                  >
                    {item.name}
                  </p>
                ))}
              </div>
            </div>
          ) : (
            ''
          )}

          {props.searchList.albumTypeList.length > 0 ? (
            <div class={styles.popupSection}>
              <div class={styles.title}>
                <span>类型</span>
              </div>

              <div class={[styles.timeCount, styles.timeSubject]}>
                {props.searchList.albumTypeList.map((item: any) => (
                  <p
                    class={
                      searchList.albumCategoryTypeId === item.id &&
                      styles.active
                    }
                    onClick={() => {
                      searchList.albumCategoryTypeId = item.id
                    }}
                  >
                    {item.name}
                  </p>
                ))}
              </div>
            </div>
          ) : (
            ''
          )}
        </div>

        <div class={styles.popupBottom}>
          <Button round block type="default" onClick={onReset}>
            重置
          </Button>
          <Button round block type="primary" onClick={onSubmit}>
            确认
          </Button>
        </div>
      </div>
    )
  }
})
