import { defineComponent } from 'vue'
import classnames from 'classnames'
import { Field, Button, Toast } from 'vant'
import request from '/src/helpers/request'

import styles from './index.module.less'

export default defineComponent({
  name: 'fbc-content',
  props: {
    close: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      eyeProtection: false,
      message: '',
      loading: false,
      active: '识别不准'
    }
  },
  methods: {
    submit() {
      try {
        if (!this.message) {
          return Toast('请先填写意见反馈')
        }
        this.loading = true
        request.post('/suggestion/add', {
          data: {
            content: this.message + '#' + this.active,
            type: 'SMART_PRACTICE'
          }
        })
        Toast('意见反馈已提交')
        this.close()
      } catch (error) {}
      this.loading = false
    }
  },
  render() {
    return (
      <div class={classnames(styles.eva, styles.cells)}>
        <div class={styles.title}>请选择问题类型</div>
        <div class={styles.tags}>
          <span
            class={classnames(styles.tag, {[styles.active]: this.active === '识别不准'})}
            onClick={() => this.active = '识别不准'}
          >识别不准</span>
          <span
            class={classnames(styles.tag, {[styles.active]: this.active === '无法评测'})}
            onClick={() => this.active = '无法评测'}
          >无法评测</span>
          <span
            class={classnames(styles.tag, {[styles.active]: this.active === '不出评测结果'})}
            onClick={() => this.active = '不出评测结果'}
          >不出评测结果</span>
        </div>
        <div class={styles.tags}>
          <span
            class={classnames(styles.tag, {[styles.active]: this.active === '曲谱不一致'})}
            onClick={() => this.active = '曲谱不一致'}
          >曲谱不一致</span>
          <span
            class={classnames(styles.tag, {[styles.active]: this.active === '指法错误'})}
            onClick={() => this.active = '指法错误'}
          >指法错误</span>
          <span
            class={classnames(styles.tag, {[styles.active]: this.active === '其他'})}
            onClick={() => this.active = '其他'}
          >其他</span>
        </div>
        <Field
          class={styles.textarea}
          modelValue={this.message}
          onInput={evt => this.message = evt.target.value}
          autosize
          type="textarea"
          maxlength="200"
          placeholder="请详细描述您遇到的问题，以便我们尽快为您解决！"
          show-word-limit
        />
        <div class={styles.btnWraper}>
          <Button class={styles.btn} color="#01C1B5" onClick={this.submit}>提交反馈</Button>
        </div>
      </div>
    )
  }
})
