<template>
    <div class="sz_body" v-loading="loading" style="position: unset !important;">
        <div class="test_box" v-for="(item, index) in testList" :key="index">
            <div class="testTitle">{{ item.title }}</div>
            <template v-if="item.type == '1'">
                <div class="testContent" 
                    v-for="(item2, index2) in item.array"
                    :key="index + '-' + index2">
                    <div class="testContent_title">{{ index2 + 1 }}、{{ item2.title }}</div>
                    <div class="testContent_input">
                        <!-- <el-input v-model="item2.uscore" class="c_input" @change="numberPan(index, index2, item2.score)"
                            placeholder="请输入评分" /> -->
                        <el-rate v-model="item2.uscore" :allow-half="false" class="custom-rate"></el-rate>
                        
                    </div>
                </div>
            </template>
            
            <div v-if="item.type == '2'">
                <textarea rows="8" class="binfo_input binfo_textarea" cols v-model="item.answer"
                    :placeholder="lang.ssAnyMoreSupplements"></textarea>
            </div>
        </div>
        <div class="btn">
            <el-button type="primary" size="default" @click="confirm">{{ lang.ssSubmit }}</el-button>

        </div>
    </div>
</template>

<script>
import { myMixin } from "@/mixins/mixin.js"

export default {
  mixins: [myMixin],
    props: {
        courseid: {
            type: String,
            default: ''
        },
        userid: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            testList: [
                {
                    title: this.lang.ssTeachingObjectives,
                    type: '1',
                    array: [
                        {
                            title: this.lang.ssTeachingObjectivesDesc,
                            score: 5,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: this.lang.ssTeachingContent,
                    type: '1',
                    array: [
                        {
                            title: this.lang.ssTeachingContentDesc,
                            score: 5,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: this.lang.ssTeachingProcess,
                    type: '1',
                    array: [
                        {
                            title: this.lang.ssTeachingProcessStructure,
                            score: 10,
                            uscore: 0,
                        },
                        {
                            title: this.lang.ssTeachingProcessLearning,
                            score: 10,
                            uscore: 0,
                        },
                        {
                            title: this.lang.ssTeachingProcessManagement,
                            score: 10,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: this.lang.ssTeachingMethods,
                    type: '1',
                    array: [
                        {
                            title: this.lang.ssTeachingMethodsDesc,
                            score: 20,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: this.lang.ssTeachingTools,
                    type: '1',
                    array: [
                        {
                            title: this.lang.ssTeachingToolsDesc,
                            score: 15,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: this.lang.ssTeachingEvaluation,
                    type: '1',
                    array: [
                        {
                            title: this.lang.ssTeachingEvaluationDesc,
                            score: 10,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: this.lang.ssInnovation,
                    type: '1',
                    array: [
                        {
                            title: this.lang.ssInnovationDesc,
                            score: 10,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: this.lang.ssTeachingEffect,
                    type: '1',
                    array: [
                        {
                            title: this.lang.ssTeachingEffectDesc,
                            score: 5,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: this.lang.ssBonusPoints,
                    type: '1',
                    array: [
                        {
                            title: this.lang.ssBonusPointsDesc,
                            score: 10,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: this.lang.ssComments,
                    type: '2',
                    answer: ''
                },
            ],
            loading: false
        }
    },
    mounted () {
        this.getList();
    },
    methods: {
        numberPan(index, index2, score) {
            let _score = this.testList[index].array[index2].uscore
            if (/[^\d]/.test(_score) || _score < 0) {
                this.$message.error(this.lang.ssEnterPositiveInteger)
                this.testList[index].array[index2].uscore = 0
            }
            if (parseInt(_score) > parseInt(score)) {
                this.$message.error(this.lang.ssCannotEnterScoreAbove)
                this.testList[index].array[index2].uscore = score
            }
            this.$forceUpdate();
        },
        confirm() {
            let params = [
                {
                    cid: this.courseid,
                    uid: this.userid,
                    json: JSON.stringify(this.testList),
                },
            ];
            this.ajax
                .post(this.$store.state.api + "opCourseScore", params)
                .then((res) => {
                    console.log(res.data);
                    this.$message({
                        message: this.lang.ssAddSuccess,
                        type: "success",
                    });
                    this.getList();
                    this.$forceUpdate();
                })
                .catch((err) => {
                    console.error(err);
                });
						this.$emit('insertMemorandum',`使用<span class="btn">评论</span>功能，添加总评`)
        },
        getList() {
            let params =
            {
                cid: this.courseid,
                uid: this.userid,
            };
            this.loading = true
            this.ajax
                .get(this.$store.state.api + "getCourseScoreP", params)
                .then((res) => {
                    console.log(res.data);
                    if(res.data[0].length > 0){
                        this.testList = JSON.parse(res.data[0][0].json)
                    }
                    this.loading = false
                    this.$forceUpdate();
                })
                .catch((err) => {
                    this.loading = false
                    console.error(err);
                });
        }
    },
}
</script>

<style scoped>
.sz_body {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.test_box {
    margin-bottom: 20px;
}

.testTitle {
    font-size: 16px;
    font-weight: 600;
}

.testContent {}

.testContent_title {
    margin-top: 10px;
}

.testContent_input {
    margin-top: 5px;
}

.c_input {
    width: 120px;
}

.binfo_input {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    display: block;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 4px;
    background: #fff;
    font-size: 16px;
    resize: none;
    font-family: "Microsoft YaHei";
    min-height: 48px;
    /* border: 1px solid #3682fc00; */
    border: 1.5px solid #cad1dc;
    margin-top: 10px;
}

.binfo_textarea {
    border: 1.5px solid #cad1dc;
    font-size: 16px;
    resize: none;
    /* background: #f6f6f6; */
    font-family: "Microsoft YaHei";
}

.binfo_input:focus-visible {
    border: 1.5px solid #3681fc !important;
}

.btn {
    text-align: right;
    position: sticky;
    left: 0;
    bottom: 15px;
    width: fit-content;
    display: flex;
    justify-content: flex-end;
    margin-left: calc(100% - 80px);
}

.custom-rate{
    height: auto;
    margin-top: 10px;
}

.custom-rate >>> .el-rate__icon {
  font-size: 28px;
  margin-right: 5px;
}
.custom-rate >>> .el-icon-star-on:before{
  font-size: 32px;
}

.custom-rate >>> .el-rate__icon.hover{
    transform: scale(1);
}
</style>