import MoveList from '@/features/trackSomething/components/MoveList';
import MoveOrderList from '@/features/trackSomething/components/MoveOrderList';
import { rpxToPx } from '@/utils/tools';
import { Canvas, View, Text, PageContainer, ScrollView } from '@tarojs/components';

import { MovableArea, MovableView } from "@tarojs/components";
import VirtualList from '@tarojs/components/virtual-list';
import React from 'react';
import { useEffect, useState } from 'react';
import './demo.scss'
import Taro from '@tarojs/taro';
import Slider from '@/components/input/Slider2';





export default function Demo() {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="4000" height="200">
  <text x="0" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="250" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="500" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="750" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="1000" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="1250" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="1500" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="1750" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="2000" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="2250" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="2500" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="2750" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
  <text x="3000" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
</svg>`

  const svg2 = `
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="50">
  <!-- 尺子底部线条 -->
  <line x1="10" y1="25" x2="390" y2="25" stroke="white" stroke-width="2" />

  <!-- 刻度线和数字 -->
  <g transform="translate(10, 0)">
    <!-- 刻度和数字 -->
    <g>
      <!-- 起点刻度 -->
      <line x1="0" y1="20" x2="0" y2="30" stroke="white" stroke-width="2" />
      <text x="0" y="45" text-anchor="middle" fill="white">0</text>

      <!-- 终点刻度 -->
      <line x1="380" y1="20" x2="380" y2="30" stroke="white" stroke-width="2" />
      <text x="380" y="45" text-anchor="middle" fill="white">100</text>
    </g>

    <!-- 10个刻度一个间隔的刻度和数字 -->
    <g>
      <!-- 刻度线和数字 -->
      <g transform="translate(10, 0)" ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9]">
        <line x1="0" y1="20" x2="0" y2="30" stroke="white" stroke-width="2" />
        <text x="0" y="45" text-anchor="middle" fill="white">{{ i * 10 }}</text>
      </g>
    </g>
  </g>
</svg>`

  function choose() {
    Taro.chooseImage({
      count: 1,
      sizeType: ['original'],
      sourceType: ['camera'],
      success: function (res) {

      }
    })
  }


  return (
    <View>
      <ScrollView scrollX>
        <View style={{ width: 400, height: 200 }}>
          <mysvg src={svg2} />
        </View>
      </ScrollView>
      <View style={{ display: 'flex', width: rpxToPx(750), alignItems: 'center', justifyContent: 'center' }}>
        <View style={{ display: 'flex', flexDirection: 'row' }}>
          <Slider />
          <View className='box11' onClick={choose} />
          <Slider />
        </View>

      </View>


    </View>

    // <VirtualList
    //   // layout="horizontal"
    //   height={800} /* 列表的高度 */
    //   width={375} /* 列表的宽度 */
    //   item={Row} /* 列表单项组件，这里只能传入一个组件 */
    //   itemData={buildData(0)} /* 渲染列表的数据 */
    //   itemCount={1000} /* 渲染列表的长度 */
    //   itemSize={100} /* 列表单项的高度  */
    // />
  )
}
