<template>
    <!-- 修改客户资料 -->
    <a-modal
        class="commonModal modify-custom"
        title="修改客户资料"
        v-if="visible"
        v-model:visible="visible"
        centered
        :maskClosable="false"
        @cancel="cancel"
        width="890px"
    >
        <template #footer>
            <!-- <a-button key="submit"
                class="cancelBtn"
                @click="submit(1)">保存草稿
            </a-button>-->
            <a-button key="submit" type="primary" :loading="loading" @click="submit(2)">提交修改</a-button>
        </template>
        <a-form class="inlineForm" ref="formRef" :model="formState" :rules="rules">
            <a-row :gutter="24">
                <a-col :span="24">
                    <a-form-item label="所属机构" name="areaid">
                        <a-select
                            class="typeSelect"
                            style="width: 200px"
                            v-model:value="formState.areaid"
                            placeholder="请选择所属机构"
                        >
                            <a-select-option
                                v-for="item in areaList"
                                :key="item.userid"
                            >{{item.accountname}}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <!-- <a-col :span="12">
          <a-form-item label="登录账号"
                       name="logincode">
            <a-input class="dialogInput"
                     v-model:value="formState.logincode"
                     style="width: 200px"
                     placeholder="请选择登录账号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="登录密码"
                       name="loginpwd">
            <a-input class="dialogInput"
                     v-model:value="formState.loginpwd"
                     style="width: 200px"
                     placeholder="请选择登录密码" />
          </a-form-item>
                </a-col>-->
                <a-col :span="12">
                    <a-form-item label="客户类型" name="userinfotype">
                        <a-select
                            class="typeSelect"
                            style="width: 200px"
                            v-model:value="formState.userinfotype"
                            placeholder="请选择客户类型"
                        >
                            <a-select-option
                                v-for="item in userinfotypeList"
                                :value="item.key"
                                :key="item.key"
                            >{{item.name}}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <template v-if="!isPersonal()">
                    <a-col :span="12">
                        <a-form-item label="企业名称" name="customername">
                            <a-input
                                class="dialogInput"
                                v-model:value="formState.customername"
                                style="width: 200px"
                                placeholder="请输入企业名称"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="企业简称" name="nickname">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.nickname"
                                placeholder="请输入企业简称"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="证件类型" name="cardtype">
                            <a-select
                                class="inlineFormSelect"
                                v-model:value="formState.cardtype"
                                style="width: 200px"
                                placeholder="请选择证件类型"
                            >
                                <a-select-option
                                    :value="item.enumitemname"
                                    v-for="item in cardTypeList"
                                    :key="item.autoid"
                                >{{ item.enumdicname }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="法定代表人" name="legalpersonname">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.legalpersonname"
                                placeholder="请输入法定代表人"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="证件号码" name="cardnum">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.cardnum"
                                placeholder="请输入证件号码"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="纳税人识别号" name="taxpayernum">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.taxpayernum"
                                placeholder="请输入纳税人识别号"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="营业执照">
                            <UploadImg
                                :visible="visible"
                                :imgList="attachmentImgList"
                                @upload="attachmentUpload"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="联系人" name="contactname">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.contactname"
                                placeholder="请输入联系人"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="联系人手机号" name="mobilephone">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.mobilephone"
                                placeholder="请输入联系人手机号"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="联系电话" name="telphone">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.telphone"
                                placeholder="请输入联系电话"
                            />
                        </a-form-item>
                    </a-col>
                </template>
                <template v-else>
                    <a-col :span="12">
                        <a-form-item label="姓名" name="username">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.username"
                                placeholder="请输入姓名"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="身份证号码" name="cardnum">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.cardnum"
                                placeholder="请输入身份证号码"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="手机号码" name="mobilephone">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.mobilephone"
                                placeholder="请输入手机号码"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="身份证正面照" name="cardbackphotourl">
                            <UploadImg
                                :visible="visible"
                                :imgList="cardfrontImgList"
                                @upload="cardfrontUpload"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="邮箱" name="email">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.email"
                                placeholder="请输入邮箱"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="身份证反面照" name="cardfrontphotourl">
                            <UploadImg
                                :visible="visible"
                                :imgList="cardbackImgList"
                                @upload="cardbackUpload"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="联系电话" name="telphone">
                            <a-input
                                class="dialogInput"
                                style="width: 200px"
                                v-model:value="formState.telphone"
                                placeholder="请输入联系电话"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item>&nbsp;</a-form-item>
                    </a-col>
                </template>
                <a-col :span="24">
                    <a-form-item label="通讯地址">
                        <a-select
                            class="inlineFormSelect"
                            style="width: 205px"
                            v-model:value="formState.provinceid"
                            @change="getCityList"
                            placeholder="请选择省"
                        >
                            <a-select-option
                                v-for="item in provinceList"
                                :key="item.autoid"
                                :value="item.autoid"
                            >{{ item.divisionname }}</a-select-option>
                        </a-select>
                        <a-select
                            class="inlineFormSelect ml9"
                            style="width: 205px"
                            v-model:value="formState.cityid"
                            @change="getDistrictList"
                            placeholder="请选择市"
                        >
                            <a-select-option
                                v-for="item in cityList"
                                :key="item.autoid"
                                :value="item.autoid"
                            >{{ item.divisionname }}</a-select-option>
                        </a-select>
                        <a-select
                            class="inlineFormSelect ml9"
                            v-model:value="formState.districtid"
                            style="width: 205px"
                            placeholder="请选择县(区)"
                        >
                            <a-select-option
                                v-for="item in districtList"
                                :key="item.autoid"
                                :value="item.autoid"
                            >{{ item.divisionname }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="&nbsp;" name="ipaddress">
                        <a-input
                            class="dialogInput"
                            style="width: 635px"
                            v-model:value="formState.ipaddress"
                            placeholder="请输入详细地址"
                        />
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="备注" name="remark">
                        <a-input
                            class="dialogInput"
                            style="width: 635px"
                            v-model:value="formState.remark"
                            placeholder="请输入备注"
                        />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import { closeModal } from '@/common/setup/modal/index';
import { defineComponent, PropType, ref, watchEffect } from 'vue';
import { getCardType, handleAreaList, handleForm, initFormState } from '../add/setup';
import { AllEnums } from '@/services/go/commonService/interface';
import { FormState } from '../add/interface';
import { getAddress } from '@/services/go/adress';
import { ModifyUserInfoApplyReq, QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
import { getUserId } from '@/services/bus/account';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { addCustomerInfoOperate } from '@/services/proto/accountinfo';
import { mergeTwoObj } from '@/utils/objHandle';
import { validateAction } from '@/common/setup/form';
import { delAddress } from '@/services/socket/address';
import UploadImg from '@/common/components/uploadImg/index.vue';
import { getUploadImg } from '@/common/setup/upload';
import { CustomerInfoOperateReq } from '@/services/proto/accountinfo/interface';
import { initData } from '@/common/methods';
import { QhjCustomer } from '@/services/go/ermcp/qhj/interface';
import { toBase64String } from '@/utils/storage/base64';

export default defineComponent({
    name: 'modify-custom',
    components: { UploadImg },
    props: {
        selectedRow: {
            default: initFormState,
            type: Object as PropType<QhjCustomer>,
        },
    },
    setup(props: { selectedRow: QhjCustomer }, context: { emit: (arg0: string) => void }) {
        const { visible, cancel } = closeModal('platinum_custom_info_normal_modify');
        const userinfotypeList = [
            { name: '个人', key: 1 },
            { name: '企业', key: 2 },
        ];
        const loading = ref<boolean>(false);
        // 证件类型
        const cardTypeList = ref<AllEnums[]>(getCardType());
        // 表单
        const { formRef, formState, rules } = handleForm();
        // 地址
        const { cityList, districtList, provinceList, getCityList, getDistrictList } = getAddress();
        // 营业执照
        const { getFirstImg: getAttachmentImg, uploadImgAction: attachmentUpload, uploadImgList: attachmentImgList, handleImg: attachmentHandle } = getUploadImg();
        // 背面证件照地址
        const { getFirstImg: getBackImg, uploadImgAction: cardbackUpload, uploadImgList: cardbackImgList, handleImg: cardbackHandle } = getUploadImg();
        // 正面证件照地址
        const { getFirstImg: getFrontImg, uploadImgAction: cardfrontUpload, uploadImgList: cardfrontImgList, handleImg: cardfrontHandle } = getUploadImg();
        //查询所属机构列表
        const { areaList, getAreaList } = handleAreaList();
        function isPersonal(): boolean {
            return formState.userinfotype === 1;
        }

        const userid = ref<number>(0);
        const countryid = ref<number>(0);
        watchEffect(() => {
            if (visible.value) {
                getAreaList(loading);
                console.log('props.selectedRow', props.selectedRow);

                userid.value = props.selectedRow.userid;
                mergeTwoObj(formState, props.selectedRow);
                const { provinceid, cityid, attachment1, cardfrontphotourl, cardbackphotourl, parentuserid, mobile, address } = props.selectedRow;
                provinceid ? getCityList(provinceid) : (formState.provinceid = undefined);
                cityid ? getDistrictList(cityid) : ((formState.cityid = undefined), (formState.districtid = undefined));
                parentuserid ? (formState.areaid = parentuserid) : (formState.areaid = undefined);
                formState.mobilephone = mobile;
                formState.ipaddress = address;
                // userinfotype ? (formState.userinfotype = userinfotype) : (formState.userinfotype = undefined);
                if (attachment1) {
                    // 营业执照
                    attachmentImgList.value = attachmentHandle(attachment1);
                }
                if (cardbackphotourl) {
                    // 背面证件照地址
                    cardbackImgList.value = cardbackHandle(cardbackphotourl);
                }
                if (cardfrontphotourl) {
                    // 正面证件照地址
                    cardfrontImgList.value = cardfrontHandle(cardfrontphotourl);
                }
            }
        });
        function submit(OperateType: 1 | 2) {
            validateAction<FormState>(formRef, formState).then((param) => {
                const fn = (value: any) => (value ? value : 0);
                const reqParam: CustomerInfoOperateReq = {
                    operatetype: 2,
                    areaid: param.areaid as number,
                    logincode: param.logincode,
                    loginpwd: param.loginpwd,
                    username: param.username,
                    userid: userid.value,
                    userinfotype: Number(param.userinfotype),
                    cardtype: param.cardtype as number, // 证件类型
                    cardnum: param.cardnum, // 证件号码
                    nickname: param.nickname, // 昵称
                    remark: param.remark, // 备注
                    mobilephone: param.mobilephone, //  手机号码
                    telphone: param.telphone, // 电话
                    cardfrontphotourl: isPersonal() ? getFrontImg() : '', // 正面照片
                    cardbackphotourl: isPersonal() ? getBackImg() : '', // 背面证件照地址
                    proxystatementurl: isPersonal() ? '' : getAttachmentImg(), // 营业执照
                    ipaddress: param.ipaddress, // 证件地址
                    cityid: fn(param.cityid), //
                    districtid: fn(param.districtid), // 地区
                    provinceid: fn(param.provinceid), //省
                    contactname: param.contactname, // 联系人
                    legalpersonname: param.legalpersonname, // 法人姓名(企业)
                    taxpayernum: param.taxpayernum, // 纳税人识别号
                    email: param.email, // email
                    userstate: 2,
                };
                requestResultLoadingAndInfo(addCustomerInfoOperate, reqParam, loading, OperateType === 1 ? ['保存草稿成功', '保存草稿失败:'] : ['修改客户资料成功', '修改客户资料失败:']).then(() => {
                    cancel();
                    context.emit('refresh');
                });
            });
        }
        return {
            userinfotypeList,
            formState,
            rules,
            formRef,
            cardTypeList,
            isPersonal,
            areaList,
            visible,
            cancel,
            submit,
            loading,
            cityList,
            districtList,
            provinceList,
            getCityList,
            getDistrictList,
            attachmentUpload,
            attachmentImgList,
            cardbackUpload,
            cardbackImgList,
            cardfrontUpload,
            cardfrontImgList,
        };
    },
});
</script>

<style lang="less">
.modify-custom {
    .upload {
        display: inline-flex;
        .ant-btn.uploadBtn {
            width: 60px;
            height: 30px;
            background: @m-blue0;
            border: 0;
            padding: 0;
            text-align: center;
            font-size: 14px;
            color: @m-white0;
            .rounded-corners(3px);
            &:hover {
                background: @m-blue0-hover;
                color: @m-white0-hover;
            }
        }
        .look {
            color: @m-blue0;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
        }
    }
}
</style
>;
