{extend name="public/base_el"/}
{block name="css"}
<style>
    #app {
        width: 1200px;
        margin: 0 auto;
    }

    .step {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-info {
        margin-top: 50px;
    }

    .title {
        text-indent: 2em;
        background: white;
        padding-top: 20px;
        font-size: 18px;
        font-weight: 700;
        font-family: "楷体";
    }

    .info-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .evaluate .el-radio-group {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .evaluate .el-radio-group .el-radio {
        margin-top: 20px;
        width: 500px;
    }

    .evaluate .content {
        box-sizing: border-box;
        width: 1200px;
        height: 600px;
        margin-top: 50px;
    }

    .evaluate .detail-title {
        padding-top: 50px;
        padding-right: 50px;
        text-align: center;
    }

    .mt-50 {
        margin-top: 30px;
    }

    .title-list {
        padding-top: 10px;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        height: 600px;
    }

    .title-list ul {
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .title-list li {
        float: left;
        width: 10%;
        height: 35px;
        line-height: 35px;
        border: 1px solid #999;
        text-align: center;
        box-sizing: border-box;
    }

    .title-list .num.finish {
        color: white;
        background: #3da600;
    }

    .title-list .num.current {
        color: white;
        background: #1D6BD0;
    }

    .el-radio:last-child {
        margin-right: 32px;
    }
</style>
{/block}
{block name="body"}
<div class="base-info" v-show="active == 0">
    <h2 style="text-align: center;padding-bottom: 20px;">基础信息</h2>
    {include file="officer/answer_base"/}
</div>
<div class="evaluate" v-show="active == 1">
    <h2 style="text-align: center;padding-bottom: 20px;">测评试卷</h2>
    <div class="title">
        {{list[index].section}}
    </div>
    <div class="content">
        <el-row>
            <el-col :span="24">
                <fieldset style="height:600px;box-sizing: border-box;">
                    <legend>测评条目</legend>
                    <div class="detail-title">{{list[index].no}}、{{list[index].title}}</div>
                    <el-radio-group v-model="answer_detail[list[index].no]">
                        <el-radio
                                :value="option.score"
                                size="large"
                                border
                                :key="list[index].no + '_' + option.score"
                                v-for="option in list[index].option"
                        >{{option.title}}
                        </el-radio>
                    </el-radio-group>
                </fieldset>
            </el-col>
            <!--            <el-col :span="7" style="height:600px;">-->
            <!--                <div class="title-list">-->
            <!--                    <ul>-->
            <!--                        <li-->
            <!--                                class="num"-->
            <!--                                :class="{finish:answer_detail[item.no] > 0,current:i==index}"-->
            <!--                                :key="item.id"-->
            <!--                                v-for="(item,i) in list"-->
            <!--                                @click="changeTitle(i)"-->
            <!--                        >{{item.no}}-->
            <!--                        </li>-->
            <!--                    </ul>-->
            <!--                </div>-->
            <!--            </el-col>-->
        </el-row>
    </div>
    <div class="info-btn mt-50">
        <el-button type="primary" size="large" @click="onNext" v-show="index + 1 != list.length">下一题</el-button>
        <el-button type="primary" size="large" @click="onSubmit" v-loading="loading" v-show="index + 1 == list.length">
            提交
        </el-button>
    </div>
</div>
{/block}
{block name="script"}
<script>
    function v_setup() {
        const base = answer_base();

        const aid = {$aid};
        if (aid > 0) {
            base.aid = Vue.ref(aid);
            base.active = Vue.ref(1);
        } else {
            base.active = Vue.ref(0);
        }
        base.list = {$list};
        base.answer_detail = Vue.ref({});
        base.index = Vue.ref(0);


        base.selectTile = () => {
            if (base.index.value + 1 == base.list.length) {
                return false;
            }
            base.index.value++;
        }
        base.changeTitle = (i) => {
            base.index.value = i;
        }
        base.loading = Vue.ref(false);
        base.onNext = () => {
            if (!base.answer_detail.value[base.list[base.index.value].no]) {
                ElementPlus.ElMessage.error('必须选择一个选项');
                return false;
            }
            postJson("{:url('officer/answerDetailPost')}", {
                id: {$id},
                index: base.answer_detail.value[base.list[base.index.value].no],
                aid: base.aid.value,
                no: base.list[base.index.value].no,
            })
            base.index.value++;
        }
        base.onSubmit = () => {
            if (base.loading.value) {
                return false;
            }

            if (!base.answer_detail.value[base.list[base.index.value].no]) {
                ElementPlus.ElMessage.error('必须选择一个选项');
                return false;
            }

            postJson("{:url('officer/answerDetailPost')}", {
                id: {$id},
                index: base.answer_detail.value[base.list[base.index.value].no],
                aid: base.aid.value,
                no: base.list[base.index.value].no,
            }).then(() => {
                postJson("{:url('officer/answerFinish')}", {
                    id: {$id},
                    aid: base.aid.value,
                }).then(({data}) => {
                    base.loading.value = false;
                    ElementPlus.ElMessage.success('提交成功');
                    if (data > 0) {
                        location.href = "{:url('officer/index')}?id=" + data + "&aid=" + base.aid.value;
                    } else {
                        location.href = "{:url('officer/finish')}";
                    }
                })
            })

        }
        // base.onSubmit = () => {
        //     if (base.loading.value) {
        //         return false;
        //     }
        //     for (let i = 0; i < base.list.length; i++) {
        //         if (base.answer_detail.value[i + 1] === undefined) {
        //             ElementPlus.ElMessage.error(`第${i + 1}题未填写`);
        //             return false;
        //         }
        //     }
        //     base.answer.value.rid = {$id};
        //     base.loading.value = true;
        //     postJson("{:url('officer/answerPost')}", {
        //         id: {$id},
        //         answer: base.answer.value,
        //         answer_detail: base.answer_detail.value
        //     }).then((data) => {
        //         base.loading.value = false;
        //         ElementPlus.ElMessage.success('提交成功');
        //         location.href = "{:url('officer/finish')}";
        //     })
        // }

        return base;
    }
</script>
{/block}