bxs-tools-ui 3.3.3 → 3.4.0

package/packages/product-info/index.vue

@@ -14,279 +14,129 @@
       </div>
     </section>
 
-    <template v-for="ins in filterInsuranceList">
-      <van-form
-        :ref="`insuranceForm${ins.key}`"
-        :key="ins.key"
-        :class="['bxt-product-info-form', `bxt-product-insurance-id-${ins.key}`, isNextInsuranceFollow(ins) ? 'bxt-product-info-form-follow' : '']"
-        :show-error="false"
-        @submit.native.prevent="closeKeyBoard()"
-      >
-        <template v-for="ele in ins.eleOrderList">
-          <van-field v-if="['cmCommonTitle'].includes(ele.componentName)" :key="ele.key" :name="ele.key" :rules="getElementRules(ele)">
-            <template #input>
-              <CommonTitle
-                v-model="ele.value"
-                :key="`${productData.key}_${ins.key}_${ele.key}`"
-                :name="ele.key"
-                :code="ins.code"
-                :huomian-tag="getInsuranceTitleHmTag(ins)"
-                :status-tag="getInsuranceSaleStatusTag(ins)"
-                :huomian-tips="!!$listeners.openCrmPerson && getHuomianTips(ins, ele)"
-                :label="ele.labelName"
-                :style="{
-                  fontSize: '17px',
-                  fontWeight: 'bold'
-                }"
-                :disabled="getElementDisabled(ele)"
-                :data-stat-id="`product_insurance_${ele.key}`"
-                @change="onChange({ insData: ins, eleData: ele })"
-                @openCrmPerson="$emit('openCrmPerson')"
-              />
-            </template>
-          </van-field>
+    <template v-for="block in displayBlocks">
+      <!-- 普通险（在前） -->
+      <ProductInsuranceForm
+        v-if="block.type === 'normal'"
+        :ref="`insuranceForm${block.ins.key}`"
+        :key="block.ins.key"
+        v-bind="insFormBind(block.ins)"
+        @change="onChange"
+        @openCrmPerson="$emit('openCrmPerson')"
+      />
 
-          <template v-if="isInsuranceChecked(ins) && !ele.isHide">
-            <van-field
-              v-if="['cmCommonInput'].includes(ele.componentName)"
-              v-model.number="ele.value"
-              :ref="ins.key + ele.key + 'item'"
-              :key="ins.key + ele.key"
-              :id="`id_${ins.key}_${ele.key}`"
-              :type="ele.inputType || 'tel'"
-              :class="{
-                'van-field-unit': activeInputKey === ins.key + ele.key && numberUnitStr
-              }"
-              :prop="ele.key"
-              :label="ele.labelName"
-              :placeholder="ele.placeholder"
-              :disabled="getElementDisabled(ele)"
-              :readonly="getElementDisabled(ele)"
-              :maxlength="ele.maxlength || 9"
-              :rules="getElementRules(ele)"
-              autocomplete="off"
-              input-align="right"
-              error-message-align="right"
-              clearable
-              :inputmode="ele.inputType || 'text'"
-              @focus="
-                activeInputKey = ins.key + ele.key
-                numberUnitStr = getAmountUnit(ele)
-              "
-              @blur="activeInputKey = ''"
-              @input="numberUnitStr = getAmountUnit(ele)"
-              @change="onChange({ insData: ins, eleData: ele })"
-              @clear="onChange({ insData: ins, eleData: ele })"
-            >
-              <template v-if="!ele.isDisabled" #right-icon>
-                <i class="icon iconfont icon-edit" style="font-size: 20px;" @click="onClickIcon(`id_${ins.key}_${ele.key}`)" />
-              </template>
-            </van-field>
-            <div v-if="activeInputKey === ins.key + ele.key && numberUnitStr" :key="ins.key + ele.key + 'unit'" class="bxt-ins-unit-tips">
-              <em />
-              <span>
-                {{ numberUnitStr }}
-              </span>
-            </div>
-            <div v-if="getRecommendValues(ins, ele)" :key="ins.key + ele.key + 'recommend'" class="bxt-ins-recommend-values">
-              <span v-for="v in getRecommendValues(ins, ele)" :key="v" @click="onClickRecommendValue(v, ins, ele)">
-                {{ v }}
-              </span>
-            </div>
-
-            <CommonRadio
-              v-if="['cmCommonRadioBtn'].includes(ele.componentName)"
-              v-model="ele.value"
-              class="bxt-ins-form-radio-btn"
-              :key="ins.key + ele.key"
-              :name="ele.key"
-              :label="ele.labelName"
-              :disabled="getElementDisabled(ele)"
-              :readonly="getElementDisabled(ele)"
-              :rules="getElementRules(ele)"
-              :options="ele.opts.filter(o => !o.isHide && !o.isDisabled && !o.isInvalid)"
-              input-align="right"
-              border
-              :data-stat-id="`product_insurance_${ele.key}`"
-              @input="onChange({ insData: ins, eleData: ele })"
-            />
-
-            <van-field
-              v-if="['cmCommonRadio'].includes(ele.componentName)"
-              class="bxt-ins-form-radio"
-              :key="ins.key + ele.key"
-              :name="ele.key"
-              :label="ele.labelName"
-              :rules="getElementRules(ele)"
-            >
-              <template #input>
-                <van-radio-group v-model="ele.value" :disabled="getElementDisabled(ele)" @change="onChange({ insData: ins, eleData: ele })">
-                  <van-radio
-                    v-for="opt in ele.opts"
-                    :id="`${productData.key}_${ins.key}_${ele.key}_${opt.val}`"
-                    :key="opt.val"
-                    :name="typeof ele.value === 'number' && !isNaN(Number(opt.val)) ? opt.val * 1 : opt.val"
-                    :disabled="opt.val != ele.value && opt.isDisabled"
-                    :label-disabled="opt.val != ele.value && opt.isDisabled"
-                  >
-                    <template #icon="props">
-                      <van-icon v-if="props.checked" class-prefix="iconfont icon" name="multiple_choice" size="20px" />
-                      <van-icon v-else class-prefix="iconfont icon" name="choose_none_line" size="20px" />
-                    </template>
-                    <div class="bxt-ins-form-radio-content">
-                      <span v-if="opt.code" class="bxt-ins-form-radio--code">{{ opt.code }}</span>
-                      <span
-                        class="bxt-ins-form-radio--tx"
-                        :class="[genInsuranceHmTag(opt) || getInsuranceSaleStatusTagByKey(opt.val) ? 'bxt-ins-form-radio--width' : '']"
-                      >
-                        {{ opt.desc }}
-                      </span>
-                      <span v-if="getInsuranceSaleStatusTagByKey(opt.val)" class="bxt-ins-form-radio--sale-tag">
-                        {{ getInsuranceSaleStatusTagByKey(opt.val) }}
-                      </span>
-                      <span v-if="genInsuranceHmTag(opt)" class="bxt-ins-form-radio--tag">
-                        {{ genInsuranceHmTag(opt) }}
-                      </span>
-                    </div>
-                  </van-radio>
-                </van-radio-group>
-              </template>
-            </van-field>
-
-            <CommonSelect
-              v-if="['cmCommonSelect'].includes(ele.componentName)"
-              v-model="ele.value"
-              :key="ele.componentName + ins.key + ele.key"
-              :name="ele.key"
-              :label="ele.labelName"
-              :placeholder="ele.placeholder"
-              :disabled="getElementDisabled(ele)"
-              :readonly="getElementDisabled(ele)"
-              :rules="getElementRules(ele)"
-              :options="ele.opts.filter(o => !o.isHide && !o.isDisabled && !o.isInvalid)"
-              :right-icon="getElementDisabled(ele) ? '' : 'arrow'"
-              input-align="right"
-              border
-              :data-stat-id="`product_insurance_${ele.key}`"
-              @change="onChange({ insData: ins, eleData: ele })"
-            />
-
-            <div :key="`${ins.key}${ele.key}_note`" v-if="ele.note" class="bxt-form-item-label-note">
-              {{ ele.note }}
-            </div>
-          </template>
+      <!-- 组合险组头 + 子险 -->
+      <div v-else :key="`group-${block.groupKey}`" class="bxt-product-group">
+        <div class="bxt-product-info-form bxt-product-group-header">
+          <CommonGroupTitle
+            :value="isGroupActive(block.groupKey)"
+            :key="`${productData.key}_group_${block.groupKey}`"
+            :label="block.groupName"
+            :disabled="isGroupSwitchDisabled(block.groupKey)"
+            :data-stat-id="`product_insurance_group_${block.groupKey}`"
+            @change="onGroupActiveChange(block.groupKey, $event)"
+          />
+        </div>
+        <template v-if="isGroupActive(block.groupKey)">
+          <ProductInsuranceForm
+            v-for="ins in block.insList"
+            :ref="`insuranceForm${ins.key}`"
+            :key="ins.key"
+            v-bind="insFormBind(ins, 'groupSub')"
+            @change="onChange"
+            @title-change="onInsuranceTitleChange"
+            @openCrmPerson="$emit('openCrmPerson')"
+          />
         </template>
-      </van-form>
+      </div>
     </template>
   </div>
 </template>
 <script lang="ts">
 import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
+import { Toast } from 'vant'
 import { get as _get } from 'lodash'
-import { getPlanbookRecommendData } from '../../src/api/planbook.js'
-import { productDataHandler, multipleInsuredHandler, verifyProductRules, initElementValidateRules, convertEleOrderListToObj } from 'packages/bxs-utils/index'
-import { createdProductDataToCalc } from 'packages/planbook-input/helper.js'
-
-import CommonTitle from '../../src/components/common/common-title.vue'
-import CommonRadio from '../../src/components/common/common-radio.vue'
-import CommonSelect from '../../src/components/common/common-select.vue'
-import CommonAgeBirthday from '../../src/components/common/common-age-birthday.vue'
-
+import { productDataHandler, multipleInsuredHandler, verifyProductRules } from 'packages/bxs-utils/index'
+import CommonGroupTitle from '../../src/components/common/common-group-title.vue'
+import ProductInsuranceForm from './components/product-insurance-form.vue'
+import {
+  getTitleEle,
+  getCheckedIds,
+  isTitleChecked,
+  isTitleEnabled,
+  isCheckboxGroup,
+  applySelectedIds,
+  setAllTitles,
+  snapshotGroupTitleEnabledMap,
+  getGroupSubsBecameUnselectable,
+  buildGroupUiState,
+  buildDisplayBlocks,
+  fetchRecommendValues,
+  createInsuranceInputResultEle as writeInsuranceInputResultEle
+} from './handler.js'
 import './index.less'
 
+type GroupUiItem = {
+  active: boolean
+  locked: boolean
+  selectedIds: Array<string | number>
+  groupName?: string
+}
+
 @Component({
   name: 'BxtProductInfo',
-  components: {
-    CommonTitle,
-    CommonRadio,
-    CommonSelect,
-    CommonAgeBirthday
-  }
+  components: { CommonGroupTitle, ProductInsuranceForm }
 })
 export default class BxtProductInfo extends Vue {
-  activeInputKey = ''
-  numberUnitStr = ''
   recommendValues = {}
   recommendValuesCache = {}
   isShowCustomValueTips = true
+  /** 组合险 UI 状态，不进产品数据；Map 保序 */
+  groupUiState: Map<string, GroupUiItem> = new Map()
 
-  @Prop({
-    default: () => ({})
-  })
-  user: any
-
-  @Prop({
-    default: () => ({})
-  })
-  inputData: any
-
-  @Prop({
-    default: () => ({})
-  })
-  verifyData: any
-
-  @Prop({
-    default: null
-  })
-  groupKey!: number | string
-
-  @Prop({
-    default: null
-  })
-  productKey!: number | string
-
-  @Prop({
-    default: true
-  })
-  showRecommendValue!: boolean
-
-  @Prop({
-    default: () => ({})
-  })
-  params: any
+  @Prop({ default: () => ({}) }) user: any
+  @Prop({ default: () => ({}) }) inputData: any
+  @Prop({ default: () => ({}) }) verifyData: any
+  @Prop({ default: null }) groupKey!: number | string
+  @Prop({ default: null }) productKey!: number | string
+  @Prop({ default: true }) showRecommendValue!: boolean
+  @Prop({ default: () => ({}) }) params: any
 
   get personData() {
-    return this.inputData && this.inputData.personData
+    return _get(this.inputData, 'personData')
   }
   get groupData() {
-    return this.inputData && this.inputData.productGroupList && this.inputData.productGroupList.find(g => g.key === this.groupKey)
+    return (_get(this.inputData, 'productGroupList') || []).find(g => g.key === this.groupKey)
   }
   get productData() {
-    return this.groupData && this.groupData.prodOrderList && this.groupData.prodOrderList.find(p => p.key === this.productKey)
+    return (_get(this.groupData, 'prodOrderList') || []).find(p => p.key === this.productKey)
   }
   get productForm() {
-    let productForm: any = {}
-    this.productData &&
-      this.productData.mulInsOrderList.map(ins => {
-        productForm[ins.key] = {}
-        ins.eleOrderList.map(ele => {
-          productForm[ins.key][ele.key] = ele.value
-        })
+    const form: any = {}
+    const mulInsOrderList = _get(this.productData, 'mulInsOrderList') || []
+    mulInsOrderList.forEach(ins => {
+      form[ins.key] = {}
+      const eleOrderList = _get(ins, 'eleOrderList') || []
+      eleOrderList.forEach(ele => {
+        form[ins.key][ele.key] = ele.value
       })
-    return productForm
+    })
+    return form
   }
-  get filterInsuranceList() {
-    const list = this.productData && this.productData.mulInsOrderList.filter(ins => !ins.groupKey)
-    // 下拉框根据条件改单选（按钮）。From hyw
-    if (list) {
-      list.forEach(ins => {
-        if (!ins.eleOrderList) {
-          return
-        }
-        ins.eleOrderList.forEach(ele => {
-          if (ele.componentName !== 'cmCommonSelect' || !ele.opts) {
-            return
-          }
-          if (ele.opts.length === 1) {
-            return
-          }
-          if (ele.opts.length < 6 && !ele.opts.some(o => o.desc && String(o.desc).length >= 10)) {
-            ele.componentName = 'cmCommonRadioBtn'
-          }
-        })
-      })
-    }
+  get displayBlocks() {
+    return buildDisplayBlocks(_get(this.productData, 'mulInsOrderList'), this.groupUiState, ins => this.normalizeSelectToRadio(ins))
+  }
+  /** 参与校验的险种：普通险全部；组合险仅组展开且 title 选中的子险 */
+  get visibleInsuranceList() {
+    const list: any[] = []
+    this.displayBlocks.forEach(block => {
+      if (block.type === 'normal') {
+        list.push(block.ins)
+      } else if (this.isGroupActive(block.groupKey)) {
+        list.push(...block.insList.filter(isTitleChecked))
+      }
+    })
     return list
   }
 
@@ -295,35 +145,156 @@ export default class BxtProductInfo extends Vue {
   }
   async init() {
     const { productData } = this
+    this.syncGroupUiState(true)
     this.requiestRecommendValues()
     const errorMsg = await this.changeProduct(productData, {})
     this.$emit('change', productData, { errorMsg }, this)
   }
+
+  /** ProductInsuranceForm 公共 props */
+  insFormBind(ins, insMode = 'normal') {
+    return {
+      ins,
+      insMode,
+      productKey: _get(this.productData, 'key'),
+      mulInsOrderList: _get(this.productData, 'mulInsOrderList'),
+      personData: this.personData,
+      recommendValues: this.recommendValues,
+      insuranceSaleStatus: _get(this.params, 'insuranceSaleStatus'),
+      showHuomianTips: !!this.$listeners.openCrmPerson,
+      isFollow: this.isNextInsuranceFollow(ins),
+      lockTitleClick: insMode === 'groupSub' && this.isGroupSiblingLocked(ins)
+    }
+  }
+  normalizeSelectToRadio(ins) {
+    const eleOrderList = _get(ins, 'eleOrderList') || []
+    eleOrderList.forEach(ele => {
+      if (ele.componentName !== 'cmCommonSelect' || !ele.opts || ele.opts.length === 1) {
+        return
+      }
+      if (ele.opts.length < 6 && !ele.opts.some(o => o.desc && String(o.desc).length >= 10)) {
+        ele.componentName = 'cmCommonRadioBtn'
+      }
+    })
+  }
+  getGroupInsurances(groupKey) {
+    return (_get(this.productData, 'mulInsOrderList') || []).filter(ins => String(ins.groupKey) === String(groupKey))
+  }
+  isGroupActive(groupKey) {
+    return !!_get(this.groupUiState.get(String(groupKey)), 'active')
+  }
+  isGroupLocked(groupKey) {
+    return !!_get(this.groupUiState.get(String(groupKey)), 'locked')
+  }
+  /** locked 组内：非锁定子险 title 不可点 */
+  isGroupSiblingLocked(ins) {
+    const gk = String(ins.groupKey)
+    const state = this.groupUiState.get(gk)
+    if (!state || !state.locked) {
+      return false
+    }
+    return String(ins.key) !== String(_get(state, 'selectedIds[0]'))
+  }
+  isGroupSwitchDisabled(groupKey) {
+    if (this.isGroupLocked(groupKey)) {
+      return true
+    }
+    const siblings = this.getGroupInsurances(groupKey)
+    if (!siblings.length) {
+      return true
+    }
+    const enabled = siblings.filter(isTitleEnabled)
+    return enabled.length === 0
+  }
+  touchGroupUiState() {
+    this.groupUiState = new Map(this.groupUiState)
+  }
+  syncGroupUiState(isInit = false) {
+    this.groupUiState = buildGroupUiState(_get(this.productData, 'mulInsOrderList') || [], this.groupUiState, { isInit })
+  }
+
+  /** 组合险开关 */
+  onGroupActiveChange(groupKey, active) {
+    const gk = String(groupKey)
+    const siblings = this.getGroupInsurances(gk)
+    const prev = this.groupUiState.get(gk) || {
+      active: false,
+      locked: false,
+      selectedIds: [],
+      groupName: _get(siblings, '[0].groupName')
+    }
+    if (prev.locked) {
+      return
+    }
+
+    if (!active) {
+      const selectedIds = getCheckedIds(siblings)
+      setAllTitles(siblings, false)
+      this.groupUiState.set(gk, {
+        ...prev,
+        active: false,
+        selectedIds: selectedIds.length ? selectedIds : prev.selectedIds || []
+      })
+    } else {
+      let restoreIds = (prev.selectedIds || []).slice()
+      if (!isCheckboxGroup(siblings) && restoreIds.length > 1) {
+        restoreIds = restoreIds.slice(0, 1)
+      }
+      const appliedIds = applySelectedIds(siblings, restoreIds)
+      this.groupUiState.set(gk, {
+        ...prev,
+        active: true,
+        selectedIds: appliedIds
+      })
+    }
+    this.touchGroupUiState()
+    this.onChange({
+      insData: siblings[0],
+      eleData: getTitleEle(siblings[0]) || { key: 'title' }
+    })
+  }
+
+  /** 组合子险 title：互斥 / 多选后同步 selectedIds */
+  onInsuranceTitleChange(payload) {
+    const { insData, eleData } = payload || {}
+    const gk = String(insData.groupKey)
+    const siblings = this.getGroupInsurances(gk)
+    const prev = this.groupUiState.get(gk) || { active: true, locked: false, selectedIds: [], groupName: insData.groupName }
+    if (prev.locked) {
+      return
+    }
+
+    if (insData.isCheckbox) {
+      this.groupUiState.set(gk, { ...prev, active: true, selectedIds: getCheckedIds(siblings) })
+    } else if (eleData.value) {
+      siblings.forEach(s => {
+        if (s.key !== insData.key) {
+          const t = getTitleEle(s)
+          if (t) {
+            t.value = false
+          }
+        }
+      })
+      this.groupUiState.set(gk, { ...prev, active: true, selectedIds: [insData.key] })
+    } else {
+      this.groupUiState.set(gk, { ...prev, active: true, selectedIds: [] })
+    }
+    this.touchGroupUiState()
+    this.onChange({ insData, eleData })
+  }
+
   onChange(options: any = {}) {
     options.type = 'change'
     const { type, insData, eleData } = options
-    if (!['title'].includes(eleData.key)) {
+    if (_get(eleData, 'key') !== 'title') {
       this.requiestRecommendValues()
     }
     this.$nextTick(async () => {
       const errorMsg = await this.changeProduct(this.productData, options)
-      this.$emit(
-        'change',
-        this.productData,
-        {
-          type,
-          insData,
-          eleData,
-          errorMsg
-        },
-        this
-      )
+      this.$emit('change', this.productData, { type, insData, eleData, errorMsg }, this)
     })
   }
-  onClickIcon(id) {
-    const inputDom: any = document.querySelector(`#${id}`)
-    inputDom.focus()
-  }
+
   async changeProduct(productData, options) {
     const { $listeners, user, inputData, verifyData, personData, groupKey, productKey, params } = this
     const { type, insData, eleData } = options
@@ -334,317 +305,120 @@ export default class BxtProductInfo extends Vue {
       insuranceCode: _get(insData, 'code') || null,
       elementKey: _get(eleData, 'key') || null
     }
-    if (productData.multipleInsured) {
+    if (_get(productData, 'multipleInsured')) {
       multipleInsuredHandler(productData, personData)
     }
+    const prevGroupTitleEnabled = snapshotGroupTitleEnabledMap(_get(productData, 'mulInsOrderList'))
     await productDataHandler(productData, productVerifyData, personData, {
       user,
       planbookId,
       executeSource: 'userAction',
       eventTarget
     })
+    this.syncGroupUiState(false)
     if (type === 'change') {
-      this.createInsuranceInputResultEle(insData, eleData)
-    } else {
-      this.createInsuranceInputResultEle()
+      this.toastGroupSubsBecameUnselectable(productData, prevGroupTitleEnabled)
     }
+    this.createInsuranceInputResultEle(type === 'change' ? insData : null, type === 'change' ? eleData : null)
 
-    let errorMsg: any = verifyProductRules({
-      personData,
-      productData,
-      insData,
-      eleData
-    })
+    let errorMsg: any = verifyProductRules({ personData, productData, insData, eleData })
     if (!errorMsg) {
       await this.validate()
         .then(async () => {
           const hasRevalidateFlag = (_get(productData, 'mulInsOrderList') || []).some(ins => ins.revalidateFlag)
-          if (hasRevalidateFlag && $listeners.reCalculate) {
-            await new Promise<any>((resolve, reject) => {
-              this.$emit(
-                'reCalculate',
-                inputData,
-                {
-                  user,
-                  planbookId,
-                  groupKey,
-                  productKey,
-                  executeSource: 'userAction',
-                  isIgnoreError: true,
-                  eventTarget
-                },
-                resolve,
-                reject
-              )
-            }).catch(err => {
-              errorMsg = _get(err, '[0].message') || _get(err, 'message')
-            })
-            await productDataHandler(productData, productVerifyData, personData, {
-              user,
-              planbookId,
-              executeSource: 'userAction',
-              eventTarget
-            })
+          if (!(hasRevalidateFlag && $listeners.reCalculate)) {
+            return
           }
+          await new Promise<any>((resolve, reject) => {
+            this.$emit(
+              'reCalculate',
+              inputData,
+              { user, planbookId, groupKey, productKey, executeSource: 'userAction', isIgnoreError: true, eventTarget },
+              resolve,
+              reject
+            )
+          }).catch(err => {
+            errorMsg = _get(err, '[0].message') || _get(err, 'message')
+          })
+          const prevAfterCalc = snapshotGroupTitleEnabledMap(_get(productData, 'mulInsOrderList'))
+          await productDataHandler(productData, productVerifyData, personData, {
+            user,
+            planbookId,
+            executeSource: 'userAction',
+            eventTarget
+          })
+          this.syncGroupUiState(false)
+          this.toastGroupSubsBecameUnselectable(productData, prevAfterCalc)
         })
         .catch(() => {})
     }
     return errorMsg
   }
-  isInsuranceChecked(ins) {
-    let titleEle = ins.eleOrderList.find(e => e.key === 'title')
-    return ins.key === 'common' || (!!titleEle && titleEle.value)
-  }
-  isNextInsuranceFollow(ins) {
-    let index = this.productData.mulInsOrderList.findIndex(i => i.key === ins.key)
-    return (
-      this.productData.mulInsOrderList[index + 1] &&
-      !this.productData.mulInsOrderList[index + 1].groupKey &&
-      this.productData.mulInsOrderList[index + 1].isFollowing
-    )
-  }
-  getElementRules(ele) {
-    let _rules = ele.rules || []
-    if (ele.isIgnoreValidate) {
-      _rules = []
-    }
-    return _rules
-  }
-  getElementDisabled(ele) {
-    const opts = (ele.opts || []).filter(o => !o.isHide && !o.isDisabled && !o.isInvalid)
-    return ele.isDisabled || (opts.length === 1 && _get(opts, '[0].val') === ele.value)
-  }
-  genInsuranceHmTag(opt) {
-    const refInsurance = this.productData.mulInsOrderList.find(ins => ins.key === opt.val)
-    if (!refInsurance) {
-      return ''
-    }
-    if (!refInsurance.huomian || refInsurance.isGroup) {
-      return ''
-    }
-    if (refInsurance.huomian === 'beiHuomian') {
-      return '被保人'
-    }
-    return '投保人'
-  }
-  getInsuranceTitleHmTag(insurance) {
-    if (!insurance.huomian || insurance.isGroup) {
-      return ''
-    }
-    if (insurance.huomian === 'beiHuomian') {
-      return '被保人'
-    } else {
-      return '投保人'
-    }
-  }
-  /** params.insuranceSaleStatus: { [insuranceKey]: number }，值为 2 表示停售（与 cmCommonTitle、cmCommonRadio 选项 val 一致） */
-  getInsuranceSaleStatusTagByKey(key: string | number) {
-    const map = _get(this, 'params.insuranceSaleStatus')
-    if (!map || typeof map !== 'object' || key === undefined || key === null) {
-      return ''
-    }
-    const status = map[key] ?? map[String(key)]
-    if (status === undefined || status === null) {
-      return ''
+
+  toastGroupSubsBecameUnselectable(productData, prevEnabledMap) {
+    const names = getGroupSubsBecameUnselectable(_get(productData, 'mulInsOrderList'), prevEnabledMap)
+    if (names.length) {
+      Toast(`承保规则变化，${names.join('、')}不可选`)
     }
-    return Number(status) === 2 ? '停' : ''
-  }
-  getInsuranceSaleStatusTag(insurance) {
-    return this.getInsuranceSaleStatusTagByKey(insurance.key)
   }
-  getHuomianTips(insurance, element) {
-    const personOrderList = this.inputData.personData.personOrderList
-    const applicationInfo = personOrderList.find(p => p.key === 'applicantInfo')
-    const applicationTitle = applicationInfo && applicationInfo.eleOrderList.find(e => e.key === 'title')
-    const applicationSame = applicationInfo && applicationInfo.eleOrderList.find(e => e.key === 'applicantAndInsuredSame')
-    if (!(['touHuomian', 'shuangHuomian'].includes(insurance.huomian) && element.isDisabled)) {
-      return ''
-    }
-    if (!(applicationTitle && applicationTitle.value)) {
-      return '<em>设置</em>投保人信息后选择'
-    }
-    if (applicationSame && applicationSame.value && !insurance.allowSamePerson) {
-      return '投被保人为同一人，<em>修改</em>投保人信息后选择'
+
+  isNextInsuranceFollow(ins) {
+    const list = _get(this.productData, 'mulInsOrderList') || []
+    const index = list.findIndex(i => i.key === ins.key)
+    const next = list[index + 1]
+    if (!next) {
+      return false
     }
-    return '当前投保人不能加该险种，<em>修改</em>投保人信息后选择'
-  }
-  getAmountUnit(ele) {
-    let digits = isNaN(ele.value * 1) ? 0 : Math.floor(Math.log10(ele.value) + 1)
-    switch (digits) {
-      case 5:
-        return '万'
-      case 6:
-        return '十万'
-      case 7:
-        return '百万'
-      case 8:
-        return '千万'
-      case 9:
-        return '亿'
-      default:
-        return ''
+    if (ins.groupKey && next.groupKey && String(ins.groupKey) === String(next.groupKey)) {
+      return !!next.isFollowing && this.isGroupActive(String(ins.groupKey))
     }
+    return !ins.groupKey && !next.groupKey && !!next.isFollowing
   }
+
   async validate() {
-    const { $refs, filterInsuranceList } = this
-    const insKeys: any = filterInsuranceList.map(ins => ins.key)
+    const insKeys = this.visibleInsuranceList.map(ins => ins.key)
     return new Promise((resolve, reject) => {
       setTimeout(() => {
-        const promises = []
-        for (const k of insKeys) {
-          const _ref = _get($refs, `insuranceForm${k}[0]`)
-          if (_ref) {
-            promises.push(_ref?.validate())
-          }
-        }
+        const promises = insKeys
+          .map(k => _get(this.$refs, `insuranceForm${k}[0]`))
+          .filter(ref => ref && ref.validate)
+          .map(ref => ref.validate())
         Promise.all(promises)
           .then(() => resolve([]))
-          .catch(error => reject(error))
+          .catch(reject)
       }, 200)
     })
   }
-  closeKeyBoard() {
-    const activeElement: any = document.activeElement
-    if (!activeElement) {
-      return false
-    }
-    activeElement.blur()
-    return false
-  }
-  getRecommendValues(ins, ele) {
-    if (!['baoe', 'baof'].includes(ele.key) || ele.isDisabled) {
-      return null
-    }
-    const insurance = convertEleOrderListToObj(ins)
-    return this.recommendValues && this.recommendValues[insurance.isGroup ? insurance.insuranceId : insurance.key]
-  }
-  async requiestRecommendValues() {
-    const self = this
-    const { showRecommendValue, recommendValuesCache, inputData, groupData, productData } = self
-    if (!showRecommendValue) {
-      return
-    }
-    const requestDataToCalc: any = await createdProductDataToCalc(inputData, {
-      groupKey: groupData.key,
-      productKey: productData.key
-    }).catch(() => {})
-    const reqParams: any = []
-    const inputDataToCalc = requestDataToCalc && JSON.parse(requestDataToCalc.jd)
-    const mulInsOrderList = _get(inputDataToCalc, 'productGroupList[0].prodOrderList[0].mulInsOrderList') || []
-    mulInsOrderList.forEach(ins => {
-      reqParams.push({
-        insuranceId: ins.key,
-        period: ins.pPeriod,
-        calMethod: ins.calMethod || ins.feeType || ins.feeBaseType
-      })
-    })
-
-    if (recommendValuesCache[JSON.stringify(reqParams)]) {
-      self.recommendValues = recommendValuesCache[JSON.stringify(reqParams)]
-      return
-    }
 
-    return getPlanbookRecommendData(reqParams)
-      .then((data: any) => {
-        const recommendValues = data.reduce((obj, ele) => {
-          return Object.assign(obj, {
-            [ele.insuranceId]: ele.valueList
-          })
-        }, {})
-
-        // 推荐金额，根据最小值和最大值进行过滤。From hyw
-        const mulInsOrderList = _get(productData, 'mulInsOrderList') || []
-        mulInsOrderList
-          .filter(ins => ins.eleOrderList && ins.eleOrderList.length)
-          .filter(ins => recommendValues[ins.key])
-          .map(ins => {
-            const calMethod = ins.calMethod || ins.feeType || ins.feeBaseType
-            const key = calMethod === 'baof2baoe' ? 'baof' : 'baoe'
-            const ele = ins.eleOrderList.find(ele => ele.key === key)
-            if (ele) {
-              if (ele.min && !isNaN(Number(ele.min))) {
-                recommendValues[ins.key] = (recommendValues[ins.key] || []).filter(v => v >= ele.min)
-              }
-              if (ele.max && !isNaN(Number(ele.max))) {
-                recommendValues[ins.key] = (recommendValues[ins.key] || []).filter(v => v <= ele.max)
-              }
-            }
-          })
-        self.recommendValues = recommendValues
-        recommendValuesCache[JSON.stringify(reqParams)] = recommendValues
-      })
-      .catch(info => {
-        self.$toast(info)
+  async requiestRecommendValues() {
+    if (this.showRecommendValue) {
+      try {
+        const result = await fetchRecommendValues({
+          inputData: this.inputData,
+          groupKey: _get(this.groupData, 'key'),
+          productKey: _get(this.productData, 'key'),
+          productData: this.productData,
+          cache: this.recommendValuesCache
+        })
+        if (result) {
+          this.recommendValues = result.recommendValues
+        }
+      } catch (info) {
+        const message = typeof info === 'string' ? info : _get(info, 'message') || _get(info, 'info')
+        if (message) {
+          Toast(message)
+        }
         console.log(info)
-      })
-  }
-  onClickRecommendValue(value, ins, ele) {
-    const self = this
-    ele.value = value
-    self.onChange({
-      insData: ins,
-      eleData: ele
-    })
-
-    self.$nextTick(() => {
-      const ref = self.$refs[ins.key + ele.key + 'item']
-      const ref0 = ref && ref[0]
-      if (ref0) {
-        ref0.validate()
       }
-    })
-  }
-  createInsuranceInputResultEle(insData?: any, eleData?: any) {
-    const { params, productData } = this
-    if (!params.allowCustomResult) {
-      return
     }
+  }
 
-    productData.mulInsOrderList
-      .filter(e => e.key !== 'common' || e.eleOrderList)
-      .forEach(ins => {
-        // 需要特别注意组合险的情况
-        if (ins.groupKey) {
-          return
-        }
-        if (ins.key === 'common') {
-          return
-        }
-        if (insData && eleData && !insData.isGroup && insData.key === ins.key && eleData.key !== 'calMethod') {
-          return
-        }
-
-        const calMethod = ins.eleOrderList.find(e => e.key === 'calMethod')
-        const baof = ins.eleOrderList.find(e => e.key === 'baof') || ins.eleOrderList.find(e => e.key === 'payModePremium')
-        let inputResult = ins.eleOrderList.find(e => e.key === 'inputResult')
-        const labelName = calMethod ? (calMethod.value === 'baof2baoe' ? '保额' : '保费') : baof ? '保额' : '保费'
-        let value = ins.inputResult === undefined ? null : ins.inputResult
-        if (inputResult) {
-          value = inputResult.value
-        }
-        if (insData && eleData && insData.key === ins.key && eleData.key === 'inputResult') {
-          value = eleData.value
-        }
-        inputResult = {
-          componentName: 'cmCommonInput',
-          placeholder: `按照保单填写${labelName}`,
-          isHide: !productData.inputResultSwitch,
-          key: 'inputResult',
-          labelName: `自定义${labelName}`,
-          inputType: 'text',
-          required: false,
-          regExp: '/^\\d{1,}(\\.\\d{1,2})?$/',
-          regExpMessage: '请输入1-2位小数的值',
-          value
-        }
-        inputResult.rules = initElementValidateRules(inputResult)
-        delete ins.inputResult
-        ins.eleOrderList = ins.eleOrderList.filter(e => e.key !== 'inputResult')
-
-        if (productData.inputResultSwitch) {
-          ins.eleOrderList.push(inputResult)
-        }
-      })
+  createInsuranceInputResultEle(insData?: any, eleData?: any) {
+    writeInsuranceInputResultEle(this.productData, {
+      allowCustomResult: _get(this.params, 'allowCustomResult'),
+      insData,
+      eleData
+    })
   }
 }
 </script>