import Rate from '../index'
import '../assets/index.less'

export default {
  data () {
    return {
    }
  },
  methods: {
    onChange (v) {
      console.log('selected star', v)
    },
    onFocus () {
      console.dir('focus')
    },
  },
  render () {
    const { onChange, onFocus } = this
    const rateProps = {
      props: {
        defaultValue: 2.5,
        allowHalf: true,
      },
      on: {
        change: onChange,
      },
      style: {
        fontSize: '50px', marginTop: '24px',
      },
    }
    const rateProps1 = {
      props: {
        defaultValue: 2,
      },
      on: {
        change: onChange,
      },
      style: {
        fontSize: '50px', marginTop: '24px',
      },
    }
    return (
      <div style='margin: 100px'>
        <Rate
          defaultValue={2.5}
          onChange={onChange}
          onFocus={onFocus}
          style='fontSize: 40px'
          allowHalf
          allowClear={false}
          autoFocus
          disabled
        />
        <br />
        <Rate
          defaultValue={2.5}
          onChange={onChange}
          style='fontSize: 50px; marginTop: 24px'
          allowHalf
          character='$'
        />
        <br />
        <Rate
          {...rateProps}
        >
          <i slot='character' class='anticon anticon-star' />
        </Rate>
        <br />
        <Rate
          {...rateProps1}
        >
          <i slot='character' class='anticon anticon-star' />
        </Rate>
      </div>
    )
  },
}