<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { minePaperInfoquestionnaire } from '@/api/satisfaction/index'
import { useDict } from '@/common/utils/dict'
import { getCompanyName } from '@/common/utils/transcoding'

const { questionnaire_type, markpape_type, yes_no, topic_type, single_option, judge_option, train_examination_targets } = useDict(
  'questionnaire_type', 'markpape_type', 'yes_no', 'topic_type', 'single_option', 'judge_option', 'train_examination_targets'
)

const data = reactive({
  form: {
    id: null,
    belongCompany: null,
    questionnaireTitle: null,
    questionnaireBlurb: null,
    examinationType: null,
    questionBankId: null,
    questionBankName: null,
    questionnaireTargets: null,
    questionnaireTargetsName: null,
    questionnaireTargetsId: null,
    isAll: null,
    isAnonymity: '1',
    isStatus: '0',
    isRelease: '1',
    tenantId: null,
    companyId: null,
    deptId: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    delFlag: null,
    questionnaireTargetsUserList: [],
    questionDirectoryList: []
  }
})

const { form } = toRefs(data)
const loading = ref(false)
const isRead = ref(false)
const exercisesIndex = ref(0)

function selectDictLabel(datas: any, value: number | string) {
  if (value === undefined) return ''
  const actions: Array<number | string> = []
  Object.keys(datas).some((key) => {
    if (datas[key].value === '' + value) {
      actions.push(datas[key].label)
      return true
    }
  })
  return actions.length ? actions.join('') : value
}

function getInfo(id) {
  if (id) {
    minePaperInfoquestionnaire(id).then(response => {
      form.value = response.data
      form.value.questionDirectoryList.forEach(item => {
        if (item.topicType === '2') {
          item.mineAnswerSub = item.mineAnswer?.split(',') || []
        }
      })
    })
  }
}

function onClickStart() {
  isRead.value = true
}

function handlePreView() {
  const current = form.value.questionDirectoryList[exercisesIndex.value]
  
  if (current.topicType === '4' && !current.mineAnswer) {
    uni.showToast({ title: '请输入答案', icon: 'none' })
    return
  }
  
  if (!current.mineAnswerName) {
    uni.showToast({ title: '请输入答案', icon: 'none' })
    return
  }
  
  exercisesIndex.value++
}

function makeSureBack() {
  uni.navigateBack({ delta: 1 })
}

onLoad((options) => {
  if (options.mainId) {
    getInfo(options.mainId)
  }
})
</script>

<template>
  <view class="container">
    <view class="container__body">
      <view class="container__card">
        <view v-if="!isRead">
          <uv-cell title="所属公司" :value="getCompanyName(form.belongCompany)" />
          <uv-cell title="问卷名称" :value="form.questionnaireTitle" />
          <uv-cell title="问卷类型" :value="selectDictLabel(questionnaire_type, form.examinationType)" />
          <uv-cell title="题库名称" :value="form.questionBankName" />
          <uv-cell title="是否匿名" :value="selectDictLabel(yes_no, form.isAnonymity)" />
          <uv-cell title="是否发布" :value="selectDictLabel(yes_no, form.isRelease)" />
          <uv-cell title="问卷简介" :value="form.questionnaireBlurb" />
          <uv-cell title="问卷对象" :value="selectDictLabel(train_examination_targets, form.questionnaireTargets)" />
          <uv-cell title="问卷范围" :value="form.questionnaireTargetsName" />
        </view>

        <uv-form v-if="isRead" label-position="top">
          <uv-cell-group>
            <view v-for="(item, index) in form.questionDirectoryList" :key="index">
              <uv-cell-group v-if="exercisesIndex === index">
                <uv-cell 
                  :title="`${index+1}.问题类型：`" 
                  :value="`${selectDictLabel(topic_type, item.topicType)}（${item.answerScore}分）`" 
                />
                <uv-cell 
                  :title="`${index+1}.问题内容：`" 
                  :value="item.topicContact" 
                />
              </uv-cell-group>

              <!-- 单选题 -->
              <uv-radio-group 
                v-if="exercisesIndex === index && item.topicType === '1'"
                :model-value="item.mineAnswer"
                :disabled="true"
              >
                <uv-cell
                  v-for="(childItem, childIndex) in item.questionDirectoryOptionList"
                  :key="`${index}${childIndex}`"
                  :title="`${childItem.directoryOption}： ${childItem.optionContent}`"
                >
                  <template #right-icon>
                    <uv-radio :name="childItem.directoryOption" />
                  </template>
                </uv-cell>
              </uv-radio-group>

              <!-- 多选题 -->
              <uv-checkbox-group
                v-if="exercisesIndex === index && item.topicType === '2'"
                :model-value="item.mineAnswerSub"
                :disabled="true"
              >
                <uv-cell
                  v-for="(childItem, childIndex) in item.questionDirectoryOptionList"
                  :key="`${index}${childIndex}`"
                  :title="`${childItem.directoryOption}： ${childItem.optionContent}`"
                >
                  <template #right-icon>
                    <uv-checkbox :name="childItem.directoryOption" />
                  </template>
                </uv-cell>
              </uv-checkbox-group>

              <!-- 判断题 -->
              <uv-radio-group
                v-if="exercisesIndex === index && item.topicType === '3'"
                :model-value="item.mineAnswer"
                :disabled="true"
              >
                <uv-cell
                  v-for="(dict, childIndex) in judge_option"
                  :key="dict.value"
                  :title="`${childIndex+1}. ${dict.label}`"
                >
                  <template #right-icon>
                    <uv-radio :name="dict.value" />
                  </template>
                </uv-cell>
              </uv-radio-group>

              <!-- 简答题 -->
              <uv-cell-group v-if="exercisesIndex === index && item.topicType === '4'">
                <uv-input
                  v-model="item.mineAnswer"
                  type="textarea"
                  placeholder="请输入答案"
                  :height="160"
                  :disabled="true"
                />
              </uv-cell-group>

              <uv-cell-group v-if="exercisesIndex === index" style="margin-top: 200rpx;">
                <uv-cell title="提交的答案" :value="item.mineAnswerName" />
              </uv-cell-group>
            </view>
          </uv-cell-group>
        </uv-form>
      </view>
    </view>

    <view v-if="!isRead" class="button-container">
      <div style="flex:1;">
      <uv-button type="primary" @click="onClickStart">查看问卷</uv-button>
      </div>
    </view>

    <view v-if="isRead" class="button-container">
      <div style="flex:1; margin-right: 20rpx;"  v-if="exercisesIndex === 0">
        <uv-button 
        type="primary"
        @click="isRead = false"
      >
        问卷基本信息
      </uv-button>
      </div>
      <div style="flex:1; margin-right: 20rpx;" v-if="exercisesIndex > 0">
         <uv-button 
          type="primary"
          @click="exercisesIndex--"
        >
          上一题
        </uv-button>
      </div>
      <div style="flex:1;" v-if="exercisesIndex < form.questionDirectoryList.length - 1">
        <uv-button 
        type="primary"
        @click="handlePreView"
      >
        下一题
      </uv-button>
      </div>
      
     <div style="flex:1;"  v-if="exercisesIndex === form.questionDirectoryList.length - 1">
        <uv-button 
          type="primary"
          @click="makeSureBack"
        >
        确认
      </uv-button>
    </div>
      
      
     
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding-bottom: 120rpx;
  
  &__body {
    padding: 20rpx;
  }
  
  &__card {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  }
}

.button-container {
  position: fixed;
  bottom: 120rpx;
  left: 20rpx;
  right: 20rpx;
  display: flex;
  
  
  .uv-button {
    flex: 1;
  }
}

:deep(.uv-cell__title) {
  width: 200rpx;
}
</style>