<template>
  <div style="padding-top: 10px">
    <div>
      <CommonForm :showAnchor="false">
        <template #form-right>
          <el-form ref="secondHolderFormRef" :model="form" :rules="rules">
            <el-row v-for="father in processedSecondHolderData" style="margin-bottom: 10px">
              <div class="formBox formFna">
                <CardOne
                  :title="father.fatherTitle"
                  v-if="father.showMoudle"
                  :showTitle="father.showTitle"
                >
                  <template #content>
                    <el-row v-if="!father.showTable" :gutter="20">
                      <template v-for="child in father.data" :key="child.key">
                        <el-col :sm="child.sm" :lg="child.lg" class="formItem" v-if="child.show">
                          <div>
                            <el-form-item
                              :label="child.label"
                              :prop="child.key"
                              :key="child.key"
                              :label-width="child.labelWidth"
                              :label-position="child.labelPosition"
                            >
                              <el-input
                                v-if="child.domType === 'Input'"
                                :type="child.inputType"
                                v-model="form[child.key]"
                                :placeholder="child.placeholder"
                                maxlength="30"
                                :disabled="editStatus"
                                :style="{ width: child.inputWidth ? child.inputWidth : '100%' }"
                              />
                              <el-select
                                v-if="child.domType === 'Select'"
                                v-model="form[child.key]"
                                :placeholder="child.placeholder"
                                @change="handleSelectChange(father, child)"
                                :disabled="editStatus"
                              >
                                <el-option
                                  v-for="item in child.options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                />
                              </el-select>
                              <el-date-picker
                                style="width: 100%"
                                v-if="child.domType === 'DatePicker'"
                                v-model="form[child.key]"
                                type="date"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                :placeholder="child.placeholder"
                                :disabled="editStatus"
                              />
                              <el-checkbox-group
                                v-if="child.domType === 'Checkbox'"
                                v-model="form[child.key]"
                                :disabled="editStatus"
                              >
                                <el-checkbox
                                  v-for="item in child.options"
                                  :key="item.value"
                                  :label="item.value"
                                >
                                  {{ item.label }}
                                </el-checkbox>
                              </el-checkbox-group>
                              <!-- <el-select
                                v-model="form[child.key]"
                                v-if="child.domType === 'SearchSelect'"
                                filterable
                                remote
                                reserve-keyword
                                placeholder="请输入关键词搜索"
                                :remote-method="query => searchSelectList(query, child.key)"
                                :loading="searchLoadingStates[child.key]"
                                :disabled="editStatus"
                                @change="handleSearchSelectChange(child.key)"
                              >
                                <el-option
                                  v-for="item in searchOptions[child.key] || []"
                                  :key="item.id"
                                  :label="item.label"
                                  :value="item.value"
                                />
                              </el-select> -->
                            </el-form-item>
                          </div>
                        </el-col>
                      </template>
                    </el-row>
                    <!-- 是表格数据 -->
                    <el-row v-if="father.showTable">
                      <el-col :span="24" v-if="father.addChildren">
                        <el-button
                          :disabled="editStatus"
                          type="primary"
                          icon="Plus"
                          size="small"
                          style="margin-bottom: 10px"
                          @click="addChildren(father)"
                          >{{ father.addChildrenTxt }}</el-button
                        >
                      </el-col>
                      <el-table :data="father.data" border v-if="father.data.length > 0">
                        <!-- 动态渲染列 -->
                        <el-table-column
                          v-for="column in father.columns"
                          :key="column.prop"
                          :label="column.label"
                          :prop="column.prop"
                          align="center"
                        >
                          <template #default="scope">
                            <span v-if="column.type === 'text'">{{ scope.row[column.prop] }}</span>
                          </template>
                        </el-table-column>

                        <!-- 操作列（固定） -->
                        <el-table-column align="center" label="操作" width="150">
                          <template #default="scope">
                            <el-button
                              type="primary"
                              size="small"
                              @click="updateChildren(father, scope.row)"
                            >
                              修改
                            </el-button>
                            <el-button
                              type="danger"
                              size="small"
                              @click="deleteChildren(father, scope.$index)"
                            >
                              删除
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-row>
                  </template>
                </CardOne>
              </div>
            </el-row>
          </el-form>
        </template>
      </CommonForm>

      <el-dialog title="联系人信息" v-model="openList" width="600px" append-to-body>
        <div>
          <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="85px">
            <el-form-item label="联系人姓名" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入姓名" @input="customerList" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" circle @click="customerList" />
              <el-button type="info" icon="Refresh" circle @click="resetCustomerList" />
            </el-form-item>
          </el-form>
          <div class="customerBox">
            <div class="customerItem" v-for="item in tableData" :key="item.id">
              <div class="top">
                <div class="right">
                  <el-button type="primary" size="small" @click="handleExport(item)"
                    >导入联系人</el-button
                  >
                </div>
              </div>
              <div class="bottom">
                <div class="left">
                  <div class="infoItem">
                    <span>姓名：</span>
                    <span> {{ item.name || '暂无' }}</span>
                  </div>
                  <div class="infoItem">
                    <span>性别：</span>
                    <span>
                      <dict-tag :options="fetchDictData('sys_gender')" :value="item.gender"
                    /></span>
                  </div>
                  <div class="infoItem">
                    <span>年龄：</span>
                    <span> {{ item.age || '暂无' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <Phone
      @close="handleCloseDrawer"
      :showDrawer="showPhoneDrawer"
      :drawerInfo="drawerInfo"
      :phoneMenuList="phoneMenuList"
      :phoneQuickList="phoneQuickList"
      @confirmDrawer="confirmDrawer"
    />
    <Address
      @close="handleCloseDrawer"
      :showAddressDrawer="showAddressDrawer"
      :drawerInfo="drawerInfo"
      :addressMenuList="addressMenuList"
      :addressQuickList="addressQuickList"
      @confirmDrawer="confirmDrawer"
    />
    <Country
      :showCountryDrawer="showCountryDrawer"
      @close="handleCloseDrawer"
      @confirmCountry="confirmDrawer"
    />
  </div>
</template>
<script setup name="secondHolderInfo">
import CardOne from '@/components/formCard/cardOne'
import CommonForm from '@/views/components/commonForm'
import { calculateExactAge } from '@/utils/date'
import { ArrowRight } from '@element-plus/icons-vue'
import secondHolderDomData from '@/formJson/secondHolder'
import Country from '@/views/components/country'
import Phone from '@/views/components/phone'
import Address from '@/views/components/address'

import { watch, nextTick } from 'vue'
import { getCustomerList } from '@/api/sign/fna'
import { editSecondHolderInfo } from '@/api/sign/appointment'
import { updatePolicySecondHolder } from '@/api/sign/underwritingMain'
import useDictStore from '@/store/modules/dict'

const dictStore = useDictStore() //获取字典数据
const props = defineProps({
  activeName: { type: String, default: '' }, //tab名称
  fearthStatus: { type: String, default: '' }, //父组件状态，新增、修改
  formStatus: { type: String, default: '' }, //父组件状态，新增、修改
  idsObj: { type: Object, default: () => ({}) }, //父组件传递过来的id对象
  apiSecondHolderInfoDto: { type: Object, default: () => ({}) }, //父组件传递过来的预约信息的详情
  appointmentStatus: { type: Number }, //父组件传递过来的预约的状态
  customerInfo: { type: Object, default: () => ({}) }, //客户详情回显表单用
  showSubmitBtn: { type: Boolean, default: false }, //父组件状态，新增、修改
  pageSource: { type: String, default: false }, //页面来源
  fatherTabName: { type: String, default: '' }, //一级tab名称
  anchorContainer: { type: String, default: '' }, //锚点滚动容器
  editStatus: { type: Boolean, default: false }, //编辑状态
  affixOffset: { type: Number },
  tabIndex: { type: [String, Number], default: '' } //tab索引
})

const emit = defineEmits(['handleSuccessEdit', 'policyEditSuccess'])
const { proxy } = getCurrentInstance()
// const { csf_id_type, sys_gender } = proxy.useDict('csf_id_type', 'sys_gender')
const showPhoneDrawer = ref(false) //电话抽屉开关
const showAddressDrawer = ref(false) //地址抽屉开关
const showCountryDrawer = ref(false) //国家/地区抽屉开关
const drawerInfo = ref({}) // 用于存储所有arrowRight类型的输入框输入值
const saveKey = ref({}) // 用于存储当前点击的drawer框返回的对象,修改的时候回显值也要存key
const errorFields = ref([]) // 存储校验失败的字段信息
// const editStatus = ref(true) // 表单是否可编辑,若是修改初始不可编辑
const openList = ref(false) // 客户列表弹窗
const oldObjInfo = ref({}) // 修改时存储原始数据，便于撤销操作
const showContacts = ref(true)

const tableLoading = ref(false)
const tableData = ref([])
const total = ref(0)
// 地址组件菜单数据
const addressMenuList = ref([
  {
    name: '国家/地区',
    icon: false,
    value: '',
    placeholder: '请输入国家/地区',
    key: 'region'
  },
  {
    name: '省市',
    icon: false,
    value: '',
    placeholder: '请输入省市',
    key: 'city'
  },
  {
    name: '街道',
    icon: false,
    value: '',
    placeholder: '请输入街道',
    key: 'street'
  },
  {
    name: '详细地址',
    icon: false,
    value: '',
    placeholder: '请输入详细地址',
    key: 'location'
  }
])
// 快捷地址的数据
const addressQuickList = ref([])
const phoneMenuList = ref([
  {
    name: '区号',
    icon: true,
    value: '',
    placeholder: '请输入区号',
    arrow: true,
    type: 'string'
  },
  {
    name: '电话号码',
    icon: false,
    value: '',
    placeholder: '请输入电话号码',
    type: 'number'
  }
])
const phoneQuickList = ref([])
const commonObj = ref({}) //存储个人和公司的公共key
const deleteKeyList = ref([
  'objType',
  'mailingAddress',
  'residentialAddress',
  'residenceAddress',
  'companyAddress',
  'txAddress',
  'companyEnterAddress',
  'phoneString',
  'phoneCode'
]) // 存储需要删除的key
const data = reactive({
  form: {},
  tempSecondHolderForm: {}, //由于切换tab的时候，表单数据会重置，所以需要
  processedSecondHolderData: [], // 处理后的表单数据
  oldAppointmentData: [], // 保存旧的表单Dom,便于撤销操作
  rules: {}, //表单验证规则,
  queryParams: {
    pageNo: 1,
    pageSize: 4,
    name: undefined
  }
})
const {
  form,
  rules,
  processedSecondHolderData,
  queryParams,
  oldAppointmentData,
  tempSecondHolderForm
} = toRefs(data)
const handleDateChange = child => {
  let age = null
  if (child.key == 'birthTime') {
    age = calculateExactAge(proxy.formatToDate(form.value.birthTime))
    if (age >= 0) {
      form.value.age = age
    }
  }
}
const disabledDate = time => {
  return time.getTime() > Date.now()
}

const customerList = () => {
  tableLoading.value = true
  getCustomerList(queryParams.value).then(res => {
    if (res.code == 200) {
      tableData.value = res.data.records
      total.value = res.data.total
      tableLoading.value = false
    }
  })
}
const resetCustomerList = () => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 4,
    name: undefined
  }
  customerList()
}
// 从客户列表中导入客户信息到当前表单
const handleExport = row => {
  oldObjInfo.value = JSON.parse(JSON.stringify(form.value)) // 修改时存储原始数据，便于撤销操作
  processFormData({
    domdata: processedSecondHolderData.value,
    customerInfo: row,
    exportValue: true
  })
  openList.value = false
}

// 获取字典数据
const fetchDictData = dictType => {
  let options = []
  try {
    dictStore.dictTypeLists.forEach(item => {
      if (item.dictType == dictType) {
        if (dictType == 'sys_no_yes') {
          item.dictItemList.forEach(item1 => {
            item1.value = Number(item1.value)
          })
        }
        options = item.dictItemList
      }
    })
    return options
  } catch (error) {
    console.error('获取字典数据失败:', error)
    return []
  }
}
// 添加英文校验函数
const validateEnglish = (value, key) => {
  if (value && !/^[A-Za-z]*$/.test(value)) {
    // 清空非英文字符
    form.value[key] = ''
    proxy.$modal.msgError('请输入英文字符')
  }
}

// 处理表单配置，添加字典数据
/**
 * domdata:表单的dom数据
 * customerInfo:根据客户信息回显表单
 * exportValue:是否从导入联系人列表中导入客户信息到当前表单
 */
const processFormData = async obj => {
  form.value = {}
  // 深拷贝原始数据
  const processedData = JSON.parse(JSON.stringify(obj.domdata))
  console.log('obj', obj)

  for (const section of processedData) {
    if (section.data) {
      for (const field of section.data) {
        // 编辑状态下回显表单值
        if (section.key == 'apiSecondHolderInfoDto' && props.idsObj.appointmentBizId) {
          if (obj['detailInfo'] && obj['detailInfo']['isSecond'] == '0') {
            section.showMoudle = false
          } else {
            section.showMoudle = true
          }
        }
        if (field.dictType) {
          // 获取字典数据
          field.options = fetchDictData(field.dictType)
        }
        if (field.required) {
          rules.value[field.key] = [
            { required: true, message: `${field.label}不能为空`, trigger: 'blur' }
          ]
        }
        if (obj.customerInfo) {
          for (const key1 in obj.customerInfo) {
            if (key1 == 'birthdate' && obj.customerInfo[key1]) {
              obj.customerInfo[key1] = proxy.formatToDate(obj.customerInfo[key1])
            }
            // 对应客户和dom表单字段方便赋值
            if (field.customerKey && key1 == field.customerKey) {
              form.value[field.key] = obj.customerInfo[key1]
            }
          }
        }
      }
    }
  }

  //当tab切换走，在切换回来的时候，需要把之前保存的值赋值回来
  if (
    JSON.stringify(tempSecondHolderForm.value) !== '{}' &&
    !props.idsObj.appointmentBizId &&
    props.pageSource == 'fnaList'
  ) {
    form.value = { ...tempSecondHolderForm.value }
  }
  if (props.idsObj.appointmentBizId) {
    form.value = { ...props.apiSecondHolderInfoDto }
  } else {
  }
  processedSecondHolderData.value = oldAppointmentData.value = processedData
}

//弹出右侧抽屉
const handleFoucs = child => {
  if (child.disabled) return

  drawerInfo.value = JSON.parse(JSON.stringify(child))
  switch (child.drawerType) {
    case 'phone':
      phoneMenuList.value[0].key = child.code
      phoneMenuList.value[1].key = child.key
      phoneMenuList.value.forEach(item => {
        item.value = ''
        for (const key in saveKey.value) {
          if (key == child.key) {
            for (const key2 in saveKey.value[key]) {
              if (item.key == key2) {
                item.value = saveKey.value[key][key2]
              }
            }
          }
        }
      })

      showPhoneDrawer.value = true
      break
    case 'address':
      addressMenuList.value.forEach(item => {
        item.value = ''
        for (const key in saveKey.value) {
          if (key == child.key) {
            for (const key2 in saveKey.value[key]) {
              if (item.key == key2) {
                item.value = saveKey.value[key][key2]
              }
            }
          }
        }
      })
      showAddressDrawer.value = true
      break
    case 'country':
      showCountryDrawer.value = true
      break
    default:
      break
  }
}
// 处理抽屉关闭
const handleCloseDrawer = () => {
  showPhoneDrawer.value = false
  showAddressDrawer.value = false
  showCountryDrawer.value = false
  drawerInfo.value = {}
}
const confirmDrawer = info => {
  // info 为抽屉返回的值
  if (drawerInfo.value.domType == 'arrowRight' && drawerInfo.value.drawerType) {
    let newObj = info[drawerInfo.value.key]
    if (form.value['customerType'] == 'COMPANY') {
      newObj.fatherKey = 'company'
    } else if (form.value['customerType'] == 'INDIVIDUAL') {
      newObj.fatherKey = 'person'
    }
    //要判断drawerType
    switch (drawerInfo.value.drawerType) {
      case 'phone':
        newObj.objType = drawerInfo.value.drawerType
        // 因为电话有多个，根据点击的电话类型在抽屉里回显，所以要用drawerInfo.value.code来控制
        form.value[info.key] = `${newObj[drawerInfo.value.code]} ${newObj[drawerInfo.value.key]}`
        saveKey.value[drawerInfo.value.key] = newObj
        break
      case 'address':
        newObj.objType = drawerInfo.value.drawerType
        newObj.type = drawerInfo.value.key
        form.value[info.key] = `${newObj.region} ${newObj.city} ${newObj.street} ${newObj.location}`
        saveKey.value[info.key] = newObj
        break
      case 'country':
        info.objType = drawerInfo.value.drawerType
        form.value[drawerInfo.value.key] = info.name
        saveKey.value[drawerInfo.value.key] = info
        break
      default:
        break
    }
  }

  handleCloseDrawer()
}
// 根据联动重置表单项的显示与否
const resetShow = obj => {
  for (const section of processedSecondHolderData.value) {
    switch (obj.type) {
      case 'father':
        if (section.key == obj.key) {
          section.showMoudle = obj.status
        }

        break
      case 'child':
        if (section.data) {
          for (const field of section.data) {
            if (field.key == obj.key) {
              // 获取字典数据
              field.show = obj.status
            }
          }
        }
        break

      default:
        break
    }
  }
}
const handleSelectChange = (father, child) => {
  switch (child.key) {
    case 'isSecond':
      if (form.value[child.key] == '1') {
        resetShow({ type: 'father', key: 'apiSecondHolderInfoDto', status: true })
      } else {
        resetShow({ type: 'father', key: 'apiSecondHolderInfoDto', status: false })
      }
      break
    case 'insurantRel':
      // 是本人自动带入信息
      if (form.value[child.key] == 'MYSELF') {
        for (const section of father.data) {
          for (const cKey in props.customerInfo) {
            if (section.key == cKey) {
              form.value[cKey] = props.customerInfo[cKey]
            }
          }
        }
      } else {
        // 不是本人清空信息
        for (const section of father.data) {
          if (section.key !== 'insurantRel') {
            form.value[section.key] = ''
          }
        }
      }
      break

    default:
      break
  }
}

// 改变编辑状态
const handleEditStatus = status => {
  editStatus.value = status
  console.log('触发了编辑状态', editStatus.value)

  // 深拷贝原始数据
  const processedData = JSON.parse(JSON.stringify(processedSecondHolderData.value))
  for (const section of processedData) {
    if (section.data) {
      for (const field of section.data) {
        if (editStatus.value) {
          field.disabled = true
        } else if (field.key !== 'age') {
          field.disabled = false
        }
      }
    }
  }
  processedSecondHolderData.value = processedData
}
// 数组去重
function removeDuplicates(arr, key) {
  const seen = new Map()
  const result = []

  for (const item of arr) {
    if (item[key] && !seen.has(item[key])) {
      seen.set(item[key], true)
      result.push(item)
    }
  }

  return result
}
// 获取校验失败的字段信息
const getInvalidFields = fields => {
  const errors = []
  for (const field in fields) {
    if (fields[field] && fields[field].length > 0) {
      errors.push({
        field: field,
        message: `第二持有人模块-${fields[field][0].message}`
      })
    }
  }
  return errors
}

// 处理表单填写得数据
const handleFormValues = () => {
  return new Promise(async resolve => {
    if (processedSecondHolderData.value.length > 0) {
      proxy.$refs['secondHolderFormRef'].validate((valid, fields) => {
        let submitObj = { ...form.value }
        // debugger

        console.log('form.value', form.value)
        if (valid) {
          errorFields.value = [] // 清空错误信息
          if (form.value.isSecond == '0') {
            for (const key in submitObj) {
              if (key !== 'isSecond') {
                submitObj[key] = ''
              }
            }
          }
          submitObj['isSecond'] = form.value.isSecond
          if (submitObj['birthday']) {
            submitObj['birthday'] = proxy.formatToDateTime(submitObj['birthday'])
          }
          if (errorFields.value.length > 0) {
            proxy.$message.error(errorFields.value[0].message)
            return undefined
          }
          if (props.idsObj.appointmentBizId) {
            submitObj['secondHolderBizId'] = props.apiSecondHolderInfoDto.secondHolderBizId
          }
          resolve(errorFields.value.length == 0 ? submitObj : null)
        } else {
          errorFields.value = getInvalidFields(fields)
          if (errorFields.value.length > 0) {
            proxy.$message.error(errorFields.value[0].message)
          }
          resolve(undefined)
        }
      })
    } else {
      if (props.idsObj.appointmentBizId) {
        resolve(props.apiSecondHolderInfoDto)
      } else {
        resolve(undefined)
      }
    }
  })
}
const resetForm = () => {
  proxy.$modal
    .confirm('是否确认撤销所作操作？')
    .then(function () {
      if (props.customerBizId) {
        form.value = { ...oldObjInfo.value }
        editStatus.value = true
      } else {
        // resetShow('smokeQuantity', false)
        proxy.$refs['secondHolderFormRef'].resetFields()
      }
      processedSecondHolderData.value = JSON.parse(JSON.stringify(oldAppointmentData.value))
    })

    .catch(() => {})
}
const hasLoaded = ref(false) // 新增：是否已加载过数据
watch(
  () => props.activeName,
  newVal => {
    // 切换tab的时侯把表单值保存在临时变量里，方便切换回来的时候回显
    tempSecondHolderForm.value = { ...form.value }

    if (newVal === 'secondHolder') {
      openList.value = false
      if (!hasLoaded.value) {
        if (props.idsObj.appointmentBizId) {
          processFormData({
            domdata: secondHolderDomData,
            exportValue: null,
            detailInfo: props.apiSecondHolderInfoDto
          })
          console.log(' props.apiSecondHolderInfoDto', props.apiSecondHolderInfoDto)
        } else {
          processFormData({
            domdata: secondHolderDomData,
            exportValue: null
          })
        }
        hasLoaded.value = true
      }
    }
  }
)

// 暴露给父组件
defineExpose({
  handleFormValues,
  handleEditStatus
})
</script>
<style lang="scss" scoped>
.topBtn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.formBox {
  width: 100%;
  .fatherLable {
    font-size: 18px;
    border-left: 4px solid #165dff;
    padding-left: 5px;
  }
  .fatherDes {
    font-size: 14px;
    color: #a8abb2;
    margin-top: 5px;
    margin-bottom: 20px;
  }
  .inputBox {
    width: 100%;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    padding: 0px 11px;
    .rightArrow {
      font-size: 14px;
      color: #a8abb2;
    }
  }
  .desBox {
    display: flex;
    justify-content: flex-start;
    .title {
      width: 120px;
      font-size: 14px;
      text-align: right;
    }
    .informationBox {
      margin-left: 5px;
      font-size: 14px;
      border: 1px solid #dcdfe6;
      width: 100%;
      border-radius: 4px;
      padding: 2px 4px;
      box-sizing: border-box;
    }
  }
}
.tabButton {
  /* box-shadow: 0 -1px 14px #00000014; */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding-right: 20px; */
  padding-top: 20px;
  .sumbitBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    height: 60px;
    background-color: #165dff;
    color: #fff;
    padding: 0 30px;
    .buttonIcon {
      font-size: 16px;
      color: #fff;
    }
  }
}
.customerBox {
  .customerItem {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 -1px 14px #00000014;
    .top {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      .left {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .gender {
          display: flex;
          align-items: center;
        }
      }
    }
    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .left {
        /* display: flex;
        align-items: center; */
        .infoItem {
          display: flex;
          align-items: center;
          margin: 5px 10px;
        }
      }
    }
  }
  .customerItem:last-child {
    margin-bottom: 0px;
  }
}
</style>
