import {useEffect, useState} from 'react'
import {View, Text, Image} from '@tarojs/components'
import {Tabs} from '@nutui/nutui-react-taro'
import './index.scss'
import {listCmsWebsiteField} from "@/api/cms/cmsWebsiteField";
import {CmsWebsiteField} from "@/api/cms/cmsWebsiteField/model";

interface QrCodeData {
  id: string
  title: string
  description: string
  qrCode: string
  wechatId: string
}
const WechatService = () => {
  const [activeTab, setActiveTab] = useState('0')
  const [codes, setCodes] = useState<CmsWebsiteField[]>([])

  const renderQRCode = (data: typeof codes[0]) => (
    <View className="qr-container">

      <View className="qr-content">
        <View className="qr-code-wrapper">
          <Image
            src={`${data.value}`}
            className="qr-code-image"
            mode="aspectFit"
          />
          <Text className="wechat-id">微信号：{data.comments}</Text>
        </View>

        <View className="qr-tips">
          <Text className="tip-title">使用说明：</Text>
          <Text className="tip-item">1. 长按二维码保存到相册</Text>
          <Text className="tip-item">2. 打开微信扫一扫</Text>
          <Text className="tip-item">3. 选择相册中的二维码图片</Text>
          <Text className="tip-item">4. 添加好友并发送验证消息</Text>
        </View>
      </View>
    </View>
  )

  useEffect(() => {
    listCmsWebsiteField({ name: 'kefu'}).then(data => {
      if(data){
        setCodes(data)
      }
    })
  }, []);

  return (
    <View className="wechat-service-page">
      <Tabs
        value={activeTab}
        onChange={(value) => setActiveTab(`${value}`)}
        className="service-tabs"
      >
        {codes.map((item) => (
          <Tabs.TabPane key={item.id} title={item.comments} value={item.id}>
            {renderQRCode(item)}
          </Tabs.TabPane>
        ))}
      </Tabs>
    </View>
  )
}

export default WechatService
