import { defineComponent } from 'vue';
import styles from './detail-item.module.less';
import { postMessage } from '@/helpers/native-message';
import { Icon } from 'vant';
import Image1 from '../images/Image1.png';
import Image2 from '../images/Image2.png';
import Image3 from '../images/Image3.png';
import Image4 from '../images/Image4.png';
import Image5 from '../images/Image5.png';

const scoreInfos: any = {
  1: {
    img: Image1,
    tips: '你的演奏不太好，音准和完整性还需加强，再练一练吧～',
    mome: '敢于尝试'
  },
  2: {
    img: Image2,
    tips: '你的演奏还不熟练，音准和完整性还需加强，加紧训练才能有好成绩哦～',
    mome: '还要加油哦～'
  },
  3: {
    img: Image3,
    tips: '你的演奏还不流畅，音准和节奏还需加强，科学的练习才能更完美哦～',
    mome: '突破自我'
  },
  4: {
    img: Image4,
    tips: '你的演奏还不错，继续加油吧，加强音准，离完美就差一步啦～',
    mome: '崭露头角'
  },
  5: {
    img: Image5,
    tips: '你的演奏非常不错，音准的把握和节奏稍有瑕疵，完整性把握的很好~',
    mome: '你很棒'
  }
};
export default defineComponent({
  props: ['item'],
  name: 'detail-item',

  setup(props) {
    const getLeveByScoreId = (score?: number) => {
      if (!score && typeof score !== 'number') {
        return {};
      }
      let leve: any = 1;
      if (score > 20 && score <= 40) {
        leve = 2;
      } else if (score > 40 && score <= 60) {
        leve = 3;
      } else if (score > 60 && score <= 80) {
        leve = 4;
      } else if (score > 80) {
        leve = 5;
      }
      return leve;
    };
    const gotoDetail = () => {
      const url =
        window.location.origin +
        `/instrument/#/evaluat-report?id=${props.item.id}`;
      // const url = `https://test.lexiaoya.cn/instrument/#/evaluat-report?id=${props.item.id}`;
      postMessage({
        api: 'openWebView',
        content: {
          url: url,
          orientation: 0,
          isHideTitle: true,
          statusBarTextColor: false,
          isOpenLight: true
        }
      });
    };
    return () => (
      <div class={styles.itemWrap} onClick={gotoDetail}>
        <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={scoreInfos[getLeveByScoreId(props.item.score || 0)].img}
                alt=""
              />
            </div>
            <Icon name="arrow" class={styles.imgIcon} />
          </div>
        </div>
        <div class={styles.itemBottom}>
          <div class={styles.itemBottomDot}>
            <p class={styles.dotMain} style={{ color: '#ff5a56' }}>
              {props.item.score || 0}
              <span>分</span>{' '}
            </p>
            <p class={styles.dotSub}> 综合得分</p>
          </div>
          <div class={styles.itemBottomDot}>
            <p class={styles.dotMain}>
              {props.item.intonation || 0}
              <span>分</span>{' '}
            </p>
            <p class={styles.dotSub}>音准 </p>
          </div>
          <div class={styles.itemBottomDot}>
            <p class={styles.dotMain}>
              {props.item.cadence || 0}
              <span>分</span>{' '}
            </p>
            <p class={styles.dotSub}>节奏 </p>
          </div>
          <div class={styles.itemBottomDot}>
            <p class={styles.dotMain}>
              {props.item.integrity || 0}
              <span>分</span>{' '}
            </p>
            <p class={styles.dotSub}>完成度 </p>
          </div>
        </div>
      </div>
    );
  }
});
