<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-page-header content="用户详情" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" shadow="never">
            <el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
                <div style="font-size: 1.2rem; margin: 10px 0">基本信息创建</div>
                <div class="headimg">
                    <el-upload
                        :disabled="isCheck"
                        v-model="formData.avatar"
                        class="avatar-uploader-head"
                        :data="{ cid: 1 }"
                        action="https://worker-task.lihaink.cn/api/upload/image"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccessAvatar"
                    >
                        <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
                <el-col class="pt-6 !border-none">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="姓名" prop="nickname">
                                <el-input
                                    :disabled="isCheck"
                                    v-model="formData.nickname"
                                    placeholder="请输入姓名"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="13">
                            <el-form-item label="性别" prop="sex">
                                <el-select
                                    v-model="formData.sex"
                                    placeholder="请选择性别"
                                    :disabled="isCheck"
                                    :style="{ width: '100%' }"
                                >
                                    <el-option label="男" value="1" />
                                    <el-option label="女" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="身份证号" prop="id_card">
                                <el-input
                                    :disabled="isCheck"
                                    v-model="formData.id_card"
                                    placeholder="请输入身份证号"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="13">
                            <el-form-item label="联系电话" prop="account">
                                <el-input
                                    :disabled="isCheck"
                                    v-model="formData.account"
                                    placeholder="请输入联系电话"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item label="省" prop="province" style="flex: 1">
                            <el-select
                                :disabled="isCheck"
                                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-form-item label="市" prop="city" style="flex: 1">
                            <el-select
                                :disabled="isCheck"
                                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-form-item label="区" prop="area" style="flex: 1">
                            <el-select
                                :disabled="isCheck"
                                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-form-item label="镇" prop="street" style="flex: 1">
                            <el-select
                                :disabled="isCheck"
                                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-form-item label="村社小队" prop="address" style="flex: 1.5">
                            <el-input
                                :disabled="isCheck"
                                v-model="formData.address"
                                placeholder="请输入村社小队"
                                clearable
                                :style="{ width: '100%' }"
                            ></el-input>
                        </el-form-item>
                    </el-row>
                </el-col>

                <el-col :span="24" style="margin-top: 1vh">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="签约方" prop="field130">
                                <el-input
                                    :disabled="isCheck"
                                    v-model="formData.party_a_name"
                                    placeholder="请选择签约方"
                                    clearable
                                    :style="{ width: '100%' }"
                                    @click="isCompany = true"
                                    @clear="clearPartyA"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <div style="font-size: 1.2rem; margin: 10px 0">资质信息</div>
                <div style="display: flex; justify-content: space-between">
                    <div>
                        <el-form-item label="身份证" prop="id_card">
                            <el-upload
                                :disabled="isCheck"
                                v-model="formData.qualification.id_card"
                                class="avatar-uploader pl-3"
                                :data="{ cid: 1 }"
                                action="https://worker-task.lihaink.cn/api/upload/image"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccessIdA"
                            >
                                <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
                                :disabled="isCheck"
                                v-model="formData.qualification.id_card_b"
                                class="avatar-uploader pl-3"
                                :data="{ cid: 1 }"
                                action="https://worker-task.lihaink.cn/api/upload/image"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccessIdB"
                            >
                                <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>
                    </div>
                    <div>
                        <el-form-item label="行驶证" prop="car_card">
                            <el-upload
                                :disabled="isCheck"
                                v-model="formData.qualification.car_card"
                                class="avatar-uploader pl-3"
                                :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
                                :disabled="isCheck"
                                v-model="formData.qualification.car_card_b"
                                class="avatar-uploader pl-3"
                                :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>
                    </div>
                    <div>
                        <el-form-item label="银行卡号" prop="bank_account">
                            <el-upload
                                :disabled="isCheck"
                                v-model="formData.qualification.bank_account"
                                class="avatar-uploader pl-3"
                                :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
                                :disabled="isCheck"
                                v-model="formData.qualification.bank_account_b"
                                class="avatar-uploader pl-3"
                                :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>
                    </div>
                </div>
                <template v-if="disabledPartyA">
                    <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="account">
                                    <el-input
                                        v-model="formData.account"
                                        placeholder="请输入联系电话"
                                        :disabled="true"
                                        clearable
                                        :style="{ width: '100%' }"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="formData.name">
                                <el-form-item label="账号">
                                    <el-input
                                        v-model="formData.account"
                                        :disabled="true"
                                        clearable
                                        :style="{ width: '100%' }"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="formData.name">
                                <el-form-item label="初始密码" prop="password">
                                    <el-input
                                        :model-value="'m' + formData.account"
                                        :disabled="true"
                                        clearable
                                        :style="{ width: '100%' }"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="合同类型" prop="contract_type">
                                    <el-col :span="24">
                                        <el-select
                                            :disabled="isCheck"
                                            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-col>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" v-if="!isCheck && mode != 'view'">
                        <el-form-item label="合同上传" prop="field127">
                            <el-upload
                                :headers="{ Token: userStore.token }"
                                v-model:file-list="fileList"
                                class="upload-demo"
                                action="https://worker-task.lihaink.cn/adminapi/upload/file"
                                :on-success="handleAvatarSuccess_four"
                                multiple
                                :limit="1"
                            >
                                <el-button type="primary">上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </template>
                <el-col :span="24" v-if="mode == 'view'">
                    <el-form-item label="合同地址">
                        <el-link type="success" :href="formData.contract.url" target="_blank"
                            >在线查看</el-link
                        >
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="pt-6">
                    <el-form-item label prop="field139">
                        <el-button v-if="isEdit" type="primary" size="medium" @click="create"
                            >修改</el-button
                        >
                        <el-button
                            v-else
                            type="primary"
                            :disabled="isDisabled"
                            size="medium"
                            @click="create"
                            >创建</el-button
                        >
                    </el-form-item>
                </el-col>
            </el-form>
        </el-card>

        <account-adjust
            v-model:show="adjustState.show"
            :value="adjustState.value"
            @confirm="handleConfirmAdjust"
        />
        <el-dialog v-model="isCompany" title="选择签约方" width="60%">
            <DialogIndex @customEvent="customEvent" />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="consumerDetail">
import type { FormInstance, UploadProps, ElMessage, UploadUserFile } from 'element-plus'
import { adjustMoney, getUserDetail, userEdit } from '@/api/consumer'
import { apiCityList, apiAreaList, apiStreetList, apiProvinceList } from '@/api/common'
import { dictDataLists } from '@/api/setting/dict'
import DialogIndex from '@/components/dialog_index.vue'
import { isEmpty } from '@/utils/util'
import AccountAdjust from '../components/account-adjust.vue'
import useMultipleTabs from '@/hooks/useMultipleTabs'
import useUserStore from '@/stores/modules/user'
const { removeTab } = useMultipleTabs()
const router = useRouter()

const route = useRoute()
const formData = reactive({
    id: '',
    sex: '',
    id_card: '',
    nickname: '',
    province: '',
    city: '',
    area: '',
    street: '',
    address: '',
    account: '',
    is_contract: 0,
    // 签约方
    party_a_name: '',
    party_a: '',
    qualification: {
        id_card: '',
        id_card_b: '',
        car_card: '',
        car_card_b: '',
        bank_account: '',
        bank_account_b: ''
    },
    // 合同类型
    contract_type: '',
    file: '',
    avatar: '',
    multipoint_login: 1,
    contract: {
        url: ''
    }
})
const disabledPartyA = ref(false)

const adjustState = reactive({
    show: false,
    value: ''
})
// 字典信息
const datas: any = reactive({
    provinceOptions: [],
    cityOptions: [],
    areaOptions: [],
    streetOptions: [],
    dictTypeLists: [],
    contract_type: [],
    contract: []
})

const formRef = shallowRef<FormInstance>()
const isEdit = ref(false)

const isCompany = ref(false)
const userStore = useUserStore()

function customEvent(data: any) {
    isCompany.value = false
    formData.party_a = data.id
    formData.party_a_name = data.company_name
    disabledPartyA.value = true
}
function clearPartyA() {
    formData.party_a = ''
    formData.party_a_name = ''
}
const getcontract_type = async () => {
    const data = await dictDataLists({ type_id: 7 })
    datas['contract_type'] = data['lists']
}
getcontract_type()
const getDetails = async () => {
    const data = await getUserDetail({
        id: route.query.id
    })
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
    formData.contract_type = data.contract?.contract_type
    formData.party_a_name = data.contract?.party_a_name
    formData.party_a = data.contract?.party_a
    formData.file = data.contract?.file
    fileList.value[0] = {
        url: data.contract?.file,
        name: data.contract ?? '合同文件'
    }
    await getCityList()
    await getAreaList()
    await getStreetList()
}

const handleEdit = async (value: string, field: string) => {
    if (isEmpty(value)) return
    await userEdit({
        id: route.query.id,
        field,
        value
    })
    getDetails()
}
const fileList = ref<UploadUserFile[]>([])
// 图片上传成功返回的url
const handleAvatarSuccessIdA: UploadProps['onSuccess'] = (response, uploadFile) => {
    if (response.code == 0) {
        ElMessage.error(response.msg)
        return
    }
    formData.qualification.id_card = response.data.uri
}
const handleAvatarSuccessAvatar: UploadProps['onSuccess'] = (response, uploadFile) => {
    if (response.code == 0) {
        ElMessage.error(response.msg)
        return
    }
    formData.avatar = response.data.uri
}
const handleAvatarSuccessIdB: UploadProps['onSuccess'] = (response, uploadFile) => {
    if (response.code == 0) {
        ElMessage.error(response.msg)
        return
    }
    formData.qualification.id_card_b = response.data.uri
}
const handleAvatarSuccessCarA: UploadProps['onSuccess'] = (response, uploadFile) => {
    if (response.code == 0) {
        ElMessage.error(response.msg)
        return
    }
    formData.qualification.car_card = response.data.uri
}
const handleAvatarSuccessCarB: UploadProps['onSuccess'] = (response, uploadFile) => {
    if (response.code == 0) {
        ElMessage.error(response.msg)
        return
    }
    formData.qualification.car_card_b = response.data.uri
}
const beforeAvatarUpload_two: UploadProps['beforeUpload'] = (rawFile) => {
    return true
}
const handleAvatarSuccessBankA: UploadProps['onSuccess'] = (response, uploadFile) => {
    if (response.code == 0) {
        ElMessage.error(response.msg)
        return
    }
    formData.qualification.bank_account = response.data.uri
}
const handleAvatarSuccessBankB: UploadProps['onSuccess'] = (response, uploadFile) => {
    if (response.code == 0) {
        ElMessage.error(response.msg)
        return
    }
    formData.qualification.bank_account_b = response.data.uri
}
const handleAvatarSuccess_four: UploadProps['onSuccess'] = (response, uploadFile) => {
    if (response.code == 0) {
        ElMessage.error(response.msg)
        return
    }
    formData.file = response.data.uri

    fileList.value[0].url = response.data.uri
    fileList.value[0].name = '合同文件'
}
const beforeAvatarUpload_three: UploadProps['beforeUpload'] = (rawFile) => {
    return true
}

//获取省份
function province_change(value: string) {
    getCityList()
}
function city_change(value: string) {
    getAreaList()
}
function area_change(value: string) {
    getStreetList()
}
function street_change(value: string) {
    formData.street = value
}
const getProvinceList = async () => {
    const data = await apiProvinceList({})
    datas['provinceOptions'] = data
}
const getCityList = async () => {
    const data = await apiCityList({ city: formData.province })
    datas['cityOptions'] = data
}
const getAreaList = async () => {
    const data = await apiAreaList({ area: formData.city })
    datas['areaOptions'] = data
}
const getStreetList = async () => {
    const data = await apiStreetList({ street: formData.area })
    datas['streetOptions'] = data
}
const handleAdjust = (value: string) => {
    adjustState.show = true
    adjustState.value = value
}
const handleConfirmAdjust = async (value: any) => {
    await adjustMoney({ user_id: route.query.id, ...value })
    adjustState.show = false
    getDetails()
}
const create = async () => {
    await formRef.value?.validate()
    const data = { ...formData }
    // if (route.query.id) {
    //     await apiCompanyEdit(data)
    // } else {
    //     await apiCompanyAdd(data)
    // }
    removeTab()
    router.back()
}
getDetails()
getProvinceList()
</script>

<style lang="scss">
.headimg {
    margin-top: 24px;
    width: 6.2vw;
    height: 7.2vw;
    float: left;
    overflow: hidden;
}

.avatar-uploader-head .el-upload {
    width: 6.2vw;
    height: 7.2vw;
    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 {
    width: 9.9vw;
    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>
