import { TransitionGroup, defineComponent, reactive, ref } from 'vue';
import styles from './index.module.less';
import MSearch from '@/components/m-search';
import icon_play from '@/common/images/icon_play.svg';
import { NoticeBar, showLoadingToast, showToast } from 'vant';
import icon_back from './image/icon_back.svg';
import icon_down from '@/common/images/icon_down.svg';
import icon_jianpu from '@/common/images/icon_jianpu.svg';
import icon_jianpuActive from '@/common/images/icon_jianpuActive.svg';
import icons from '@/common/images/index.json';
import { postMessage, promisefiyPostMessage } from '@/helpers/native-message';
import { rows } from './data.json';
import html2canvas from 'html2canvas';
export default defineComponent({
  name: 'co-ai',
  setup() {
    const types = [
      { src: 'https://daya.ks3-cn-beijing.ksyuncs.com/16880147803671.png' },
      { src: 'https://daya.ks3-cn-beijing.ksyuncs.com/16880147833062.png' },
      { src: 'https://daya.ks3-cn-beijing.ksyuncs.com/16880147854153.png' },
      { src: 'https://daya.ks3-cn-beijing.ksyuncs.com/16880147881254.png' },
      { src: 'https://daya.ks3-cn-beijing.ksyuncs.com/16880147939485.png' }
    ];
    const titles = rows;
    const data = reactive({
      /** 教材Index */
      typeIndex: 0,
      /** 音乐Index */
      musicIndex: 0,
      /** 显示简谱 */
      isShowJianpu: false
    });
    const downRef = ref();
    // 返回
    const goback = () => {
      postMessage({ api: 'goBack' });
    };
    /** 去云教练 */
    const handleGoto = () => {
      let src = `https://dev.kt.colexiu.com/instrument?id=${
        titles[data.musicIndex]?.id
      }`;
      postMessage({
        api: 'openAccompanyWebView',
        content: {
          url: src,
          orientation: 0,
          isHideTitle: true,
          statusBarTextColor: false,
          isOpenLight: true
        }
      });
    };
    /** 保存图片 */
    const handleSave = async () => {
      showLoadingToast({ message: '正在保存', duration: 0 });
      try {
        html2canvas(downRef.value, {
          backgroundColor: '#fff',
          allowTaint: true,
          useCORS: true
        })
          .then(async canvas => {
            var dataURL = canvas.toDataURL('image/png', 1); //可选取多种模式
            setTimeout(() => {
              showToast('保存成功');
            }, 500);
            const res = await promisefiyPostMessage({
              api: 'savePicture',
              content: {
                base64: dataURL
              }
            });
          })
          .catch(() => {
            setTimeout(() => {
              showToast('保存失败');
            }, 500);
          });
      } catch (error) {
        setTimeout(() => {
          showToast('保存失败');
        }, 500);
      }
    };
    return () => (
      <div class={styles.container}>
        <div class={styles.back} onClick={goback}>
          <img src={icon_back} />
        </div>
        <div class={styles.content}>
          <div class={[styles.leftContent]}>
            <div class={styles.leftBg2}></div>
            <div class={styles.leftBg}></div>
            <div class={styles.types}>
              {types.map((item, index) => {
                return (
                  <div
                    class={[
                      styles.type,
                      data.typeIndex === index && styles.typeActive
                    ]}
                    onClick={() => (data.typeIndex = index)}>
                    <div class={styles.typeImg}>
                      <img class={styles.typeIcon} src={item.src} />
                    </div>
                  </div>
                );
              })}
            </div>
            <div class={styles.center}>
              <MSearch
                shape="round"
                background="transparent"
                placeholder="请输入曲目名称"
              />
              <div class={styles.musicContent}>
                {titles.map((item, index) => {
                  return (
                    <div
                      class={[
                        styles.musicItem,
                        data.musicIndex === index
                          ? styles.musicActive
                          : styles.disableNotic
                      ]}
                      onClick={() => (data.musicIndex = index)}>
                      <img class={styles.musicAvtor} src={item.titleImg} />
                      <div class={styles.musicInfo}>
                        <div class={styles.musicName}>
                          <NoticeBar
                            text={item.musicSheetName}
                            color="#333"
                            class={styles.noticeBar}
                            background="none"
                          />
                        </div>
                        <div class={styles.musicDes}>
                          <div class={styles.musicFavitor}>{item.updateBy}</div>
                          <div class={[styles.musicAuthor, 'van-ellipsis']}>
                            {item.composer}
                          </div>
                        </div>
                      </div>
                      {/* <img class={[styles.musicIcon]} src={icon_play} /> */}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
          <div class={[styles.opacityBg, styles.right]}>
            <div ref={downRef}>
              <div class={styles['right-musicName']}>
                {titles[data.musicIndex].musicSheetName}
              </div>
              {data.isShowJianpu ? (
                <>
                  <TransitionGroup name="van-fade">
                    {titles[data.musicIndex]?.firstTone
                      ?.split(',')
                      .map((item, index) => {
                        return (
                          <img
                            class={styles.staff}
                            src={item + '?v=' + Date.now()}
                            key={item}
                          />
                        );
                      })}
                  </TransitionGroup>
                </>
              ) : (
                <>
                  <TransitionGroup name="van-fade">
                    {titles[data.musicIndex]?.musicImg
                      ?.split(',')
                      .map((item, index) => {
                        return (
                          <img
                            class={styles.staff}
                            src={item + '?v=' + Date.now()}
                            key={item}
                            crossorigin="anonymous"
                          />
                        );
                      })}
                  </TransitionGroup>
                </>
              )}
            </div>

            <div class={styles.rightBtns}>
              <img
                src={data.isShowJianpu ? icon_jianpuActive : icon_jianpu}
                onClick={() => (data.isShowJianpu = !data.isShowJianpu)}
              />
              <img src={icon_down} onClick={handleSave} />
              <img src={icons.icon_start} onClick={() => handleGoto()} />
            </div>
          </div>
        </div>
      </div>
    );
  }
});
