import { ActionSheet, ActionSheetAction, Cell, Grid, GridItem } from 'vant'
import { computed, defineComponent, ref } from 'vue'
import styles from '../index.module.less'
import iconA from '../images/icon-photo.png'
import iconArrow from '../images/icon-arrow.png'

export default defineComponent({
  name: 'subsidy-reward-detail',
  setup() {
    const actions = computed(() => {
      return [
        {
          name: '全部声部',
          color: activeName.value == '全部声部' ? 'var(--van-primary-color)' : ''
        },
        { name: '待审批', color: activeName.value == '待审批' ? 'var(--van-primary-color)' : '' },
        { name: '已完成', color: activeName.value == '已完成' ? 'var(--van-primary-color)' : '' }
      ]
    })
    const activeName = ref('全部声部')
    const show = ref(false)
    return () => (
      <div>
        <div class={styles.item}>
          <Cell center>
            {{
              title: () => (
                <div class={styles.itemTitle}>
                  <div class={styles.titleLine}></div>
                  <span>练习奖励</span>
                </div>
              )
            }}
          </Cell>
          <Grid class={styles.grid} columnNum={3} border={false}>
            <GridItem>
              <div class={styles.gridItem}>
                <div class={styles.gridItemTop}>
                  <span class={styles.topNum}>5</span>元/人
                </div>
                <div>补助标准</div>
              </div>
            </GridItem>
            <GridItem>
              <div class={styles.gridItem}>
                <div class={styles.gridItemTop}>
                  <span class={styles.topNum}>78</span>人
                </div>
                <div>练习达标人数</div>
              </div>
            </GridItem>
            <GridItem>
              <div class={styles.gridItem}>
                <div class={styles.gridItemTop}>
                  <span class={styles.topNum}>240</span>元
                </div>
                <div>实际奖励</div>
              </div>
            </GridItem>
          </Grid>
        </div>

        <div class={styles.itemSelect}>
          <div class={styles.select} onClick={() => (show.value = true)}>
            <span>{activeName.value}</span>
            <img src={iconArrow} />
          </div>
        </div>

        <div class={styles.item}>
          {[1, 2, 3].map((item: any) => {
            return (
              <Cell center class={styles.rewardItem}>
                {{
                  icon: <img class={styles.itemPicture} src={iconA} />,
                  title: () => (
                    <div class={styles.itemTitle}>
                      <span>邓同学</span>
                    </div>
                  ),
                  label: () => <span class={styles.itemTag}>长笛</span>,
                  value: () => (
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>40</span>分钟
                      </div>
                      <div class={styles.valeLabel}>练习时长</div>
                    </div>
                  )
                }}
              </Cell>
            )
          })}
        </div>
        <ActionSheet
          teleport="body"
          cancelText="取消"
          v-model:show={show.value}
          actions={actions.value}
          onSelect={(action: ActionSheetAction, index: number) => {
            activeName.value = action.name || '待审批'
            show.value = false
          }}
        ></ActionSheet>
      </div>
    )
  }
})