<template>
    <div class="site-setting-wrap pagePadding min-flex-right">
        <div class="siteMessage flex-common" id="siteMessage1">
            <h3>基础信息</h3>
            <el-form :model="siteForm" :rules="siteFormrules" ref="siteForm">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <el-form-item prop="avator" label="" class="special-form-item">
                            <template #label>
                                <div class="custom-label flex">
                                    医生照片
                                    <img class="labelImg" src="@/assets/require.svg" alt="">
                                    <el-tooltip content="这是提示信息">
                                        <img class="labelImg" src="@/assets/form_qua_ic.svg" alt="">
                                    </el-tooltip>
                                </div>
                            </template>
                            <div class="qqCode-wrap right">
                                <!-- <el-upload class="avatar-uploader upload-demo" accept=".jpg,.png" :multiple="false" 
                                action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" :on-change="handleFileChange" :auto-upload="false"
                                    :before-upload="beforeAvatarUpload">
                                    <hover-button slot="trigger" button-text="重新上传"
                                        :default-icon="require('../assets/upLoad_grey.svg')"
                                        :hover-icon="require('../assets/upLoad_active.svg')"
                                        default-text-color="#23242B" hover-text-color="#006AFF" />
                                    <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
                                </el-upload> -->
                                <el-upload ref="upload" class="avatar-uploader" :auto-upload="false"  accept=".jpg,.png" action="#" :multiple="false" :http-request="customUpload">
                                    <template #trigger>
                                        <div class="flex">
                                            <img v-if="siteForm.avator" :src="siteForm.avator" alt="" class="uploadImg">
                                            <hover-button  button-text="重新上传" :default-icon="require('../assets/upLoad_grey.svg')"
                                            :hover-icon="require('../assets/upLoad_active.svg')"
                                            default-text-color="#23242B" hover-text-color="#006AFF" @click="btnClick" />
                                        </div>
                                    </template>
                                    <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
                                </el-upload>
                            </div>
                        </el-form-item>
                        <GuipInput ref="GuipInput" column="column" :required="true" label="医生姓名"
                            v-model="siteForm.doctor_name" prop="doctor_name" placeholder="请输入" />
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <GuipInput ref="GuipInput" column="column" :required="true" label="身份证号码"
                            v-model="siteForm.idcard" prop="idcard" placeholder="请输入" />
                        <GuipInput ref="GuipInput" column="column" :required="true" label="手机号码"
                            v-model="siteForm.phone" prop="phone" placeholder="常用手机号" />
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick('siteForm')" @confirm="submitForm('siteForm')" />

        </div>
        <div class="siteMessage flex-common" id="siteMessage2">
            <p class="littleTitle mb32">初诊审批</p>
            <el-form :model="siteForm" :rules="siteFormrules2" ref="siteForm2">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipRadio v-model="siteForm.first_visit_audit" class="mb12" column="column"
                            :options="groupOptions" label="初诊是否审批" required prop="first_visit_audit"
                            @change="radioChange" />
                        <GuipInput ref="GuipInput" column="column" label="审批人电话" desc="审批人电话、微信，至少填写一项"
                            v-model="siteForm.approver_phone" prop="approver_phone" placeholder="请输入" />
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" label="审批人微信">
                            <span class="desc" slot="formRight">审批人电话、微信，至少填写一项</span>
                            <div class="qqCode-wrap right" slot="formDom">
                                <!-- <el-upload class="avatar-uploader upload-demo"  accept=".jpg,.png" :multiple="false"
                                    action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
                                    :on-remove="handleRemove" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <hover-button button-text="微信二维码"
                                        :default-icon="require('../assets/upLoad_grey.svg')"
                                        :hover-icon="require('../assets/upLoad_active.svg')"
                                        default-text-color="#23242B" hover-text-color="#006AFF" @click="btnClick" />
                                    <div slot="tip" class="el-upload__tip desc">审批人微信二维码，大小2M以内</div>
                                </el-upload> -->
                                <el-upload ref="upload1" class="avatar-uploader" :auto-upload="false" action="#" :multiple="false" :file-list="fileList1" :http-request="customUpload">
                                    <!-- <div class="flex">
                                    </div> -->
                                    <template #trigger>
                                        <div class="flex">
                                            <img v-if="siteForm.approver_wechat" :src="siteForm.approver_wechat" alt="" class="uploadImg">
                                            <hover-button button-text="重新上传" :default-icon="require('../assets/upLoad_grey.svg')"
                                            :hover-icon="require('../assets/upLoad_active.svg')"
                                            default-text-color="#23242B" hover-text-color="#006AFF" @click="handleUploadClick" />
                                        </div>
                                    </template>
                                    <div slot="tip" class="el-upload__tip desc">审批人微信二维码，大小2M以内</div>

                                </el-upload>
                            </div>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" />
        </div>
        <div class="siteMessage flex-common" id="siteMessage2">
            <h3>个人介绍</h3>
            <el-form :model="siteForm" ref="siteForm1">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipInput column="column" v-model="siteForm.doctor_desc" prop="doctor_desc" label="一句话介绍"
                            width="100%" height="56px" placeholder="请输入描述内容" maxlength="14" show-word-limit />
                        <GuipTextarea label="详细介绍" column="column" v-model="siteForm.doctor_detail" prop="doctor_detail"
                            width="100%" autosize placeholder="请输入描述内容" maxlength="不限" show-word-limit />
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <GuipSelect column="column" label="个人标签" desc="展示给患者，体现您的专业性" v-model="siteForm.label" multiple
                            :options="options_payword" placeholder="点击选择">
                        </GuipSelect>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick('siteForm1')" @confirm="submitForm('siteForm1')" />
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import HoverButton from '@/components/HoverButton.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipTextarea from '@/components/GuipTextarea.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipSelect from '@/components/GuipSelect.vue';
import GuipRadio from '@/components/GuipRadio.vue';
export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        HoverButton,
        GuipFormItem,
        GuipRadio,
        GuipInput,
        GuipSelect,
        GuipTextarea,
        GroupFormBtns

    },
    data() {
        return {
            doctorId: '',
            fileList: [
                // { name: 'image.jpeg', url: 'http://jasonyizherenxin.checkcopy.com/user_avatar/1.png?v=93940df0b596961c42de23ef1f2d3257' }
            ],
            fileList1:[],
            options_payword: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            groupOptions: [
                { label: '需审批', value: '1' },
                { label: '不需审批', value: '0' },
            ],
            formData: null,
            siteForm: {
                doctor_name: '',
                idcard: '',
                phone: '',
                avator: '',
                doctor_desc: '',
                doctor_detail: '',
                label: '',
                first_visit_audit: '1',
                approve_phone: ''
            },
            oldForm: {},
            siteFormrules2: {
                first_visit_audit: [
                    { required: true, message: '请选择初诊审批设置', trigger: 'change' }
                ]
            },
            siteFormrules: {
                doctor_name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'blur'
                    }
                ],
                idcard: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                    {
                        pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                        message: '请输入正确的身份证号码',
                        trigger: 'blur'
                    }
                ],
                avator: [
                    {
                        validator: (rule, value, callback) => {
                            if (!this.fileList.length && !this.siteForm.avator) {
                                callback(new Error('请上传医生照片'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    mounted() {
        const doctor_id = this.$route.query.doctor_id; // 获取 id 参数
        this.doctorId = doctor_id;
        if (doctor_id) {
            // 请求医生信息
            this.fetchDoctorData(doctor_id);
        }
    },
    methods: {
        fetchDoctorData(id) {
            this.$http('POST', '/api/admin/get_doctor_baseinfo', {
                did: id
            }).then(response => {
                if (response.code == 0) {
                    let obj = JSON.parse(JSON.stringify(this.siteForm))
                    this.oldForm = { ...obj, ...response.data }
                    this.siteForm = { ...this.siteForm, ...response.data }
                    if (response.data.avator) {
                        this.fileList = [{
                            name: 'avator',
                            url: response.data.avator
                        }];
                    }
                    if (response.data.avator) {
                        this.fileList = [{
                            name: 'avator',
                            url: response.data.avator
                        }];
                    }
                }
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleUploadClick(e) {
            console.log(e,'------e====');
            e.preventDefault();
            this.$refs.upload.$el.querySelector('input[type="file"]').click();
        },
        btnClick(e) {
            console.log(e,'------e====');
            e.preventDefault();
            this.$refs.upload1.$el.querySelector('input[type="file"]').click();
        },

        customUpload(params) {
            // 自定义上传逻辑
            const formData = new FormData();
            console.log(params.file,'-222----');
            formData.append('file', params.file);
            // this.$http.post('/api/upload', formData).then()
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        radioChange(data) {
            console.log(data, 'radio--data');
        },
        uploadAvatar() {
            return new Promise((resolve) => {
                if (this.fileList.length) {
                    const formData = new FormData();
                    formData.append('file', this.fileList[0].raw);
                    this.$http.post('/api/upload', formData).then(res => {
                        resolve(res.data.url);
                    });
                } else {
                    resolve(this.siteForm.avator);
                }
            });
        },
        handleFileChange(file, fileList) {
            console.log(file, fileList, '======file');
            this.siteForm.avator = fileList.length ? 'uploaded' : '';
            this.$refs.siteForm.validateField('avator');
            this.fileList = fileList

            // 创建FormData对象
            this.formData = new FormData()
            fileList.forEach(item => {
                this.formData.append('files', item.raw)
            })

            // 可以在这里添加其他表单数据
            this.formData.append('extraParam', 'value')
        },
        // 上传图片
        handleAvatarSuccess(res, file) {
            this.imageUrl1 = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            console.log(file, '=====file');
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        submitForm(form) {
            let props = {};
            let url = {
                siteForm:'/api/admin/get_doctor_baseinfo',
                siteForm1:'/api/admin/set_doctor_desc',
                siteForm2:'',
            }
            if (form == 'siteForm') {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        props = {
                            name: this.siteForm.doctor_name,
                            idcard: this.siteForm.idcard,
                            avatar_file: this.siteForm.avator,
                            phone: this.siteForm.phone
                        }
                    } else {
                        return false;
                    }
                });
            } else if(form == 'siteForm1') {
                props = {
                    desc: form.doctor_desc,
                    detail: form.doctor_detail,
                    label: form.label
                }
            }else{
                props = {
                    first_visit_audit: form.first_visit_audit,
                    approver_phone: form.approver_phone,
                    approver_wechat: form.approver_wechat
                }
            }
            if(this.doctorId){
                props.did = this.doctorId;
            }
            this.$http('POST', url[form], props).then(response => {
                if (response.code == 0) {
                    this.$Message.success('修改成功')
                    this.fetchDoctorData()
                }
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        cancelClick(type) {
            // siteForm
            if (type == 'siteForm1') {
                this.siteForm = {
                    ...this.siteForm,
                    doctor_desc: this.oldForm.doctor_desc,
                    doctor_detail: this.oldForm.doctor_detail,
                    label: this.oldForm.label,
                }

            } else if(type== 'siteForm') {
                this.siteForm = {
                    ...this.siteForm,
                    name: this.oldForm.name,
                    idcard: this.oldForm.idcard,
                    avatar_file: this.oldForm.avatar_file,
                    phone: this.oldForm.phone
                }
            }else {
                this.siteForm = {
                    ...this.siteForm,
                    first_visit_audit: this.oldForm.first_visit_audit,
                    approver_phone: this.oldForm.approver_phone,
                    approver_wechat: this.oldForm.approver_wechat
                }
            }
        },
        confirmClick(type) {
            console.log(type, '确认');
        }

    }
}
</script>
<style lang="scss">
.siteMessage {
    border-radius: 4px;
    transition: all .5s;
    border: 1px solid transparent;
}
.uploadImg{
    width: 150px;
}
.special-form-item {
    .el-form-item__label {
        margin-bottom: 12px;
    }

    .custom-label {
        gap: 6px;
    }
}

.addStore {
    margin-top: 12px;
}

.qqCode-wrap {
    margin-bottom: 14px;
    display: flex;
    width: 100%;
    justify-content: flex-start;

    .labelImg {
        opacity: .7;
        margin-left: 8px;
    }

    .avatar-uploader {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .avatar-desc {
        text-align: left;
    }
}


.site-setting-wrap {
    width: 100%;
}

#siteMessage2 {
    margin: 12px 0;
}

.domain-wrap {
    .domain-item {
        margin-bottom: 10px;
    }


    .domain-item p:last-child {
        padding-left: 23px;
        color: #8A9099;
    }

    p {
        text-align: left;
        line-height: 18px;
        margin-bottom: 8px;
    }

    .domain-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}
</style>