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

export default defineComponent({
  name: 'approval-manage-subsidy',
  setup() {
    return () => (
      <div>
        <div class={styles.item}>
          <Cell center isLink>
            {{
              title: () => (
                <div class={styles.itemTitle}>
                  <span>2023-1-16 至 2023-1-2</span>
                  <span class={styles.itemTag}>补助周期</span>
                </div>
              )
            }}
          </Cell>
          <Grid class={styles.grid} columnNum={3} border={false}>
            <GridItem>
              <div class={styles.gridItem}>
                <div class={styles.gridItemTop}>
                  <span class={styles.topNum}>240</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>
            <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.item}>
          <Cell
            style={{ '--van-cell-value-color': '#F44541' }}
            center
            value="训练照片2/6"
            isLink
            to={'/subsidy-grant-detail'}
          >
            {{
              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}>240</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>
            <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.item}>
          <Cell center isLink to={'/subsidy-reward-detail'}>
            {{
              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.item}>
          <Cell center isLink to={'/subsidy-exercise-detail'}>
            {{
              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}>240</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>
            <GridItem>
              <div class={styles.gridItem}>
                <div class={styles.gridItemTop}>
                  <span class={styles.topNum}>240</span>元
                </div>
                <div>合奏补助标准</div>
              </div>
            </GridItem>
          </Grid>
          {[1, 2, 3].map((teacher: any) => {
            return (
              <Cell center title="邓老师" isLink>
                {{
                  icon: () => <img class={styles.itemPicture} src={iconA} />,
                  value: () => (
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>240</span>元
                      </div>
                      <div class={styles.valeLabel}>实际奖励</div>
                    </div>
                  )
                }}
              </Cell>
            )
          })}
        </div>
      </div>
    )
  }
})