<!-- 不同类型问卷题目 的渲染 -->
<template>
    <!-- 单选  -->
    <el-radio-group
        :disabled="!allowEdit"
        @change="HandleChange"
        v-model="questionVal"
        v-if="[0,3].includes(Number(questionType))" 
        :class="{vertical:!isHorizontal}"> 
        <el-radio v-for="radioItem in questionSubOptions" 
            :key="radioItem.questionSortCode" 
            :value="radioItem.questionSortCode"
        >
            {{ radioItem.content }}
        </el-radio>
    </el-radio-group>
        
    <!-- 多选 -->
    <el-checkbox-group  
        :disabled="!allowEdit"
        @change="HandleChange"
        v-model="questionVal"
        v-else-if="Number(questionType) === 1" 
        :class="{vertical:!isHorizontal}">

        <el-checkbox 
            v-for="checkItem in questionSubOptions" 
            :key="checkItem.questionSortCode"
            :label="checkItem.content"
            :value="checkItem.questionSortCode"
        />
    </el-checkbox-group>

    <!-- 问答题 -->
    <el-input  
        :disabled="!allowEdit"
        @change="HandleChange"
        v-model="questionVal"
        v-else-if="Number(questionType) === 2"
        :autosize="{ minRows:5, maxRows: 5 }" 
        type="textarea" 
        :rows="5"  
        placeholder="不超过2000字"
    />

    <!-- 评价(分)题 5 -->
    <template v-else-if="Number(questionType) === 5 ">
        <!-- 评数题 -->
        <ul class="num_list_score" v-if="Number(evaluationType) === 0 && Number(questionScore)">
            <li v-for="value in Number(questionScore)" 
                :key="value"
                :class="{active:questionVal == value,disabled:!allowEdit}" 
                @click="allowEdit ? HandleNumberScoreChange(value) : ''">
                {{ value }}分
            </li>
        </ul>
        <!-- 评星题 -->
        <template v-if="Number(evaluationType) === 1 && Number(questionScore)">
            <!--  PC端 -->
            <div v-if="deviceType == 'pc'"  
                :class="['star_list_score pc_star',{disabled:!allowEdit}]" >
                非常不满意
                <el-rate size="large"   
                    v-model="questionVal"
                    :disabled="!allowEdit"
                    :colors="['#2e64fa','#2e64fa','#2e64fa']"
                    :max="Number(questionScore)" 
                    @change="HandleChange"
                    clearable />
                非常满意
            </div>

             <!-- app端-->
              <div v-if="deviceType == 'app'"  
                :class="['star_list_score app_star',{disabled:!allowEdit}]" >
                <div class="star_explain">
                    <span>非常不满意</span>
                    <span>非常满意</span>
                </div>
                <el-rate size="large"   
                    v-model="questionVal"
                    :disabled="!allowEdit"
                    :colors="['#2e64fa','#2e64fa','#2e64fa']"
                    :max="Number(questionScore)" 
                    @change="HandleChange"
                    clearable />
            </div>
        </template>
    </template>
</template>


<script setup lang="ts">
import {ref, watch} from 'vue'

interface Option {
    content: String
    score?: Number|String,
    id?: Number|string,
    questionSortCode:Number|string
}
const props = defineProps({
    questionType:{  //题目展示类型  单选0/多选1/问答2/评分单选3 / 评分题4
        type:[Number,String],
        required:true
    },
    isHorizontal:{    //单选/多选 选项 水平/垂直 排列
        type:Boolean,
        default:true,
        required:true
    },
    questionSubOptions:{   // 单选/多选 选项列表
        type:[Array<Option>,null],
    },
    evaluationType:{    //评分题 分值的展示形式  0 数字  1 星星
        type:[Number,String,null],
    },
    questionScore:{   // 评分题 题目的分值
        type:[Number,null]
    },
    allowEdit:{   //是否允许编辑
        type:Boolean,
        default:true
    },
    deviceType:{
        type:String,   //pc | app   __ 展示页面的设备类型
        default:'pc'
    },
    defaultQuestionVal:{   //默认的题目答案
        type:[String,Array,Number,null],
        default:null
    },
})
const emit = defineEmits(['formChange'])
const questionVal = ref()

const HandleNumberScoreChange = (val:number)=>{
    questionVal.value = val;
    HandleChange(val)
}
const HandleChange = (val)=>{
    emit('formChange',val)
}

watch(()=>props.defaultQuestionVal,(newVal)=>{
    console.log('props.defaultQuestionVal',newVal)
    questionVal.value = newVal
    emit('formChange',newVal)
},{immediate:true})

</script>


<style lang="scss" scoped>
.el-checkbox-group,
.el-radio-group{
    display: flex;
    flex-direction: row;
    gap: 5px 15px;
    flex-wrap: wrap;
}

.el-checkbox-group.vertical,
.el-radio-group.vertical{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap:5px;
}

.el-checkbox-group,
.el-radio-group
{
    overflow: auto;
    :deep(.el-radio),
    :deep(.el-checkbox){
        display: flex;
        align-items: flex-start;
        height: auto;
        margin: 0;

        .el-radio__input,
        .el-checkbox__input{
            height: 21px;
            display: flex;
            align-items: center;
        }
        .el-radio__label,
        .el-checkbox__label{
            line-height: 21px;
            overflow: auto;
            word-break: break-all !important;
            white-space: normal !important;
        }
    }
}


// 评分题样式
.num_list_score{
  display: flex;
  align-items: center;
  gap:16px;
  color: #CCCCCC;
  line-height: 1;
  font-size: 14px;

  flex-wrap: wrap;
  li{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px ;
      border: 1px solid #CCCCCC;
      width: 44px;
      height: 32px;
      background-color: white;
      cursor: pointer;

      &.active{
          background-color: #2E64FA;
          color: white;
          border:none;
      }

      &.disabled{
        &.active{
          background-color: #CCCCCC;
        }
        cursor: not-allowed !important;
      }
  }
}

// 评星题样式
.star_list_score{
  display: flex;
  align-items: center;
  gap:16px;
  color: #CCCCCC;
  line-height: 1;
  font-size: 14px;

  word-break: keep-all;

  &.disabled{
    cursor: not-allowed;
  }

  .el-rate{
      display: flex;
      flex-wrap: wrap;
      gap:10px 20px;
      height: auto;
      :deep(.el-rate__item){
        .el-rate__icon{
            font-size: 24px;
        }
       }
   }
}


.app_star{
    flex-direction: column;
    gap:calc(4 * var(--app-rpx));
    font-size:calc(14 * var(--app-rpx));
    .star_explain{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    :deep(.el-rate){
        width: 100%;
        padding:0 calc(16 * var(--app-rpx));
        gap:calc(12 * var(--app-rpx)) calc(42 * var(--app-rpx));
        height: auto;
        .el-rate__item{
            width:calc(24 * var(--app-rpx)) ;
            height:calc(24 * var(--app-rpx)) ;
            .el-rate__icon{
                font-size: calc(24 * var(--app-rpx));
            }
        }
    }
}

</style>