import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function WuYeBaoXiuQuYu () {

  const [TypeList] = useState([
    { icon: 'icongonggongquyu', name: '公共区域问题', desc: '如绿植被破坏、楼道灯不亮等问题', id: 1 },
    { icon: 'iconfangwuzhiliang', name: '房屋质量问题', desc: '如家中墙体开裂、墙皮脱落等问题', id: 2 },
    { icon: 'iconhuneisheshi', name: '户内设施问题', desc: '如通浴室下水道、保洁等可能需要收费的项目', id: 3 }
  ])

  return (
    <view className='WuYeBaoXiuQuYu'>
      {
        TypeList.map((item, index) => (
          <view key={`WuYeBaoXiuQuYu-${index}`}>
            <view onClick={() => { Taro.redirectTo({ url: `/pages/WuYe/TianJiaBaoXiu/index?type=${item.id}` }) }}>
              <view>
                <text className={`iconfont ${item.icon}`}></text>
                <text>{item.name}</text>
              </view>
              <text>{item.desc}</text>
            </view>
          </view>
        ))
      }
    </view>
  )
}
