import { View, Text, } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import NavBarNormal from "@/components/nav-bar-normal/index";
import PageCustom from "@/components/page-custom/index";
import IconArrowDownRounded from '@/components/icon/IconArrowDownRounded';
import DataCard from './components/DataCard'
import VisitorCard from "./components/VisitorCard";
import  PickerSingleColumn from "./components/Picker/PickerSingleColumn";
import { useState } from "react";

export default () => {
  
  
  // 当前选中的值
  const options = ['张三', '李四']
  // 是否显示选择器
  const [showPicker, setShowPicker] = useState(false)

  // 当前选中的值
  const [selected, setSelected] = useState(options[0])

  const handleChange = (value: string) => {
    setSelected(value)
  }

  return (
    <PageCustom>
      <NavBarNormal leftColumn={()=> <Text>数据分析</Text>}>
      </NavBarNormal>
      <View className="w-full pt-8 px-16 pb-40">
        
        
        <PickerSingleColumn options={options} selected={selected} onChange={handleChange} showPicker={showPicker} setShowPicker={setShowPicker}>
          <View className="flex items-center gap-2 bg-white rounded-12 p-12 mb-16" onClick={() => setShowPicker(true)}>
            <View className="flex-1 text-14 leading-22 text-gray-45">{selected}</View>
            <View className="flex-center">
              <IconArrowDownRounded/>
            </View>
          </View>
        </PickerSingleColumn>
        

        <View className="grid grid-cols-2 gap-8 bg-white rounded-12 p-12 mb-12">
          <DataCard text="今日访问次数" unitText="次" value={588} />
          <DataCard text="今日对话人数" unitText="人" value={588} />
          <DataCard text="累计访问次数" unitText="次" value={588} />
          <DataCard text="累计对话人数" unitText="人" value={588} />
          <DataCard text="好评" unitText="条" value={20} arrow />
          <DataCard text="待处理差评" unitText="条" value={2} arrow />
        </View>

        <View className="mb-8 text-14 leading-22 font-medium">访问详情</View>
        <View className="flex flex-col gap-8">
          <VisitorCard data={{
              name: '洪三',
              company: '北京茗视光眼科医院管理有限公司',
              position: 'CEO',
              agentName: '张医生',
              chatNum: 10,
              visitNum: 7,
              disLikeNum: 2,
              visitTime: 5
            }}></VisitorCard>
          
          <VisitorCard data={{
              name: '李四',
              company: '北京茗视光眼科医院管理有限公司',
              position: '商务经理',
              agentName: '张医生',
              chatNum: 10,
              visitNum: 7,
              disLikeNum: 2,
              visitTime: 5
            }}></VisitorCard>
        </View>
      </View>
      
    </PageCustom>
  );
};