import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Col, Field, Row, Toast } from 'vant'
import { defineComponent, ref, onMounted } 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'
import AppState from '/src/state'
import { userInfo } from '/src/subpages/colexiu/App'

export default defineComponent({
  name: 'ColexiuFeedBack',
  setup() {
    const select = ref<string>('识别不准')
    const text = ref<string>('')
    const loading = ref<boolean>(false)
    const suggestionTypeList = ref([] as any);
    const suggestId = ref(null as any); // 类型id

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

		// 获取建议类别
		const getTypeList = async () => {
			try {
			  const res = await request.post('/sysSuggestionType/page', {
          data: { rows: 9999, page: 1 },
          requestType: "json",
        })
			  suggestionTypeList.value = res.data.rows || [];
			} catch (e) {
			  //
			}
		}    

    const submit = () => {
      try {
        if (!suggestId.value) {
          return Toast('请先选择问题类型')
        }
        if (!text.value) {
          return Toast('请先填写意见反馈')
        }
        loading.value = true
        const phone = userInfo?.phone || AppState.user?.phone
        request.post('/sysSuggestion/save', {
          data: {
            clientType: 'STUDENT',
            content: text.value,
            type: 'SMART_PRACTICE',
            suggestionTypeId: suggestId.value,
            mobileNo: phone
          },
        })
        suggestPopup.value?.close()
        Toast('意见反馈已提交')
      } catch (error) {}
      loading.value = false
    }
		onMounted(() => {
			getTypeList();
		});
    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}>
              {suggestionTypeList.value.map((item: any) => (
                <Col span={8}>
                  <Radio name={item.name} onClick={() => (suggestId.value = item.id)}>{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>
    )
  },
})
