<template>
    <div class="assess-model">
        <div> <LHeader :text="title"></LHeader></div>
        <div class="assess-model-container">
            <div class="assess-model-select-title"><span>选择影响因素</span></div>
            <van-checkbox-group class="assess-model-select" v-model="effectValue">
                <van-checkbox
                    v-for="(item) in effectList"
                    :key="item.dictLabel"
                    :name="item.dictLabel"
                    shape="square"
                >
                    <van-icon slot="icon"
                        slot-scope="props" :name="props.checked?'success':''" />
                    {{ item.dictLabel }}
                </van-checkbox>
            </van-checkbox-group>
        </div>
         <footer class="assess-model-footer">
            <van-button  round type="info" @click="toNext">下一步</van-button>
        </footer>
    </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table";
    export default {
        components:{
            LHeader
        },
        data(){
            return {
                title:'影响因素',
                effectList: [], 
                effectValue:[]
            }
        },
        mounted(){
            const present = localStorage.getItem('presentForm')
            let presentForm =present ?JSON.parse(present):null;
            if(this.$store.state.assessModel.step1){
                this.effectValue = this.$store.state.assessModel.step1.split(",")
            }else if(presentForm&&presentForm.factorItems){   // 用户刷新
                this.$store.commit('SET_ASSESS_STEP1',presentForm.factorItems);
                this.$store.commit('SET_ASSESS_STEP2',presentForm.evaluationItemIds);
            }
            this.getData()
        },
        beforeRouteLeave(to,form,next){
            // console.log(e);
            if(to.name==='addPresent'){
                this.$store.commit('SET_ASSESS_STEP1','')
            }
            next()
        },
        methods:{
            toNext(){
               let effectValue = this.effectList.filter(x=>this.effectValue.includes(x.dictLabel))
                if(effectValue.length){
                    effectValue = effectValue.map(x=>x.dictLabel)
                }
                if(this.effectValue.length == 0){
                    this.$toast("请先选择影响因素")
                    return;
                }
                this.$store.commit('SET_ASSESS_STEP1',effectValue.join(','))
                // 保存数据
                this.$router.push({
                    path: '/assess/model/step2',
                    query:{
                        ids:effectValue.join(',')
                    }
                })
            },
            getData(){
                 getFun('/risk/plan/dict/data/list',{
                    dictType:'evaluation_model_classification'
                }).then(res=>{
                    // console.log(res);
                    if(res.code!==200) return;
                    this.effectList = res.data;
                }).catch(()=>{
                    this.$toast('网络请求错误')
                })
            },
            destroy(){
            },
        }
    }
</script>

<style lang="less" scoped>
.assess-model{
    background: #fff;
    z-index: 10;
    .assess-model-select-title{
        font-weight: 400;
        font-size: 14px;
        color: rgba(69,90,100,.6);
        padding: 0.6rem 0.7rem;
    }
    .assess-model-container{
        height: calc(100% - 1.5rem);
        overflow: auto;
    }
    .assess-model-footer{
        width: 100%;
        height: 1.4rem;
        z-index: 9;
        position: fixed;
        bottom: 0px;
        text-align: center;
        line-height: 1rem;
        .van-button{
            width: 90%;
            margin: 0 auto;
        }
    }
}
.van-checkbox-group{
    padding: 0 1rem;
    box-sizing: border-box;
    .van-checkbox{
        background: #fff;
        margin-bottom: 0.4rem;
        padding: 0.4rem;
        border-radius: 3px;
        box-shadow: 1px 1px 3px 1px #dddddd;
        color: #1c1c1c;
        text-align: center;
        ::v-deep .van-icon{
            border-radius: 0.08rem;
            border:none;
            background: transparent;
            color: #1989fa;
        }
          ::v-deep .van-checkbox__label{
            flex: 1;
            text-align: center;
            font-size: 0.45rem;
            transform: translateX(-20px);
        }
    }
    .van-checkbox[aria-checked="true"]{
         box-shadow: 1px 1px 3px 1px #38fc;
    }

}
</style>