import Taro, { Component } from '@tarojs/taro'
import { View, RichText } from '@tarojs/components'
import Statement from '../../components/Statement'
import ContactConsultant from '../../components/ContactConsultant'
import { connect } from '@tarojs/redux'
import { queryRaiseDetail } from '@/services/project'
import dayjs from 'dayjs'

import './index.scss'

@connect(({ house }) => ({ house }))
export default class Protocol extends Component {
  config = {
    navigationBarTitleText: '线上选房协议',
  }

  state = {
    raiseDeatil: {}
  }
  componentWillMount() {
    const { id: raiseRecordId } = this.$router.params
    queryRaiseDetail(raiseRecordId).then(res => {
      this.setState({
        raiseDeatil: res.taRaiseRecord || {},

      })
    })
  }

  render() {
    const { buildingId } = this.$router.params
    const { house } = this.props
    const { raiseDeatil } = this.state
    const payProtocol = house.onlineProtocol.replace(/\${name}/ig, raiseDeatil.name || '').replace(/0.096rem/g, '').replace(/\${idcard}/ig, raiseDeatil.idcard || '').replace(/\${phone}/ig, raiseDeatil.tel || '').replace(/\${date}/ig, dayjs(raiseDeatil.createDate).format('YYYY/MM/DD') || '') || ''

    return (
      <View className="protocal-box">
        <View className="content">
          <RichText nodes={payProtocol} />
        </View>
        <View className="contact">
          <ContactConsultant text="如有问题，请联系置业顾问" buildingId={buildingId} />
        </View>
        <Statement />
      </View>
    )
  }
}
