import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import { CellGroup, Sticky } from 'vant'
import iconMoney from '../../images/icon-money.png'
import ColResult from '@/components/col-result'
import Echats from '../echats'
import TeacherItem from '../teacher-item'
import BuyItem from '../buy-item'

export default defineComponent({
  name: 'list',
  props: {
    type: {
      type: String as PropType<
        'vip' | 'practice' | 'group' | 'live' | 'video' | 'music'
      >,
      default: 'vip'
    }
  },
  setup(props) {
    return () => (
      <div class={styles.list}>
        <Echats />

        <div class={styles.expectedIncome}>
          {/* <Sticky> */}
            <div class={styles.incomeTitle}>
              <div class={styles.title}>
                <img src={iconMoney} />
                <span>预计总收入</span>
              </div>

              <div class={styles.price}>
                <span>¥ </span>
                4260.00
              </div>
            </div>
          {/* </Sticky> */}
          <div class={styles.incomeTip}>实际收入将在课程结束2天后结算</div>

          <div class={styles.element}></div>
          <CellGroup border={false}>
            {['vip', 'practice'].includes(props.type) && <TeacherItem list={[1,2,3,4,5,6,7,7,8,]} />}
            {['group', 'live', 'video', 'music'].includes(props.type) && (
              <BuyItem list={[1,2,3,4,5,6,7,7,8,]} isSquare={props.type === "music"} />
            )}
          </CellGroup>
          {/* <ColResult type="empty" btnStatus={false} classImgSize="SMALL" tips='暂无数据~' /> */}
        </div>
      </div>
    )
  }
})