<template>
  <div>
    <drip-form
      :size="'small'"
      ref="applierForm"
      :title="'投保人信息'"
      :list="applierList"
      @highMax="highMax"
      @lowMin="lowMin"
      @getNumValue="getNumValue"
      @select="selectInputRightBtn">
    </drip-form>


    <drip-button
      class="form-submit"
      @click="submit"
      size="large"
      type="orange">
      提交校验
    </drip-button>


    <!-- 弹框 -->
    <drip-popup
      v-model="popup.show"
      :title="popup.title"
      position="bottom"
      :submitBtn="true">
      <div slot="content">
        <drip-picker
          v-if="popup.type === 'applierDepositBank'"
          :slots="bankList"
          value-key="name"
          @change="onValuesChange">
        </drip-picker>
      </div>
      <drip-button
        slot="button"
        @click="popupSelect"
        size="large"
        type="orange">
        完成
      </drip-button>
    </drip-popup>
  </div>
</template>

<script>
import { applierUserFn } from './data'
export default {
  data () {
    return {
      applierList: [],
      relTypeList: [{
        name: '本人',
        value: 1
      }, {
        name: '配偶',
        value: 2
      }, {
        name: '父母',
        value: 3
      }, {
        name: '子女',
        value: 4
      }],
      bankList: [{
        flex: 1,
        defaultIndex: 1,
        values: [{
          name: '招商银行',
          value: 111
        }, {
          name: '北京银行',
          value: 222
        }, {
          name: '中国银行',
          value: 333
        }, {
          name: '濮阳银行',
          value: 444
        }]
      }],
      popup: {
        show: false,
        title: '',
        type: ''
      },
      inputLocation: {},
      pickerMiddleware: []
    }
  },
  mounted () {
    this.applierList = applierUserFn(this.relTypeList)
  },
  methods: {
    lowMin (item, val) {
      window.alert('低于限制')
      console.log(item, val, 11)
    },
    highMax (item, val) {
      window.alert('超出限制')
      console.log(item, val, 11)
    },
    getNumValue (item, val) {
      console.log(item, 33)
    },
    selectInputRightBtn (data) {
      // 存储当前选中对象
      this.inputLocation = data
      const {item: {name, label}} = data
      this.popup = {
        type: name,
        title: label,
        show: true
      }
    },
    onValuesChange (picker, values) {
      // 存储当前picker选择数据
      this.pickerMiddleware = values
    },
    popupSelect () {
      this.popup.show = false
      const { index } = this.inputLocation
      const { name, value } = this.pickerMiddleware[0]
      this.applierList[index].valueView = name
      this.applierList[index].value = value
    },
    submit () {
      let err = []
      this.$refs.applierForm
        .validate(result => {
          if (!result.status) err.push(result)
        })
      if (err.length) {
        this.$notify({
          content: err[0].errmsg
        })
        return
      }
      this.$notify({
        content: '校验通过',
        type: 'success'
      })
    }
  }
}
</script>
<style lang="less">
.form {
  &-submit {
    display: block;
    margin: 20px auto;
  }
  &-down {
    width: 24px;
    height: 24px;
    background: url('https://alioss.sdbao.com/common/drip-right.png') 0 0 no-repeat;
    background-size: contain;
    border: none;
    outline: none;
  }
}
</style>
