<!-- 
Codes Generated By ebiz-lowcode:
http://www.ebiz-interactive.com/
-->

<template>
<div class="container">
  <van-form class="generatedForm " label-align="left" label-width="80px" ref="vForm">
    <van-cell-group title="投保人" inset>
      <van-form ref="msubform28085">
        <van-field label="姓名" input-align="right" v-model="msubform28085.appntName" type="text" clearable>
        </van-field>
        <van-field :value="$generatedFormat.formatLabelFun(msubform28085.appntSex,'sex')" label="性别"
          input-align="right" @click="appntSex_show = true" readonly is-link />
        <van-popup v-model="appntSex_show" round position="bottom">
          <van-picker show-toolbar :columns="appntSexOptions" @confirm="appntSexOk" value-key="label"
            ref="appntSex_pickerRef">
          </van-picker>
        </van-popup>
      </van-form>
    </van-cell-group>
    <van-cell-group title="被保人" inset>
      <van-form ref="msubform26325">
        <van-field label="姓名" input-align="right" v-model="msubform26325.insuredName" type="text" clearable>
        </van-field>
      </van-form>
    </van-cell-group>
    <div class="map-form-container" v-for="(item,index) in benfList" :key="index">
      <van-cell-group title="受益人" inset>
        <van-field label="姓名" input-align="right" v-model="benfList[index].name" type="text" clearable
          v-validate="'required'" name="姓名" required>
        </van-field>
        <van-field class="undefined" input-align="right" label="性别" label-align="left">
          <template #input>
            <van-radio-group v-model="benfList[index].sex" direction="horizontal">
              <van-radio v-for="(item, index) in sexOptions" :key="index" :name="item.value" icon-size="20px">
                {{item.label}}</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field right-icon="arrow" label="年龄" input-align="right" v-model="benfList[index].ageLabel"
          :readonly="true" type="text" clearable @click="(event)=>{showAgePicker(index)}">
        </van-field>
        <van-field right-icon="arrow" label="出生日期" input-align="right" v-model="benfList[index].birthday"
          :readonly="true" type="text" clearable @click="(event)=>{showBirthday(index)}">
        </van-field>
        <van-field right-icon="arrow" label="职业" input-align="right" v-model="benfList[index].occLabel"
          :readonly="true" type="text" clearable @click="(event)=>{openOcc(index)}">
        </van-field>
        <van-row>
          <van-col :span="24" class="grid-cell text-center">
            <van-button type="danger" size="small" plain round icon="delete"
              @click="(event)=>{del_benf(index)}" class="sdsd">删除受益人</van-button>
          </van-col>
        </van-row>
      </van-cell-group>
    </div>
    <van-row>
      <van-col :span="24" class="grid-cell text-center pd10">
        <van-button type="warning" size="normal" round @click="add_benf">增加受益人</van-button>
      </van-col>
    </van-row>
    <van-button type="warning" size="large" :disabled="true" @click="submitForm">下一步</van-button>
    <van-popup v-model="occPopup" :round="true" position='bottom'>
      <van-cascader :options="mpopupcascader18663Options"
        :field-names='{text: "label", value: "value", children: "children"}' :closeable="false"
        @finish="chooseOcc">
      </van-cascader>
    </van-popup>
    <van-popup v-model="birthdayPicker" :round="true" position='bottom'>
      <van-datetime-picker type="date" v-model="vForm.mpopupdate77520" :visible-item-count="6"
        :formatter="foramterDate" @confirm="saveBir"></van-datetime-picker>
    </van-popup>
    <van-popup v-model="agePicker" :duration="0.3" :round="true" position='bottom'>
      <van-picker show-toolbar :columns="agePickerOptions" @confirm="ageConfirm" value-key="label"
        ref="agePicker_pickerRef">
      </van-picker>
    </van-popup>
  </van-form>
</div>

</template>

<script>
import insuranceInfo_fun from './insuranceInfo.js'
// 按需引入
import {
  Field,
  Search,
  Popup,
  Picker,
  Checkbox,
  Form,
  CellGroup,
  Radio,
  RadioGroup,
  Button,
  Col,
  Row,
  Cascader,
  Tag,
  DatetimePicker
}
from 'vant'
export default {
  components: {
    // 按需引入的组件部分
    [Field.name]: Field,
    [Search.name]: Search,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Checkbox.name]: Checkbox,
    [Form.name]: Form,
    [CellGroup.name]: CellGroup,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Button.name]: Button,
    [Col.name]: Col,
    [Row.name]: Row,
    [Cascader.name]: Cascader,
    [Tag.name]: Tag,
    [DatetimePicker.name]: DatetimePicker,
  },
  props: {},
  mixins: [insuranceInfo_fun],
  data() {
    return {
      vForm: {
        mpopupcascader18663: [2],
        mpopupdate77520: null,
        agePicker: false,
      },
      // 
      msubform28085: {
        appntName: "",
        appntSex: 1,
        appntSex_label: '',
      },
      msubform26325: {
        insuredName: "",
      },
      appntSexOptions: [{
        "label": "男",
        "value": "0"
      }, {
        "label": "女",
        "value": "1"
      }],
      sexOptions: [{
        "label": "男",
        "value": 1
      }, {
        "label": "女",
        "value": 2
      }],
      mpopupcascader18663Options: [{
        "children": [{
          "label": "child 1",
          "value": 11
        }, {
          "label": "child 2",
          "value": 12
        }],
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      agePickerOptions: [{
        "label": "1周岁",
        "value": "1"
      }, {
        "label": "2周岁",
        "value": 2
      }, {
        "label": "3周岁",
        "value": 3
      }, {
        "label": "4周岁",
        "value": 4
      }],
      benfList: [{
        "name": "",
        "sex": "",
        "age": "",
        "ageLabel": "",
        "birthday": "",
        "occLabel": "",
        "occCode": ""
      }],
      occPopup: false,
      birthdayPicker: false,
      agePicker: false,
      appntSex_show: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    appntSexOk(value) {
      this.msubform28085.appntSex = value.value
      this.appntSex_show = false
    },
    showAgePicker(index) {
      this.agePicker = true
      this.index = index
    },
    showBirthday(index) {
      this.birthdayPicker = true
      this.index = index
    },
    openOcc(index) {
      this.occPopup = true
      this.index = index
    },
    del_benf(index) {
      if (this.benfList.length > 1) {
        this.benfList.splice(index, 1)
      }
    },
    add_benf(event) {
      this.benfList.push({})
    },
    submitForm() {
      this.$validator.validate().then((ev) => {
        if (!ev) {
          this.$toast(this.$validator.errors.all()[0]);
          return false
        }
        //通过逻辑部分
      })
    },
    chooseOcc(cascaderData) {
      this.benfList[this.index].occLabel = cascaderData['selectedOptions'][cascaderData.tabIndex].label
      this.benfList[this.index].occCode = cascaderData['selectedOptions'][cascaderData.tabIndex].value
      this.occPopup = false
    },
    foramterDate(type, val) {
      if (type === 'year') {
        return `${val}年`;
      }
      else if (type === 'month') {
        return `${val}月`;
      }
      return val;
    },
    saveBir(pickerData) {
      this.benfList[this.index].birthday = this.$utils.formatDate(pickerData, "yyyy-MM-dd")
      this.birthdayPicker = false
    },
    ageConfirm(value) {
      this.benfList[this.index].age = value.value
      this.benfList[this.index].ageLabel = value.label
      this.agePicker = false
    },
  }
}

</script>

<style lang="scss">


</style>

<style lang="scss" scoped>
 .filter-popup {
   ::v-deep .van-picker__toolbar {
     height: 80px;
   }
 }
 
 ::v-deep .title-wrapper {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }
 
 ::v-deep .title-action-wrapper {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 10px;
   padding-bottom: 0px;
   box-sizing: border-box;
 }
 
 ::v-deep .title-search-wrapper {
   width: 100%;
   display: block;

   .van-search__action {
     display: inline-flex;
     justify-content: center;
     align-items: center;
   }
 }
 
 .generatedForm {
   background: #EEEEEE;
   padding: 5px
 }
 



</style>