import React, { useState, useEffect } from 'react'
import Taro, { Current } from '@tarojs/taro'
import request, { apis } from '@/utils/request'
import { useModel } from '@/store'
import toolclass from '@/utils/toolclass.js'
import SlidePopup from '@/components/SlidePopup/index'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function BaoXiuDetail () {

  const { user } = useModel('user')
  const CurrnetBaoXiuId = Current.router.params.id
  const [DetailInfo, setDetailInfo] = useState(null)
  const [PhoneList, setPhoneList] = useState([])
  const [ShowPopup, setShowPopup] = useState(false)

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

  const Init = () => {
    request({ ...apis.getGongDanDetail, args: { orgId: user.orgId }, params: { ticketId: CurrnetBaoXiuId } }).then((res) => { // 获取工单详情
      setDetailInfo(res)
      request({ ...apis.getWuYePhone }).then((cRes) => { // 获取物业电话
        setPhoneList(cRes || [])
      })
    })
  }

  return (
    <view className='BaoXiuDetail'>

      <view className='TopLine'></view>

      {/* 概况 */}
      <view className='TopInfo'>
        <view className='flex-h'>
          <text className='flex-item'>{DetailInfo === null ? null : DetailInfo.ticketTitle}</text>
          <text className='iconfont iconjiantouright'></text>
        </view>
        <view className='flex-h'>
          <text className='flex-item'>报修单号</text>
          <text>{DetailInfo === null ? null : DetailInfo.id}</text>
        </view>
        <view className='flex-h'>
          <text className='flex-item'>报修时间</text>
          <text>{DetailInfo === null ? null : toolclass.FormatDate(DetailInfo.createDate)}</text>
        </view>
      </view>

      {/* 详情 */}
      <view className='Detail'>
        <text>处理进度</text>
        <view className='flex-h'>
          <view className='Line'><view></view></view>
          <view className='flex-item'>
            <view>
              {
                DetailInfo !== null && DetailInfo.ticketRecordList !== null &&
                DetailInfo.ticketRecordList.map((item, index) => (
                  <view className='StepList' key={`StepList-${index}`}>
                    <view className='Title flex-h'>
                      <text className='flex-item Red'>{item.ticketStatusName}</text>
                      <text>{toolclass.FormatDate(item.createDate)}</text>
                    </view>
                    <view className='Text'>{item.content}</view>
                    {/* <view className='Text'>您的报修正在分配物业处理人员，若长时间无人处理，请联系物业。<text className='Blue'>物业电话薄</text><text className='Blue iconfont iconjiantouright'></text></view> */}
                    {/* <view className='ImgList'>
                      <view></view>
                      <view></view>
                      <view></view>
                      <view></view>
                      <view></view>
                      <view></view>
                    </view> */}
                  </view>
                ))
              }
            </view>
          </view>
        </view>

        {/* 更多操作 */}
        <view className='BottomBtn active'>
          <text onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/BaoXiuFeiYong/index?id=${CurrnetBaoXiuId}` }) }}>费用详情</text>
        </view>

        {/* 更多操作 */}
        <view className='BottomBtn'>
          <text onClick={() => { setShowPopup(true) }}>与物业沟通</text>
        </view>
      </view>

      <SlidePopup Close={() => { setShowPopup(false) }} Show={ShowPopup}>
        <view className='LianXiPopup'>
          <text>联系物业</text>
          <text>对此费用有疑问</text>
          {
            PhoneList.map((item, index) => (
              <view className='flex-h' key={`PhoneList-${index}`} onClick={() => { Taro.makePhoneCall({ phoneNumber: item.tel }) }}>
                <text className='flex-item'>{item.name}</text>
                <text>{item.tel}</text>
                <text className='iconfont icondianhua'></text>
              </view>
            ))
          }
        </view>
      </SlidePopup>

    </view>
  )
}
