<template>
    <view class="page">
        <scroll-view class="scroll" scroll-y>
            <uni-list>
                <uni-list-item title="编号">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.code" :inputBorder="false" disabled />
                    </template>
                </uni-list-item>

                <uni-list-item class="select-item" :class="form.supplier ? 'is-filled' : 'is-empty'" clickable
                    @click="openSheet('supplier')" :rightText="displayLabel('supplierName')" 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.buyer ? 'is-filled' : 'is-empty'" clickable
                    @click="openRelate('buyer')" :rightText="form.buyerName || '请选择需方'" 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.workshopId ? 'is-filled' : 'is-empty'" clickable
                    @click="openSheet('workshopId')" :rightText="form.workshopName || '请选择生产厂'" 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-datetime-picker type="date" v-model="form.orderDate" />
                    </template>
                </uni-list-item>

                <uni-list-item title="单位">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.unit" :inputBorder="false" disabled />
                    </template>
                </uni-list-item>

                <ProductRel mode="add" :deliveryDateBase="form.deliveryDate"  :deliveryDate="form.orderDate" :list="productLineList" @change="onProductsChange" :options="productList" />

                <uni-list-item title="合计人民币金额（大写）">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.totalAmountCapital" placeholder="自动计算" :inputBorder="false"
                            disabled />
                    </template>
                </uni-list-item>
                <uni-list-item title="交付定金、数额、时间">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.depositInfo" placeholder="请输入交付定金、数额、时间" :inputBorder="false" />
                    </template>
                </uni-list-item>
                <uni-list-item title="包装要求">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.packagingRequirements" placeholder="请输入包装要求"
                            :inputBorder="false" />
                    </template>
                </uni-list-item>
                <uni-list-item title="付款方式、付款期限">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.paymentTerms" placeholder="请输入付款方式、付款期限" :inputBorder="false" />
                    </template>
                </uni-list-item>
                <uni-list-item title="运输方式">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.transportMode" placeholder="请输入运输方式" :inputBorder="false" />
                    </template>
                </uni-list-item>
                <uni-list-item class="select-item" :class="(Array.isArray(form.destinationId) && form.destinationId.length) ? 'is-filled' : 'is-empty'" clickable
                    @click="openCitySelector" :rightText="form.destinationLabel || '请选择'" showArrow>
                    <template v-slot:body>
                        <view class="item-title"><text>目的地</text></view>
                        <CitySelector ref="citySelectorRef" v-model="form.destinationId" @change="onCityChange" />
                    </template>
                </uni-list-item>

                <uni-list-item class="select-item" :class="form.includesPackagingFeeName ? 'is-filled' : 'is-empty'"
                    clickable @click="openSheet('includesPackagingFee')"
                    :rightText="form.includesPackagingFeeName || '请选择'" showArrow>
                    <template v-slot:body>
                        <view class="item-title"><text>单价中是否已包含包装费</text></view>
                    </template>
                </uni-list-item>
                <uni-list-item class="select-item" :class="form.includesTransportFeeName ? 'is-filled' : 'is-empty'"
                    clickable @click="openSheet('includesTransportFee')"
                    :rightText="form.includesTransportFeeName || '请选择'" showArrow>
                    <template v-slot:body>
                        <view class="item-title"><text>单价中是否已包含运费</text></view>
                    </template>
                </uni-list-item>
                <uni-list-item title="需方指定收货人">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.designatedConsignee" placeholder="请输入需方指定收货人"
                            :inputBorder="false" />
                    </template>
                </uni-list-item>

                <uni-list-item class="select-item" :class="form.specialTermsName ? 'is-filled' : 'is-empty'" clickable
                    @click="openSheet('specialTerms')" :rightText="form.specialTermsName || '请选择'" 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.executionStandardName ? 'is-filled' : 'is-empty'" clickable
                    @click="openSheet('executionStandard')" :rightText="form.executionStandardName || '请选择'" showArrow>
                    <template v-slot:body>
                        <view class="item-title"><text>执行标准</text></view>
                    </template>
                </uni-list-item>
                <uni-list-item v-if="form.executionStandard === 'OTHER'" title="其他">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.executionStandardRemarks" placeholder="请输入其他标准备注"
                            :inputBorder="false" />
                    </template>
                </uni-list-item>
                <uni-list-item title="特别说明" style="margin-top: 20rpx;">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.specialInstructions" placeholder="请输入特别说明" :inputBorder="false" />
                    </template>
                </uni-list-item>
                <uni-list-item title="备注">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.remarks" placeholder="请输入备注" :inputBorder="false" maxlength="2000" />
                    </template>
                </uni-list-item>

                <view class="quality">
                    <image class="opCollapse" src="/static/images/title.png" />
                    <text class="title">具体质量要求</text>
                </view>
                <uni-list-item title="件重条头">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.pieceWeightHead" placeholder="请输入" :inputBorder="false" />
                    </template>
                </uni-list-item>
                <uni-list-item title="表面">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.surface" placeholder="请输入" :inputBorder="false" />
                    </template>
                </uni-list-item>
                <uni-list-item title="公差">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.tolerance" placeholder="请输入" :inputBorder="false" />
                    </template>
                </uni-list-item>
                <uni-list-item title="性能">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.performance" placeholder="请输入" :inputBorder="false" />
                    </template>
                </uni-list-item>
                <uni-list-item title="成分">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.component" placeholder="请输入" :inputBorder="false" />
                    </template>
                </uni-list-item>
                <uni-list-item title="包装">
                    <template v-slot:footer>
                        <uni-easyinput v-model="form.packaging" placeholder="请输入" :inputBorder="false" />
                    </template>
                </uni-list-item>
            </uni-list>
        </scroll-view>
        <view class="footer">
            <div class="total">
                <div class="total-text">合计</div>
                <div class="total-item">
                    <div class="total-item-text">数量</div>
                    <div class="total-item-price">{{ (totalQuantity || 0).toFixed(2) }}kg</div>
                </div>
                <div class="total-item">
                    <div class="total-item-text">不含税金额</div>
                    <div class="total-item-price text-red">￥{{ (totalAmountExcludingTax || 0).toFixed(2) }}</div>
                </div>
                <div class="total-item">
                    <div class="total-item-text">总金额</div>
                    <div class="total-item-price text-red">￥{{ (totalAmountIncludingTax || 0).toFixed(2) }}</div>
                </div>
            </div>
            <button class="btn submit" type="primary" @click="onSubmit">保存</button>
        </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" @confirm="onRelateConfirm" />
    </view>
</template>

<script>
import SingleSelectSheet from '@/components/single-select/index.vue'
import RelateSelectSheet from '@/components/relate-select/index.vue'
import ProductRel from './productRel.vue'
import CitySelector from '@/components/city-selector/index.vue'
import { getContractApi, updateContractApi } from '@/api/contract'
import { getDicByCodes } from '@/utils/dic'
import { formatCurrencyToChinese } from '@/utils/common'
import { workshopQueryApi } from '@/api/devManage'
export default {
    name: 'ModifyContractRetail',
    components: { SingleSelectSheet, RelateSelectSheet, ProductRel, CitySelector },
    data() {
        return {
            id: '',
            form: {
                id: '',
                code: '',
                supplier: '',
                supplierName: '',
                buyer: '',
                buyerName: '',
                workshopId: '',
                workshopName: '',
                orderDate: '',
                deliveryDate: '',
                designatedConsignee: '',
                specialTerms: '',
                specialTermsName: '',
                executionStandard: '',
                executionStandardName: '',
                executionStandardRemarks: '',
                includesPackagingFee: false,
                includesPackagingFeeName: '否',
                includesTransportFee: false,
                includesTransportFeeName: '否',
                unit: '元、公斤、元/公斤',
                totalAmountCapital: '',
                depositInfo: '',
                packagingRequirements: '',
                paymentTerms: '',
                transportMode: '',
                destinationId: [],
                destinationLabel: '',
                specialInstructions: '',
                remarks: '',
                pieceWeightHead: '',
                surface: '',
                tolerance: '',
                performance: '',
                component: '',
                packaging: ''
            },
            supplierList: [],
            specialTermsList: [],
            executionStandardList: [],
            yesNoList: [{ label: '是', value: true }, { label: '否', value: false }],
            sheet: { visible: false, title: '请选择', field: '', options: [], value: '' },
            relate: { visible: false, title: '选择', source: '', display: [], multiple: false, rowKey: 'id', selectedKeys: [], fieldKey: '' },
            totalQuantity: 0,
            totalAmountExcludingTax: 0,
            totalAmountIncludingTax: 0,
            productLineList: [],
            newProductLineList: [],
            productList: []
        }
    },
    onLoad(query) {
        this.id = (query && query.id) ? query.id : ''
    },
    created() {
        this.loadSuppliers()
        this.loadExtraOptions()
        this.loadDetail()
        this.$nextTick(() => {
            if (Array.isArray(this.form.destinationId) && this.form.destinationId.length) {
                this.initDestinationLabel()
            }
        })
    },
    methods: {
        async loadDetail() {
            if (!this.id) return
            try {
                const res = await getContractApi(this.id)
                const data = res && res.data ? res.data : {}
                const includesPackagingFeeName = data.includesPackagingFeeName || (data.includesPackagingFee ? '是' : '否')
                const includesTransportFeeName = data.includesTransportFeeName || (data.includesTransportFee ? '是' : '否')
                const m = { ...data, includesPackagingFeeName, includesTransportFeeName }
                this.form = {
                    ...this.form,
                    id: m.id || '',
                    code: m.code || '',
                    supplier: m.supplier || '',
                    supplierName: m.supplierName || '',
                    buyer: m.buyer || (m.customer && m.customer.id) || '',
                    buyerName: m.buyerName || (m.customer && m.customer.name) || '',
                    orderDate: m.orderDate || '',
                    designatedConsignee: m.designatedConsignee || '',
                    specialTerms: m.specialTerms || '',
                    specialTermsName: m.specialTermsName || '',
                    executionStandard: m.executionStandard || '',
                    executionStandardName: m.executionStandardName || '',
                    executionStandardRemarks: m.executionStandardRemarks || '',
                    includesPackagingFee: !!m.includesPackagingFee,
                    includesPackagingFeeName,
                    includesTransportFee: !!m.includesTransportFee,
                    includesTransportFeeName,
                    unit: m.unit || this.form.unit,
                    totalAmountCapital: m.totalAmountCapital || '',
                    depositInfo: m.depositInfo || '',
                    packagingRequirements: m.packagingRequirements || '',
                    paymentTerms: m.paymentTerms || '',
                    transportMode: m.transportMode || '',
                    destinationId: (m.provinceId && m.cityId && m.districtId) ? [m.provinceId, m.cityId, m.districtId] : (Array.isArray(m.destinationId) ? m.destinationId : []),
                    destinationLabel: (m.provinceName && m.cityName && m.districtName) ? `${m.provinceName} / ${m.cityName} / ${m.districtName}` : (m.destinationLabel || ''),
                    specialInstructions: m.specialInstructions || '',
                    remarks: m.remarks || '',
                    pieceWeightHead: m.pieceWeightHead || '',
                    surface: m.surface || '',
                    tolerance: m.tolerance || '',
                    performance: m.performance || '',
                    component: m.component || '',
                    packaging: m.packaging || '',
                    workshopId: m.workshopId || '',
                    workshopName: m.workshopName || '',
                }
                const lines = Array.isArray(m.contractDistributorLineList) ? m.contractDistributorLineList : []
                this.productLineList = lines
                this.onProductsChange(lines)
            } catch (e) { }
        },
        async initDestinationLabel() {
            const comp = this.$refs.citySelectorRef
            if (comp && typeof comp.getLabel === 'function') {
                const label = await comp.getLabel()
                this.form.destinationLabel = label || ''
            }
        },
        openCitySelector() {
            this.$refs.citySelectorRef && this.$refs.citySelectorRef.open()
        },
        onCityChange(payload) {
            const label = payload && payload.label != null ? payload.label : ''
            this.form.destinationLabel = label
        },
        onProductsChange(products) {
            const list = Array.isArray(products) ? products : []
            this.newProductLineList = list
            const sumQ = list.reduce((acc, it) => acc + (parseFloat(it.quantity) || 0), 0)
            const sumE = list.reduce((acc, it) => acc + (parseFloat(it.amountExcludingTax) || 0), 0)
            const sumT = list.reduce((acc, it) => acc + (parseFloat(it.totalAmount) || 0), 0)
            this.totalQuantity = sumQ
            this.totalAmountExcludingTax = sumE
            this.totalAmountIncludingTax = sumT
            this.form.totalAmountCapital = formatCurrencyToChinese(sumT)
        },
        async loadSuppliers() {
            try {
                const results = await getDicByCodes(['SUPPLIER'])
                const items = results && results.SUPPLIER && results.SUPPLIER.data ? results.SUPPLIER.data : []
                this.supplierList = items.map(it => ({ label: it.name, value: it.code }))
            } catch (e) { this.supplierList = [] }
        },
        async loadExtraOptions() {
            try {
                const results = await getDicByCodes(['CONDITIONS_REQUIRED', 'APPLICABLE_STANDARD', 'CONTRACT_PRODUCT'])
                const c1 = results && results.CONDITIONS_REQUIRED && results.CONDITIONS_REQUIRED.data ? results.CONDITIONS_REQUIRED.data : []
                const c2 = results && results.APPLICABLE_STANDARD && results.APPLICABLE_STANDARD.data ? results.APPLICABLE_STANDARD.data : []
                const c3 = results && results.CONTRACT_PRODUCT && results.CONTRACT_PRODUCT.data ? results.CONTRACT_PRODUCT.data : []
                this.specialTermsList = c1.map(it => ({ label: it.name, value: it.code }))
                this.executionStandardList = c2.map(it => ({ label: it.name, value: it.code }))
                this.productList = c3.map(it => ({ label: it.name, value: it.code }))
            } catch (e) {
                this.specialTermsList = []
                this.executionStandardList = []
                this.productList = []
            }
        },
        displayLabel(field) {
            const m = this.form
            const map = { supplierName: '请选择供方', buyerName: '请选择需方', workshopName: '请选择生产厂' }
            const val = m[field]
            return val ? String(val) : map[field]
        },
        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 === 'workshopId') {
                const res = await workshopQueryApi({ pageIndex: 1, pageSize: 9999 })
                const _data = res.data || {}
                const list = _data.datas || (Array.isArray(_data) ? _data : [])
                const opts = (list || []).map(it => ({
                    label: it.name ,
                    value: it.id
                }))
                setSheet('生产厂', opts)
            } else if (field === 'supplier') {
                setSheet('供方', this.supplierList)
            } else if (field === 'specialTerms') {
                setSheet('特别条款要求', this.specialTermsList)
            } else if (field === 'executionStandard') {
                setSheet('执行标准', this.executionStandardList)
            } else if (field === 'includesPackagingFee') {
                setSheet('单价中是否已包含包装费', this.yesNoList)
            } else if (field === 'includesTransportFee') {
                setSheet('单价中是否已包含运费', this.yesNoList)
            }
        },
        onSheetConfirm({ value, label }) {
            const field = this.sheet.field
            if (!field) return
            const v = (value === undefined || value === null) ? '' : value
            this.form[field] = v
            this.form[field + 'Name'] = label || ''
        },
        openRelate(fieldKey) {
            let config = {}
            if (fieldKey === 'buyer') {
                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 = { ...this.relate, title: config.title, source: config.source, display: config.display, multiple: config.multiple, rowKey: config.rowKey, selectedKeys, 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.id : ''
            this.form[_fieldKey + 'Name'] = (first && first.name) ? first.name : ''
        },
        onRadioSelect(field, nameField, opt) {
            const val = opt && opt.value != null ? opt.value : ''
            const label = opt && opt.label != null ? opt.label : ''
            this.form[field] = val
            this.form[nameField] = label
            if (field === 'executionStandard' && val !== 'OTHER') {
                this.form.executionStandardRemarks = ''
            }
        },
        validateRequired() {
            const checks = [
                { key: 'code', label: '编号' },
                { key: 'supplier', label: '供方' },
                { key: 'buyer', label: '需方' },
                { key: 'orderDate', label: '订货日期' },
                { key: 'unit', label: '单位' },
                { key: 'workshopId', label: '生产厂' },
                { key: 'specialTerms', label: '特别条款要求' },
            ]
            for (const it of checks) {
                const val = this.form[it.key]
                const empty = (val === undefined || val === null || (typeof val === 'string' && val.trim() === '') || (typeof val === 'number' && isNaN(val)))
                if (empty) { uni.showToast({ title: `请先选择${it.label}`, icon: 'none' }); return false }
            }
            const list = Array.isArray(this.newProductLineList) ? this.newProductLineList : []
            if (list.length === 0) {
                uni.showToast({ title: '请至少添加一条产品明细', icon: 'none' }); return false
            }
            const strEmpty = (v) => (v === undefined || v === null || (typeof v === 'string' && v.trim() === ''))
            const numEmpty = (v) => (v === undefined || v === null || v === '' || (typeof v === 'number' && isNaN(v)))
            for (const [idx, it] of list.entries()) {
                console.log('it111', it)
                if (
                    strEmpty(it.productName) ||
                    strEmpty(it.industry) ||
                    strEmpty(it.quality) ||
                    strEmpty(it.brand) ||
                    numEmpty(it.quantity) ||
                    numEmpty(it.unitPrice) ||
                    strEmpty(it.deliveryDate)
                ) {
                    uni.showToast({ title: `第${idx + 1}条明细未完整填写`, icon: 'none' }); return false
                }
            }
            return true
        },
        async onSubmit() {
            console.log('onSubmit__payload', payload)
            if (!this.validateRequired()) return
            const confirmRes = await new Promise(resolve => {
                uni.showModal({ title: '提示', content: '确定保存当前经销未锁规合同吗？', confirmText: '确定', cancelText: '取消', success: resolve })
            })
            if (!(confirmRes && confirmRes.confirm)) return
            const clean = (obj) => {
                const out = {}
                Object.keys(obj || {}).forEach(k => {
                    const v = obj[k]
                    const isEmptyString = typeof v === 'string' && v.trim() === ''
                    const isUndef = v === undefined || v === null
                    const isNaNNumber = typeof v === 'number' && isNaN(v)
                    if (!(isEmptyString || isUndef || isNaNNumber)) out[k] = v
                })
                return out
            }
            const lines = (this.newProductLineList || []).map(it => clean(it))
          const { destinationLabel, destinationId, ...formForSubmit } = this.form;
          const destination = destinationId && destinationId.length > 0 ? destinationId[destinationId.length - 1] : '';
            const payload = clean({
                ...formForSubmit,
                id: this.form.id,
                destination,
                type: 'DISTRIB_STD',
                totalQuantity: this.totalQuantity,
                totalAmountExcludingTax: this.totalAmountExcludingTax,
                totalAmountIncludingTax: this.totalAmountIncludingTax,
                contractDistributorLineList: lines
            })
            try {
                await updateContractApi(payload)
                uni.showToast({ title: '保存成功', icon: 'none' })
                setTimeout(() => { uni.redirectTo({ url: '/pages/contract_retail/index' }) }, 400)
            } catch (e) {
                uni.showToast({ title: '提交失败', icon: 'none' })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.total {
    .total-text {
        font-weight: 600;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        padding-bottom: 28rpx;
        border-bottom: 2rpx solid #E7E7E7;
    }

    .total-item {
        display: flex;
        align-items: center;
    }

    .total-item-text {
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.6);
        line-height: 32rpx;
        width: 240rpx;
        padding: 12rpx 0;
    }

    .total-item-price {
        font-weight: 600;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        line-height: 32rpx;
    }

    .text-red {
        color: #D54941;
    }
}

.page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.scroll {
    flex: 1;
    padding: 12rpx 0 392rpx !important;
}

.footer {
    z-index: 2;
    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);
}

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

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

.group {
    background: #fff;
    padding: 24rpx 32rpx;
    margin-bottom: 20rpx;
}

.group-title {
    color: rgba(0, 0, 0, 0.9);
    font-size: 32rpx;
    padding-bottom: 16rpx;
}

.radio-list {
    display: flex;
    flex-direction: column;
}
.quality {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    margin-top: 20rpx;

    .title {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        font-weight: 600;
    }

    .opCollapse {
        color: rgba(0, 0, 0, 0.6);
        width: 32rpx;
        height: 28rpx;
        margin-right: 16rpx;
    }
}

.radio-item {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.radio-item:last-child {
    border-bottom: none;
}

.radio {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    border: 2rpx solid #DCDCDC;
    margin-right: 20rpx;
    box-sizing: border-box;
}

.radio.checked {
    background: $theme-primary;
    border-color: $theme-primary;
}

.radio-item .label {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
}

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

::v-deep .uni-list .uni-easyinput .uni-input-input {
    color: rgba(0, 0, 0, 0.9);
}

::v-deep .uni-list .uni-input-placeholder {
    z-index: 1;
}

::v-deep .uni-list .uni-input-input {
    background-color: #ffffff;
}

::v-deep .uni-list-item__extra-text {
    font-size: 32rpx;
}

::v-deep .uni-list-item__content-title {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
}

::v-deep .uni-list-item__container {
    padding: 32rpx;
}

::v-deep .uni-list-item__container .uni-easyinput__placeholder-class {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.4);
}

::v-deep .uni-list-item__container .uni-easyinput__content {
    border: none;
    background-color: #ffffff !important;
}

::v-deep .uni-list-item__container .uni-easyinput__content-input {
    padding-left: 0 !important;
    height: 48rpx;
    line-height: 48rpx;
    font-size: 32rpx;
}

::v-deep .uni-list-item__container .uni-easyinput__content .content-clear-icon {
    font-size: 44rpx !important;
}

::v-deep .uni-list-item__container .item-title,
::v-deep .uni-list-item__container .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);
}

::v-deep .uni-list-item__container .item-title .required {
    color: red;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -16rpx;
}

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

::v-deep .uni-list-item.select-item.is-filled .uni-list-item__extra-text {
    color: rgba(0, 0, 0, 0.9) !important;
}
::v-deep .uni-easyinput {
                &__placeholder-class {
                    font-size: 32rpx;
                    color: rgba(0, 0, 0, 0.4);
                }

                &__content {
                    border: none;
                    background-color: #ffffff !important;
                    height: 100%;
                    &-input {
                        padding-left: 0 !important;
                        height: 48rpx;
                        line-height: 48rpx;
                        font-size: 32rpx;
                    }

                    .content-clear-icon {
                        font-size: 44rpx !important;
                    }
                }
            }
               
</style>