import { Cell, Icon, Image } from 'vant'
import { defineComponent, reactive } from 'vue'
import styles from './plan.module.less'

export default defineComponent({
  name: 'plan',
  setup() {
    const state = reactive({
      showPopover: false,
      oPopover: false
    })
    return () => (
      <div style={{ paddingTop: '12px' }}>
        {/* <div style={{ padding: '12px 13px 16px', background: '#F8F8F8' }}>
          <div class={styles.searchBand}>
            2022年 <Icon name={state.showPopover ? 'arrow-up' : 'arrow-down'} />
          </div>
          <div class={styles.searchBand} style="margin-left: 16px">
            上学期 <Icon name={state.oPopover ? 'arrow-up' : 'arrow-down'} />
          </div>
        </div> */}
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((item: any) => (
          <div class={[styles.gridContainer, styles.gridClass]}>
            <div class={styles.className}>
              <i class={styles.line}></i>
              长笛班
            </div>
            <Cell center>
              {{
                icon: () => (
                  <Image
                    class={styles.img}
                    src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1670231208704.png"
                  />
                ),
                title: () => (
                  <>
                    <p class={styles.class}>10/16</p>
                    <p class={styles.teacherDesc}>课时</p>
                  </>
                ),
                value: () => (
                  <>
                    <p class={styles.courseware}>长笛第一学期长笛-第5课</p>
                    <p class={styles.teacherDesc}>最新课件</p>
                  </>
                )
              }}
            </Cell>
          </div>
        ))}
      </div>
    )
  }
})