<template>
    <global-page
        :title="templateDetail?.templateName"
        navLeftType="text"
        :showNavRight="formData?.length > 0"
        navRightType="button"
        navRightText="提交"
        :showEmpty="!templateDetail?.questionList?.length"
        @handleRightClick="handleSubmit"
    >
        <view class="mocp-form" v-if="formData?.length > 0">
            <up-form labelPosition="left" labelWidth="auto" :model="formData" ref="formRef">
                <template v-for="(item, index) in templateDetail?.questionList" :key="item.id">
                    <!-- 单项填空 -->
                    <template v-if="item.quType == '0' && showQuestion(item)">
                        <up-form-item
                            :label="index + 1 + ',' + item.quName + (item.quDesc ? `[${item.quDesc}]` : '')"
                            labelPosition="top"
                            :borderBottom="true"
                            :required="item.required == '1'"
                        >
                            <up-textarea
                                v-model="formData[index].value"
                                placeholder="请输入"
                                :height="40"
                                :maxlength="-1"
                                border="none"
                            ></up-textarea>
                        </up-form-item>
                    </template>
                    <!-- 单选|判断 -->
                    <template v-if="(item.quType == '1' || item.quType == '2') && showQuestion(item)">
                        <up-form-item
                            :label="index + 1 + ',' + item.quName + (item.quDesc ? `[${item.quDesc}]` : '')"
                            labelPosition="top"
                            :borderBottom="true"
                            :required="item.required == '1'"
                        >
                            <up-radio-group placement="column" v-model="formData[index].value">
                                <view class="mocp-radio" v-for="(option, optionIndex) in item.quRadioList" :key="option.id">
                                    <up-radio :label="option.optionName" :name="option.id"></up-radio>
                                    <view class="mocp-input">
                                        <up-input
                                            placeholder="请输入"
                                            clearable
                                            v-if="option.isFillblank == '1' && formData[index].value?.includes(option.id)"
                                            v-model="formData[index].quRadioList[optionIndex].value"
                                        ></up-input>
                                    </view>
                                </view>
                            </up-radio-group>
                        </up-form-item>
                    </template>
                    <!-- 附件 -->
                    <template v-if="item.quType == '3' && showQuestion(item)">
                        <up-form-item
                            :label="index + 1 + ',' + item.quName + (item.quDesc ? `[${item.quDesc}]` : '')"
                            :borderBottom="true"
                            :required="item.required == '1'"
                            labelPosition="top"
                        >
                            <view style="margin-top: 16rpx">
                                <global-upload-image v-model="formData[index].value" map-field-name="id"></global-upload-image>
                            </view>
                        </up-form-item>
                    </template>
                    <!-- 多选 -->
                    <template v-if="item.quType == '4' && showQuestion(item)">
                        <up-form-item
                            :label="index + 1 + ',' + item.quName + (item.quDesc ? `[${item.quDesc}]` : '')"
                            labelPosition="top"
                            :borderBottom="true"
                            :required="item.required == '1'"
                        >
                            <up-checkbox-group placement="column" v-model="formData[index].value">
                                <view class="mocp-checkbox" v-for="option in item.quRadioList" :key="option.id">
                                    <up-checkbox :label="option.optionName" :name="option.id"></up-checkbox>
                                    <view class="mocp-input">
                                        <up-input
                                            placeholder="请输入"
                                            clearable
                                            v-if="option.isFillblank == '1' && formData[index].value?.includes(option.id)"
                                            v-model="formData[index].quRadioList[optionIndex].value"
                                        ></up-input>
                                    </view>
                                </view>
                            </up-checkbox-group>
                        </up-form-item>
                    </template>
                    <!-- 多项填空 -->
                    <template v-if="item.quType == '5' && showQuestion(item)">
                        <template v-for="(_item, _index) in item.quName?.split('##{input}##')" :key="_index">
                            <up-form-item
                                v-if="_item"
                                :label="
                                    _index == 0
                                        ? `${index + 1 + ',' + _item}` + (item.quDesc ? `[${item.quDesc}]` : '')
                                        : `${'  ' + _item}` + (item.quDesc ? `[${item.quDesc}]` : '')
                                "
                                :borderBottom="true"
                                :required="item.required == '1'"
                            >
                                <up-input
                                    inputAlign="right"
                                    border="none"
                                    placeholder="请输入"
                                    clearable
                                    v-model="formData[index].inputList[_index].value"
                                ></up-input>
                            </up-form-item>
                        </template>
                    </template>
                    <!-- 日期 -->
                    <template v-if="item.quType == '6' && showQuestion(item)">
                        <up-form-item
                            :label="index + 1 + ',' + item.quName + (item.quDesc ? `[${item.quDesc}]` : '')"
                            :borderBottom="true"
                            :required="item.required == '1'"
                        >
                            <global-date v-model="formData[index].value" pickAlign="right" clearable></global-date>
                        </up-form-item>
                    </template>
                    <!-- 下拉框 -->
                    <template v-if="item.quType == '7' && showQuestion(item)">
                        <up-form-item
                            :label="index + 1 + ',' + item.quName + (item.quDesc ? `[${item.quDesc}]` : '')"
                            :borderBottom="true"
                            :required="item.required == '1'"
                        >
                            <global-picker
                                v-model="formData[index].value"
                                pickAlign="right"
                                :options="item.quRadioList"
                                labelField="optionName"
                                valueField="id"
                                clearable
                            ></global-picker>
                        </up-form-item>
                    </template>
                </template>
            </up-form>
        </view>
    </global-page>
</template>

<script setup>
import { formData, formRef, templateDetail } from './constants/answerQuestion.compositions'
import { onLoad } from '@dcloudio/uni-app'
import { getParams, getSurveyTemplateDetail } from './constants/answerQuestion.functionals'
import { computed } from 'vue'
import { submitAnswersApi } from 'mocp/api/workSupervision'

defineOptions({
    name: 'AnswerQuestion'
})
//初始化
const query = defineProps(['templateId'])
onLoad(() => {
    getSurveyTemplateDetail(query.templateId)
})
// 验证
const validateQuestions = () => {
    const questions = formData.value
    for (let i = 0; i < questions.length; i++) {
        const question = questions[i]
        if (showQuestion(question) && question.required == '1') {
            if (question.quType === '5') {
                // 多项填空
                if (question.inputList && question.inputList.length > 0) {
                    if (!question.inputList.every((input) => input.value.trim() !== '')) {
                        return { index: i, question: question }
                    }
                }
            } else {
                // 单项填空|附件|日期|下拉框|单选|判断|多选
                if (!question.value) {
                    return { index: i, question: question }
                }
            }
        }
    }
    return null
}
//提交
const handleSubmit = async () => {
    const validate = validateQuestions()
    if (validate) {
        return uni.$mocpMessage.warning(`请填写第${validate.index + 1}题`)
    }
    const params = getParams(query)
    const res = await submitAnswersApi(params, { loading: '提交中...' })
    if (res.code == 200) {
        uni.$mocpJump.navigateBack()
        uni.$mocpMessage.success('提交成功')
    } else {
        uni.$mocpMessage.error(res.message)
    }
}
//回答选择的题ID(单选题和多选题)
const getCgQuItemId = computed(() => {
    const getCgQuItemId = []
    formData.value.forEach((item) => {
        if (['1', '2', '4'].includes(item.quType) && item.value) {
            getCgQuItemId.push(item.value)
        }
    })
    return getCgQuItemId
})
//是否展示题目
const showQuestion = (question) => {
    return (question.display == '1' && !question.cgQuItemId) || (question.cgQuItemId && getCgQuItemId.value.includes(question.cgQuItemId))
}
</script>
<style lang="scss" scoped>
.mocp-radio,
.mocp-checkbox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16rpx;
}
.mocp-input {
    margin-left: 16rpx;
}
.mocp-form {
    background: #fff;
    margin-bottom: 24rpx;
    padding: 0 32rpx;
}
</style>
