<template>
    <Framework>
        <div class="result">
            <div class="result__title">
                <img src="@/assets/images/jsq.png" alt="">
                你的{{ title }}测算结果
            </div>
            <div class="result__content">
                <div class="empty" v-if="calcData.amount_flag">
                    <img src="../../assets/images/empty2.png" alt="">
                    根据测算，你不满足政策条件！
                </div>
                <div v-else>
                    预估你领取 <br>
                    <div v-for="(item,index) in calcData.amount_mx" :key="index">{{ item.class_name }}：<span>{{item.amount}}元/月</span>；</div>
                </div>
                <img src="@/assets/images/result.png" alt="">
            </div>
            <div class="tip">
                <div class="tip__title">
                    <img src="../../assets/images/tip.png" alt="">
                    <span>温馨提示</span>
                </div>
                <div class="tip__content">
                    此工具根据相关政策文件进行的粗略测算，实际领取金额根据实际情况由工作人员核查后为准。
                </div>
            </div>
            <div class="result__btn">
                <router-link to="/"><img src="../../assets/images/btn_toHome.png" alt=""></router-link>
                <router-link :to="{ name: backUrl, query: { type: calcData.type }}">
                    <img src="../../assets/images/btn_back.png" alt="">
                </router-link>
            </div>

        </div>
    </Framework>

</template>
<script>
import Framework from '@/components/framework.vue'

export default {
  components: { Framework },
  created () {
    this.calcData = localStorage.getItem('calcData')
    this.calcData = JSON.parse(this.calcData)
    switch (this.calcData.type) {
      case 'NTF':
        this.title = '特困'
        this.backUrl = 'difficult'
        break
      case 'BLAN_CITY':
        this.title = '城市低保'
        this.backUrl = 'infoFill'
        break
      case 'BLAN_SIDE':
        this.title = '农村低保'
        this.backUrl = 'infoFill'
        break
    }
  },
  data () {
    return {
      title: '',
      backUrl: '',
      calcData: {
        amount_flag: true
      }
    }
  }
}

</script>
<style scoped lang="less">
.result {
    height: 48.96vw;
    background-color: #fff;
    padding-left: 9.38vw;
    padding-top: 9vw;

    &__title {
        display: flex;
        font-size: 1.46vw;
        color: #347BD5;

        img {
            width: 1.67vw;
        }

    }

    &__content {
        width: 77.6vw;
        height: 12.16vw;
        border: 1px solid #D7D7D7;
        border-radius: 8px;
        margin-top: 0.6vw;
        padding: 1.4vw 2.1vw;
        font-size: 0.83vw;
        line-height: 2vw;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            display: inline-block;
            color: #FF0000;
            font-size: 1.25vw;

        }

        img {
            display: inline-block;
            width: 18.65vw;
            height: 18.65vw;

        }

        .empty {
            font-size: 18px;
            color: #333;
            display: flex;
            align-items: center;
            img {
                width: 215px;
                height: 103px;
            }

        }

    }

    .tip{
        width: 77.62vw;
        height: 8.55vw;
        //margin: 7.08vw auto 0;
        background-color: #eff7ff;
        border: 1px dashed #B7D7FF;
        padding: 1.67vw 1.29vw;
        border-radius: 4px;
        margin-top: 0.6vw;

        &__title{
            display: flex;
            align-items: center;
            gap: 0.52vw;
            font-size: 1.25vw;
            color: #347BD5;
        }
        &__content{
            font-size: 1.15vw;
            color: #333333;
            margin-top: 1vw;
        }
        img{
            width: 1.67vw;
        }
    }

    &__btn {
        margin-top: 3.02vw;
        display: flex;
        gap: 2vw;

        img {
            width: 8.75vw;

        }
    }
}
</style>
