<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="80%"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
                <div style="font-size: 1.2rem; margin: 10px 0">基本信息创建</div>
                <el-form-item label="头像">
                    <div>
                        <div>
                            <material-picker v-model="formData.avatar" :limit="1" />
                        </div>
                        <div class="form-tips">建议尺寸：100*100px，支持jpg，jpeg，png格式</div>
                    </div>
                </el-form-item>
                <el-col :span="24" class="pt-6 !border-none">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="name">
                                <el-input
                                    v-model="formData.name"
                                    placeholder="请输入姓名"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="性别" prop="sex">
                                <!-- <el-input
                                    v-model="formData.sex"
                                    placeholder="请输入性别"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                </el-input> -->
                                <el-select v-model="formData.sex" placeholder="请选择性别"  :style="{ width: '100%' }">
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
    
        </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="身份证号" prop="id_card">
                                <el-input
                                    v-model="formData.id_card"
                                    placeholder="请输入身份证号"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系电话" prop="phone">
                                <el-input
                                    v-model="formData.phone"
                                    placeholder="请输入联系电话"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="省" prop="province">
                                <el-select
                                    v-model="formData.province"
                                    placeholder="请选择省"
                                    clearable
                                    @change="province_change"
                                    :style="{ width: '100%' }"
                                >
                                    <el-option
                                        v-for="(item, index) in datas.provinceOptions"
                                        :key="index"
                                        :label="item.province_name"
                                        :value="item.province_code"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="市" prop="city">
                                <el-select
                                    v-model="formData.city"
                                    placeholder="请选择市"
                                    clearable
                                    @change="city_change"
                                    :style="{ width: '100%' }"
                                >
                                    <el-option
                                        v-for="(item, index) in datas.cityOptions"
                                        :key="index"
                                        :label="item.city_name"
                                        :value="item.city_code"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="区" prop="area">
                                <el-select
                                    v-model="formData.area"
                                    placeholder="请选择区"
                                    clearable
                                    @change="area_change"
                                    :style="{ width: '100%' }"
                                >
                                    <el-option
                                        v-for="(item, index) in datas.areaOptions"
                                        :key="index"
                                        :label="item.area_name"
                                        :value="item.area_code"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="镇" prop="street">
                                <el-select
                                    v-model="formData.street"
                                    placeholder="请选择镇"
                                    clearable
                                    @change="street_change"
                                    :style="{ width: '100%' }"
                                >
                                    <el-option
                                        v-for="(item, index) in datas.streetOptions"
                                        :key="index"
                                        :label="item.street_name"
                                        :value="item.street_code"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="村社小队" prop="address">
                                <el-input
                                    v-model="formData.address"
                                    placeholder="请输入村社小队"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="授权身份" prop="role_id">
                        <el-select
                            v-model="formData.role_id"
                            :disabled="formData.root == 1"
                            class="flex-1"
    
                            placeholder="请选择授权身份"
                            clearable
                        >
                            <el-option v-if="formData.root == 1" label="系统管理员" :value="0" />
                            <el-option
                                v-for="(item, index) in optionsData.role"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <div style="font-size: 1.2rem; margin: 10px 0">资质信息</div>

                <el-col :span="24">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="身份证" prop="id_card" >
                                <el-upload
                                    v-model="formData.qualification.id_card"
                                    class="avatar-uploader"
                                    :data="{ cid: 1 }"
                                    action="https://worker-task.lihaink.cn/api/upload/image"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessIdA"
                                    :before-upload="beforeAvatarUpload"
                                >
                                    <img
                                        v-if="formData.qualification.id_card"
                                        :src="formData.qualification.id_card"
                                        class="avatar"
                                    />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                                <el-upload
                                    v-model="formData.qualification.id_card_b"
                                    class="avatar-uploader"
                                    :data="{ cid: 1 }"
                                    action="https://worker-task.lihaink.cn/api/upload/image"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessIdB"
                                    :before-upload="beforeAvatarUpload"
                                >
                                    <img
                                        v-if="formData.qualification.id_card_b"
                                        :src="formData.qualification.id_card_b"
                                        class="avatar"
                                    />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="行驶证" prop="car_card" >
                                <el-upload
                                    v-model="formData.qualification.car_card"
                                    class="avatar-uploader"
                                    :data="{ cid: 1 }"
                                    action="https://worker-task.lihaink.cn/api/upload/image"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessCarA"
                                >
                                    <img
                                        v-if="formData.qualification.car_card"
                                        :src="formData.qualification.car_card"
                                        class="avatar"
                                    />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                                <el-upload
                                    v-model="formData.qualification.car_card_b"
                                    class="avatar-uploader"
                                    :data="{ cid: 1 }"
                                    action="https://worker-task.lihaink.cn/api/upload/image"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessCarB"
                                    :before-upload="beforeAvatarUpload_two"
                                >
                                    <img
                                        v-if="formData.qualification.car_card_b"
                                        :src="formData.qualification.car_card_b"
                                        class="avatar"
                                    />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="银行卡号" prop="bank_account" >
                                <el-upload
                                    v-model="formData.qualification.bank_account"
                                    class="avatar-uploader"
                                    :data="{ cid: 1 }"
                                    action="https://worker-task.lihaink.cn/api/upload/image"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessBankA"
                                    :before-upload="beforeAvatarUpload_three"
                                >
                                    <img
                                        v-if="formData.qualification.bank_account"
                                        :src="formData.qualification.bank_account"
                                        class="avatar"
                                    />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                                <el-upload
                                    v-model="formData.qualification.bank_account_b"
                                    class="avatar-uploader"
                                    :data="{ cid: 1 }"
                                    action="https://worker-task.lihaink.cn/api/upload/image"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessBankB"
                                    :before-upload="beforeAvatarUpload_three"
                                >
                                    <img
                                        v-if="formData.qualification.bank_account_b"
                                        :src="formData.qualification.bank_account_b"
                                        class="avatar"
                                    />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="24">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="签约姓名" prop="name">
                                <el-input
                                    v-model="formData.name"
                                    placeholder="请输入签约姓名"
                                    :disabled="true"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="性别" prop="sex">
                                <el-input
                                    placeholder="请输入性别"
                                    :disabled="true"
                                    clearable
                                    :style="{ width: '100%' }"
                                    :value="formData.sex==1?'男':'女'"
                                ></el-input>
                            
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="身份证号" prop="id_card">
                                <el-input
                                    v-model="formData.id_card"
                                    placeholder="请输入身份证号"
                                    :disabled="true"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系电话" prop="phone">
                                <el-input
                                    v-model="formData.phone"
                                    placeholder="请输入联系电话"
                                    :disabled="true"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        <el-form-item label-width="100px" label="合同类型" prop="contract_type">
                            <el-select
                                @change="getcontract"
                                v-model="formData.contract_type"
                                placeholder="请选择合同类型"
                                clearable
                                :style="{ width: '100%' }"
                            >
                                <el-option
                                    v-for="(item, index) in datas.contract_type"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                        <el-col :span="12">
                            <el-form-item label="合同" prop="contract">
                                <el-select
                                    v-model="formData.contract"
                                    placeholder="请选择合同"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                    <el-option
                                        v-for="(item, index) in datas.contract"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>






                        <!-- <el-col :span="12">
                            <el-form-item label="合同类型" prop="field124">
                                <el-input
                                    v-model="formData.field124"
                                    placeholder="请输入合同类型"
                                    :disabled="true"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="合同编号" prop="field125">
                                <el-input
                                    v-model="formData.field125"
                                    placeholder="请输入合同编号"
                                    :disabled="true"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="签约公司" prop="field131">
                                <el-input
                                    v-model="formData.field131"
                                    placeholder="请输入签约公司【甲方】"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col> -->
                    </el-row>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="上传" prop="field127" >
                        <!-- <el-upload ref="field127">
                            <el-button size="small" type="primary" icon="el-icon-upload"
                                >点击上传</el-button
                            >
                        </el-upload> -->
                        <el-upload
                            v-model="formData.file"
                            class="upload-demo"
                            action="https://worker-task.lihaink.cn/api/upload/image"
                            :on-success="handleAvatarSuccess_four"
                            multiple
                            :limit="1"
   
                        >
                        <el-button type="primary">上传</el-button>
                        </el-upload>





                    </el-form-item>
                </el-col>
                <!-- 账号输入框 -->
                <!-- 管理员头像 -->
               

                <!-- 密码输入框 -->

                <!-- 确认密码输入框 -->
        
                <!-- 管理员状态 -->
               
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance, UploadProps } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { useDictOptions } from '@/hooks/useDictOptions'
import { adminAdd, adminDetail, adminEdit } from '@/api/perms/admin'
import { roleAll } from '@/api/perms/role'
import { jobsAll } from '@/api/org/post'
import { deptAll } from '@/api/org/department'
import { apiCityList, apiAreaList, apiStreetList, apiProvinceList } from '@/api/common'
import { dictDataLists } from '@/api/setting/dict'

const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑管理员' : '新增管理员'
})
const formData = reactive({
    id: '',
    sex: '',
    id_card: '',
    name: '',
    province: '',
    city: '',
    area: '',
    street: '',
    address: '',
    phone: '',
    qualification: {
        id_card: '',
        id_card_b: '',
        car_card: '',
        car_card_b: '',
        bank_account: '',
        bank_account_b: ''

    },
    // 合同类型
    contract_type:"",
    // 合同
    contract:"",
    file:'',
    is_contract: 0,
    role_id: '',
    avatar: '',
    multipoint_login: 1,
    root: 0
})
// 字典信息
const datas:any = reactive({
    provinceOptions: [],
    cityOptions: [],
    areaOptions: [],
    streetOptions: [],
    dictTypeLists: [],
    contract_type: [],
    contract:[]
})
const getcontract_type = async () => {
    const data = await dictDataLists({ type_id: 7 })
    datas['contract_type'] = data['lists']
}
// 获取合同
const getcontract=async ()=>{
    const data=await  dictDataLists({ type_id: 9 })
    datas['contract'] = data['lists']
}
getcontract_type()
getcontract()
// 手机号校验
const ValidatorPhone = (rule: object, value: string, callback: any) => {
    let rg= /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
    rg.test(formData.phone)?callback():callback(new Error('请输入正确的手机号')) 
}
// 身份证校验
const ValidatorId = (rule: object, value: string, callback: any) => {
    let rg=  /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
    rg.test(formData.id_card)?callback():callback(new Error('请输入正确的身份证号码')) 
}
const Validatorcard = (rule: object, value: string, callback: any) => {
    formData.qualification.car_card?callback():callback(new Error('请输入驾驶证正面')) 
}
const ValidatorcardB = (rule: object, value: string, callback: any) => {
    formData.qualification.car_card_b?callback():callback(new Error('请输入驾驶证反面')) 
 
}
const ValidatorBankcard = (rule: object, value: string, callback: any) => {
    formData.qualification.bank_account?callback():callback(new Error('请输入银行卡正面')) 
 
}
const ValidatorBankcardB = (rule: object, value: string, callback: any) => {
    formData.qualification.bank_account_b?callback():callback(new Error('请输入银行卡反面')) 
 
}
const formRules = reactive({
    account: [
        {
            required: true,
            message: '请输入账号',
            trigger: ['blur']
        }
    ],
    id_card:[
        {
            required: true,
            trigger: ['blur'],
            validator:ValidatorId

        }

    ],
    phone:[
        {
            required: true,
            trigger: ['blur'],
            validator:ValidatorPhone
        }

    ],
    sex:[
        {
            required: true,
            message: '请选择性别',
            trigger: ['blur']
        }
    ],
  
    name: [
        {
            required: true,
            message: '请输入名称',
            trigger: ['blur']
        }
    ],
    car_card:[
        {
            required: true,
            trigger: ['change'],
            validator:Validatorcard
        }
    ],
    car_card_b:[
        {
            required: true,
            trigger: ['blur'],
            validator:ValidatorcardB
        }
    ],
    bank_account:[
        {
            required: true,
            trigger: ['change'],
            validator:ValidatorBankcard
        }
    ],bank_account_b:[
        {
            required: true,
            trigger: ['change'],
            validator:ValidatorBankcardB
        }
    ],
    role_id: [
        {

            required: true,
            message: '请选择角色',
            trigger: ['blur']
        }
    ]
})





const { optionsData } = useDictOptions<{
    role: any[]
    jobs: any[]
    dept: any[]
}>({
    role: {
        api: roleAll
    },
    jobs: {
        api: jobsAll
    },
    dept: {
        api: deptAll
    }
})

const handleSubmit = async () => {
    await formRef.value?.validate()
    return
    mode.value == 'edit' ? await adminEdit(formData) : await adminAdd(formData).then(res=>console.log(res))
    popupRef.value?.close()
    emit('success')
}

const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}
// 图片上传成功返回的url
const handleAvatarSuccessIdA: UploadProps['onSuccess'] = (response, uploadFile) => {
    formData.qualification.id_card = response.data.uri
}
const handleAvatarSuccessIdB: UploadProps['onSuccess'] = (response, uploadFile) => {
    formData.qualification.id_card_b = response.data.uri
}
const handleAvatarSuccessCarA: UploadProps['onSuccess'] = (response, uploadFile) => {
    formData.qualification.car_card = response.data.uri
}
const handleAvatarSuccessCarB: UploadProps['onSuccess'] = (response, uploadFile) => {
    formData.qualification.car_card_b = response.data.uri
}
const beforeAvatarUpload_two: UploadProps['beforeUpload'] = (rawFile) => {
    return true
}
const handleAvatarSuccessBankA: UploadProps['onSuccess'] = (response, uploadFile) => {
    formData.qualification.bank_account = response.data.uri
}
const handleAvatarSuccessBankB: UploadProps['onSuccess'] = (response, uploadFile) => {
    formData.qualification.bank_account_b = response.data.uri
}
const handleAvatarSuccess_four: UploadProps['onSuccess'] = (response, uploadFile) => {
    formData.file = response.data.uri
}
const beforeAvatarUpload_three: UploadProps['beforeUpload'] = (rawFile) => {
    return true
}

//获取省份
function province_change(value: string) {
    formData.province = value
    getCityList(value)
}
function city_change(value: string) {
    formData.city = value
    getAreaList(value)
}
function area_change(value: string) {
    formData.area = value
    getStreetList(value)
}
function street_change(value: string) {
    formData.street = value
}
const getProvinceList = async () => {
    const data = await apiProvinceList({})
    datas['provinceOptions'] = data
}
const getCityList = async (id: any) => {
    const data = await apiCityList({ city: id })
    datas['cityOptions'] = data
}
const getAreaList = async (id: any) => {
    const data = await apiAreaList({ area: id })
    datas['areaOptions'] = data
}
const getStreetList = async (id: any) => {
    const data = await apiStreetList({ street: id })
    datas['streetOptions'] = data
}
const setFormData = async (row: any) => {
    formRules.password = []
    const data = await adminDetail({
        id: row.id
    })
 
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}

const handleClose = () => {
    emit('close')
}
getProvinceList()

defineExpose({
    open,
    setFormData
})
</script>

<style>
.avatar-uploader .el-upload {
    width: 10vw;
    height: 6.3vw;
    background-color: #fff;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
