<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">
                    <div class="left flex">
                        <div class="checkboxAll">
                            <el-checkbox  @change="handleCheckAllChange"
                                v-model="checked">全选</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 mt32">
                        <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">
                   <div class="top flex-between mb24">
                    <div class="left left1 flex">
                        <el-checkbox  @change="handleCheckAllChange(1)"
                        v-model="checked1"></el-checkbox>
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                        <span class="name">张虎</span>
                        <span>13788990987</span>
                        <GuipSwitch :modelValue="switchValue" @change="onSwitchChange(1)">
                        </GuipSwitch>
                        <GuipButton type="text" @click="editDoctor(1)">编辑</GuipButton>
                    </div>
                    <div class="right">
                        <GuipButton type="system" size="form" @click="addHospital(1)">添加医院</GuipButton>
                    </div>

                   </div>
                    <GuipTable  :multiple="true" :tableData="tableData" style="width: 100%" ref="table_1" 
                        :show-header="false" :loading="loading">
                        <el-table-column fixed="left" prop="sort" label="排序" width="70"></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 {
            tableData: [
                {
                    sort:1
                }
            ],
            loading:false,
            switchValue:true,
            checked:false,
            checked1:false,
            totalNum: 0,
            selectNum: 0,
            isIndeterminate:true,
            doctorList:[
                {
                    id:10,
                    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,
                    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,
                    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,
                        },
                    ]
                },
            ]
        }
    },
    components: {
        // GuipToolTip,
        // SvgIcon,
        GuipInput,
        GuipButton,
        GuipSwitch,
        GuipTable,
        // CustomDropdown
    },
    created() {
        store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏
    },
    computed: {
    },
    methods: {
        handleCheckAllChange(val) {
            this.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        batchOperate(type){
            if(type== '1'){
                // 禁用
                
            }else{
                // 启用

            }
        },
        onSwitchChange(index){
            console.log(index,'====');
        },
        addDoctor(){
            console.log('添加医生');
        },
        addHospital(index){
            console.log(index,'====');
        },
        editDoctor(index){
            console.log(index,'====');
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-avatar{
    width: 26px;
    height: 26px;
}
.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>