import React, { useEffect, useState } from 'react'
import { View, Text, Input, Image, Button } from '@tarojs/components'
import Taro, { getCurrentInstance, useDidShow, useShareAppMessage } from '@tarojs/taro'
import { SpPage, SpHtml, SpCheckbox, SpImage } from '@/components'
import { useSelector } from 'react-redux'
import { getActiveDetail } from '@/api/community'
import { useImmer } from 'use-immer'
import api from '@/api'
import dayjs from 'dayjs'
import { AtIcon, AtModal } from 'taro-ui'
import { classNames, navigateTo, isArray } from '@/utils'
import QRCode from 'qrcode'
import './status.scss'


const initState = {
  cur_activity_info: [],
  loading: true,
  activeInfo: {},
  qrUrl: '',
  visible: false,
  session: {},
  record: {}
}
export default function status () {
  const $instance = getCurrentInstance()
  const [state, setState] = useImmer(initState)
  const [showModal, setShowModal] = useState(false)
  const { cur_activity_info, loading, activeInfo, qrUrl, visible, session, record } = state

  useEffect(() => {
    getActiveDetail()
  }, [])

  const getActiveDetail = async () => {
    const { id, success } = $instance.router.params
    const { activity_info = {}, changci = [], total_count, recordList = {} } = await api.user.registrationActivity({ activity_id: id })
    const _start = dayjs(activity_info.start_time * 1000)
    const _end = dayjs(activity_info.end_time * 1000)
    const _session = changci.find(item => item.has_stauts == 1) || {}
    const _item = _session.recordList?.[0] || {}
    let url = ''
    const qrData = JSON.stringify({
      activity_id: id,
      user_code: _item.user_code || ''
    })
    await QRCode.toDataURL(qrData).then((_url) => {
      url = _url
    })
    const list = _item.content?.[0]?.formdata || []
    const record = {}
    list.map((item) => {
      record[item.field_name] = item.answer || ''
    })
    console.log("🚀 ~ file: status.js:52 ~ record:", _item)
    setState(draft => {
      draft.activeInfo = {
        ...activity_info,
        total_count,
        start: `${_start.month() + 1}月${_start.date()}日`,
        end: `${_end.month() + 1}月${_end.date()}日`,
        status: _item.is_write_off === '1' ? 'done' : _item.status,
        ...record
      }
      draft.loading = false
      draft.qrUrl = url
      draft.session = _session
      draft.record = _item
    })
  }

  const subscribe = async () => {
    // await api.user.subscribeGoods(info.itemId, { distributor_id: dtid })
    // const { template_id } = await api.user.newWxaMsgTmpl({
    //   temp_name: 'yykweishop',
    //   source_type: 'goods'
    // })
    Taro.requestSubscribeMessage({
      tmplIds: ['tGJR7BS3HM9xLD4QUdBwtTAJkgzfl7cw_8-ngd74JM4'],
      success: () => {
        // onSubscribe()
        console.log("🚀 ~ onSubscribe:", 'onSubscribe')
      },
      fail: (err) => {
        console.log("🚀 ~ err:", err)
        // onSubscribe()
      }
    })
  }

  const fetchDetail = async () => {
    const { content } = await api.user.registrationRecordInfo({
      record_id: $instance.router.params.record_id
    })

    let answer_data = []
    content.map((item) => {
      if (item.formdata && item.formdata.length > 0) {
        item.formdata.map((sec_item) => {
          if (isArray(sec_item.answer)) {
            if (sec_item.form_element === 'checkbox') {
              sec_item.answer = sec_item.answer.join(',')
            }
            if (sec_item.form_element === 'area') {
              sec_item.answer = sec_item.answer.join('')
            }
          }
          answer_data.push({
            field_title: sec_item.field_title,
            answer: sec_item.answer
          })
        })
      }
    })
    setState({
      cur_activity_info: answer_data
    })
  }

  const handleCancel = async () => {
    setShowModal(false)
    // const res = await Taro.showModal({
    //   title: '提示',
    //   content: `确定要取消预约吗?`,
    //   showCancel: true,
    //   cancel: '取消',
    //   cancelText: '取消',
    //   confirmText: '确认',
    //   cancelColor: '#a5a5a5',
    //   confirmColor: '#000'
    // })
    // if (!res.confirm) return
    const { id } = $instance.router.params
    await api.user.cancelRegistrationRecord({
      activity_id: id,
      registration_session_id: session?.registration_session_id
    })
    navigateTo('/pages/index')
  }

  const onClickShare = () => {
    setState((draft) => {
      draft.visible = true
    })
  }
  const handleClose = () => {
    setState((draft) => {
      draft.visible = false
    })
  }
  useShareAppMessage(() => {
    return {
      title: activeInfo.activity_name,
      path: `/pages/recommend/detail?id=${activeInfo.activity_id}`,
      // imageUrl: activeInfo.pics[0]
      imageUrl: `${process.env.APP_IMAGE_CDN_NEW}/share-logo.jpg`
    }
  })
  // {activeInfo.status === 'pending' ? '待审核' : '报名成功'}
  return (
    <SpPage loading={loading} title="报名成功" className='page-recommend-status' alwaysBackUrl="/pages/index" isBlack>
      <View className="tit__label">
        {/* <SpCheckbox checked={true} colors="#000" label={activeInfo.status === 'pending' ? '待审核' : activeInfo.status === 'done' ? '已签到' : "已预约"}></SpCheckbox> */}
        {activeInfo.status === 'done' ? '已签到' : "待签到"}
      </View>
      <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <SpImage src='member/logo-black.png' height={42} mode='heightFix' isNew ></SpImage>
        <Image onClick={onClickShare} className="share_icon" src={require('../../assets/share.jpg')} mode='widthFix' ></Image>
      </View>
      <View className="name-box">
        <View className="activity_name">{activeInfo.activity_name}</View>
      </View>
      <View className="activity_info">
        <View className="activity_info-item flex-col">
          <Text className="title">姓名</Text>
          <Text className="value">{activeInfo?.username}</Text>
        </View>
        <View className="activity_info-item flex-col">
          <Text className="title">手机号</Text>
          <Text className="value">{activeInfo?.mobile}</Text>
        </View>
      </View>
      {activeInfo?.has_partner === '是' && <>
        <View style={{ margin: '20px 0 14px' }}>同行朋友</View>
        <View className="activity_info">
          <View className="activity_info-item flex-col">
            <Text className="title">姓名</Text>
            <Text className="value">{activeInfo?.partner_name}</Text>
          </View>
          <View className="activity_info-item flex-col">
            <Text className="title">手机号</Text>
            <Text className="value">{activeInfo?.partner_mobile}</Text>
          </View>
        </View>
      </>}
      <View className="activity_time flex-col">
        <Text className="title">活动时间</Text>
        <Text className="value">{activeInfo.start == activeInfo.end ? activeInfo.start : `${activeInfo.start} - ${activeInfo.end}  ${session.start_time.substr(11, 5)} - ${session.end_time.substr(11, 5)}`}</Text>
      </View>
      <View className="activity_addr flex-col">
        <Text className="title">活动地点</Text>
        <View className="value">
          <Image mode="widthFix" src={require('@/assets/icon/map.png')}></Image>
          <Text className='value'>{activeInfo?.address}</Text></View>
      </View>
      <View className="activity_intro" onClick={() => Taro.navigateTo({ url: '/pages/recommend/detail?id=' + activeInfo?.activity_id + '&alwaysBackUrl=/pages/recommend/status' })}>活动介绍</View>
      {activeInfo.status === 'passed' && activeInfo.status !== 'done' ? <View className="code-box flex-col">
        <SpImage src={`member/logo-lan.png`} height={40} mode='heightFix' isNew />
        <View className="img-box">
          <Image className='member-code-box-qr' mode='aspectFit' src={qrUrl} />
        </View>
        <View className="code-box-txt">入场请出示预约凭证</View>
      </View> : <View style={{ height: activeInfo.status === 'done' ? '0px' : '315px' }}></View>}
      {activeInfo.status !== 'done' && <View className="cancel-txt" onClick={() => setShowModal(true)}>取消预约</View>}
      <View className="sp-picker">
        <View
          className={classNames('mask', {
            visible: visible
          })}
          onTap={handleClose}
          catchtouchmove
        ></View>
        <View
          className={classNames('sp-picker-cnt', {
            visible: visible
          })}
        >
          <View className={classNames('sp-picker-hd')} catchtouchmove>
            <Text className='center'>{'分享'}</Text>
            <AtIcon onClick={handleClose} value='close' size={14} color='#000' ></AtIcon>
          </View>
          <View className='sp-picker-bd'>
            <Button openType="share" className={"btn share"} onClick={handleClose} plain>发送给朋友</Button>
          </View>
        </View>
      </View>

      <AtModal
        isOpened={showModal}
        title=''
        cancelText='是，我要取消'
        confirmText='否，我要保留'
        onClose={() => setShowModal(false)}
        onCancel={handleCancel}
        onConfirm={() => {
          setShowModal(false)
        }}
        content={'尊敬的用户:\n现场活动席位数量有限，如取消目前报名，\n可能导致您无法选择其他时间段活动，\n请问您确认要取消吗？'}
      />
    </SpPage>
  )
}