import { Button, Col, Icon, Row } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'col-field',
  props: {
    required: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    },
    border: {
      type: Boolean,
      default: true
    },
    iconName: {
      type: String
    }
  },
  render() {
    return (
      <Row class={styles['col-field']}>
        <Col span={24} class={styles.formTitle}>
          <div class={styles['col-left']}>
            <div class={styles['col-icon']}>
              {this.$slots.icon ? (
                this.$slots.icon()
              ) : this.iconName ? (
                <Icon name={this.iconName} size="24" />
              ) : null}
            </div>
            {this.required ? <i class={styles.required}>*</i> : null}
            {this.$slots.title ? this.$slots.title() : <div class={styles.pdL}>{this.title}</div>}
          </div>
          <div class={styles['col-right']}>
            {this.$slots.right && this.$slots.right()}
          </div>
        </Col>
        <Col span={24} class={this.border ? 'van-hairline--bottom' : null}>
          {this.$slots.default && this.$slots.default()}
        </Col>
      </Row>
    )
  }
})
