<template>
    <div class="site-setting-wrap pagePadding min-flex-right doctor-information">
        <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 special-form-item">
                        <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">
                                <div class="avator-wrapper flex">
                                    <img v-if="doctorAvatorUrl" :src="doctorAvatorUrl" alt="" class="uploadImg">
                                    <hover-button  :button-text="doctorAvatorUrl?'重新上传':'开始上传'" :default-icon="require('../assets/upLoad_grey.svg')"
                                    :hover-icon="require('../assets/upLoad_active.svg')"
                                    default-text-color="#23242B" hover-text-color="#006AFF">
                                    </hover-button>

                                    <div class="info-upload-wrapper" @click="clearDocotorAvatorFiles">
                                        <el-upload
                                            :on-change="handleAvatarChange"
                                            action="#"
                                            list-type="picture-card"
                                            :multiple="false"
                                            :http-request="setDoctorBaseInfoUpload"
                                            :limit="Number(1)"
                                            ref="avatorUpload"
                                            :auto-upload="false"
                                        >
                                        <i slot="default" class="el-icon-plus"></i>
                                        </el-upload>
                                    </div>
                                </div>
                            </div>

                            <div class="qqCode-wrap right">
                                <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
                            </div>

                        </el-form-item>

                        <GuipInput ref="GuipInput" column="column" :required="true" label="医生姓名"
                            v-model="siteForm.name" prop="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="submitDoctorBaseInfo" />

        </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">
                                <div class="avator-wrapper">
                                    <div class="flex" style="position: relative;">
                                        <img v-if="approverWechatUrl" :src="approverWechatUrl" class="uploadImg">
                                        <hover-button :button-text="(approverWechatUrl ? '重新上传':'微信二维码')" :default-icon="require('../assets/upLoad_grey.svg')"
                                        :hover-icon="require('../assets/upLoad_active.svg')"
                                        default-text-color="#23242B" hover-text-color="#006AFF" />

                                        <div class="info-upload-wrapper" @click="clearApproverWechatFiles" style="width: 177px;left: 0;display: flex;justify-content: flex-start;overflow: hidden;">
                                            <el-upload
                                                :on-change="handleApproverWechatChange"
                                                action="#"
                                                list-type="picture-card"
                                                :multiple="false"
                                                :http-request="setApproverWechatUpload"
                                                :limit="Number(1)"
                                                ref="approverWechatUpload"
                                                :auto-upload="false"
                                            >
                                                <i slot="default" class="el-icon-plus"></i>
                                            </el-upload>
                                        </div>
                                    </div>

                                    <div slot="tip" class="el-upload__tip desc" style="margin-top:8px;">批人微信二维码，大小2M以内</div>
                                </div>
                            </div>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="submitApproverWechat" />
        </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">
                        <GuipInput ref="GuipInput" column="column"  label="个人标签"
                            v-model="siteForm.label" prop="name" placeholder="请输入" />
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick('siteForm1')" @confirm="setDoctorDesc" />
        </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 GuipRadio from '@/components/GuipRadio.vue';
export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        HoverButton,
        GuipFormItem,
        GuipRadio,
        GuipInput,
        GuipTextarea,
        GroupFormBtns
    },
    data() {
        return {
            doctorId: '',
            fileList: [
                // { name: 'image.jpeg', url: 'http://jasonyizherenxin.checkcopy.com/user_avatar/1.png?v=93940df0b596961c42de23ef1f2d3257' }
            ],
            fileList1:[],
            doctorAvatoFile:[],
            doctorAvatorUrl: '',
            approverWechatUrl:'',
            approverWechatFile:[],
            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: {
                did:0,
                name: '',
                idcard: ' ',
                phone: '',
                avator: '',
                doctor_desc: '',
                doctor_detail: '',
                label: '',
                approver_phone:'',
                approver_wechat:'',
                first_visit_audit: '',
            },
            oldForm: {},
            siteFormrules2: {
                first_visit_audit: [
                    { required: true, message: '请选择初诊审批设置', trigger: 'change' }
                ]
            },
            siteFormrules: {
                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'])
    },
    mounted() {
        const doctor_id = this.$route.query.doctor_id;
        this.doctorId = doctor_id;
        if (doctor_id) this.getDoctorData(doctor_id);
    },
    methods: {
        setDoctorDesc() {
            if(!this.doctorId) {
                this.$message.error('请先设置医生基础信息')
                return;
            }

            var obj = new Object()
            obj.did = this.doctorId
            obj.desc = this.siteForm.doctor_desc
            obj.detail = this.siteForm.doctor_detail
            obj.label = this.siteForm.label
            this.$http('POST', '/api/admin/set_doctor_desc', obj).then(response => {
                if (response.code != 0) {
                    this.$message.error(response.msg)
                    return;
                }
                this.$message.success(response.msg)
            }).catch(error => {
                console.error(error, 'error')
                this.$message.error('设置失败')
            })
        },
        getDoctorData(doctor_id) {
            this.$http('POST', '/api/admin/get_doctor_baseinfo', {did:doctor_id}).then(response => {
                if (response.code != 0) {
                    this.$message.error(response.msg)
                    return;
                }
                this.siteForm = response.data
                this.siteForm.did = doctor_id;
                this.siteForm.name = this.siteForm.doctor_name
                this.doctorAvatorUrl = this.siteForm.avator
                this.approverWechatUrl = this.siteForm.approver_wechat
            }).catch(error => {
                console.error(error, 'error')
                this.$message.error('设置失败')
            })
        },
        setDoctorInfo(param) {
            this.$http('POST', '/api/admin/set_doctor_baseinfo', param).then(response => {
                if (response.code != 0) {
                    this.$message.error(response.msg)
                    return;
                }

                this.$message.success(response.msg)
                var data = response.data
                if(this.doctorId) return;
                setTimeout(() => {
                    location.href = location.href+'?doctor_id='+data.doctor_id
                }, 800);
            }).catch(error => {
                console.error(error, 'error')
                this.$message.error('设置失败')
            })
        },
        setDoctorBaseInfoUpload(param) {
            let fileObj = param.file
            let fd = new FormData()
            fd.append('avatar_file', fileObj)

            var siteForm = this.siteForm
            fd.append('did', this.doctorId)
            fd.append('name', siteForm.name)
            fd.append('phone', siteForm.phone)
            fd.append('idcard', siteForm.idcard)
            this.setDoctorInfo(fd)
        },
        submitDoctorBaseInfo() {
            if(this.doctorAvatoFile.length == 0) {
                if(this.doctorId) {
                    this.setDoctorInfo(this.siteForm)
                    return;
                }
                this.$message.error('请上传医生照片')
                return;
            }

            this.$refs.avatorUpload.submit();
        },
        clearDocotorAvatorFiles(){
            this.doctorAvatorUrl = '';
            this.doctorAvatoFile = []
            this.$refs.avatorUpload.clearFiles();
        },
        clearApproverWechatFiles(){
            this.approverWechatUrl = '';
            this.approverWechatFile = []
            this.$refs.approverWechatUpload.clearFiles();
        },
        setApproverWechatUpload(param) {
            let fileObj = param.file
            let fd = new FormData()

            fd.append('approver_wechat', fileObj)
            var siteForm = this.siteForm
            fd.append('did', this.doctorId)
            fd.append('first_visit_audit', siteForm.first_visit_audit)
            fd.append('approver_phone', siteForm.approver_phone)
            this.setApproverWechat(fd)
        },
        setApproverWechat(param) {
            this.$http('POST', '/api/admin/set_doctor_approver', param).then(response => {
                if (response.code != 0) {
                    this.$message.error(response.msg)
                    return;
                }

                this.$message.success(response.msg)
                var data = response.data
                if(this.doctorId) return;
                setTimeout(() => {
                    location.href = location.href+'?doctor_id='+data.doctor_id
                }, 800);
            }).catch(error => {
                console.error(error, 'error')
                this.$message.error('设置失败')
            })
        },
        submitApproverWechat() {
            if(!this.doctorId) {
                this.$message.error('请先设置医生基础信息')
                return;
            }

            if(this.approverWechatFile.length == 0) {
                this.setApproverWechat(this.siteForm)
                return;
            }

            this.$refs.approverWechatUpload.submit();
        },
        handleApproverWechatChange(file, fileList) {
            console.log(file, fileList)
            this.approverWechatFile = file
            this.approverWechatUrl = URL.createObjectURL(file.raw);
        },
        handleAvatarChange(file, fileList) {
            console.log(file, fileList)
            this.doctorAvatoFile = file
            this.doctorAvatorUrl = URL.createObjectURL(file.raw);
        },
        radioChange(data) {
            console.log(data, 'radio--data');
        },
        cancelClick(type) {
            console.log(type)
        }
    }
}
</script>
<style lang="scss" scoped>

.info-upload-wrapper ::v-deep .el-upload-list.el-upload-list--picture-card{
    display: none;
}

.siteMessage {
    border-radius: 4px;
    transition: all .5s;
    border: 1px solid transparent;
}

.uploadImg{
    width: 150px;
    margin-right: 20px;
}
.special-form-item ::v-deep .el-form-item__label{
    margin-bottom: 12px;
}

.special-form-item {
    .el-form-item__label {
        margin-bottom: 12px;
    }

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

.addStore {
    margin-top: 12px;
}

.qqCode-wrap {
    margin-top: 12px;
    margin-bottom: 14px;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    .avator-wrapper{
        position: relative;
        .info-upload-wrapper{
            position: absolute;
            display: flex;
            justify-content: flex-end;
            top: 50%;
            margin-top: -19px;
            right: 0;
            height: 38px;
            width: 118px;
            overflow: hidden;
            opacity: 0;
        }
    }

    .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>