tenant-Platform/src/views/quoteConfig/project/modules/projectAdd.vue

<template>
  <PageMain>
    <!-- 项目添加/编辑页面主容器 -->
    <div class="projectAdd">
      <!-- 项目表单，包含基本信息和方案配置 -->
      <el-form :model="projectAddFrom" :rules="projectAddRules" ref="ProjectAddRef">
        <!-- 基本信息描述 -->
        <el-descriptions title="基本信息">
          <el-descriptions-item>
            <!-- 保险公司选择 -->
            <el-form-item label="保险公司" prop="companyId">
              <el-select :disabled="isEdit" filterable v-model="projectAddFrom.companyId" placeholder="请选择"
                style="width: 40%" @change="initProduct">
                <el-option v-for="item in companyOption" :key="item.id" :value="item.id"
                  :label="item.nameSimple"></el-option>
              </el-select>
            </el-form-item>

            <!-- 方案类型选择 -->
            <el-form-item label="方案类型" prop="schemeType">
              <el-radio-group :disabled="isEdit" v-model="projectAddFrom.schemeType" @change="schemeTypeChange">
                <el-radio :value="1">基础方案</el-radio>
                <el-radio :value="2">自选方案</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 险种类型选择 -->
            <el-form-item label="险种类型" prop="productId">
              <el-radio-group :disabled="isEdit" v-model="projectAddFrom.productId" @change="initProduct">
                <el-radio-button v-for="item in insuranceType" :key="item.value" :value="item.value">{{ item.label
                }}</el-radio-button>
              </el-radio-group>
            </el-form-item>

            <!-- 规则条件配置 -->
            <div style="display: flex;">
              <span style="width: 10%"><a style="color: red">*</a>规则条件</span>
              <div style="width: 60%">
                <!-- 规则条件容器组件 -->
                <rule-condition-container :rulesAttrList="rulesAttrList" @Del="handleDel"></rule-condition-container>
              </div>
            </div>

            <!-- 添加规则条件按钮 -->
            <el-button style="margin: 10px 10%" plain type="primary" icon="plus" @click="addRules">添加条件</el-button>

            <!-- 方案配置描述 -->
            <el-descriptions>
              <template #title>
                <div style="display: flex; align-items: center">
                  <span>方案配置</span>
                  <!-- 添加新方案按钮（非编辑模式） -->
                  <el-button v-show="!isEdit" type="primary" icon="plus" style="margin-left: 20px;"
                    @click="addProject">添加新方案</el-button>
                </div>
              </template>
              <el-descriptions-item>
                <!-- 方案列表 -->
                <div class="configuration flex j-s a-start" v-for="(item, index) in projectAddFrom.schemeList">
                  <el-button link type="primary"v-if="index > 0"  @click="delScheme(index)">删除</el-button>
                  <div class="flex-1 p-[20px]">
                    <!-- 方案名称 -->
                    <el-form-item label="方案名称" prop="schemeName">
                      <el-input v-model="item.schemeName"></el-input>
                    </el-form-item>

                    <!-- 方案描述 -->
                    <el-form-item label="方案描述" prop="description">
                      <el-input type="textarea" v-model="item.description" maxlength="500"></el-input>
                    </el-form-item>

                    <!-- 驾意险配置 -->
                    <div>
                      <div style="display: flex; align-items: center; margin-bottom: 10px">
                        <span style="margin-right: 20px">驾意险</span>
                        <el-button link icon="plus" type="primary" @click="handleDriving(item, index)">选择驾意险</el-button>
                      </div>
                      <!-- 驾意险列表 -->
                      <el-table :data="item.drivingList">
                        <el-table-column label="名称" prop="productName">
                          <template #default="scope">
                            <el-button link type="primary" @click="getJYXDetail(scope.row)">{{ scope.row.productName
                              }}</el-button>
                          </template>
                        </el-table-column>
                        <!-- 客户端状态（仅自选方案显示） -->
                        <el-table-column label="客户端状态" prop="selectedStatus" v-if="projectAddFrom.schemeType != 1">
                          <template #default="scope">
                            <el-select v-model="scope.row.selectedStatus">
                              <el-option label="默认不选中" key="1" value="1"></el-option>
                              <el-option label="默认选中" key="2" value="2"></el-option>
                              <el-option label="强制选中" key="3" value="3"></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <!-- 驾意险份数 -->
                        <el-table-column label="份数" prop="quantity">
                          <template #default="scope">
                            <el-input-number v-model="scope.row.quantity" style="width: 150px;" :min="1" :max="99"
                              @change="numberChange($event, scope.row)"></el-input-number>份
                          </template>
                        </el-table-column>
                        <!-- 驾意险操作 -->
                        <el-table-column label="操作">
                          <template #default="scope">
                            <el-button link type="primary" @click="drivingTypeDel(item, scope.row)">删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>

                    <!-- 险种配置 -->
                    <div>
                      <div style="display: flex; align-items: center; margin: 10px 0">
                        <span style="margin-right: 20px">险种</span>
                        <el-button link icon="plus" type="primary" @click="handlePopover(item, index)">选择险种</el-button>
                      </div>
                      <!-- 险种列表 -->
                      <el-table :data="item.tableData">
                        <el-table-column label="险种" prop="kindName" width="300">
                          <template #default="scope">
                            <a>{{ scope.row.kindName }}</a>
                          </template>
                        </el-table-column>
                        <!-- 保额选择 -->
                        <el-table-column label="保额" prop="optionId" align="center">
                          <template #default="scope">
                            <!-- 自选方案支持多选保额 -->
                            <el-select :disabled="scope.row.insuranceId == '19'" v-if="projectAddFrom.schemeType === 2"
                              v-model="scope.row.moneyId" style="width: 300px" multiple
                              @change="() => { scope.row.optionId = scope.row.moneyId }">
                              <el-option v-for="m in scope.row.options" :label="m.label" :key="m.id"
                                :value="m.id"></el-option>
                            </el-select>
                            <!-- 基础方案只能选择一个保额 -->
                            <el-select :disabled="scope.row.insuranceId == '19'" v-else v-model="scope.row.moneyId"
                              style="width: 150px" @change="() => { scope.row.optionId = scope.row.moneyId }">
                              <el-option v-for="m in scope.row.options" :label="m.label" :key="m.id"
                                :value="m.id"></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <!-- 险种操作 -->
                        <el-table-column label="操作">
                          <template #default="scope">
                            <!-- 交强险不可删除 -->
                            <el-button
                              :disabled="projectAddFrom.productId == '0330' && scope.row.id == '19' || projectAddFrom.productId == '0330034002' && scope.row.id == '19' || projectAddFrom.productId == '0330034001' && scope.row.id == '19'"
                              link type="primary" @click="insuranceTypeDel(item, scope.row)">删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>

                </div>
              </el-descriptions-item>
            </el-descriptions>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>

      <!-- 底部操作按钮 -->
      <div class="btns">
        <el-button plain @click="quit">取消</el-button>
        <el-button type="primary" @click="save(ProjectAddRef)">保存</el-button>
      </div>

      <!-- 驾意险选择弹窗 -->
      <el-dialog :close-on-click-modal="false" v-model="drivingShow" title="选择驾意险" width="900">
        <driving ref="DrivingTypeRef" @close="handleDrivingClose"></driving>
      </el-dialog>

      <!-- 险种选择弹窗 -->
      <el-dialog :close-on-click-modal="false" v-model="insuranceShow" title="选择险种" width="500">
        <insurance ref="InsuranceTypeRef" @close="handleClose"></insurance>
      </el-dialog>

      <!-- 驾意险详情弹窗 -->
      <el-dialog :close-on-click-modal="false" v-model="JYXDetailShow" title="驾意险详情" width="600">
        <detail ref="JYXDetail"></detail>
      </el-dialog>

      <!-- 规则条件选择弹窗 -->
      <el-dialog :close-on-click-modal="false" v-model="ruleSelectShow" title="规则条件" width="600">
        <ruleSelect ref="RuleSelect" @close="handleRuleSelectClose"></ruleSelect>
      </el-dialog>
    </div>
  </PageMain>
</template>

<script setup lang="ts">

// 导入API模块
import api from "@/api";
// 导入Element Plus组件和类型
import { ElMessage, FormInstance, FormRules } from "element-plus";
// 导入Vue Router
import { useRouter, useRoute } from 'vue-router'
// 导入自定义组件
import insurance from '../../../../layouts/components/InsuranceType/index.vue'
import driving from '../../../../layouts/components/DrivingType/index.vue'
import rule from '../../../../components/ruleConditionContainer/index.vue'
import detail from '../../../../layouts/components/JYXDetail/index.vue'
import ruleSelect from '../../../../layouts/components/ruleSelect/index.vue'
import Detail from "@/views/representative/detail.vue";
// 导入Vue 3组合式API
import { ref, onMounted, onBeforeMount, nextTick } from 'vue'

// 路由实例
const myRouter = useRouter()
const myRoute = useRoute()

// 表单引用
const ProjectAddRef = ref<FormInstance>()
// 组件引用
const InsuranceTypeRef = ref(null)
const DrivingTypeRef = ref(null)
const JYXDetail = ref(null)
const RuleSelect = ref()

// 车牌地区数据
const licensePlateRegion = ref();
// 车牌号数据
const licensePlateNumber = ref();

/**
 * 获取车牌地区数据
 * @param value 地区代码
 */
const regionLicenseRegion = (value: string) => {
  api.agreementApi.getAreaLicense(value).then((res: any) => {
    if (res.code == '200') {
      let data: any = [];
      res.data.map((val: any) => {
        data.push({
          code: val.areaNumber,
          name: val.license,
        })
        return val;
      })
      licensePlateRegion.value = data;
    }
  });
}

/**
 * 获取车牌号数据
 * @param value 地区代码
 */
const regionLicenseNumber = (value: string) => {
  api.agreementApi.getAreaLicense(value).then((res: any) => {
    if (res.code == '200') {
      let data: any = [];
      res.data.map((val: any) => {
        data.push({
          code: val.areaNumber,
          name: val.license,
        })
        return val;
      })
      licensePlateNumber.value = data;
    }
  });
}

// 规则条件选择弹窗状态
let ruleSelectShow = ref(false)

/**
 * 处理规则条件选择关闭
 * @param data 选中的规则条件数据
 */
const handleRuleSelectClose = (data) => {
  if (data && data.length > 0) {
    rulesAttrList.value = data.map(a => {
      // 处理车牌相关数据
      if (a.attrCode == 'LicenseNo') {
        a.dictLabal = licensePlateNumber.value;
      }
      if (a.attrCode == 'LicenseArea') {
        a.dictLabal = licensePlateRegion.value;
      }
      return {
        ...a,
        min: a.attrName == '能源类型' ? '0' : a.min ? a.min : '',
        minArray: a.minArray && a.minArray.length > 0 ? a.minArray : a.attrName == '使用性质' || a.attrName == '车辆种类' || a.attrName == '能源类型' ? [a.dictLabal[0].code] : [],
        max: a.max ? a.max : ''
      }
    })
  }
  ruleSelectShow.value = false
}

// 是否编辑模式
let isEdit = ref(false)

// 项目表单数据
let projectAddFrom = ref({
  ruleAttrs: [], // 规则属性
  schemeType: 1, // 方案类型：1-基础方案，2-自选方案
  productId: '0330', // 险种类型
  schemeList: [{
    schemeName: '', // 方案名称
    description: '', // 方案描述
    tableData: [], // 险种列表
    drivingList: [], // 驾意险列表
    schemeInsuranceList: [], // 方案险种列表
    drivingIntentionList: [] // 驾意险意向列表
  }]
})

// 表单验证规则
let projectAddRules = ref<FormRules>({
  companyId: [
    { required: true, trigger: "change", message: "请选择保险公司" }
  ],
  schemeType: [
    { required: true, trigger: "change", message: "请选择方案类型" }
  ],
  productId: [
    { required: true, trigger: "change", message: "请选择险种类型" }
  ]
})

// 驾意险详情弹窗状态
let JYXDetailShow = ref(false)

/**
 * 查看驾意险详情
 * @param row 驾意险数据行
 */
const getJYXDetail = (row) => {
  JYXDetailShow.value = true
  nextTick(() => {
    JYXDetail.value.initData(row.drivingIntentionId)
  })
}

/**
 * 处理驾意险份数变化
 * @param e 新的份数值
 * @param row 驾意险数据行
 */
const numberChange = (e, row) => {
  if (typeof e != 'number') {
    row.quantity = 1
  }
}

/**
 * 初始化产品方案
 * @param e 产品ID
 */
const initProduct = async (e) => {
  // 获取规则条件中的能源类型、车辆种类、使用性质
  let energyType = null, vehicleType = null, carnature = null
  if (rulesAttrList.value && rulesAttrList.value.length > 0) {
    energyType = rulesAttrList.value.find(a => a.attrName === '能源类型')
    vehicleType = rulesAttrList.value.find(a => a.attrName === '车辆种类')
    carnature = rulesAttrList.value.find(a => a.attrName === '使用性质')
  }

  // 根据产品类型初始化默认险种
  if (e == '0330' || e == '0330034001') {
    // 交强险
    let obj = insuranceTypeList.value.filter(item => item.id == '19')
    if (obj) {
      obj.forEach(item => {
        item.insuranceId = item.id
        if (item.id == '19') {
          item.moneyId = item.options[0].id
        }
      })
      projectAddFrom.value.schemeList.forEach(item => {
        item.schemeName = ''
        item.description = ''
        item.drivingList = []
        item.tableData = [...obj]
      })
    }
  } else if (e == '034002') {
    // 商业险
    let obj = insuranceTypeList.value.find(item => item.id == '2')
    obj.insuranceId = obj.id
    projectAddFrom.value.schemeList.forEach(item => {
      item.schemeName = ''
      item.description = ''
      item.drivingList = []
      item.tableData = [obj]
    })
  } else if (e == '0330034002') {
    // 交强险+商业险
    let obj = insuranceTypeList.value.filter(item => item.id == '2' || item.id == '19')
    if (obj) {
      obj.forEach(item => {
        item.insuranceId = item.id
        if (item.id == '19') {
          item.moneyId = item.options[0].id
        }
      })
      projectAddFrom.value.schemeList.forEach(item => {
        item.schemeName = ''
        item.description = ''
        item.drivingList = []
        item.tableData = [...obj]
      })
    }
  } else {
    // 其他产品类型
    projectAddFrom.value.schemeList.forEach(item => {
      item.schemeName = ''
      item.description = ''
      item.drivingList = []
      item.tableData = []
    })
  }

  // 获取保险公司的方案配置
  if (projectAddFrom.value.companyId && projectAddFrom.value.productId && projectAddFrom.value.schemeType) {
   await  initInsurance()
  await api.projectApi.getSchemeByCompany({
      companyId: projectAddFrom.value.companyId,
      productId: projectAddFrom.value.productId,
      schemeType: projectAddFrom.value.schemeType,
      energyType: energyType?.min,
      vehicleType: vehicleType?.minArray?.join(','),
      carnature: carnature?.minArray?.join(','),
    }).then(res => {
      if (res.code == 200) {
        if (res.data && res.data.schemeList.length > 0) {
          res.data.schemeList.forEach(item => {
            // 处理驾意险数据
            item.drivingList = item.drivingIntentionList
            // 处理险种数据
            item.tableData = item.schemeInsuranceList.map(sub => {
              let obj = insuranceTypeList.value.find(a => a.id === sub.insuranceId)
              return {
                ...sub,
                optionId: res.data.schemeType === 1 ? `${sub.optionId[0]}` : sub.optionId,
                moneyId: res.data.schemeType === 1 ? `${sub.optionId[0]}` : sub.optionId,
                options: obj?.options
              }
            })
          })
          projectAddFrom.value = res.data
          // 处理规则条件数据
          rulesAttrList.value = res.data.ruleAttrs.map(val => {
            if (val.attrCode == 'LicenseNo') {
              val.dictLabal = licensePlateNumber.value;
            }
            if (val.attrCode == 'LicenseArea') {
              val.dictLabal = licensePlateRegion.value;
            }
            return val
          })
        }
      }
    })
  }
}

// 险种列表
let insuranceTypeList = ref([])

/**
 * 初始化险种数据
 */
const initInsurance = () => {
  api.projectApi.getBusinessInsurance(projectAddFrom.value.productId || '0330').then(res => {
    if (res.code == 200) {
      insuranceTypeList.value = res.data

      // 根据产品类型初始化默认险种
      if (projectAddFrom.value.productId == '0330' || projectAddFrom.value.productId == '0330034001') {
        let obj = insuranceTypeList.value.filter(item => item.id == '19')
        if (obj) {
          obj.forEach(item => {
            item.insuranceId = item.id
            if (item.id == '19') {
              item.moneyId = item.options[0].id
            }
          })
          projectAddFrom.value.schemeList.forEach(item => {
            item.drivingList = []
            item.tableData = [...obj]
          })
        }
      } else if (projectAddFrom.value.productId == '034002') {
        let obj = insuranceTypeList.value.find(item => item.id == '2')
        obj.insuranceId = obj.id
        projectAddFrom.value.schemeList.forEach(item => {
          item.drivingList = []
          item.tableData = [obj]
        })
      } else if (projectAddFrom.value.productId == '0330034002') {
        let obj = insuranceTypeList.value.filter(item => item.id == '2' || item.id == '19')
        if (obj) {
          obj.forEach(item => {
            item.insuranceId = item.id
            if (item.id == '19') {
              item.moneyId = item.options[0].id
            }
          })
          projectAddFrom.value.schemeList.forEach(item => {
            item.drivingList = []
            item.tableData = [...obj]
          })
        }
      } else {
        projectAddFrom.value.schemeList.forEach(item => {
          item.drivingList = []
          item.tableData = []
        })
      }
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

/**
 * 方案类型切换处理
 * @param e 方案类型
 */
const schemeTypeChange = (e) => {
  projectAddFrom.value.schemeType = e
  initProduct(projectAddFrom.value.productId)
}

// 保险公司列表
let companyOption = ref([])

/**
 * 初始化保险公司列表
 */
const initCompany = () => {
  api.projectApi.getCompanyList().then(res => {
    if (res.code == 200) {
      companyOption.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

/**
 * 添加新方案
 */
const addProject = () => {
  projectAddFrom.value.schemeList.push({
    schemeName: '',
    description: '',
    tableData: [],
    drivingList: [],
    schemeInsuranceList: [],
    drivingIntentionList: []
  })
}
// 删除方案
const delScheme = (index) => {
  projectAddFrom.value.schemeList.splice(index, 1)
}
// 规则条件显示状态
let rulesShow = ref(false)

/**
 * 打开规则条件选择弹窗
 */
const addRules = () => {
  ruleSelectShow.value = true
  nextTick(() => {
    RuleSelect.value.initEditData(rulesAttrList.value)
  })
}

// 规则条件列表
let rulesAttrList = ref([])
// 默认规则条件列表
let defaultAttrList = ref([])

/**
 * 取消规则条件编辑
 * @param data 数据
 */
const cancelRule = (data) => {
  rulesShow.value = false
}

/**
 * 删除规则条件
 * @param index 索引
 */
const handleDel = (index) => {
  // 能源类型、使用性质、车辆种类不可删除
  if (rulesAttrList.value[index].attrName === '能源类型' || rulesAttrList.value[index].attrName === '使用性质' || rulesAttrList.value[index].attrName === '车辆种类') {
    return
  } else {
    rulesAttrList.value.splice(index, 1)
  }
}

// 险种类型列表
let insuranceType = ref([])

/**
 * 初始化险种类型
 */
const initType = () => {
  api.commonApi.personInfo('insurance_type').then(res => {
    if (res.code == 200) {
      insuranceType.value = res.data
      projectAddFrom.value.productId = insuranceType.value[0].value
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 险种选择弹窗状态
let insuranceShow = ref(false)

/**
 * 处理险种选择关闭
 * @param obj 险种数据
 */
const handleClose = (obj) => {
  if (obj.list && obj.list.length > 0) {
    if (projectAddFrom.value.schemeType === 2) {
      // 自选方案处理多选
      obj.list.forEach(a => {
        a.optionId = []
        a.options.forEach(b => {
          if (b.checked) {
            a.optionId.push(b.id)
          }
        })
        a.moneyId = a.optionId
      })
    } else {
      // 基础方案处理单选
      obj.list.forEach(a => {
        a.optionId = a.options.find(b => b.checked)?.id
        a.moneyId = a.optionId
      })
    }
    projectAddFrom.value.schemeList[obj.index].tableData = obj.list
  }
  insuranceShow.value = false
}

/**
 * 删除险种
 * @param item 方案项
 * @param row 险种行数据
 */
const insuranceTypeDel = (item, row) => {
  let data = item.tableData.filter(a => a.insuranceId != row.insuranceId)
  item.tableData = [...data]
}

// 驾意险选择弹窗状态
let drivingShow = ref(false)

/**
 * 打开驾意险选择弹窗
 * @param item 方案项
 * @param index 索引
 */
const handleDriving = (item, index) => {
  drivingShow.value = true
  nextTick(() => {
    DrivingTypeRef.value.initEditData(item.drivingList, index, myRoute.query.companyId)
  })
}

/**
 * 处理驾意险选择关闭
 * @param obj 驾意险数据
 */
const handleDrivingClose = (obj) => {
  if (obj.list && obj.list.length > 0) {
    obj.list.forEach(sub => {
      sub.drivingIntentionId = sub.drivingIntentionId
      sub.selectedStatus = sub.selectedStatus ? sub.selectedStatus : '1'
      sub.quantity = sub.quantity ? sub.quantity : '1'
    })
    projectAddFrom.value.schemeList[obj.index].drivingList = obj.list
  }
  drivingShow.value = false
}

/**
 * 删除驾意险
 * @param item 方案项
 * @param row 驾意险行数据
 */
const drivingTypeDel = (item, row) => {
  let data = item.drivingList.filter(a => a.id != row.id)
  item.drivingList = [...data]
}

/**
 * 打开险种选择弹窗
 * @param item 方案项
 * @param index 索引
 */
const handlePopover = (item, index) => {
  insuranceShow.value = true
  nextTick(() => {
    InsuranceTypeRef.value.initEditData(item.tableData, index, projectAddFrom.value.schemeType, projectAddFrom.value.productId)
  })
}

/**
 * 初始化规则属性
 */
const initAttr = () => {
  api.agreementApi.ruleAttrGroup({ attrName: '' }).then(res => {
    if (res.code == 200) {
      // 获取车辆信息相关的规则属性
      let list = res.data?.VehicleInformation?.filter(e => e.attrName === '能源类型' || e.attrName === '使用性质' || e.attrName === '车辆种类')
      rulesAttrList.value = list?.map(a => {
        if (a.attrCode == 'LicenseNo') {
          a.dictLabal = licensePlateNumber.value;
        }
        if (a.attrCode == 'LicenseArea') {
          a.dictLabal = licensePlateRegion.value;
        }
        return {
          ...a,
          operator: '1',
          min: a.attrName == '能源类型' ? '0' : '',
          minArray: a.minArray ? a.minArray : a.attrName == '使用性质' || a.attrName == '车辆种类' ? [a.dictLabal[0].code] : []
        }
      })
      defaultAttrList.value = [...list]
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

/**
 * 初始化编辑数据
 */
const initEdit = async () => {
  initInsurance()
  await api.projectApi.getScheme(myRoute.query.id).then(res => {
    if (res.code == 200) {
      if (res.data && res.data.schemeList.length > 0) {
        res.data.schemeList.forEach(item => {
          item.drivingList = item.drivingIntentionList
          item.tableData = item.schemeInsuranceList.map(sub => {
            let obj = insuranceTypeList.value.find(a => a.id == sub.insuranceId)
            console.log("🚀 ~ initEdit ~ obj:", obj)
            return {
              ...sub,
              optionId: res.data.schemeType === 1 ? `${sub.optionId[0]}` : sub.optionId,
              moneyId: res.data.schemeType === 1 ? `${sub.optionId[0]}` : sub.optionId,
              options: obj?.options
            }
          })
        })
        projectAddFrom.value = res.data
        rulesAttrList.value = res.data.ruleAttrs.map(val => {
          if (val.attrCode == 'LicenseNo') {
            val.dictLabal = licensePlateNumber.value;
          }
          if (val.attrCode == 'LicenseArea') {
            val.dictLabal = licensePlateRegion.value;
          }
          return val
        })
      }
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

/**
 * 取消操作
 */
const quit = () => {
  myRouter.push({
    path: '/quoteConfig/agreement/project',
    query: {
      id: myRoute.query.companyId
    }
  })
}

/**
 * 保存项目
 * @param ProjectAddRef 表单引用
 */
const save = async (ProjectAddRef: FormInstance | undefined) => {
  if (!ProjectAddRef) {
    return
  }
  await ProjectAddRef.validate((valid) => {
    if (valid) {
      let formData = { ...projectAddFrom.value }
      formData.ruleAttrs = [...rulesAttrList.value]

      // 处理方案数据
      formData.schemeList.forEach(item => {
        item.drivingIntentionList = []
        item.schemeInsuranceList = []

        // 处理驾意险数据
        item.drivingList.forEach(sub => {
          let obj = {
            id: sub.id,
            drivingIntentionId: sub.drivingIntentionId,
            selectedStatus: sub.selectedStatus,
            quantity: sub.quantity
          }
          item.drivingIntentionList.push(obj)
        })

        // 处理险种数据
        item.tableData.forEach(ins => {
          let obj = {
            id: ins.id,
            insuranceId: ins.insuranceId,
            optionId: projectAddFrom.value.schemeType === 1 ? [ins.moneyId] : projectAddFrom.value.schemeType === 2 ? ins.moneyId : []
          }
          item.schemeInsuranceList.push(obj)
        })
      })

      // 调用保存API
      api.projectApi.saveScheme({ ...formData }).then(res => {
        if (res.code == 200) {
          ElMessage({
            message: res.msg,
            type: 'success'
          })
          myRouter.push({
            path: '/quoteConfig/agreement/project',
            query: {
              id: myRoute.query.companyId
            }
          })
        } else if (res.code != 400) {
          ElMessage({
            message: res.msg,
            type: 'warning'
          })
        }
      })
    } else {
      ElMessage({
        message: '请正确填写相关信息！',
        type: 'warning'
      })
    }
  })
}

/**
 * 组件挂载时执行
 */
onBeforeMount(() => {
  // 初始化险种类型
  initType()
  // 初始化保险公司列表
  initCompany()
  // 初始化车牌地区数据
  regionLicenseRegion('0')
  // 初始化车牌号数据
  regionLicenseNumber('14')
  // 设置保险公司ID
  projectAddFrom.value.companyId = myRoute.query.companyId

  // 判断是否为编辑模式
  if (myRoute.query.id) {
    isEdit.value = true
    projectAddFrom.value.id = myRoute.query.id
    projectAddFrom.value.productId = myRoute.query.productId
    initEdit()
  } else {
    isEdit.value = false
    initAttr()
    initInsurance()
  }
})

</script>

<style scoped lang="scss">
.projectAdd {
  overflow-y: auto;
  height: 100%;
}

.configuration {
  background: #f0f0f0;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>