<template>
    <div class="min-width pagePadding " style="background: #F5F7FA;" v-if="pageShow">
        <div class="doctor-list-wrap ">
            <p class="pageTitle">{{onlyHosFlag ? '医院管理' :'医生列表'}}</p>
            <el-form>
                <div class="selectAllTable-wrap flex-between  mt32">
                    <div class="left flex">
                        <div class="checkboxAll">
                            <el-checkbox @change="handleTotalCheckAllChange" v-model="allChecked"
                                :indeterminate="isIndeterminate">全选</el-checkbox>
                        </div>
                        <span class="totalCount">共{{ totalNum }}条，已选{{ selectNum }}条</span>
                        <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }"
                            @click="batchOperate('0')">批量禁用</GuipButton>
                        <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }"
                            @click="batchOperate('1')">
                            批量启用</GuipButton>
                    </div>
                    <div class="right" v-if="onlyHosFlag">
                        <GuipButton type="system" size="form" @click="addHospitalUser">添加医院</GuipButton>
                    </div>
                    <div class="right flex" v-else>
                        <span>搜索医生</span>
                        <GuipInput ref="GuipInput" style="margin:0 24px 0 12px" width="280px" height="32px"
                            placeholder="输入姓名" @blur="inputBlur" v-model="doctorName" />
                        <GuipButton @click="addDoctor" size="form">新增医生</GuipButton>
                    </div>
                    
                </div>
                <div class="tableList mt32" v-for="(item, index) in doctorList" :key="index">

                    <div class="top flex-between mb24" v-if="!onlyHosFlag">
                        <div class="left left1 flex">
                            <el-checkbox @change="handleCheckAllChange(index)" v-model="item.checked"></el-checkbox>
                            <el-avatar :src="item.avator" v-if="item.avator"></el-avatar>
                            <span class="name">{{ item.name }}</span>
                            <span>{{ item.phone }}</span>
                            <GuipSwitch :value="Boolean(Number(item.status))" @change="onSwitchChange(item, index)" :active-value="true" :inactive-value="false"></GuipSwitch>

                            <GuipButton type="text" @click="editDoctor(item, index)">编辑</GuipButton>
                        </div>
                        <div class="right">
                            <GuipButton type="system" size="form" @click="addHospital(item)">添加医院</GuipButton>
                        </div>
                    </div>

                    <GuipTable :tableData="item.departs" style="width: 100%" :ref="(el) => setPopoverRef(index, el)"
                        @selection-change="handleSelectionChange(index, $event)" :show-header="false"
                        :loading="loading">
                        <el-table-column type="selection" width="135">
                        </el-table-column>
                        <el-table-column prop="depart_name" label="出诊医院" min-width="295">
                            <template slot-scope="scope">
                                <div class="flex cell_render">
                                    <span>{{ scope.row.hispital_name }} {{ scope.row.depart_name }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="project_count" label="项目个数" min-width="135">
                            <template slot-scope="scope">
                                <div class="flex cell_render">
                                    <span>{{ scope.row.project_count }}项</span>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="classify_count" label="组别" min-width="135">
                            <template slot-scope="scope">
                                <div class="flex cell_render">
                                    {{ scope.row.classify_count }}分组
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="classify_count" label="套餐" min-width="165">
                            <template slot-scope="scope">
                                <div class="flex cell_render">
                                    {{ scope.row.package_count }}套餐
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="create" label="时间" min-width="250"> </el-table-column>
                        <el-table-column prop="stock" fixed="right" min-width="110">
                            <template slot-scope="scope">
                                <GuipSwitch :value="scope.row.status" active-value="1" inactive-value="0" @change="onSwitchChange1(scope.row)"></GuipSwitch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" min-width="120px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </GuipTable>
                    
                    <PaymentMethod :list="payList" v-if="!onlyHosFlag"/>

                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
// const cityOptions = ['上海', '北京', '广州', '深圳'];
import store from '@/store';
import GuipTable from '@/components/GuipTable.vue';
// import SvgIcon from '@/components/SvgIcon.vue';
import GuipButton from '@/components/GuipButton.vue';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipInput from '@/components/GuipInput.vue';
import { mapState } from 'vuex';
import PaymentMethod from '@/views/paymentMethod.vue';

export default {
    props:['onlyHosFlag'],
    data() {
        return {
            list: {
                approver_phone: "",
                code: "",
                create: "",
                desc: "",
                detail: "",
                first_visit_audit: "",
                id: "",
                idcard: "",
                label: "",
                name: "",
                phone: "",
                uid: "",
                departs: {}
            },
            tableSelections: [],//已选中数据
            tableData: [
                {
                    sort: 1
                }
            ],
            popoverRefs: {},
            loading: false,
            switchValue: true,
            checked: false,
            checked1: false,
            totalNum: 0,
            selectNum: 0,
            doctorName: '',
            isIndeterminate: false,
            doctorList: false,
            allChecked: false,
            pageShow:false,
            payList:[]
        }
    },
    components: {
        // GuipToolTip,
        // SvgIcon,
        GuipInput,
        GuipButton,
        GuipSwitch,
        GuipTable,
        PaymentMethod

        // CustomDropdown
    },
    created() {
        console.log(this.onlyHosFlag,'onlyHosFlag===');
        const { authtoken } = this.$route.query;
        if(authtoken) {
            localStorage.setItem('authtoken', authtoken);
            location.href = '/'
            return;
        }
        store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏
    },
    mounted() {
        store.commit('SET_CUSTOMIZE', false);
        store.commit('SET_SLIDER_MENU', 'menuData');
        this.getInitData()
        if(this.onlyHosFlag)return
        // 假的假的数据调用 -- 布局用的 
        this.getBindpayList()
    },
    computed: {
        ...mapState(['menuData']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    methods: {
        // 初始化请求
        async getInitData() {
            await this.$http('POST', '/api/admin/doctor_depart_list', {
                name: this.doctorName
            }).then(response => {
                if (response.code == 0) {
                    const list = Object.values(response.data).map(item => {
                        return {
                            ...item,
                            checked:false,
                            departs: item.departs ? Object.values(item.departs).flat() : []
                        }
                    })
                    this.doctorList = list
                    this.calculateTotalNum()
                    this.pageShow = true
                }
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        async getBindpayList() {
            await this.$http('POST', '/api/admin/get_pay_list', {
                doctor_id: 3,
                depart_id: 4
            }).then(response => {
                this.payList.push(...response.data[2],...response.data[3])
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        inputBlur(val) {
            console.log(val, '');
            this.getInitData()
        },
        // 计算总条数
        calculateTotalNum() {
            this.totalNum = this.doctorList.reduce((total, doctor) => {
                return total + (doctor.departs ? doctor.departs.length : 0);
            }, 0);
        },
        handleClick(row) {
            this.$router.push({
                name: '医院信息',
                query: { doctor_id: row.doctor_id,depart_id:row.depart_id }
            })
            // 跳转编辑页面
        },
        setPopoverRef(index, el) {
            if (el) {
                this.popoverRefs[index] = el
            }
        },
        //获取当前实例
        getPopoverRef(index) {
            return this.popoverRefs[index]
        },
        // 点击价格单元格时触发
        handlePriceClick(row, index, type) {
            // 关闭其他行的弹框
            this.popoverFlag = true;
            this.doctorList.forEach((item, i) => {
                if (i !== index) {
                    item[type + 'PopoverVisible'] = false;
                }
            });
            // 打开当前行的弹框
            row[type + 'PopoverVisible'] = true;
            row['edit_' + type] = row[type]
            // row.edit_price = row.price; // 初始化输入框的值
        },

        // 保存价格
        savePrice(row, type) {
            if (type == 'price' && row.edit_price === '') {
                this.$message.warning('价格不能为空');
                return;
            }
            if (type == 'word' && row.word && row.editWord === '') {
                this.$message.warning('字符不能为空');
                return;
            }
            if (row.edit_word) {
                row.word = row.edit_word
            }
            row[type] = row['edit_' + type]; // 更新价格
            row[type + 'PopoverVisible'] = false; // 关闭弹框
            this.$message.success('保存成功');
            this.$set(this.doctorList, row)
            console.log('保存价格：', this.doctorList, row.price);
            // 这里可以调用接口保存修改后的价格
        },
        // 取消编辑
        cancelEdit(row, type) {
            row[type + 'PopoverVisible'] = false;
            this.popoverFlag = false
            // row[type + '_popover'] = false; // 关闭弹框
            this.$Message.info('已取消编辑');
        },
        popshow() {
            var ariaEls = document.querySelectorAll('.el-popover')
            ariaEls.forEach((item) => {
                item.removeAttribute('aria-hidden')
            })

            ariaEls = document.querySelectorAll('.el-radio__original')
            ariaEls.forEach((item) => {
                item.removeAttribute('aria-hidden')
            })
        },
        onSwitchChange1(row) {
            // console.log(row, '------flag');
            row.status = row.status == 0 ? 1 : 0;
            this.$http('POST', '/api/admin/depart_mutil_option', {
                depart_index_ids:row.id,
                status:row.status
            }).then(response => {
                if (response.code == 0) {
                    this.$message.success(response.msg);
                }else{
                    this.$message.error(response.msg);
                }
                this.getInitData()
            }).catch(error => {
                console.error(error, 'error')
                this.$message.error('操作失败');
            })

            this.$set(this.doctorList, row)
        },
        batchOperate(status) {
            // console.log(this.tableSelections,'this.tableSelections----');
            if(!this.tableSelections || this.tableSelections.length <= 0) {
                this.$message.error('未选择要'+(status == '0' ? '禁用':'启用')+'的科室')
                return;
            }

            var tableSelections = this.tableSelections.flat()

            var depart_index_ids = '';
            for(var i=0; i< tableSelections.length;i++) {
                if(!depart_index_ids) {
                    depart_index_ids = tableSelections[i].id
                    continue;
                }
                depart_index_ids += ','+tableSelections[i].id
            }

            this.$http('POST', '/api/admin/depart_mutil_option', {
                depart_index_ids:depart_index_ids,
                status:status
            }).then(response => {
                if (response.code == 0) {
                    this.$message.success(response.msg);
                }else{
                    this.$message.error(response.msg);
                }
                location.reload()
            }).catch(error => {
                console.error(error, 'error')
                this.$message.error('操作失败');
            })
        },
        onSwitchChange(item, index) {
            item.status = item.status == 0 ? 1 : 0;
            console.log(index, item, '====');
            this.$set(this.doctorList, item)

            this.$http('POST', '/api/admin/set_doctor_status', {
                doctor_id:item.id,
                status:item.status
            }).then(response => {
                if (response.code == 0) {
                    this.$message.success(response.msg);
                }else{
                    this.$message.error(response.msg);
                }
            }).catch(error => {
                console.error(error, 'error')
                this.$message.error('操作失败');
            })
        },
        addDoctor() {
            this.$router.push({
                name: '医生信息',
            })
            // this.$router.push({
            //     name: '医生信息',
            //     // query: {
            //     //     doctorId: 123,
            //     //     from: 'home'
            //     // }
            //     })

            // 生成的URL：/doctorInformation?doctorId=123&from=home

        },
        addHospital(item) {
            this.$router.push({
                name: '医院信息',
                query: { doctor_id: item.id }
            })
        },
        addHospitalUser(){
            // 医生id不确认怎么获取 跟随token？
            let id = this.doctor_id;
            this.$router.push({
                name: '医院信息',
                query: { doctor_id: id }
            })
        },
        editDoctor(item) {
            this.$router.push({
                name: '医生信息',
                query: { doctor_id: item.id}
            })
        },
        // 单个表格的选择变化
        handleSelectionChange(index, selection) {
            // 更新当前表格的选中状态
            this.doctorList[index].checked = selection.length === this.doctorList[index].departs.length;
            this.tableSelections[index] = selection;

            // 更新全局状态
            this.updateGlobalSelection();
        },

        // 单个表格的全选/取消
        handleCheckAllChange(index) {
            const table = this.doctorList[index];
            const tableRef = this.getPopoverRef(index);

            if (table.checked) {
                // 全选当前表格
                tableRef.$refs.guiptable.toggleAllSelection();
            } else {
                // 取消当前表格全选
                tableRef.$refs.guiptable.clearSelection();
            }

            // 更新全局状态
            this.updateGlobalSelection();
        },

        // 总全选控制
        handleTotalCheckAllChange() {
            if (this.allChecked) {
                // 总全选：只选中未全选的表格
                this.doctorList.forEach((table, index) => {
                    if (!table.checked) {
                        this.doctorList[index].checked = true;
                        this.getPopoverRef(index).$refs.guiptable.toggleAllSelection();
                    }
                });
            } else {
                // 取消总全选：只取消已全选的表格
                this.doctorList.forEach((table, index) => {
                    if (table.checked) {
                        this.doctorList[index].checked = false;
                        this.getPopoverRef(index).$refs.guiptable.clearSelection();
                    }
                });
            }

            // 更新全局状态
            this.updateGlobalSelection();
        },

        // 更新全局选中状态
        updateGlobalSelection() {
            // 计算总选中数
            this.selectNum = Object.values(this.tableSelections).reduce((total, selection) => {
                return total + (selection ? selection.length : 0);
            }, 0);

            // 计算总全选状态
            const allTables = this.doctorList.length;
            const checkedTables = this.doctorList.filter(table => table.checked).length;

            this.allChecked = checkedTables === allTables && allTables > 0;
            this.isIndeterminate = checkedTables > 0 && checkedTables < allTables;
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-avatar {
    width: 26px;
    height: 26px;
}

::v-deep .el-table {
    min-height: auto;
}

::v-deep .custom-popover {
    position: fixed !important;
    max-height: 290px;
    overflow-y: auto;
    margin-top: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
}

.doctor-list-wrap {
    background: #fff;
    padding: 32px 36px;
    height: 100%;
    border-radius: 4px;

    .left,
    .right {
        align-items: center;
    }

    .selectAllTable-wrap {
        align-items: center;

        .totalCount {
            font-size: 12px;
            font-weight: normal;
            line-height: 13px;
            letter-spacing: 0.08em;
            color: #8A9099;
            margin-left: 12px;
        }

        .right {
            letter-spacing: 0.08em;
            color: #626573;
        }
    }

    .left1 {
        gap: 12px;
    }

}

::v-deep .el-form-item {
    margin-bottom: 0 !important;
}
</style>