<template>
  <div class="add">
    <div class="form-group">
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="left">
            <i style="opacity: 0;">*</i>
            <span>产业帮扶</span>
          </div>
          <div class="right">
            <AiSelect dict="fpIndustrialAssistance" v-model="form.industrialAssistance"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="left">
            <i style="opacity: 0;">*</i>
            <span>健康帮扶</span>
          </div>
          <div class="right">
            <AiSelect dict="fpHealthAssistance" v-model="form.healthAssistance"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="left">
            <i style="opacity: 0;">*</i>
            <span>就业帮扶</span>
          </div>
          <div class="right">
            <AiSelect dict="fpEmploymentAssistance" v-model="form.employmentAssistance"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="left">
            <i style="opacity: 0;">*</i>
            <span>教育帮扶</span>
          </div>
          <div class="right">
            <AiSelect dict="fpEducationalAssistance" v-model="form.educationalAssistance"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="left">
            <i style="opacity: 0;">*</i>
            <span>金融帮扶</span>
          </div>
          <div class="right">
            <AiSelect dict="fpFinancialAssistance" v-model="form.financialAssistance"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="left">
            <i style="opacity: 0;">*</i>
            <span>社会帮扶</span>
          </div>
          <div class="right">
            <AiSelect dict="fpSocialAssistance" v-model="form.socialAssistance"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="left">
            <i style="opacity: 0;">*</i>
            <span>公益岗位帮扶</span>
          </div>
          <div class="right">
            <AiSelect dict="fpPublicWelfarePostAssistance" v-model="form.publicWelfarePostAssistance"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="left">
            <i>*</i>
            <span>是否消除风险</span>
          </div>
          <div class="right">
            <u-radio-group v-model="form.isRisk" @change="onRiskChange">
              <u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
            </u-radio-group>
          </div>
        </div>
      </div>
      <div class="form-item" v-if="form.isRisk === '01'">
        <div class="form-item__wrapper">
          <div class="left">
            <i>*</i>
            <span>风险消除方式</span>
          </div>
          <div class="right">
            <AiSelect dict="fpRiskEliminationMethod" v-model="form.riskEliminationMethod"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item" v-if="form.isRisk === '01'">
        <div class="form-item__wrapper">
          <div class="left">
            <i>*</i>
            <span>风险消除时间</span>
          </div>
          <div class="right">
            <AiDate v-model="form.riskEliminationDate"></AiDate>
          </div>
        </div>
      </div>
    </div>
    <div class="btn" hover-class="text" @click="submit">保存</div>
  </div>
</template>

<script>
  import AiSelect from '@/components/AiSelect'
  import AiDate from '@/components/AiDate'

  export default {
    data () {
      return {
        result: '',
        form: {
          isRisk: '02',
          riskEliminationMethod: '',
          riskEliminationDate: '',
          industrialAssistance: '',
          healthAssistance: '',
          employmentAssistance: '',
          educationalAssistance: '',
          financialAssistance: '',
          socialAssistance: '',
          publicWelfarePostAssistance: ''
        },
        id: ''
      }
    },

    components: {
      AiDate,
      AiSelect
    },

    onLoad (query) {
      uni.showLoading()
      this.$dict.load(['fpYesOrNo', 'fpRiskEliminationMethod', 'fpIndustrialAssistance', 'fpHealthAssistance', 'fpEmploymentAssistance', 
      'fpEducationalAssistance', 'fpFinancialAssistance', 'fpSocialAssistance', 'fpPublicWelfarePostAssistance']).then(() => {
        this.getInfo(query.id)
      })
      this.id = query.id
    },

    methods: {
      getInfo (id) {
        this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            this.form = {
              ...this.form,
              ...res.data
            }

            if (this.form.riskEliminationMethod) {
              this.form.isRisk = '01'
            }
          }

          uni.hideLoading()
        })
      },

      onRiskChange (e) {
        if (e === '02') {
          this.form.riskEliminationMethod = ''
          this.form.riskEliminationDate = ''
        }
      },

      submit () {
        if (!this.form.isRisk) {
          return this.$u.toast('请选择是否消除风险')
        }

        if (this.form.isRisk === '01') {
          if (!this.form.riskEliminationMethod) {
            return this.$u.toast('请选择风险消除方式')
          }

          if (!this.form.riskEliminationDate) {
            return this.$u.toast('请选择风险消除时间')
          }
        }

        uni.showLoading()
        this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
          ...this.form,
          riskEliminationMethod: this.form.isRisk ? this.form.riskEliminationMethod : '',
          id: this.id,
          status: this.form.isRisk === '01' ? 1 : ''
        }).then(res => {
          if (res.code === 0) {
            this.$u.toast(this.isEdit ? '保存成功' : '提交成功')
            uni.$emit('reload')
            uni.navigateBack({
              delta: 1
            })
          }
          uni.hideLoading()
        })
      }
    }
  }
</script>

<style lang="scss">
  .add {
    padding-bottom: 120px;

    & > div {
      margin-bottom: 16px;
      background: #fff;
    }

    ::v-deep .u-radio {
      &:last-child {
        .u-radio__label {
          margin-right: 0;
        }
      }
    }

    .form-group {
      .form-item {
        padding-left: 32px;

        .form-item__wrapper {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 112px;
          border-bottom: 1px solid #E4E5E6;
        }

        .right {
          height: 112px;
          line-height: 112px;
          padding-right: 32px;

          span {
            font-size: 30px;
            color: #999999;
          }
        }

        input {
          height: 100%;
          text-align: right;
        }

        .left {
          display: flex;
          align-items: center;

          span {
            color: #333333;
            font-size: 32px;
          }

          i {
            margin-right: 4px;
            font-style: normal;
            color: #FF4466;
            font-size: 32px;
          }
        }

        &:last-child {
          .form-item__wrapper {
            border: none;
          }
        }
      }
    }

    .form-item__imgs {
      padding: 32px;

      .form-item__title {
        display: flex;
        align-items: center;
        margin-bottom: 34px;

        h2 {
          color: #333333;
          font-weight: normal;
          font-size: 32px;
        }

        i {
          color: #999999;
          font-size: 28px;
          font-style: normal;
        }
      }

      textarea {
        width: 100%;
      }
    }

    .form-type {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 112px;
      padding: 0 32px;

      h2 {
        font-weight: normal;
        color: #333333;
        font-size: 32px;
      }

      span {
        color: #999999;
        font-size: 28px;
      }
    }

    .btn {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 11;
      width: 100%;
      height: 112px;
      line-height: 112px;
      margin: 0;
      text-align: center;
      color: #FFFFFF;
      font-size: 32px;
      background: #3192F4;
    }
  }
</style>
