import { defineComponent, reactive, ref } from 'vue'
import styles from './detail-item.module.less'
import defaultIcon from '@/school/images/default-icon.jpg'
import msgIcon from '@/school/images/msg-icon.png'
import sendmsgIcon from '@/school/images/sendmsg-icon.png'
import phoneIcon from '@/school/images/phone-icon.png'
import { Icon, ActionSheet } from 'vant'
export default defineComponent({
  props: ['item'],
  name: 'detail-item',
  setup(props) {
    return () => (
      <>
        <div>
          <div class={styles.itemWrap}>
            <div class={styles.itemTop}>
              <div class={styles.itemTopLeft}>
                <p class={styles.itemTopMain}>{props.item.musicSheetName}</p>
                <p class={styles.itemTopSub}>{props.item.createTime}</p>
              </div>
              <div class={styles.itemTopRight}>
                <div class={styles.imgWrap}>
                  <img src="" alt="" />
                </div>
                <Icon name="arrow" class={styles.imgIcon} />
              </div>
            </div>
            <div class={styles.itemBottom}>
              <div class={styles.itemBottomDot}>
                <p class={styles.dotMain} style={{ color: '#F67146' }}>
                  {props.item.score} <span>分</span>{' '}
                </p>
                <p class={styles.dotSub}> 综合得分</p>
              </div>
              <div class={styles.itemBottomDot}>
                <p class={styles.dotMain}>
                  {props.item.intonation}
                  <span>分</span>{' '}
                </p>
                <p class={styles.dotSub}>音准 </p>
              </div>
              <div class={styles.itemBottomDot}>
                <p class={styles.dotMain}>
                  {props.item.cadence} <span>分</span>{' '}
                </p>
                <p class={styles.dotSub}>节奏 </p>
              </div>
              <div class={styles.itemBottomDot}>
                <p class={styles.dotMain}>
                  {props.item.integrity} <span>分</span>{' '}
                </p>
                <p class={styles.dotSub}>完成度 </p>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
})