<template>
    <Framework>
        <div class="difficult">
            <div class="difficult__title">
                特困供养测算
            </div>
            <div class="difficult__select">
                <div class="item">
                    <h5>供养方式：</h5>
                    <el-radio-group v-model="offerType">
                        <el-radio value="28111" size="large">集中供养</el-radio>
                        <el-radio value="28110" size="large">分散供养</el-radio>
                    </el-radio-group>
                </div>
                <div class="item">
                    <h5>户籍性质：</h5>
                    <el-radio-group v-model="accountsType">
                        <el-radio value="1" size="large">城市户口</el-radio>
                        <el-radio value="0" size="large">农村户口</el-radio>
                    </el-radio-group>
                </div>

            </div>
            <div class="difficult__select2">
                <div class="title">
                    <img src="../../assets/images/file.png" alt="">
                    自理情况
                </div>
                <div class="select">
                    <Radio v-for="(item,index ) in selfCare " :key="index" :value="item.value" @change="(value)=>{item.value = value}" :title="item.label" :options="options" :width="'20.83vw'"></Radio>
                </div>
            </div>
            <div class="calculation">
                <img @click="beginCalc" src="../../assets/images/btn1.png" alt="">
            </div>
        </div>
        <div class="back">
            <router-link to="/"><img src="../../assets/images/btn_toHome.png" alt=""></router-link>
            <router-link to="/rescueCalculation"><img src="../../assets/images/btn_back.png" alt=""></router-link>

        </div>

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

export default {
  components: { Radio, Framework },
  data () {
    return {
      offerType: '28111',
      accountsType: '1',
      selfCare: [
        {
          value: 1,
          label: '自主吃饭'
        },

        {
          value: 1,
          label: '自主穿衣'
        },
        {
          value: 1,
          label: '自主上下床'
        },
        {
          value: 1,
          label: '自主如厕'
        },
        {
          value: 1,
          label: '自主室内行走'
        },
        {
          value: 1,
          label: '自主洗澡'
        }
      ],

      options: [
        { value: 1, label: '是' },
        { value: 2, label: '否' }
      ],
      nurseType: ''
    }
  },
  methods: {
    beginCalc () {
      let count = 0
      for (const item of this.selfCare) {
        if (item.value === 2) {
          count++
        }
      }

      if (count === 0) {
        this.nurseType = '28200'
      } else if (count <= 3) {
        this.nurseType = '28210'
      } else if (count > 3) {
        this.nurseType = '28211'
      }
      this.archiveAmountCalc()
    },

    async archiveAmountCalc () {
      const params = {
        archive_type: 'NTF', // 档案类型
        party_id: '5001560001', // 区划 ：
        is_city: this.accountsType,
        support_statu: this.offerType, // 供养方式
        nurse_type: this.nurseType, // 护理类型
        income_sum: '0'
      }

      const res = await this.$http.post('/api/archive/archiveAmountCalc.do', params)
      if (res.code !== 200) return this.$message.error(res.msg)
      this.toResults(res.data)
    },
    toResults (data) {
      data.type = 'NTF'
      const params = JSON.stringify(data)
      localStorage.setItem('calcData', params)
      this.$router.push({ name: 'results' })
    }
  }
}
</script>

<style scoped lang="less">
.difficult {
    height: 44.47vw;
    background-color: #fff;

    &__title {
        height: 4.68vw;
        border-bottom: 1px solid #D7D7D7;
        text-align: center;
        line-height: 4.68vw;
        font-size: 1.4vw;
        color: #347BD5;
        font-weight: 500;

    }

    &__select {
        padding: 1.5vw 0;
        //border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 11.77vw;
        font-size: 1.1vw;
        .item{
            display: flex;
            align-items: center;
            :deep(.el-radio.el-radio--large .el-radio__label){
                font-size: 0.93vw;
            }
            :deep(.el-radio.el-radio--large .el-radio__inner){
                width: 0.93vw;
                height: 0.93vw;
            }
        }
    }
    &__select2{
        padding: 0  2vw;
        .title{
            height: 2.8vw;
            display: flex;
            align-items: center;
            font-size: 1.2vw;
            border-bottom: 1px solid #e5e5e5;
            //background-color: pink;
            img{
                width: 1.66vw;

            }

        }
        .select{
            padding: 1.2vw 10vw 1.2vw 13.5vw;

            display: flex;
            gap: 1vw;
            flex-wrap: wrap;

        }
    }
    .calculation{
        display: flex;
        justify-content: center;
        margin-top: 3.5vw;
        img{
            width: 10.42vw;

        }
    }

}
.back{
    margin-top: 1.2vw;
    display: flex;
    gap: 2vw;
    padding-left:71.87vw ;
    img{
        width: 8.75vw;

    }
}
</style>
