<template>
    <view class="create-customer">
        <up-form labelPosition="left" :model="formData" :rules="rules" ref="form1" labelWidth="100">
            <view class="form-title">
                <view class="line"></view>
                <view class="title">客户信息</view>
            </view>
            <up-form-item label="客户名称" prop="name" :borderBottom="true" required>
                <up-input v-model="formData.name" placeholder="请输入客户名称">
                    <template #suffix>
                        <up-button type="primary">天眼查</up-button>
                    </template>
                </up-input>
            </up-form-item>
            <up-form-item label="客户信息" prop="customerType" :borderBottom="true" required>
                <up-radio-group v-model="formData.customerType" placement="row" @change="groupChange">
                    <up-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist" :key="index"
                        :label="item.name" :name="item.name" @change="radioChange">
                    </up-radio>
                </up-radio-group>
            </up-form-item>
            <up-form-item label="客户来源" prop="customerType" :borderBottom="true" required>
                <up-picker-data v-model="formData.customerType" title="请选择客户来源" :options="cateList" valueKey="id"
                    labelKey="name">
                </up-picker-data>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template>
            </up-form-item>
            <up-form-item label="服务商名称" prop="customerType" :borderBottom="true" required>
                <up-picker-data v-model="formData.customerType" title="请选择服务商" :options="cateList" valueKey="id"
                    labelKey="name">
                </up-picker-data>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template>
            </up-form-item>
            <up-form-item label="企业属性" prop="customerType" :borderBottom="true" required>
                <up-picker-data v-model="formData.customerType" title="请选择企业属性" :options="cateList" valueKey="id"
                    labelKey="name">
                </up-picker-data>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template>
            </up-form-item>
            <up-form-item label="社会代码" prop="customerType" :borderBottom="true" required>
                <up-input v-model="formData.name" border="none" placeholder="请输入统一社会代码"></up-input>
            </up-form-item>
            <up-form-item label="法定代表人" prop="customerType" :borderBottom="true" required>
                <up-input v-model="formData.name" border="none" placeholder="请输入法定代表人"></up-input>
            </up-form-item>
            <up-form-item label="存续状态" prop="customerType" :borderBottom="true" required>
                <up-picker-data v-model="formData.customerType" title="请选择企业属性" :options="cateList" valueKey="id"
                    labelKey="name">
                </up-picker-data>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template>
            </up-form-item>
            <up-form-item label="注册地址" prop="customerType" :borderBottom="true" required>
                <cityPicker :column="3" :default-value="''" :mask-close-able="true" @confirm="confirm" @cancel="cancel" :visible="visible"/>
            </up-form-item>
            <up-form-item label="详细地址" prop="customerType" :borderBottom="true" required>
                <up-textarea v-model="formData.customerType" placeholder="请输入详细地址"></up-textarea>
            </up-form-item>
            <up-form-item label="注册时间" prop="customerType" :borderBottom="true" required>
                <up-datetime-picker hasInput v-model="formData.customerType" mode="datetime"></up-datetime-picker>
            </up-form-item>
            <view class="form-title">
                <view class="line"></view>
                <view class="title">管理信息</view>
            </view>
            <view class="form-item-belong">
                <view class="">
                    <view>归属上级</view>
                    <up-button type="primary">新增</up-button>
                </view>
                <view class="">
                     
                </view>
            </view>
            <up-form-item label="集团公司" prop="customerType" :borderBottom="true" required>
                <up-textarea v-model="formData.customerType" placeholder="请输入详细地址"></up-textarea>
            </up-form-item>
            <up-form-item label="客户等级" prop="customerType" :borderBottom="true" required>
                <up-picker-data v-model="formData.customerType" title="请选择企业属性" :options="cateList" valueKey="id"
                    labelKey="name">
                </up-picker-data>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template>
            </up-form-item>
            <up-form-item label="客户行业" prop="customerType" :borderBottom="true" required>
                <up-picker-data v-model="formData.customerType" title="请选择行业" :options="cateList" valueKey="id"
                    labelKey="name">
                </up-picker-data>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template>
            </up-form-item>
            <up-form-item label="归属区域" prop="customerType" :borderBottom="true" required>
                <up-picker-data v-model="formData.customerType" title="请选择区域" :options="cateList" valueKey="id"
                    labelKey="name">
                </up-picker-data>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template>
            </up-form-item>
            <view class="form-title">
                <view class="line"></view>
                <view class="title">其它信息</view>
            </view>
            <up-form-item label="中国裁判文书网查询网站截图" prop="customerType" :borderBottom="true" required>
                <up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                    :maxCount="10"></up-upload>
                <up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                    :maxCount="10"></up-upload>
            </up-form-item>
            <up-form-item label="最高院失信呗执行人(黑名单)查询网站截图" prop="customerType" :borderBottom="true" required>
                <up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                    :maxCount="10"></up-upload>
            </up-form-item>
            <up-form-item label="国家供商信息查询截图" prop="customerType" :borderBottom="true" required>
                <up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                    :maxCount="10"></up-upload>
            </up-form-item>
             <up-form-item label="其它附件" prop="customerType" :borderBottom="true" required>
                <up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                    :maxCount="10"></up-upload>
            </up-form-item>
             <up-form-item label="国家供商信息查询截图" prop="customerType" :borderBottom="true" required>
                <up-textarea v-model="formData.customerType" placeholder="请输入备注"></up-textarea>
            </up-form-item>
        </up-form>

        <view class="action-button-group">
            <up-button @click="reset" class="action-reset">重置</up-button>
            <up-button @click="save" type="primary" plain class="action-button">保存</up-button>
            <up-button @click="submit" type="primary" class="action-sumbit">提交</up-button>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'

const cateList = ref([
    {
        'id': 1,
        'name': '分类1'
    },
    {
        'id': 2,
        'name': '分类2'
    }

])
const radiolist = [
    {
        name: '国内客户'
    },
    {
        name: '国外客户'
    }
]
// 表单初始值
const formData = ref({
    name: '天眼查',
    customerType: 'domestic',
    source: '',
    address: '',
    detailAddress: '',
    custom: '77777',
    registerDate: ''
})

// 验证规则
const rules = ref({
    name: [
        { required: true, message: '请输入客户名称', trigger: 'blur' }
    ],
    customerType: [
        { required: true, message: '请选择客户类型', trigger: 'change' }
    ]
})
const visible =ref(false)
function cancel(){

}
// 表单变化事件
const handleFormChange = ({ prop, value }) => {
    console.log(`字段 ${prop} 变更为:`, value)
}

// 操作按钮事件
const handleReset = () => {
    formRef.value.resetFields()
}

const handleSave = async () => {
    try {
        const valid = await formRef.value.validate()
        if (valid) {
            uni.showToast({
                title: '保存成功',
                icon: 'success'
            })
        }
    } catch (error) {
        console.error('表单验证失败:', error)
    }
}

const handleCreate = () => {
    // 创建逻辑
}
</script>
<style lang='scss' scoped>
.create-customer {
    background-color: #fff;
    padding: 20rpx;

    .cell {
        :deep(.u-cell) {
            width: 100%;
            padding: 0;
        }

        .cell-value {
            width: 100%;
            padding: 0;
        }
    }

}

.action-button-group {
    background-color: #fff;
    width: 100%;
    box-shadow: 0px -4rpx 20rpx 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    gap: 24rpx;

    .action-reset {
        flex: 1;
        height: 64rpx;
        font-size: 28rpx;
    }

    .action-button {
        flex: 1;
        height: 64rpx;
        font-size: 28rpx;
    }

    .action-sumbit {
        flex: 2;
        height: 64rpx;
        font-size: 28rpx;
    }
}
</style>