import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Col, Field, Row, Toast } from 'vant'
import { defineComponent, ref } from 'vue'
import styles from './index.module.less'
import bgSubmit from '../../popups/setting/icons/submit.png'
import request from '/src/helpers/request'
import { suggestPopup } from '../setting/sett'

export default defineComponent({
  name: 'ColexiuFeedBack',
  setup() {
    const select = ref<string>('识别不准')
    const text = ref<string>('')
    const loading = ref<boolean>(false)

    const list = [
      { name: '识别不准' },
      { name: '无法评测' },
      { name: '不出评测结果' },
      { name: '曲谱不一致' },
      { name: '指法错误' },
      { name: '其他' },
    ]

    const submit = () => {
      try {
        if (!text.value) {
          return Toast('请先填写意见反馈')
        }
        loading.value = true
        request.post('/sysSuggestion/save', {
          data: {
            clientType: 'STUDENT',
            content: text.value + '#' + select.value,
            type: 'SMART_PRACTICE',
          },
        })
        suggestPopup.value?.close()
        Toast('意见反馈已提交')
      } catch (error) {}
      loading.value = false
    }

    return () => (
      <div class={styles.feedback}>
        <div class={styles.wrap}>
          <div class={styles.title}>意见反馈</div>
          <div class={styles.sub}>请选择问题类型</div>
          <RadioGroup class={styles.group} v-model={select.value}>
            <Row gutter={4}>
              {list.map((item) => (
                <Col span={8}>
                  <Radio name={item.name}>{item.name}</Radio>
                </Col>
              ))}
            </Row>
          </RadioGroup>
          <Field
            type="textarea"
            class={styles.text}
            placeholder="请详细描述您遇到的问题，以便我们尽快为您解决！"
            maxlength={200}
            rows="3"
            autosize
            show-word-limit
            v-model={text.value}
          />
          <div class={styles.btns}>
            <img class={styles.submit} src={bgSubmit} onClick={submit} />
          </div>
        </div>
      </div>
    )
  },
})