vue-insagent-pc/src/components/Form/ProductCostForm.vue

<template>
  <div class="flex j-s " style="position: relative;">
    <div class="sidebarShortcut">
      <ul class="flex j-c a-c f-c">
        <li v-if="underwritingRulesForm" :class="{ sidebarstyle: sidebarItem == 'gzxx' }" class="flex a-c "
          @click="scrollToSection('gzxx')">
          <div :style="{ opacity: sidebarItem == 'gzxx' ? 1 : 0 }" class="ornament flex a-c j-c"></div>规则信息
        </li>
        <li :class="{ sidebarstyle: sidebarItem == 'clxx' }" class="flex a-c " @click="scrollToSection('clxx')">
          <div :style="{ opacity: sidebarItem == 'clxx' ? 1 : 0 }" class="ornament flex a-c j-c"></div>车辆信息
        </li>
        <li :class="{ sidebarstyle: sidebarItem == 'czxx' }" class="flex a-c " @click="scrollToSection('czxx')">
          <div :style="{ opacity: sidebarItem == 'czxx' ? 1 : 0 }" class="ornament flex a-c j-c"></div>车主信息
        </li>
        <li :class="{ sidebarstyle: sidebarItem == 'tbrxx' }" class="flex a-c " @click="scrollToSection('tbrxx')">
          <div :style="{ opacity: sidebarItem == 'tbrxx' ? 1 : 0 }" class="ornament flex a-c j-c"></div>投保人信息
        </li>
        <li :class="{ sidebarstyle: sidebarItem == 'bbrxx' }" class="flex a-c " @click="scrollToSection('bbrxx')">
          <div :style="{ opacity: sidebarItem == 'bbrxx' ? 1 : 0 }" class="ornament flex a-c j-c"></div>被保人信息
        </li>
        <li v-if="insuranceTypeAttr.length > 0" :class="{ sidebarstyle: sidebarItem == 'xbxx' }" class="flex a-c "
          @click="scrollToSection('xbxx')">
          <div :style="{ opacity: sidebarItem == 'xbxx' ? 1 : 0 }" class="ornament flex a-c j-c"></div>险别信息
        </li>
        <li v-if="insurerCostFactorAttr.length > 0" :class="{ sidebarstyle: sidebarItem == 'bsfyyz' }" class="flex a-c "
          @click="scrollToSection('bsfyyz')">
          <div :style="{ opacity: sidebarItem == 'bsfyyz' ? 1 : 0 }" class="ornament flex a-c j-c"></div>保司费用因子
        </li>
      </ul>
    </div>
    <div class="tab-panecent1">
      <el-form ref="productCostForm" :model="localForm" label-width="120px" :size="overSize" :disabled="disabled">
        <el-card shadow="hover" class="margin-bom" id="gzxx" v-if="underwritingRulesForm">
          <div slot="header" class="clearfix flex j-s a-c">
            <div class="flex j-s a-c">
              <span>规则信息</span>
            </div>
          </div>
          <div class="p-2" v-show="CarCollapsed">
            <el-form ref="form" :model="underwritingRulesForm" label-width="80px" size="small">
              <el-col :span="8">
                <el-form-item label="是否有效">
                  <el-select v-model="underwritingRulesForm.validInd" placeholder="请选择活动区域">
                    <el-option label="有效" value="1"></el-option>
                    <el-option label="无效" value="0"></el-option>
                    <el-option label="待审核" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="规则起期">
                  <el-date-picker value-format="yyyy-MM-dd" v-model="underwritingRulesForm.rulesStartDate" type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="规则止期">
                  <el-date-picker value-format="yyyy-MM-dd" v-model="underwritingRulesForm.rulesEndDate" type="date"
                    @change="rulesEndDateChange" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="规则描述">
                  <el-input type="textarea" v-model="underwritingRulesForm.ruleDescription" placeholder="请输入承保规则描述"
                    maxlength="100" show-word-limit></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </div>
        </el-card>
        <el-card shadow="hover" class="margin-bom" id="clxx">
          <div slot="header" class="clearfix flex j-s a-c">
            <div class="flex j-s a-c">
              <span>车辆信息</span>
            </div>
            <!-- <el-button @click="toggle('Car')" style="float: right; padding: 3px 0; color: #ff9000;" type="text">{{
              CarCollapsed
              ? '收起' : '展开'
            }}</el-button> -->
          </div>
          <div class="p-2" v-show="CarCollapsed">
            <el-col v-for=" (formItems, index) in CarAttr" :key="index"
              :span="formItems.attrType == 'checkbox' ? 24 : 11">
              <el-form-item :label="formItems.attrName">
                <template v-if="formItems.attrType == 'inputNumber'">
                  <template v-if="formItems.operator == '1' || formItems.operator == null">
                    <el-input-number v-model="formItems.min"></el-input-number>
                    <i class="el-icon-minus"></i>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '2'">
                    <span>＜</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '3'">
                    <span>≤</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '4'">
                    <span>＞</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '5'">
                    <span>≥</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <el-select v-model="formItems.operator" @change="selectoperatorChange($event, formItems.id)"
                    placeholder="请选择" style="width: 120px;margin-left: 20px;">
                    <el-option v-for="operatoritem in operator" :key="operatoritem.id" :label="operatoritem.label"
                      :value="operatoritem.value"></el-option>
                  </el-select>
                </template>
                <div v-if="formItems.attrType == 'select'" style="display: flex;">
                  <el-select multiple v-model="formItems.minArray" placeholder="请选择" style="width: 100%;"
                    @change="selectChange($event, formItems.id, 'min')">
                    <el-option v-for="dict in formItems.dictLabal" :key="dict.code" :label="dict.name"
                    :value="formItems.attrName == '车辆类型' ? dict.code : dict.name"></el-option>
                  </el-select>
                  <el-checkbox style="margin-left: 10px;" v-if="formItems.attrCode == 'LicenseNo'"
                    v-model="LicenseNoChecked"
                    @change="LicenseNoCheckedChange($event, 'LicenseNo', 'min')">全选</el-checkbox>
                  <el-checkbox style="margin-left: 10px;" v-if="formItems.attrCode == 'LicenseArea'"
                    v-model="LicenseNoChecked1"
                    @change="LicenseNoCheckedChange($event, 'LicenseArea', 'min')">全选</el-checkbox>
                </div>
                <div v-if="formItems.attrType == 'input'" style="display: flex;">
                  <el-input v-model="formItems.min" placeholder="输入（宝马、奥迪等）多个输入，用，隔开"></el-input>
                  <el-select v-model="formItems.operator" placeholder="请选择" style="width: 120px;margin-left: 20px;">
                    <el-option label="包含" value="1"></el-option>
                    <el-option label="不包含" value="2"></el-option>
                  </el-select>
                </div>
                <el-checkbox-group v-if="formItems.attrType == 'checkbox'" v-model="formItems.minArray"
                  @change="checkboxChange($event, formItems.id, 'min')">
                  <el-checkbox v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.name"></el-checkbox>
                </el-checkbox-group>
                <div class="flex " v-if="formItems.attrType == 'radio'">
                  <el-radio-group v-model="formItems.min">
                    <el-radio-button v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.code">{{ dict.name
                    }}</el-radio-button>
                  </el-radio-group>
                  <el-button v-if="formItems.attrType == 'radio'" size="mini" style="margin-left: 20px;"
                    @click="radiouncheck(formItems)">取消选择</el-button>
                </div>
              </el-form-item>
            </el-col>
          </div>
        </el-card>
        <el-card shadow="hover" class="margin-bom" id="czxx">
          <div slot="header" class="clearfix flex j-s a-c">
            <div class="flex j-s a-c">
              <span>车主信息</span>
            </div>
            <!-- <el-button @click="toggle('Carowners')" style="float: right; padding: 3px 0; color: #ff9000;" type="text">{{
              CarownersCollapsed
              ? '收起' : '展开'
            }}</el-button> -->
          </div>
          <div class="p-2" v-show="CarownersCollapsed">
            <el-col v-for=" (formItems, index) in CarownersAttr" :key="index"
              :span="formItems.attrType == 'checkbox' ? 24 : 12">
              <el-form-item :label="formItems.attrName">
                <template v-if="formItems.attrType == 'inputNumber'">
                  <template v-if="formItems.operator == '1' || formItems.operator == null">
                    <el-input-number v-model="formItems.min"></el-input-number>
                    <i class="el-icon-minus"></i>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '2'">
                    <span>＜</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '3'">
                    <span>≤</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '4'">
                    <span>＞</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '5'">
                    <span>≥</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <el-select v-model="formItems.operator" @change="selectoperatorChange($event, formItems.id)"
                    placeholder="请选择" style="width: 120px;margin-left: 20px;">
                    <el-option v-for="operatoritem in operator" :key="operatoritem.id" :label="operatoritem.label"
                      :value="operatoritem.value"></el-option>
                  </el-select>
                </template>
                <el-select v-if="formItems.attrType == 'select'" multiple v-model="formItems.list" placeholder="请选择"
                  style="width: 100%;" @change="selectChange($event, formItems.id, 'min')">
                  <el-option v-for="dict in formItems.dictLabal" :key="dict.code" :label="dict.name"
                    :value="dict.name"></el-option>
                </el-select>
                <el-input v-if="formItems.attrType == 'input'" v-model="formItems.min" placeholder="身份证前2位或前6位
"></el-input>
                <el-checkbox-group v-if="formItems.attrType == 'checkbox'" v-model="formItems.list"
                  @change="checkboxChange($event, formItems.id, 'min')">
                  <el-checkbox v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.name"></el-checkbox>
                </el-checkbox-group>
                <div class="flex " v-if="formItems.attrType == 'radio'">
                  <el-radio-group v-model="formItems.min">
                    <el-radio-button v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.code">{{ dict.name
                    }}</el-radio-button>
                  </el-radio-group>
                  <el-button v-if="formItems.attrType == 'radio'" size="mini" style="margin-left: 20px;"
                    @click="radiouncheck(formItems)">取消选择</el-button>
                </div>
              </el-form-item>
            </el-col>
          </div>
        </el-card>
        <el-card shadow="hover" class="margin-bom" id="tbrxx">
          <div slot="header" class="clearfix flex j-s a-c">
            <div class="flex j-s a-c">
              <span>投保人信息</span>
            </div>
            <!-- <el-button @click="toggle('Applicant')" style="float: right; padding: 3px 0; color: #ff9000;" type="text">{{
              ApplicantCollapsed
              ? '收起' : '展开'
            }}</el-button> -->
          </div>
          <div class="p-2" v-show="ApplicantCollapsed">
            <el-col v-for=" (formItems, index) in ApplicantAttr" :key="index"
              :span="formItems.attrType == 'checkbox' ? 24 : 12">
              <el-form-item :label="formItems.attrName">
                <template v-if="formItems.attrType == 'inputNumber'">
                  <template v-if="formItems.operator == '1' || formItems.operator == null">
                    <el-input-number v-model="formItems.min"></el-input-number>
                    <i class="el-icon-minus"></i>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '2'">
                    <span>＜</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '3'">
                    <span>≤</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '4'">
                    <span>＞</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '5'">
                    <span>≥</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <el-select v-model="formItems.operator" placeholder="请选择"
                    @change="selectoperatorChange($event, formItems.id)" style="width: 120px;margin-left: 20px;">
                    <el-option v-for="operatoritem in operator" :key="operatoritem.id" :label="operatoritem.label"
                      :value="operatoritem.value"></el-option>
                  </el-select>
                </template>
                <el-select v-if="formItems.attrType == 'select'" multiple v-model="formItems.list" placeholder="请选择"
                  style="width: 100%;" @change="selectChange($event, formItems.id, 'min')">
                  <el-option v-for="dict in formItems.dictLabal" :key="dict.code" :label="dict.name"
                    :value="dict.name"></el-option>
                </el-select>
                <el-input v-if="formItems.attrType == 'input'" v-model="formItems.min" placeholder="身份证前2位或前6位
"></el-input>
                <el-checkbox-group v-if="formItems.attrType == 'checkbox'" v-model="formItems.list"
                  @change="checkboxChange($event, formItems.id, 'min')">
                  <el-checkbox v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.name"></el-checkbox>
                </el-checkbox-group>
                <div class="flex " v-if="formItems.attrType == 'radio'">
                  <el-radio-group v-model="formItems.min">
                    <el-radio-button v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.code">{{ dict.name
                    }}</el-radio-button>
                  </el-radio-group>
                  <el-button v-if="formItems.attrType == 'radio'" size="mini" style="margin-left: 20px;"
                    @click="radiouncheck(formItems)">取消选择</el-button>
                </div>
              </el-form-item>
            </el-col>
          </div>
        </el-card>
        <el-card shadow="hover" class="margin-bom" id="bbrxx">
          <div slot="header" class="clearfix flex j-s a-c">
            <div class="flex j-s a-c">
              <span>被保人信息</span>
            </div>
            <!-- <el-button @click="toggle('Insured')" style="float: right; padding: 3px 0; color: #ff9000;" type="text">{{
              InsuredCollapsed
              ? '收起' : '展开'
            }}</el-button> -->
          </div>
          <div class="p-2" v-show="InsuredCollapsed">
            <el-col v-for=" (formItems, index) in InsuredAttr" :key="index"
              :span="formItems.attrType == 'checkbox' ? 24 : 12">
              <el-form-item :label="formItems.attrName">
                <template v-if="formItems.attrType == 'inputNumber'">
                  <template v-if="formItems.operator == '1' || formItems.operator == null">
                    <el-input-number v-model="formItems.min"></el-input-number>
                    <i class="el-icon-minus"></i>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '2'">
                    <span>＜</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '3'">
                    <span>≤</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '4'">
                    <span>＞</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '5'">
                    <span>≥</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <el-select v-model="formItems.operator" @change="selectoperatorChange($event, formItems.id)"
                    placeholder="请选择" style="width: 120px;margin-left: 20px;">
                    <el-option v-for="operatoritem in operator" :key="operatoritem.id" :label="operatoritem.label"
                      :value="operatoritem.value"></el-option>
                  </el-select>
                </template>
                <el-select v-if="formItems.attrType == 'select'" multiple v-model="formItems.list" placeholder="请选择"
                  style="width: 100%;" @change="selectChange($event, formItems.id, 'min')">
                  <el-option v-for="dict in formItems.dictLabal" :key="dict.code" :label="dict.name"
                    :value="dict.name"></el-option>
                </el-select>
                <el-input v-if="formItems.attrType == 'input'" v-model="formItems.min" placeholder="身份证前2位或前6位
"></el-input>
                <el-checkbox-group v-if="formItems.attrType == 'checkbox'" v-model="formItems.list"
                  @change="checkboxChange($event, formItems.id, 'min')">
                  <el-checkbox v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.name"></el-checkbox>
                </el-checkbox-group>
                <div class="flex " v-if="formItems.attrType == 'radio'">
                  <el-radio-group v-model="formItems.min">
                    <el-radio-button v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.code">{{ dict.name
                    }}</el-radio-button>
                  </el-radio-group>
                  <el-button v-if="formItems.attrType == 'radio'" size="mini" style="margin-left: 20px;"
                    @click="radiouncheck(formItems)">取消选择</el-button>
                </div>
              </el-form-item>
            </el-col>
          </div>
        </el-card>
        <el-card shadow="hover" class="margin-bom" id="xbxx" v-if="insuranceTypeAttr.length > 0">
          <div slot="header" class="clearfix flex j-s a-c">
            <div class="flex j-s a-c">
              <span>险别信息</span>
            </div>
            <!-- <el-button @click="toggle('insuranceType')" style="float: right; padding: 3px 0; color: #ff9000;"
              type="text">{{
                insuranceTypeCollapsed
                ? '收起' : '展开'
              }}</el-button> -->
          </div>
          <div class="p-2" v-show="insuranceTypeCollapsed">
            <el-col v-for=" (formItems, index) in insuranceTypeAttr" :key="index"
              :span="formItems.attrType == 'checkbox' ? 24 : 12">
              <el-form-item :label="formItems.attrName">
                <template v-if="formItems.attrType == 'inputNumber'">
                  <template v-if="formItems.operator == '1' || formItems.operator == null">
                    <el-input-number v-model="formItems.min"></el-input-number>
                    <i class="el-icon-minus"></i>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '2'">
                    <span>＜</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '3'">
                    <span>≤</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '4'">
                    <span>＞</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '5'">
                    <span>≥</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <el-select v-model="formItems.operator" @change="selectoperatorChange($event, formItems.id)"
                    placeholder="请选择" style="width: 120px;margin-left: 20px;">
                    <el-option v-for="operatoritem in operator" :key="operatoritem.id" :label="operatoritem.label"
                      :value="operatoritem.value"></el-option>
                  </el-select>
                </template>
                <el-select v-if="formItems.attrType == 'select'" multiple v-model="formItems.list" placeholder="请选择"
                  style="width: 100%;" @change="selectChange($event, formItems.id, 'min')">
                  <el-option v-for="dict in formItems.dictLabal" :key="dict.code" :label="dict.name"
                    :value="dict.name"></el-option>
                </el-select>
                <el-input v-if="formItems.attrType == 'input'" v-model="formItems.min"></el-input>
                <el-checkbox-group v-if="formItems.attrType == 'checkbox'" v-model="formItems.list"
                  @change="checkboxChange($event, formItems.id, 'min')">
                  <el-checkbox v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.name"></el-checkbox>
                </el-checkbox-group>
                <div class="flex " v-if="formItems.attrType == 'radio'">
                  <el-radio-group v-model="formItems.min">
                    <el-radio-button v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.code">{{ dict.name
                    }}</el-radio-button>
                  </el-radio-group>
                  <el-button v-if="formItems.attrType == 'radio'" size="mini" style="margin-left: 20px;"
                    @click="radiouncheck(formItems)">取消选择</el-button>
                </div>
              </el-form-item>
            </el-col>
          </div>
        </el-card>
        <el-card shadow="hover" class="margin-bom" id="bsfyyz" v-if="insurerCostFactorAttr.length > 0">
          <div slot="header" class="clearfix flex j-s a-c">
            <div class="flex j-s a-c">
              <span>保司费用因子</span>
            </div>
            <!-- <el-button @click="toggle('insurerCostFactor')" style="float: right; padding: 3px 0; color: #ff9000;"
              type="text">{{
                insurerCostFactorCollapsed
                ? '收起' : '展开'
              }}</el-button> -->
          </div>
          <div class="p-2" v-show="insurerCostFactorCollapsed">
            <el-col v-for=" (formItems, index) in insurerCostFactorAttr" :key="index"
              :span="formItems.attrType == 'checkbox' ? 24 : 12">
              <el-form-item :label="formItems.attrName">
                <template v-if="formItems.attrType == 'inputNumber'">
                  <template v-if="formItems.operator == '1' || formItems.operator == null">
                    <el-input-number v-model="formItems.min"></el-input-number>
                    <i class="el-icon-minus"></i>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '2'">
                    <span>＜</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '3'">
                    <span>≤</span>
                    <el-input-number v-model="formItems.min"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '4'">
                    <span>＞</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <template v-if="formItems.operator == '5'">
                    <span>≥</span>
                    <el-input-number v-model="formItems.max"></el-input-number>
                  </template>
                  <el-select v-model="formItems.operator" @change="selectoperatorChange($event, formItems.id)"
                    placeholder="请选择" style="width: 120px;margin-left: 20px;">
                    <el-option v-for="operatoritem in operator" :key="operatoritem.id" :label="operatoritem.label"
                      :value="operatoritem.value"></el-option>
                  </el-select>
                </template>
                <el-select v-if="formItems.attrType == 'select'" multiple v-model="formItems.list" placeholder="请选择"
                  style="width: 100%;" @change="selectChange($event, formItems.id, 'min')">
                  <el-option v-for="dict in formItems.dictLabal" :key="dict.code" :label="dict.name"
                    :value="dict.name"></el-option>
                </el-select>
                <el-input v-if="formItems.attrType == 'input'" v-model="formItems.min"></el-input>
                <el-checkbox-group v-if="formItems.attrType == 'checkbox'" v-model="formItems.list"
                  @change="checkboxChange($event, formItems.id, 'min')">
                  <el-checkbox v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.name"></el-checkbox>
                </el-checkbox-group>
                <div class="flex " v-if="formItems.attrType == 'radio'">
                  <el-radio-group v-model="formItems.min">
                    <el-radio-button v-for="dict in formItems.dictLabal" :key="dict.id" :label="dict.code">{{ dict.name
                    }}</el-radio-button>
                  </el-radio-group>
                  <el-button v-if="formItems.attrType == 'radio'" size="mini" style="margin-left: 20px;"
                    @click="radiouncheck(formItems)">取消选择</el-button>
                </div>
              </el-form-item>
            </el-col>
          </div>
        </el-card>
      </el-form>
    </div>
    <!-- <div class="flex j-c a-c" :class="{
      'footer': false,
    }">
      <el-button size="small" @click="cancelForm">取消</el-button>
      <el-button v-if="!disabled" type="warning" size="small" @click="saveForm">保存</el-button>
    </div> -->
  </div>
</template>
<script>
export default {
  name: "ProductForm",
  props: {
    form: Array,
    underwritingRulesForm: Object,
    overSize: String,
    cardList: Array,
    operator: Array,
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      sidebarItem: "clxx",
      localForm: { myArray: this.form },
      CarCollapsed: true,
      CarownersCollapsed: true,
      ApplicantCollapsed: true,
      InsuredCollapsed: true,
      insuranceTypeCollapsed: true,
      insurerCostFactorCollapsed: true,
      LicenseNoChecked: false,
      LicenseNoChecked1: false,
    };
  },
  created() {
  },
  computed: {
    CarAttr() {
      // 车辆
      return this.localForm.myArray.filter(item => item.attrGroup === "VehicleInformation");
    },
    CarownersAttr() {
      // 车主
      return this.localForm.myArray.filter(item => item.attrGroup === "VehicleOwnerInformation");
    },
    ApplicantAttr() {
      // 投保人
      return this.localForm.myArray.filter(item => item.attrGroup === "PolicyholderInformation");
    },
    InsuredAttr() {
      // 被保人
      return this.localForm.myArray.filter(item => item.attrGroup === "InsuredInformation");
    },
    insuranceTypeAttr() {
      // 险别
      return this.localForm.myArray.filter(item => item.attrGroup === "InsuranceInformation");
    },
    insurerCostFactorAttr() {
      // 保费因子
      return this.localForm.myArray.filter(item => item.attrGroup === "InsuranceCostFactor");
    }
  },
  methods: {
    rulesEndDateChange() {
      let tempStartDate = this.underwritingRulesForm.rulesStartDate;
      let tempEndDate = this.underwritingRulesForm.rulesEndDate;
      if (!tempStartDate) {
        this.underwritingRulesForm.rulesEndDate = null;
        this.$message({
          message: "请先选择规则起期！",
          type: "error",
        });
      }
      if (!this.validateEndDate(tempStartDate, tempEndDate)) {
        this.underwritingRulesForm.rulesEndDate = null;
        this.$message({
          message: "规则止期不能小于规则起期！",
          type: "error",
        });
      }
    },
    validateEndDate(startDateStr, endDateStr) {
      const startDate = new Date(startDateStr);
      const endDate = new Date(endDateStr);
      return endDate.getTime() > startDate.getTime();
    },
    scrollToSection(sectionId) {
      this.sidebarItem = sectionId;
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },
    radiouncheck(data) {
      data.min = null;
    },
    //车牌全选
    LicenseNoCheckedChange(value, name, prop) {
      let carPlateCollection = this.localForm.myArray.find(val => val.attrCode == name);
      carPlateCollection.minArray = [];
      if (value) {
        carPlateCollection.dictLabal.forEach(element => {
          carPlateCollection.minArray.push(element.name)
          carPlateCollection[prop] = carPlateCollection.minArray.join(',');
        });
      } else {
        carPlateCollection.minArray = [];
        carPlateCollection[prop] = "";
      }
    },
    toggle(attr) {
      this[attr + 'Collapsed'] = !this[attr + 'Collapsed'];
    },
    selectoperatorChange(value, index) {
      this.localForm.myArray.map(val => {
        if (val.id === index) {
          val.min = null;
          val.max = null;
        }
        return val;
      })
    },
    selectChange(value, index, prop) {
      let data = "";
      value.map((ele) => {
        data += ele + ",";
        return;
      });
      this.localForm.myArray.map(val => {
        if (val.id === index) {
          val[prop] = data.slice(0, -1);
        }
        return val;
      })
    },
    checkboxChange(value, index, prop) {
      let data = "";
      value.map((ele) => {
        data += ele + ",";
        return;
      });
      this.localForm.myArray.map(val => {
        if (val.id === index) {
          val[prop] = data.slice(0, -1);
        }
        return val;
      })
    },
    saveForm() {
      this.$emit('saveForm', this.localForm.myArray);
    },
    cancelForm() {
      this.$emit('cancelForm', false);
    },
  }
}
</script>
<style scoped lang="scss">
.sidebarstyle {
  background: rgba(45, 77, 137, 0.1);
  border-radius: 4px;
  font-weight: bold;
  color: #2D4D89;
}

.sidebarShortcut {
  width: 136px;
  height: auto;
  background: #fff;
  padding: 0 6px;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;

  ul {
    list-style: none;
    padding: 0;
  }

  ul>li {
    padding: 6px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 2px;
  }

  li:hover {
    background: rgba(45, 77, 137, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #2D4D89;
    cursor: pointer;
  }

  .ornament {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(45, 77, 137, 0.2);
    margin-right: 10px;
  }

  .ornament::after {
    content: "";
    width: 6px;
    height: 6px;
    background: #2D4D89;
    border-radius: 50%;
  }
}

.tab-panecent1 {
  height: 600px;
  width: 90%;
  overflow-y: auto;
}

/deep/ {
  .el-card__body {
    padding: 0;
  }

  .el-card__header {
    background-color: #F7F7F7;
    border: none;
    padding: 15px 18px;
  }
}

.margin-bom {
  margin-bottom: 20px;
}

.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #fff;
  z-index: 9;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 0 1px 0 #ccc;
  transition: all 0.3s, box-shadow 0.5s;

  &.shadow {
    box-shadow: 0 -10px 10px -10px #ccc;
  }
}

.clearfix {
  span {
    margin-left: 10px;
    font-weight: bold;
  }

  .icon-img {
    display: inline-block;
    width: 30px;
    height: 30px;

  }
}
</style>