<template>
    <div class="min-width" style="background: #F5F7FA;">
        <div class="doctor-list-wrap ">
            <p class="pageTitle">医生列表</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('1')">批量禁用</GuipButton>
                        <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }"
                            @click="batchOperate('2')">
                            批量启用</GuipButton>
                    </div>
                    <div class="right flex">
                        <span>搜索医生</span>
                        <GuipInput ref="GuipInput" style="margin:0 24px 0 12px" width="280px" height="32px"
                            placeholder="输入姓名" />
                        <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">
                        <div class="left left1 flex">
                            <el-checkbox @change="handleCheckAllChange(index)" v-model="item.checked"></el-checkbox>
                            <el-avatar :src="item.avatar"></el-avatar>
                            <span class="name">{{ item.name }}</span>
                            <span>{{ item.phone }}</span>
                            <GuipSwitch :modelValue="item.status" @change="onSwitchChange(index)">
                            </GuipSwitch>
                            <GuipButton type="text" @click="editDoctor(index)">编辑</GuipButton>
                        </div>
                        <div class="right">
                            <GuipButton type="system" size="form" @click="addHospital(index)">添加医院</GuipButton>
                        </div>

                    </div>
                    <GuipTable :tableData="item.list" 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="hos" label="出诊医院" min-width="295">
                            <template slot-scope="scope">
                                <div class="flex cell_render">
                                    <span>{{ scope.row.hos[0] }}项</span>
                                    <span v-if="scope.row.hos.length">（ 等{{ scope.row.hos.length }}个 ）</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="nums" label="项目个数" min-width="165">
                            <template slot-scope="scope">
                                <div class="flex cell_render">
                                    <span>{{ scope.row.nums }}项</span>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="group" label="组别" min-width="165">
                            <template slot-scope="scope">
                                <div class="flex cell_render">
                                    {{ scope.row.group }}分组
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="setMenu" label="套餐" min-width="165">
                            <template slot-scope="scope">
                                <div class="flex cell_render">
                                    {{ scope.row.setMenu }}分组
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="time" label="时间" min-width="200"> </el-table-column>
                        <el-table-column prop="stock" fixed="right" min-width="110">
                            <template slot-scope="scope">
                                <GuipSwitch :modelValue="scope.row.status" @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>
                </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';

export default {
    data() {
        return {
            tableSelections:[],//已选中数据
            tableData: [
                {
                    sort: 1
                }
            ],
            popoverRefs: {},
            loading: false,
            switchValue: true,
            checked: false,
            checked1: false,
            totalNum: 0,
            selectNum: 0,
            isIndeterminate: false,
            doctorList: [
                {
                    id: 10,
                    checked: false,
                    name: '一二',
                    idcard: '532524198711223615',
                    desc: '就哈哈哈哈，嗷跳舞',
                    detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
                    tag: '专业',
                    phone: '17785748373',
                    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
                    status: true,
                    list: [
                        {
                            hos: [
                                '第三人民医院 针灸科',
                                '第一人民医院 中医科',
                            ],
                            time: '2054 - 10 - 03',
                            status: true,
                            group: '2',
                            setMenu: '4',
                            nums: '88',
                            checked: false,
                        },
                    ]
                },
                {
                    id: 10,
                    checked: false,
                    name: '一二',
                    idcard: '532524198711223615',
                    desc: '就哈哈哈哈，嗷跳舞',
                    detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
                    tag: '专业',
                    phone: '17785748373',
                    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
                    status: false,
                    list: [
                        {
                            hos: [
                                '第三人民医院 针灸科',
                                '第一人民医院 中医科',
                            ],
                            time: '2054 - 10 - 03',
                            status: true,
                            group: '2',
                            setMenu: '4',
                            nums: '88',
                            checked: false,
                        },
                        {
                            hos: [
                                '第三人民医院 针灸科',
                                '第一人民医院 中医科',
                            ],
                            time: '2054 - 10 - 03',
                            status: true,
                            group: '2',
                            setMenu: '4',
                            nums: '88',
                            checked: false,
                        },
                    ]
                },
                {
                    id: 10,
                    checked: false,
                    name: '一二',
                    idcard: '532524198711223615',
                    desc: '就哈哈哈哈，嗷跳舞',
                    detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
                    tag: '专业',
                    phone: '17785748373',
                    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
                    status: false,
                    list: [

                    ]
                },
            ],
            allChecked: false,
        }
    },
    components: {
        // GuipToolTip,
        // SvgIcon,
        GuipInput,
        GuipButton,
        GuipSwitch,
        GuipTable,
        // CustomDropdown
    },
    created() {
        store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏
        this.calculateTotalNum()
    },
    computed: {
    },
    methods: {
         // 计算总条数
         calculateTotalNum() {
            this.totalNum = this.doctorList.reduce((total, doctor) => {
                return total + (doctor.list ? doctor.list.length : 0);
            }, 0);
        },
        handleClick(row){
            console.log(row);
            // 跳转编辑页面
        },
        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;
            this.$set(this.doctorList, row)
        },
        // handleCheckAllChange(val) {
        //     this.checkedCities = val ? cityOptions : [];
        //     this.isIndeterminate = false;
        // },
        // handleCheckAllChange(val) {
        //     if (val == 'all') {
        //         console.log(this.allChecked, '-----allchecked');
        //         var i = 0;
        //         while (i < this.doctorList.length) {
        //             this.doctorList[i].checked = this.allChecked;
        //             this.getPopoverRef(i).$refs.guiptable.toggleAllSelection();
        //             i++
        //         }
        //     } else {
        //         this.getPopoverRef(val).$refs.guiptable.toggleAllSelection();

        //     }
        // },
        batchOperate(type) {
            if (type == '1') {
                // 禁用

            } else {
                // 启用

            }
        },
        onSwitchChange(index) {
            console.log(index, '====');
        },
        addDoctor() {
            console.log('添加医生');
        },
        addHospital(index) {
            console.log(index, '====');
        },
        editDoctor(index) {
            console.log(index, '====');
        },
        // 单个表格的选择变化
        handleSelectionChange(index, selection) {
            // 更新当前表格的选中状态
            this.doctorList[index].checked = selection.length === this.doctorList[index].list.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 {
    margin: 12px;
    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;
    }

    .el-form-item {
        margin-bottom: 0;
    }


}
</style>