{extend name="public/base"/}
{block name="css"}
<style>
    .title {
        text-indent: 2em;
        background: white;
        padding: 0 10px 20px 10px;
        font-size: 14px;
    }
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
>
    <template #title>
        <span class="text-white">人资测评系统</span>
    </template>
</van-nav-bar>
<van-steps :active="active">
    <van-step>基础信息</van-step>
    <van-step v-for="(item,key) in list" :key="item.id">{{key + 1}}</van-step>
</van-steps>
<div v-show="active==0">
    {include file="officer/answer_base"/}
</div>
<div v-for="(item,index) in list" :key="'list_' + item.id" v-show="active==index+1">
    <div class="title">{{item.name}}</div>
    <van-radio-group v-model="answer_detail[title_item.no]" style="margin-top:10px" :key="'title_' + title_item.id" v-for="(title_item,title_index) in item.title_list">
        <van-cell-group>
            <van-cell :title="title_item.no + '.' + title_item.title"></van-cell>
            <van-cell :title="option_item.title" clickable @click="answer_detail[title_item.no] = option_index" :key="'option_' + title_item.id + '_' + option_index" v-for="(option_item,option_index) in title_item.option">
                <template #right-icon>
                    <van-radio :name="option_index" ></van-radio>
                </template>
            </van-cell>
        </van-cell-group>
    </van-radio-group>
    <div style="margin: 16px;display: flex;align-items: center;justify-content: space-around;">
        <div style="width:40%">
            <van-button type="success" size="large" @click="onStep(index)">
                上一步
            </van-button>
        </div>
        <div style="width:40%">
            <van-button type="primary" size="large" @click="onStep(index+2)" v-show="list.length > index+1">
                下一步
            </van-button>
            <van-button type="primary" size="large" @click="onSubmit" v-show="list.length <= index+1">
                提交
            </van-button>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = answer_base();

        base.list = {$list};
        let sum = 0;
        for (let item of base.list) {
            sum += item.title_list.length;
        }

        base.active = Vue.ref(0);
        base.onStep = (active) => {
            base.active.value = active;
            window.scrollTo({
                top: 0,
                behavior: 'smooth', // 平滑滚动
            });
        }
        base.onSubmit = () => {
            for (let i = 0; i < sum; i++) {
                if (base.answer_detail.value[i+1] === undefined) {
                    vant.showToast(`第${i+1}题未填写`);
                    return false;
                }
            }
            base.answer.value.rid = {$id};
            vant.showLoadingToast({
                message: '正在提交中...',
                forbidClick: true,
                duration: 0,
            });
            postJson("{:url('officer/answerPost')}",{id:{$id},answer:base.answer.value,answer_detail:base.answer_detail.value}).then((data) => {
                vant.closeToast();
                vant.showToast('提交成功');
                location.href = "{:url('officer/finish')}";
            })
        }

        base.answer_detail = Vue.ref({});

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