<template>
  <view class="page">
    <scroll-view class="scroll" scroll-y>
      <uni-list>
        <uni-list-item class="select-item" :class="form.serialNumber ? 'is-filled' : 'is-empty'">
          <template v-slot:body>
            <view class="item-title"><text class="required">*</text><text>编号</text></view>
          </template>
          <template v-slot:footer>
            <view class="serial-number-row">
              <uni-easyinput v-model="form.serialNumber" placeholder="自动生成编号" :inputBorder="false" disabled />
            </view>
          </template>
        </uni-list-item>

        <uni-list-item title="办事处">
          <template v-slot:body>
            <view class="item-title"><text class="required">*</text><text>办事处</text></view>
          </template>
          <template v-slot:footer>
            <view class="readonly-text">{{ form.deptName }}</view>
          </template>
        </uni-list-item>
        <uni-list-item class="select-item" :class="form.region ? 'is-filled' : 'is-empty'" clickable
          @click="openSheet('region')" :rightText="displayLabel('regionName')" showArrow>
          <template v-slot:body>
            <view class="item-title"><text class="required">*</text><text>区域</text></view>
          </template>
        </uni-list-item>
        <uni-list-item class="select-item" :class="form.customerShortName ? 'is-filled' : 'is-empty'">
          <template v-slot:body>
            <view class="item-title"><text class="required">*</text><text>简写名称</text></view>
          </template>
          <template v-slot:footer>
            <uni-easyinput v-model="form.customerShortName" placeholder="请输入简写名称" :inputBorder="false" />
          </template>
        </uni-list-item>

        <uni-list-item class="select-item" :class="form.enterpriseType ? 'is-filled' : 'is-empty'" clickable
          @click="openSheet('enterpriseType')" :rightText="displayLabel('enterpriseTypeName')" showArrow>
          <template v-slot:body>
            <view class="item-title"><text class="required">*</text><text>企业类型</text></view>
          </template>
        </uni-list-item>

        <uni-list-item class="mgb10" title="登记日期">
          <template v-slot:body>
            <view class="item-title"><text class="required">*</text><text>登记日期</text></view>
          </template>
          <template v-slot:footer>
            <uni-datetime-picker type="date" v-model="form.registerDate" />
          </template>
        </uni-list-item>

        <view class="title-header">
          <image class="title-header_icon" src="/static/images/title.png" />
          <span>基础资料</span>
        </view>

        <uni-list-item class="select-item" :class="form.companyId ? 'is-filled' : 'is-empty'" clickable
          @click="openRelate('companyId')" :rightText="form.companyIdName || '请选择单位名称'" showArrow>
          <template v-slot:body>
            <view class="item-title"><text class="required">*</text><text>单位名称</text></view>
          </template>
        </uni-list-item>

        <uni-list-item title="企业性质">
          <template v-slot:footer>
            <uni-easyinput v-model="form.companyNature" placeholder="请输入企业性质" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="单位地址">
          <template v-slot:footer>
            <uni-easyinput v-model="form.companyAddress" placeholder="请输入单位地址" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="注册资本">
          <template v-slot:footer>
            <uni-easyinput v-model="form.registeredCapital" placeholder="请输入注册资本" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="账号">
          <template v-slot:footer>
            <uni-easyinput v-model="form.bankAccount" placeholder="请输入账号" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="账开户行">
          <template v-slot:footer>
            <uni-easyinput v-model="form.bankName" placeholder="请输入账开户行" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="税号">
          <template v-slot:footer>
            <uni-easyinput v-model="form.taxNumber" placeholder="请输入税号" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="注册时间">
          <template v-slot:footer>
            <uni-datetime-picker type="date" v-model="form.registrationTime" />
          </template>
        </uni-list-item>
        <uni-list-item title="经营年限">
          <template v-slot:footer>
            <uni-easyinput v-model="form.businessYears" placeholder="请输入经营年限" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item class="mgb10" title="经营范围">
          <template v-slot:footer>
            <uni-easyinput type="textarea" v-model="form.businessScope" placeholder="请输入经营范围" :inputBorder="false" />
          </template>
        </uni-list-item>

        <CorePersonnel mode="add" :list="initCorePersonnelList" @change="onCorePersonnelChange"
          :options="genderOptions" />

        <view class="title-header">
          <image class="title-header_icon" src="/static/images/title.png" />
          <span>资产经营情况</span>
        </view>

        <uni-list-item title="经营场地属性">
          <template v-slot:footer>
            <uni-easyinput v-model="form.businessProperty" placeholder="请输入经营场地属性" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item class="amount-item">
          <template v-slot:body>
            <view class="item-title"><text>占地面积</text></view>
          </template>
          <template v-slot:footer>
            <view class="amount-row">
              <uni-easyinput type="number" v-model="form.landArea" placeholder="0.00" :inputBorder="false" />
              <text class="unit">平方米</text>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item title="仓储条件">
          <template v-slot:footer>
            <uni-easyinput v-model="form.storageConditions" placeholder="请输入仓储条件" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="员工人数">
          <template v-slot:footer>
            <uni-easyinput v-model="form.employeeCount" placeholder="请输入员工人数" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="设备属性">
          <template v-slot:footer>
            <uni-easyinput v-model="form.equipmentAttributes" placeholder="请输入设备属性" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="资产评估">
          <template v-slot:footer>
            <uni-easyinput v-model="form.assetEvaluation" placeholder="请输入资产评估" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="上年度销售额">
          <template v-slot:footer>
            <uni-easyinput v-model="form.lastYearSales" placeholder="请输入上年度销售额" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="月均销量">
          <template v-slot:footer>
            <uni-easyinput v-model="form.monthlyAvgSales" placeholder="请输入月均销量" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="销项发票所开品名与计量单位">
          <template v-slot:footer>
            <uni-easyinput v-model="form.invoiceItemUnit" placeholder="请输入" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="认证证书">
          <template v-slot:footer>
            <uni-easyinput v-model="form.certificationCertificate" placeholder="请输入认证证书" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="我司售于产品与经营范围是否匹配">
          <template v-slot:footer>
            <uni-easyinput v-model="form.productMatch" placeholder="请输入" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="主要客户">
          <template v-slot:footer>
            <uni-easyinput v-model="form.majorCustomers" placeholder="请输入主要客户" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item class="mgb10" title="主营项目">
          <template v-slot:footer>
            <uni-easyinput type="textarea" v-model="form.mainProjects" placeholder="请输入主营项目" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="从事行业">
          <template v-slot:footer>
            <uni-easyinput v-model="form.industryInvolved" placeholder="请输入从事行业" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="在该行业中的经验">
          <template v-slot:footer>
            <uni-easyinput v-model="form.industryExperience" placeholder="请输入行业经验" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item class="mgb10" title="是否与其他企业有经济纠纷 违规信息 拖欠员工薪资">
          <template v-slot:footer>
            <uni-easyinput v-model="form.hasDispute" placeholder="请输入" :inputBorder="false" />
          </template>
        </uni-list-item>

        <view class="title-header">
          <image class="title-header_icon" src="/static/images/title.png" />
          <span>与我司合作</span>
        </view>

        <uni-list-item title="与我司合作时间">
          <template v-slot:footer>
            <uni-easyinput v-model="form.cooperationStartDate" placeholder="请输入与我司合作时间" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="月均操作量">
          <template v-slot:footer>
            <uni-easyinput v-model="form.monthlyAvgVolume" placeholder="请输入月均操作量" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="是否口头协议操作">
          <template v-slot:footer>
            <uni-easyinput v-model="form.isVerbalAgreement" placeholder="请输入" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="是否签订其他协议(列举)">
          <template v-slot:footer>
            <uni-easyinput v-model="form.otherAgreements" placeholder="请输入" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="与我司操作是否签订长年合同">
          <template v-slot:footer>
            <uni-easyinput v-model="form.hasLongTermContract" placeholder="请输入" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="合同类型">
          <template v-slot:footer>
            <uni-easyinput v-model="form.contractType" placeholder="请输入合同类型" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item class="mgb10" title="是否有过中断及中断原因">
          <template v-slot:footer>
            <uni-easyinput v-model="form.hasInterruption" placeholder="请输入" :inputBorder="false" />
          </template>
        </uni-list-item>

        <view class="title-header">
          <image class="title-header_icon" src="/static/images/title.png" />
          <span>办事处意见</span>
        </view>
        <uni-list-item class="select-item" :class="form.suggestedCategory ? 'is-filled' : 'is-empty'" clickable
          @click="openSheet('suggestedCategory')" :rightText="displayLabel('suggestedCategoryName')" showArrow>
          <template v-slot:body>
            <view class="item-title"><text>建议客户分类</text></view>
          </template>
        </uni-list-item>
        <uni-list-item class="amount-item">
          <template v-slot:body>
            <view class="item-title"><text class="required">*</text><text>授信额度</text></view>
          </template>
          <template v-slot:footer>
            <view class="amount-row">
              <uni-easyinput type="number" v-model="form.creditLimit" placeholder="0.00" :inputBorder="false" />
            </view>
          </template>
        </uni-list-item>
        <uni-list-item title="结算期限">
          <template v-slot:body>
            <view class="item-title"><text class="required">*</text><text>结算期限</text></view>
          </template>
          <template v-slot:footer>
            <uni-easyinput v-model="form.settlementPeriod" placeholder="请输入结算期限" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="加工操作方案">
          <template v-slot:footer>
            <uni-easyinput v-model="form.materialSupplyPlan" placeholder="请输入加工操作方案" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item class="mgb10 select-item" :class="form.investigatorName ? 'is-filled' : 'is-empty'" clickable
          @click="openSheet('investigator')" :rightText="form.investigatorName || '请选择调查人'" showArrow>
          <template v-slot:body>
            <view class="item-title"><text>调查人</text></view>
          </template>
        </uni-list-item>

        <view class="title-header">
          <image class="title-header_icon" src="/static/images/title.png" />
          <span>职能核对</span>
        </view>

        <uni-list-item title="年度总销量">
          <template v-slot:footer>
            <uni-easyinput v-model="form.annualTotalSales" placeholder="请输入年度总销量" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="主要行业">
          <template v-slot:footer>
            <uni-easyinput v-model="form.mainIndustry" placeholder="请输入主要行业" :inputBorder="false" />
          </template>
        </uni-list-item>
        <uni-list-item title="年度款料概况">
          <template v-slot:footer>
            <uni-easyinput v-model="form.annualMaterialOverview" placeholder="请输入年度款料概况" :inputBorder="false" />
          </template>
        </uni-list-item>
        <view class="footer">
          <button class="btn submit" type="primary" @click="onSubmit">提交</button>
        </view>
      </uni-list>
    </scroll-view>

    <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
      @confirm="onSheetConfirm" />
    <RelateSelectSheet :visible.sync="relate.visible" :title="relate.title" :source="relate.source"
      :display-fields="relate.display" :multiple="relate.multiple" :row-key="relate.rowKey"
      :selectedKeys.sync="relate.selectedKeys" :source-extra="{ source: 'CUSTOMER_CREDIT' }" @confirm="onRelateConfirm" />
  </view>

</template>

<script>
import SingleSelectSheet from '@/components/single-select/index.vue'
import RelateSelectSheet from '@/components/relate-select/index.vue'
import { getDetailApi, updateApi, getAllUser, getArea } from '@/api/credit_manage.js'
import { getDicByCodeApi } from '@/api/base.js'
import CorePersonnel from './corePersonnel.vue'

export default {
  name: 'CreditManageModify',
  components: { SingleSelectSheet, RelateSelectSheet, CorePersonnel },
  data() {
    return {
      id: '',
      form: {
        id: '',
        serialNumber: '',
        region: '',
        regionName: '',
        customerShortName: '',
        enterpriseType: '',
        enterpriseTypeName: '',
        registerDate: '',
        companyId: '',
        companyIdName: '',
        companyNature: '',
        companyAddress: '',
        registeredCapital: '',
        bankAccount: '',
        bankName: '',
        taxNumber: '',
        registrationTime: '',
        businessYears: '',
        businessScope: '',
        businessProperty: '',
        landArea: '',
        storageConditions: '',
        employeeCount: '',
        equipmentAttributes: '',
        assetEvaluation: '',
        lastYearSales: '',
        monthlyAvgSales: '',
        invoiceItemUnit: '',
        certificationCertificate: '',
        productMatch: '',
        majorCustomers: '',
        mainProjects: '',
        industryInvolved: '',
        industryExperience: '',
        hasDispute: '',
        cooperationStartDate: '',
        monthlyAvgVolume: '',
        isVerbalAgreement: '',
        otherAgreements: '',
        hasLongTermContract: '',
        contractType: '',
        hasInterruption: '',
        settlementPeriod: '',
        materialSupplyPlan: '',
        suggestedCategory: '',
        suggestedCategoryName: '',
        creditLimit: '',
        investigator: '',
        investigatorName: '',
        annualTotalSales: '',
        mainIndustry: '',
        annualMaterialOverview: '',
        companyCreditLimit: '',
        corePersonnelList: [],
      },
      initCorePersonnelList: [],
      sheet: { visible: false, title: '请选择', field: '', options: [], value: '' },
      relate: { visible: false, title: '选择', source: '', display: [], multiple: false, rowKey: 'id', selectedKeys: [], fieldKey: '' },
      enterpriseTypeOptions: [],
      regionOptions: [],
      categoryOptions: [],
      investigatorOptions: [],
      genderOptions: []
    }
  },
  onLoad(query) {
    this.id = query && query.id || ''
    if (this.id) this.loadDetail(this.id)
  },
  created() {
    this.loadRegionOptions()
    this.loadEnterpriseTypeOptions()
    this.loadCategoryOptions()
    this.loadInvestigatorOptions()
    this.loadGenderOptions()
  },
  watch: {
    enterpriseTypeOptions() { this.refreshLabelFields() },
    regionOptions() { this.refreshLabelFields() },
    categoryOptions() { this.refreshLabelFields() },
    investigatorOptions() { this.refreshLabelFields() }
  },
  methods: {
    async loadDetail(id) {
      try {
        const res = await getDetailApi(id)
        const m = res.data || {}
        const next = { ...this.form, ...m }
        next.id = m.id || m.code || id
        next.companyId = m.companyId || (m.company && m.company.id) || next.companyId
        next.companyIdName = m.companyName || (m.company && m.company.name) || next.companyIdName
        next.investigator = m.investigator || m.investigatorId || next.investigator
        next.investigatorName = m.investigatorName || next.investigatorName
        next.corePersonnelList = Array.isArray(m.corePersonnelList) ? m.corePersonnelList : []
        this.form = next;
        this.initCorePersonnelList = next.corePersonnelList || [];
        this.$nextTick(() => this.refreshLabelFields())
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    displayLabel(field) {
      const m = this.form
      const map = {
        regionName: '请选择区域',
        enterpriseTypeName: '请选择企业类型',
        suggestedCategoryName: '请选择建议客户分类',
      }
      const val = m[field]
      return val ? String(val) : map[field]
    },
    refreshLabelFields() {
      const et = this.enterpriseTypeOptions.find(o => String(o.value) === String(this.form.enterpriseType))
      const rn = this.regionOptions.find(o => String(o.value) === String(this.form.region))
      const ct = this.categoryOptions.find(o => String(o.value) === String(this.form.suggestedCategory))
      const iu = this.investigatorOptions.find(o => String(o.value) === String(this.form.investigator))
      this.form.enterpriseTypeName = et ? (et.label || '') : this.form.enterpriseTypeName
      this.form.regionName = rn ? (rn.label || '') : this.form.regionName
      this.form.suggestedCategoryName = ct ? (ct.label || '') : this.form.suggestedCategoryName
      this.form.investigatorName = iu ? (iu.label || '') : this.form.investigatorName
    },
    async openSheet(field) {
      const setSheet = (title, options) => {
        const current = this.form[field]
        const match = (options || []).find(o => String(o.label) === String(current) || String(o.value) === String(current))
        this.sheet = { ...this.sheet, visible: true, title, options, field, value: match ? match.value : '' }
      }
      if (field === 'region') {
        setSheet('区域', this.regionOptions)
      } else
      if (field === 'enterpriseType') {
        setSheet('企业类型', this.enterpriseTypeOptions)
      } else if (field === 'suggestedCategory') {
        setSheet('建议客户分类', this.categoryOptions)
      } else if (field === 'investigator') {
        setSheet('调查人', this.investigatorOptions)
      }
    },
    onSheetConfirm({ value, label }) {
      const field = this.sheet.field
      if (!field) return
      this.form[field] = value || ''
      this.form[field + 'Name'] = label || ''
      this.sheet.visible = false
    },
    openRelate(fieldKey) {
      let config = {}
      if (fieldKey === 'companyId') {
        config = {
          title: '单位名称',
          source: 'customer',
          rowKey: 'id',
          multiple: false,
          display: [
            { label: '名称', field: 'name' },
            { label: '编号', field: 'code' },
            { label: '状态', field: 'available', format: v => (v ? '启用' : '停用') }
          ]
        }
      }
      const selectedKeys = this.form[fieldKey] ? [this.form[fieldKey]] : []
      this.sheet.visible = false
      this.relate.title = config.title
      this.relate.source = config.source
      this.relate.display = config.display
      this.relate.multiple = config.multiple
      this.relate.rowKey = config.rowKey
      this.relate.selectedKeys = selectedKeys
      this.relate.fieldKey = fieldKey
      this.$nextTick(() => { this.relate.visible = true })
    },
    onRelateConfirm({ items }) {
      const _fieldKey = this.relate.fieldKey
      const first = (items && items.length > 0) ? items[0] : null
      this.form[_fieldKey] = (first && (first.id || first.code)) || ''
      this.form[_fieldKey + 'Name'] = (first && (first.name || first.text)) || ''
    },
    validateRequired() {
      const checks = [
        { key: 'serialNumber', label: '编号' },
        { key: 'deptName', label: '办事处' },
        { key: 'region', label: '区域' },
        { key: 'customerShortName', label: '简写名称' },
        { key: 'enterpriseType', label: '企业类型' },
        { key: 'registerDate', label: '登记日期' },
        { key: 'companyId', label: '单位名称' },
        { key: 'creditLimit', label: '授信额度' },
        { key: 'settlementPeriod', label: '结算期限' }
      ]
      for (const it of checks) {
        const val = this.form[it.key]
        if (val === undefined || val === null || String(val).trim() === '') {
          const isInput = ['customerShortName', 'settlementPeriod', 'creditLimit'].includes(it.key);
          const verb = isInput ? '输入' : '选择';
          uni.showToast({ title: `请先${verb}${it.label}`, icon: 'none' })
          return false
        }
      }
      return true
    },
    async loadEnterpriseTypeOptions() {
      try {
        const res = await getDicByCodeApi('ENTERPRISE_TYPE')
        const list = res.data || []
        this.enterpriseTypeOptions = (list || []).map(it => ({ label: it.name || '', value: it.code || '' }))
      } catch (e) {
        this.enterpriseTypeOptions = []
      }
    },
    async loadRegionOptions() {
      try {
        const res = await getArea()
        const list = res.data || []
        this.regionOptions = (list || []).map(it => ({ label: it.name || '', value: it.id || '' }))
      } catch (e) {
        this.regionOptions = []
      }
    },
    async loadCategoryOptions() {
      try {
        const res = await getDicByCodeApi('CUSTOMER_CATEGORY')
        const list = res.data || []
        this.categoryOptions = (list || []).map(it => ({ label: it.name || '', value: it.code || '' }))
      } catch (e) {
        this.categoryOptions = []
      }
    },
    async loadInvestigatorOptions() {
      try {
        const res = await getAllUser()
        const list = res.data || []
        this.investigatorOptions = (list || []).map(it => ({ label: it.name || it.userName || '', value: it.id || it.userId || '' }))
      } catch (e) {
        this.investigatorOptions = []
      }
    },
    async loadGenderOptions() {
      try {
        const res = await getDicByCodeApi('GENDER_TYPE')
        const list = res.data || []
        this.genderOptions = (list || []).map(it => ({ label: it.name || '', value: it.code || '' }))
      } catch (e) {
        this.genderOptions = []
      }
    },
    onCorePersonnelChange(data) {
      const list = Array.isArray(data) ? data : []
      this.form.corePersonnelList = list
    },
    async onSubmit() {
      if (!this.validateRequired()) return
      const payload = {
        ...this.form,
        type: 'UPDATE'
      }
      payload.corePersonnelList.forEach(it => {
        delete it.collapsed
        delete it.sexName
      })
      delete payload.enterpriseTypeName
      delete payload.regionName
      delete payload.suggestedCategoryName
      delete payload.companyIdName
      delete payload.investigatorName
      try {
        await updateApi(payload)
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(() => {
          uni.redirectTo({ url: '/pages/credit_manage/index' })
        }, 300)
      } catch (e) {
        uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.scroll {
  flex: 1;
  padding: 12rpx 0 160rpx;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32rpx;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
  z-index: 10;

  .btn {
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 12rpx;
    font-size: 32rpx;
  }

  .submit {
    background: $theme-primary;
    color: #fff;
  }
}

::v-deep .uni-list {
  background: transparent;

  &-item {
    &__extra-text {
      font-size: 32rpx;
    }

    &__content-title {
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
    }

    &__container {
      padding: 32rpx;

      .uni-easyinput {

        .is-disabled {
          background-color: transparent !important;
        }

        &__placeholder-class {
          font-size: 32rpx;
          color: rgba(0, 0, 0, 0.4);
        }

        &__content {
          border: none;

          &-input {
            padding-left: 0 !important;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 32rpx;
          }

          .content-clear-icon {
            font-size: 44rpx !important;
          }
        }
      }

      .amount-row {
        flex: 1;
        display: flex;
        align-items: center;

        .uni-easyinput {
          flex: 1;
        }

        .unit {
          margin-left: 16rpx;
          color: rgba(0, 0, 0, 0.9);
        }
      }

      .item-title,
      .uni-list-item__content {
        flex: none;
        min-height: 48rpx;
        line-height: 48rpx;
        font-size: 32rpx;
        position: relative;
        width: 210rpx;
        margin-right: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        padding-right: 0;


        .required {
          color: red;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: -16rpx;
        }
      }

    }

    &.select-item {
      &.is-empty {
        .uni-list-item__extra-text {
          color: rgba(0, 0, 0, 0.4) !important;
        }
      }

      &.is-filled {
        .uni-list-item__extra-text {
          color: rgba(0, 0, 0, 0.9) !important;
        }
      }

      .serial-number-row {
        display: flex;
        align-items: center;
      }

    }

    &.mgb10 {
      margin-bottom: 20rpx;
    }

  }

  .title-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 32rpx 32rpx 22rpx;

    &_icon {
      width: 32rpx;
      height: 28rpx;
      margin-right: 16rpx;
    }

    span {
      color: rgba(0, 0, 0, 0.9);
      font-size: 32rpx;
      line-height: 44rpx;
      font-weight: 600;
    }
  }
}
/* 只读文本样式 */
.readonly-text {
  color: rgba(0, 0, 0, 0.9);
  font-size: 32rpx;
  line-height: 48rpx;
  text-align: right;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>