import {
  Button,
} from "tea-component-mobile";
import Mock from 'mockjs';
import Picker from "@";
import { useEffect, useState } from "react";
import { Radio } from 'tea-component-mobile'
const list = Array(Math.floor(1 * 10)).fill(0).map((v, idx) => Mock.Random.word(5, 8));
export default () => {
  const [visible, setVisible] = useState(false);
  const [isPop, setIsPop] = useState(false)
  const [selectable, setSelectable] = useState(true)
  const [positionCheckBox, setPositionCheckBox] = useState(true)
  const [isSingleSelect, setIsSingleSelect] = useState(false)
  const [selectedsValue, setSelectedsValue] = useState(list.slice(0, list.length - 1))
  const [selectAll, setSelectAll] = useState(false)


  const [selectablePop, setSelectablePop] = useState(true)
  const [positionCheckBoxPop, setPositionCheckBoxPop] = useState(true)
  const [isSingleSelectPop, setIsSingleSelectPop] = useState(false)
  const [selectedsValuePop, setSelectedsValuePop] = useState(list.slice(0, list.length - 1))
  const [selectAllPop, setSelectAllPop] = useState(false)
  useEffect(() => {
    // setInterval(() => {
    //   // setVisible(Math.round(Math.random()) === 0);
    // }, 2000)
  }, [])

  return (
    <div style={{ fontSize: '15px' }}>
      <div style={{ width: '100%', height: '500px', overflow: 'scroll' }}>
        <div>模式：页面形式</div>
        <div>
          <Radio checked={selectable} onChange={() => {
            setSelectable(!selectable)
          }}>是否支持选择selectable</Radio>
        </div>
        <div>
          <Radio checked={positionCheckBox} onChange={() => {
            setPositionCheckBox(!positionCheckBox)
          }}>positionCheckBox:单选框的位置</Radio>
        </div>
        <div>
          <Radio checked={isSingleSelect} onChange={() => {
            setSelectedsValue([])
            setIsSingleSelect(!isSingleSelect)
          }}>isSingleSelect:是否支持单选</Radio>
        </div>
        <div>
          <p style={{paddingLeft:'10px'}}>选中的value值:</p>
          <div style={{width:'100%',maxHeight:'200px',overflow:'hidden',columnCount:3,textAlign:'center',fontSize:'10px'}}>
            {selectedsValue.map((item) => {
              return <span>{item}、</span>
            })}</div>
        </div>
        <div>
          <p>是否已经全选：{selectAll ? '是' : '否'}</p>
        </div>
        <Picker
          selectable={selectable}
          list={list}
          // value={list.slice(0,3)}
          value={selectedsValue}
          onChange={(selecteds, isSelectedAll) => {
            console.log(selecteds, isSelectedAll, '--------------')
            setSelectedsValue(selecteds)
            setSelectAll(isSelectedAll)
          }}
          positionCheckBox={positionCheckBox ? 'left' : 'right'}
          isPopup={false}
          maskClosable={true}
          onClosePopup={(selecteds) => {
            console.log('关闭的回调', selecteds)
            setIsPop(!isPop)
          }}
          popupHeight={400}
          isSingleSelect={isSingleSelect}
        />
      </div>
      <div style={{ width: '100%', borderTop: '1px solid #888888', marginTop: '20px' }}></div>
      <div style={{ width: '100%', height: '500px', overflow: 'scroll' }}>
        <div>模式：popup页面形式</div>
        <div>
          <Radio checked={selectablePop} onChange={() => {
            setSelectablePop(!selectablePop)
          }}>是否支持选择selectable</Radio>
        </div>
        <div>
          <Radio checked={positionCheckBoxPop} onChange={() => {
            setPositionCheckBoxPop(!positionCheckBoxPop)
          }}>positionCheckBox:单选框的位置</Radio>
        </div>
        <div>
          <Radio checked={isSingleSelectPop} onChange={() => {
            setSelectedsValuePop([])
            setIsSingleSelectPop(!isSingleSelectPop)
          }}>isSingleSelect:是否支持单选</Radio>
        </div>
        <div>
          <p style={{paddingLeft:'10px'}}>选中的value值：</p>
          <div style={{width:'100%',maxHeight:'200px',overflow:'hidden',columnCount:3,textAlign:'center',fontSize:'10px'}}>
          {selectedsValuePop.map((item) => {
            return <span>{item}、</span>
          })}
          </div>
        </div>
        <div>
          <p>是否已经全选：{selectAllPop ? '是' : '否'}</p>
        </div>
        <Picker
          selectable={selectablePop}
          list={list}
          // value={list.slice(0,3)}
          value={selectedsValuePop}
          onChange={(selecteds, isSelectedAll) => {
            setSelectedsValuePop(selecteds)
            setSelectAllPop(isSelectedAll)
          }}
          positionCheckBox={positionCheckBoxPop ? 'left' : 'right'}
          isPopup={true}
          maskClosable={true}
          onClosePopup={(selecteds) => {
            console.log('关闭的回调', selecteds)
          }}
          popupHeight={400}
          isSingleSelect={isSingleSelectPop}
          popupTitle="popup标题"
        >
          <Button>打开弹窗</Button>
        </Picker>
      </div>
    </div>
  )
}