<template>
    <Framework>
        <div class="info-fill">
            <div class="title">{{ title }}</div>
            <div class="input">
                <span>家庭共同生活成员数</span>
                <div class="num-step">
                    <img @click="reduceFamily" src="../../assets/images/reduce.png" alt="">
                    <input disabled v-model="population" type="text">
                    <img @click="addFamily" src="../../assets/images/add.png" alt="">
                </div>
                <span style="margin-left: 6.25vw">家庭月收入</span>
                <el-input v-model="income" placeholder="请输入">
                    <template #suffix>元</template>
                </el-input>
                <span style="margin-left: 6.25vw">家庭刚性支出</span>
                <el-input v-model="expenditure" placeholder="请输入">
                    <template #suffix>元</template>
                </el-input>
            </div>
            <div class="family">
                <div class="family__title">
                    <img src="../../assets/images/file.png" alt="">
                    家庭成员情况
                </div>
                <div class="family__content">
                    <div class="family__content__left">

                        <div class="family-item" v-for="(item,index) in familyMember" :key="index">
                            <div class="item-title">家庭成员{{ index + 1 }}</div>
                            <div class="item-radio">
                                <Radio :value="item.bodyStatus" @change="(value)=>{item.bodyStatus = value}"
                                       title="身体情况" :options="body" :width="'20vw'"></Radio>
                                <Radio :value="item.healthStatus" @change="(value)=>{item.healthStatus = value}"
                                       title="健康状态" :options="health" :width="'16.95vw'"></Radio>
                                <Radio :value="item.otherStatus" @change="(value)=>{item.otherStatus = value}"
                                       title="其他情况" :options="other" :width="'29.85vw'"></Radio>
                            </div>
                        </div>

                    </div>
                    <div class="family__content__right">
                        <div class="trivia">
                            <img src="../../assets/images/book.png" alt="">
                            <span>小知识</span>

                        </div>
                        <h5>1、残疾</h5>
                        <span>持有《残疾人证》。</span>
                        <h5>2、重度残疾</h5>
                        <span>持有《残疾人证》且残疾等级为一级或者二级。</span>
                        <h5>3、学龄前儿童</h5>
                        <span>6岁以下儿童。</span>
                        <h5>4、在校生</h5>
                        <span>在校接受全日制本科及以下学历教育。</span>

                    </div>
                </div>

                <!--             Radio-->
            </div>
            <div class="calculation">
                <!--                <router-link to="/results">-->
                <img @click="beginCalc" src="../../assets/images/btn1.png" alt="">
                <!--                </router-link>-->
            </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 Radio from '@/components/radio.vue'
import Framework from '../../components/framework.vue'

export default {
  components: {
    Framework,
    Radio
  },
  created () {
    const type = this.$route.query.type
    if (type === 'BLAN_SIDE') {
      this.title = '农村低保测算'
      this.archiveType = 'BLAN_SIDE'
    }
  },
  // 监听population
  watch: {
    population (newValue) {
      if (newValue <= 1) {
        this.population = 1
      } else if (newValue >= 10) {
        this.population = 10
      }
    }
  },

  data () {
    return {
      expenditure: 0,
      archiveType: 'BLAN_CITY',
      title: '城市低保测算',
      radio1: 1,
      radio2: 1,
      population: 1,

      income: 0,
      body: [
        {
          value: 1,
          label: '正常'
        },
        {
          value: 2,
          label: '重度残疾'
        },
        {
          value: 3,
          label: '残疾'
        }
      ],
      health: [
        {
          value: 1,
          label: '正常'
        },
        {
          value: 2,
          label: '重度瘫痪'
        }

      ],
      other: [
        {
          value: 1,
          label: '成年人'
        },
        {
          value: 2,
          label: '学龄前儿童'
        },
        {
          value: 3,
          label: '在校生'
        },
        {
          value: 4,
          label: '70岁以上老人'
        }
      ],
      familyMember: [
        {
          bodyStatus: 1,
          healthStatus: 1,
          otherStatus: 1
        }

      ]

    }
  },
  methods: {
    beginCalc () {
      const personList = []
      for (const item of this.familyMember) {
        const person = {
          age_id: '',
          work_status_id: ''
        }
        // 身体情况
        if (item.bodyStatus === 1) {
          person.is_disablity = '0' // 是否残疾
          person.is_sdisablity = '0'//  是否重残
        } else if (item.bodyStatus === 2) {
          person.is_disablity = '1'
          person.is_sdisablity = '1' // 是否重残
        } else if (item.bodyStatus === 3) {
          person.is_disablity = '1'// 是否残疾
          person.is_sdisablity = '0'
        }
        // 健康状态
        if (item.healthStatus === 1) {
          person.health_id = '29051' // 正常
        } else if (item.healthStatus === 2) {
          person.health_id = '1510153855323340800' // 重度瘫痪
        }
        // 其他情况
        if (item.otherStatus === 1) {
          person.work_status_id = '22515' // 成年人  无业
        } else if (item.otherStatus === 2) {
          person.work_status_id = '22520' // 学龄前儿童
        } else if (item.otherStatus === 3) {
          person.work_status_id = '1510153579300388864' // 在校生
        } else if (item.otherStatus === 4) {
          person.age_id = '1510154291249938432' // 70岁老人
        }
        personList.push(person)
      }
      this.archiveAmountCalc(personList)
    },

    async archiveAmountCalc (personList) {
      const income = this.income - this.expenditure
      const params = {
        archive_type: this.archiveType, // 档案类型
        party_id: '5001560001', // 区划 ：
        family_ensure_count: this.population, // 人口数
        income_sum: income, // 收入：
        personList: personList

      }
      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 = this.archiveType
      const params = JSON.stringify(data)
      localStorage.setItem('calcData', params)
      this.$router.push({ name: 'results' })
    },

    addFamily () {
      if (this.population >= 10) return
      this.population++

      this.familyMember.push({
        bodyStatus: 1,
        healthStatus: 1,
        otherStatus: 1
      })
    },
    reduceFamily () {
      if (this.population <= 1) return
      this.population--
      this.familyMember.pop()
    }
  }

}
</script>

<style scoped lang="less">

.info-fill {
    min-height: 44.48vw;
    background-color: #fff;
    padding-bottom: 1.56vw;

    .title {
        height: 4.58vw;
        border-bottom: 1px solid #D7D7D7;
        color: #347BD5;
        font-size: 1.46vw;
        text-align: center;
        line-height: 4.58vw;
    }

    .input {
        height: 4.95vw;
        //background-color: pink;
        padding-left: 8.97vw;
        //border: 1px solid red;
        display: flex;
        align-items: center;
        gap: 0.8vw;

        .num-step {
            width: 9.37vw;
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                width: 1.77vw;
                cursor: pointer;

            }

            input {
                width: 4.17vw;
                height: 2.5vw;
                font-size: 1.46vw;
                border: 1px solid #347BD5;
                border-radius: 4px;
                outline: none;
                text-align: center;

            }

        }

        span {
            font-size: 1.25vw;

        }

        .el-input {
            width: 13.26vw;
            height: 2.5vw;
            border: 1px solid #347BD5;
            border-radius: 4px;

            :deep(.el-input__wrapper) {
                box-shadow: none;
                font-size: 1.4vw;

            }

        }

    }

    .family {
        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;

            }

        }

        &__content {
            display: flex;

            &__left {
                flex: 1;

                .family-item {

                }

                .item-title {
                    margin: 0.98vw 0;
                    font-size: 0.98vw;

                }

                .item-radio {
                    display: flex;
                    gap: 1vw;
                }

            }

            &__right {
                width: 19.69vw;
                height: 22.81vw;
                border: 1px solid #D7D7D7;
                margin: 2.9vw 0 0.6vw 0;
                border-radius: 8px;
                padding: 1vw;

                .trivia {
                    display: flex;
                    align-items: center;
                    gap: 0.3vw;
                    font-size: 1.25vw;

                    img {
                        width: 1.66vw;
                    }
                }

                h5 {
                    font-size: 0.94vw;
                    font-weight: 500;
                    color: #333;
                    line-height: 1.87vw;
                    margin-top: 0.5vw;
                }

                span {
                    font-size: 0.83vw;
                    line-height: 1.87vw;
                    color: #333;
                }
            }

        }

    }

    .calculation {
        img {

            width: 10.42vw;
            margin-left: 35vw;
            margin-top: 1.5vw;
        }
    }

}

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

    img {
        width: 8.75vw;

    }
}
</style>
