import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import toolsNumber from './images/tool-number.png';
import points from './images/points.png';
import iconVideo from './images/icon-video.png';
import toolsDetail from './images/1.png';
import tool2 from './images/2.png';
import { Popup } from 'vant';
import MVideo from '@/components/m-video';

export default defineComponent({
  name: 'digital-tools',
  setup() {
    const forms = reactive({
      popupShow: false
    });
    return () => (
      <div class={styles.digitalTools}>
        <div class={styles.toolsSection}>
          <h2>
            <img src={toolsNumber} class={styles.toolsNumber} />
            <img src={points} class={styles.points} />
          </h2>

          <div
            class={styles.videoContainer}
            onClick={() => (forms.popupShow = true)}>
            <img
              class={styles.videoBg}
              src={
                'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga968a076c918dd72face52be994721791980efe910664de989df26a14701e3cf'
              }
            />
            <img src={iconVideo} class={styles.iconVideo} />
          </div>

          <img src={toolsDetail} class={styles.toolsDetail} />
        </div>

        <img src={tool2} class={styles.tool2} />

        <Popup v-model:show={forms.popupShow} class={styles.videoPopup}>
          {forms.popupShow && (
            <MVideo
              src={'https://daya.ks3-cn-beijing.ksyun.com/202105/SWmqmvW.mp4'}
            />
          )}
        </Popup>
      </div>
    );
  }
});
