<template>
    <div class="site-setting-wrap pagePadding min-flex-right">
        <p class="pageTitle bold mb24">基础信息</p>
        <div class="siteMessage flex-common" id="siteMessage1">
            <p class="littleTitle mb32">基础信息</p>
            <el-form :model="form" :rules="siteFormrules" ref="siteForm">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" class="mb24" label="出诊医院省市" :required="true">
                            <div class="flex-between" slot="formDom">
                                <div class="short-width">
                                    <GuipSelect width="100%" v-model="form.province" multiple :options="options_payword"
                                        placeholder="选择省份">
                                    </GuipSelect>
                                </div>
                                <div class="short-width">
                                    <GuipSelect width="100%" v-model="form.city" multiple :options="options_payword"
                                        placeholder="选择城市">
                                    </GuipSelect>
                                </div>
                            </div>
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="出诊医院名称" :required="true">
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.company_name"
                                prop="company_name" placeholder="请输入">
                                <img src="@/assets/input_search_ic.svg" slot="suffix" @click="handleClear" />
                            </GuipInput>
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="医院简称">
                            <span slot="formRight" class="desc">方便患者记忆，非必填</span>
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.h_name"
                                prop="h_name" placeholder="请输入" />
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="所在科室" :required="true">
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.depart_name"
                                prop="depart_name" placeholder="请输入" />
                        </GuipFormItem>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" class="mb24">
                            <div slot="formLeft" class="form-top-icon">医保定点</div>
                            <div class="flex" slot="formDom" style="padding: 9px 0px;">
                                <GuipSwitch :modelValue="form.is_fixed" @change="onSwitchChange" activeText="非医保定点"
                                    inactiveText="非医保定点"  active-value="1" inactive-value="0">
                                </GuipSwitch>
                            </div>
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="使用功能">
                            <!-- <el-checkbox-group slot="formDom" v-model="form.type" @change="validateSelection" class="checkboxGroup">
                                <div class="flex">
                                    <el-checkbox :label="2" >医生名片（基础功能不可取消）</el-checkbox>
                                    <el-checkbox :label="0">患者预约</el-checkbox>
                                </div>
                                <el-checkbox :label="1">项目计数</el-checkbox>
                            </el-checkbox-group> -->
                        </GuipFormItem>
                        <GuipFormItem column="column" class="" label="就诊提醒">
                            <div slot="formRight" class="desc">就诊前的注意事项，非必填</div>
                            <GuipTextarea slot="formDom" v-model="form.notice" prop="notice" width="100%"
                                height="84px" autosize placeholder="输入" />
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" />
        </div>

        <div class="siteMessage flex-common mt12" id="siteMessage2">
            <p class="littleTitle mb32">出诊时间</p>
            <el-form :model="form" :rules="siteFormrules1" ref="siteForm1">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" class="mb24" label="工作时间（ 上午 ）" :required="true">
                            <el-time-picker slot="formDom" style="width:100%" is-range v-model="form.morning_worktime"
                                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
                                @change="ChangeTime('time1')" format="HH:mm"
                                value-format="HH:mm">
                            </el-time-picker>
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="工作时间（ 下午 ）" :required="true">
                            <el-time-picker slot="formDom" style="width:100%" is-range v-model="form.afternoon_worktime"
                                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
                                @change="ChangeTime('time1')" format="HH:mm"
                                value-format="HH:mm">
                            </el-time-picker>
                        </GuipFormItem>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" label="每周出诊安排" :required="true">
                            <div class="flex weekPlan" slot="formDom">
                                <GuipSelect v-for="day in weekDays" :key="day.id" v-model="form.worktimes[day.id].plan"
                                    :options="options_weekPlan" @change="weekChange()" :label="day.name" placeholder="休息">
                                </GuipSelect>
                            </div>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />
        </div>
        <div class="siteMessage flex-common mt12" id="siteMessage3">
            <p class="littleTitle mb32">放号设置</p>
            <el-form :model="form" :rules="numSettingFormRule" ref="numSettingForm">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" class="mb24" label="号源单位时段" :required="true">
                            <span class="desc" slot="formRight">如30分钟，放号时9:00-9:30；9:30-10:00来划分</span>
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.time_unit"
                                prop="time_unit" placeholder="请输入" unit="分钟/时段" />
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="放号量" :required="true">
                            <span class="desc" slot="formRight">放号量可少于实际数量，以便为现场约号患者预留</span>
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.time_unit_num"
                                prop="time_unit_num" placeholder="请输入" unit="个号/时段" />
                        </GuipFormItem>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" class="mb24" label="开放预约" :required="true">
                            <span class="desc" slot="formRight">患者可提前多久约号</span>
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.visit_day"
                                prop="visit_day" placeholder="请输入" unit="小时">
                                <span slot="prependshow">提前</span>
                            </GuipInput>
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="超时未就诊提醒">
                            <span class="desc" slot="formRight">不输入即无期限</span>
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.treat_expire"
                                prop="treat_expire" placeholder="请输入" unit="天" />
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('numSettingForm')" />
        </div>
        <!-- <p class="pageTitle bold">项目管理</p> -->
        <div class="siteMessage flex-common mt12" id="siteMessage4">
            <el-form>
                <div class=" mb32 flex-between">
                    <span class="littleTitle">项目列表</span>
                    <div class="flex-between" style="gap:10px">
                        <GuipButton size="table" type="ignore" @click="addNewGroup">新增分组</GuipButton>
                        <GuipButton size="table" type="primary" @click="addNewProject">新增项目</GuipButton>
                    </div>
                </div>
                <div class="selectAllTable-wrap flex-between  mt32">
                    <div class="left flex">
                        <div class="checkboxAll">
                            <el-checkbox @change="handleSelectAllChange" v-model="selectAll"
                                :indeterminate="isIndeterminate">全选</el-checkbox>
                        </div>
                        <span class="totalCount">共{{ projectList.length }}条，已选{{ selectedCount }}条</span>
                        <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }"
                            @click="batchOperate(0,'project')">批量禁用</GuipButton>
                        <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }"
                            @click="batchOperate(1,'project')">
                            批量启用</GuipButton>
                    </div>

                </div>
                <div class="flex-between mb32 mt32">
                    <div class="tabProject scroll-container" v-if="Object.values(projectTagData).length > 0">
                        <div class="overTab scroll-list">
                            <div :class="['tab-item point', projectSearchId == 'all'? 'active' : '']"  @click="selectTag('all')">全部分类</div>
                            <div :class="['tab-item point', projectSearchId == item.id ? 'active' : '']" @click="selectTag(item)"
                                v-for="item in projectTagData" :key="item.name">{{ item.name }}</div>
                            </div>
                    </div>
                    <div class="right flex">
                        <span style="margin-right: 16px;">搜索项目</span>
                        <GuipInput ref="GuipInput" class="special-input" column="column" width="280px" v-model="projectSearchName"
                            prop="company_name" placeholder="请输入" @blur="getFilterProject">
                            <img src="@/assets/input_search_ic.svg" slot="suffix"  />
                        </GuipInput>
                    </div>
                </div>
                <GuipTable :tableData="projectList" :key="tableKey"  style="width: 100%" ref="multipleTable"
                    @selection-change="handleSelectionChange" :loading="loading" max-height="600px">
                    <el-table-column type="selection" label="选择" width="80"></el-table-column>
                    <el-table-column prop="name" label="项目名称" min-width="185"></el-table-column>
                    <el-table-column prop="price" label="项目价格" min-width="155">
                        <template slot-scope="scope">
                            <GuipInput width="90%" v-model="scope.row.price" @change="changePrice(scope.row)" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="classify_id" label="分组" min-width="155">
                        <template slot-scope="scope">
                                <GuipSelect width="90%" v-model="scope.row.classify_id"
                                    @change="changeClassify(scope.row)" prop="classify_id" :options="projectTagData"
                                    valueKey="id" labelKey="name" />
                            </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="添加时间" min-width="225"></el-table-column>
                    <el-table-column prop="status" label="状态" min-width="125">
                        <template slot-scope="scope">
                            <GuipSwitch :modelValue="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="100px">
                        <template slot-scope="scope">
                            <div class="flex">
                                <el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </GuipTable>
                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                    :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                    :total="projectList.length">
                </el-pagination>
            </el-form>
        </div>
        <div class="siteMessage flex-common mt12" id="siteMessage5">
            <el-form>
                <div class=" mb32 flex-between">
                    <span class="littleTitle">疗程套餐</span>
                    <div class="flex-between" style="gap:10px">
                        <GuipButton size="table" type="primary" @click="addNewSetMenu">新增套餐</GuipButton>
                    </div>
                </div>
                <div class="selectAllTable-wrap flex-between  mt32 mb32">
                    <div class="left flex">
                        <div class="checkboxAll">
                            <el-checkbox @change="handleSelectAllChange1" v-model="selectAll1"
                                :indeterminate="isIndeterminate1">全选</el-checkbox>
                        </div>
                        <span class="totalCount">共{{ courseList.length }}条，已选{{ selectedCount }}条</span>
                        <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }"
                            @click="batchOperate(0,'group')">批量禁用</GuipButton>
                        <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }"
                            @click="batchOperate(1,'group')">
                            批量启用</GuipButton>
                    </div>

                </div>
                <GuipTable :tableData="courseList" style="width: 100%" ref="multipleTable1" max-height="600px"
                    @selection-change="handleSelectionChange1" :loading="loading1"  :key="tableKey1" >
                    <el-table-column type="selection" label="选择" width="80"></el-table-column>
                    <el-table-column prop="name" label="套餐名称" min-width="225"></el-table-column>
                    <el-table-column prop="price" label="套餐价格" min-width="125"></el-table-column>
                    <el-table-column prop="group" label="套餐内容" min-width="125">
                        <template slot-scope="scope">
                            {{ scope.row.project_classify_num }}项,共{{ scope.row.project_num_count }}次
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="添加时间" min-width="225"></el-table-column>
                    <el-table-column prop="status" label="状态" min-width="125">
                        <template slot-scope="scope">
                            <GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="onSwitchChange2(scope.row)">
                            </GuipSwitch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" min-width="100px">
                        <template slot-scope="scope">
                            <div class="flex">
                                <el-button type="text" @click="handleClick1(scope.row)">编辑</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </GuipTable>
                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                    :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                    :total="courseList.length">
                </el-pagination>
            </el-form>
        </div>
        <GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="true" width="762"
             :show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel"
            @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
            <BatchProject v-if="dialogType == '1'" :projectTagData="projectTagData" @getproTag="getProTagData" />
        </GuipDialog>
        <GuipDialog :dialogVisible="dialogVisible1" :title="'新增项目分组'" :show-close-button="true" width="599px"
            type="center" :show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel"
            @close="handleClose" confirmText="确定新增" @dialogVisibleChange="dialogVisibleChange">
            <el-form :model="form1" @submit.native.prevent ref="projectNameForm">
                <GuipFormItem column="column" class="" label="分组名称">
                    <GuipInput slot="formDom" ref="GuipInput" v-model="form1.projectName" :rules="nameRules"
                        prop="projectName" placeholder="请填写新增分组名称" />
                </GuipFormItem>
            </el-form>
        </GuipDialog>
    </div>
</template>
<script>
import GuipFormItem from '@/components/GuipFormItem.vue';
import BatchProject from '@/components/BatchProject.vue';
import store from '@/store';
import GuipButton from '@/components/GuipButton.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 GuipSwitch from '@/components/GuipSwitch.vue';
import GuipTable from '@/components/GuipTable.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import { mapState } from 'vuex';
import { Object } from 'core-js';

export default {
    // 站点设置
    name: '',
    props: [''],

    components: {
        GuipFormItem,
        BatchProject,
        GuipButton,
        GuipDialog,
        GuipInput,
        GuipTable,
        GuipSwitch,
        GuipSelect,
        GuipTextarea,
        GroupFormBtns,
    },
    data() {
        return {
            doctorId: '',
            dialogType: '1',
            tableKey:Date.now(),
            tableKey1:Date.now(),
            dialogVisible: false,
            dialogVisible1: false,
            form1: {
                projectName: ''
            },
            nameRules: [{ required: true, message: '分组名称不得为空', trigger: 'blur' }],
            dialogTitle: '批量录入项目',
            currentPage: 1,
            pageSize: 10,
            currentPage1: 1,
            pageSize1: 10,
            loading: false,
            loading1: false,
            selectedRows: [],//已选中数据
            selectedRows1: [],//已选中数据
            isIndeterminate: false,
            isIndeterminate1: false,
            projectSearchId: 'all',
            projectSearchName: '',
            projectList: [
                {
                    name: '针灸',
                    price: '88',
                    group: '针灸1',
                    time: '2077 - 12 - 20',
                    status: true,
                    id: '1'
                },
                {
                    name: '拔罐',
                    price: '188',
                    group: '针灸2',
                    time: '2077 - 12 - 20',
                    status: true,
                    id: '2'
                },
                {
                    name: '火刺',
                    price: '55',
                    group: '针灸1',
                    time: '2077 - 12 - 20',
                    status: true,
                    id: '3'
                },
            ],
            projectTagData: [
                {
                    name: '全部分类',
                    id: '0'
                },
               
            ],
            courseList: [],
            selectAll: false,
            selectAll1: false,
            numSettingForm: {
                times: '',
                hours: '',
                nums: '',
                days: ''
            },
            numSettingFormRule: {
                times: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                hours: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                nums: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                days: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
            },
            options_payword: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            weekPlan: {
                '周一': '',
                '周二': '',
                '周三': '',
                '周四': '',
                '周五': '',
                '周六': '',
                '周日': '',
            },
            weekDays: [
                { id: 1, name: '周一' },
                { id: 2, name: '周二' },
                { id: 3, name: '周三' },
                { id: 4, name: '周四' },
                { id: 5, name: '周五' },
                { id: 6, name: '周六' },
                { id: 7, name: '周日' }
            ],
            time1: '',
            time2: '',
            checkList: ['医生名片（基础功能不可取消）'],
            fileList: [
                { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
            ],
            yibao: '',
            options_weekPlan: [{
                value: '1',
                label: '上午班'
            }, {
                value: '2',
                label: '下午班'
            }, {
                value: '3',
                label: '全天'
            }, {
                value: '0',
                label: '休息'
            },],
            siteForm: {
                company_name: '',
                company_address: '',
                company_phone: '',
                site_alias: '',
            },
            oldForm: {
                description: '',
                detailDesc: '',
                tags: ''
            },
            form: {
                province: '',
                city: '',
                depart_name: '',
                address:"万柏林区 晋祠路一段56号凯旋门小区2幢4005",
                afternoon_worktime:"14:00-22:00",
                depart_id:"1",
                h_name:"武丽娜中医针灸",
                h_pos:"37.850249,112.53111",
                hid:"1",
                is_fixed:'1',
                morning_worktime:"8:00-11:00",
                notice:"周六上午门诊最后一轮扎针到10点50分，11点后到患者的，只开药，不扎针。\r\n初诊患者请先将挂号条交给医助、在门外静坐等待叫号\r\n为了节约大家排号时间，请全部挂号，按挂号顺序治疗\r\n针灸治疗单缴费完毕后请交还医助\r\n药费缴费完毕后交方给药房等待拿药（可办理快递）\r\n请准备一次性医用床单（可现场购买）和户外保温毯（推荐），户外保温毯购买链接：<a href=\"https://m.tb.cn/h.UJglv3C?tk=5KMnd9XFr3D\" target=\"_blank\">https://m.tb.cn/h.UJglv3C?tk=5KMnd9XFr3D</a>",
                time_unit:"15",
                time_unit_num:"10",
                treat_expire:"365",
                visit_day:"7"
            },
            siteFormrules: {
                depart_name: [
                    { required: true, message: '请输入科室信息', trigger: 'blur' }
                ],
                h_name: [
                    { required: true, message: '请输入出诊医院信息', trigger: 'blur' }
                ],
            },
            siteForm1: {
                domain_set: '',
                domain_source: '平台免费域名',
            },
            siteForm2: {
                isApprove: '',
                phone: ''
            },

            siteFormrules1: {
                domain_source: [
                    { required: true, message: '请输入站点简称', trigger: 'blur' }
                ]
            },
        }
    },
    created(){
        store.commit('SET_CUSTOMIZE', true); 
        store.commit('SET_SLIDER_MENU','hosMenuData'); 
    },
    mounted() {
        const { depart_id, doctor_id } = this.$route.query; // 获取 doctorId 参数
        if (doctor_id && depart_id) {
            // 请求医生信息
            this.depart_id = depart_id;
            this.doctor_id = doctor_id;
            this.fetchDoctorData()
            this.fetchPackData()
            this.fetchProjectData()
            this.geHosAdress()
        }
    },
    computed: {
        selectedCount() {
            return this.selectedRows.length;
        },
        ...mapState(['hosMenuData']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    methods: {
        random() {
            var randomNumber = Math.random();
            return randomNumber
        },
        fetchDoctorData() {
            this.$http('POST', '/api/admin/get_depart_info', {
                depart_id: this.depart_id,
                doctor_id: this.doctor_id
            }).then(response => {
                this.form = { ...this.form, ...response.data,
                    type:response.type ? [Number(response.type)] : [2],
                    'morning_worktime':response.data.morning_worktime.split('-'),
                    'afternoon_worktime':response.data.afternoon_worktime.split('-')
                 }

            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 疗程套餐
        fetchPackData() {
            this.$http('POST', '/api/admin/get_project_packagelist', {
                depart_id: this.depart_id,
                doctor_id: this.doctor_id
            }).then(response => {
                if(response.code == 0){
                    this.loading1 = false
                    this.$nextTick(()=>{
                        this.courseList = response.data.list;
                        this.tableKey1 = Date.now(); // 强制重新渲染表格
                    })
                }

            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 项目列表
        fetchProjectData() {
            this.$http('POST', '/api/admin/get_project_list', {
                depart_id: this.depart_id,
                doctor_id: this.doctor_id
            }).then(response => {
                if(response.code == 0){
                    this.loading = false
                    this.$nextTick(()=>{
                        this.projectTagData = response.data.classify;//项目分类
                        this.projectList = Object.values(response.data.list);//项目列表
                        this.tableKey = Date.now(); // 强制重新渲染表格
                        // this.$set('projectList',Object.values(response.data.list))
                        // this.$set('projectTagData',response.data.classify)
                    })
                }
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        geHosAdress() {
            this.$http('POST', '/api/admin/search_hoispital', {
                keyword: this.doctor_id,
            }).then(response => {
                console.log(response.data,'===data');

            }).catch(error => {
                console.error(error, 'error')
            })
        },
        validateSelection(val) {
            // 防止取消选中医生名片
            if (!val.includes(2)) {
                this.$nextTick(() => {
                    this.form.type = [...val, 2];
                    this.$message.warning('基础功能不可取消');
                });
            }
        },
        selectTag(item) {
            if(item == 'all'){
                this.projectSearchId = 'all';
            }else{
                this.projectSearchId = item.id;
            }
            // 筛选逻辑
            // this.getFilterProject()

        },
        getFilterProject(){
            // 接口需要更改
            this.$http('POST', '/supernew/ajax_get_type_batch_list', {
                // 项目筛选
                projectid:this.projectSearchId == 'all' ? '' : this.projectSearchId,
                // 项目名称搜索
                projectSearchName:this.projectSearchName
            }).then(response => {
                this.projectTagData = response.data;
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        getProTagData() {
            this.$http('POST', '/supernew/ajax_get_type_batch_list', {

            }).then(response => {
                this.projectTagData = response.data

            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 修改项目价格
        changePrice(row) {
            if (row.sort) {
                this.editorProjectInfo({ price: row.price, project_id: row.id })
            }
        },
        // 修改分类
        changeClassify(row) {
            if (row.sort) {
                this.editorProjectInfo({ classify_id: row.classify_id, project_id: row.id })
            }
        },
        editorProjectInfo(props) {
            this.$http('POST', '/api/admin/edit_project', {
                ...props,
                depart_id: this.depart_id,
                doctor_id: this.doctor_id,
            }).then(response => {
                if (response.code == 0) {
                    this.$Message.success('修改成功')
                    this.getInitData()
                }
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        addNewSetMenu() {
            this.$router.push(`/addNewTreatment?doctor_id=${this.doctor_id}&depart_id${this.depart_id}`)
        },
        addNewGroup(){
            this.dialogVisible1 = true
        },
        addNewProject(){
            this.dialogVisible = true
        },
        handleClose() {
            this.$Message.info('弹框已关闭');
            this.dialogVisible = false;
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getData()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getData()
        },
       
        // 确认按钮事件
        handleConfirm() {
            if (this.dialogVisible1) {
                this.$refs['projectNameForm'].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                        this.dialogVisible1 = false;

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            } else if (this.dialogVisible) {
                this.$Message.success('点击了确认按钮');
                this.dialogVisible = false;
            }
        },
        // 取消按钮事件
        handleCancel() {
            this.$Message.warning('点击了取消按钮');
            this.dialogVisible = false;
            this.dialogVisible1 = false;
        },
        dialogVisibleChange(data) {
            console.log(data, 'data098908090');
        },
        onSwitchChange1(row) {
            row.status = !row.status;
            this.$set(this.projectList, row)
        },
        onSwitchChange2(row) {
            row.status = !row.status;
            this.$set(this.courseList, row)
        },
        handleClick1(row) {
            console.log(row);
            this.$router.push(`/addNewTreatment?package_id=${row.id}&doctor_id=${this.doctor_id}&depart_id=${this.depart_id}`)
            // 跳转编辑页面
        },
        handleClick(row) {
            console.log(row);
            // 跳转编辑页面
        },
        // 处理全选按钮变化
        handleSelectAllChange(val) {
            console.log(this.$refs.multipleTable, 'multipleTable-');
            if (val) {
                // 只选中未选中的行
                const unselectedRows = this.projectList.filter(
                    row => !this.selectedRows.includes(row)
                );
                unselectedRows.forEach(row => {
                    this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true);
                });
            } else {
                // 只取消已选中的行
                this.selectedRows.forEach(row => {
                    this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, false);
                });
            }
        },

        // 处理选择变化
        handleSelectionChange(rows) {
            this.selectedRows = rows;
            // 更新全选按钮状态
            const allSelected = rows.length === this.projectList.length;
            const noneSelected = rows.length === 0;

            this.selectAll = allSelected;
            this.isIndeterminate = !noneSelected && !allSelected;
        },
        handleSelectAllChange1(val) {
            console.log(this.$refs.multipleTable, 'multipleTable-');
            if (val) {
                // 只选中未选中的行
                const unselectedRows = this.courseList.filter(
                    row => !this.selectedRows1.includes(row)
                );
                unselectedRows.forEach(row => {
                    this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, true);
                });
            } else {
                // 只取消已选中的行
                this.selectedRows.forEach(row => {
                    this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, false);
                });
            }
        },

        // 处理选择变化
        handleSelectionChange1(rows) {
            console.log(rows,'1=====');
            this.selectedRows1 = rows;
            // 更新全选按钮状态
            const allSelected = rows.length === this.courseList.length;
            const noneSelected = rows.length === 0;

            this.selectAll1 = allSelected;
            this.isIndeterminate1 = !noneSelected && !allSelected;
        },
        // 批量操作
        batchOperate(type,name) {
            // 默认疗程 启用、禁用
            let url= '/api/admin/project_package_mutil_option';
            let props = {
                status:type,
                depart_id:this.depart_id,
                doctor_id:this.doctor_id
            }
            let str = []
                // 禁用
            if(name == 'project'){
                // 修改项目列表
                url='/api/admin/project_mutil_option';
                // selectedRows
                console.log(this.selectedRows,'----09999888');
                this.selectedRows.forEach(item=>{
                    if(item.status != type){
                        str.push(item.id)
                    }
                })
                if(str.length == 0){
                    this.$message.error('请重新选择！')
                    return
                }
                props.project_ids = str.join(',')
            }else{
                // 修改疗程套餐
                // selectedRows1
                this.selectedRows1.forEach(item=>{
                    if(item.status != type){
                        str.push(item.id)
                    }
                })
                if(str.length == 0){
                    this.$message.error('请重新选择！')
                    return
                }
                props.package_ids = str.join(',')
            }
            // console.log(url,props);
            this.changePackData(url,props,name)
        },
        // 
        changePackData(url,params,name) {
            this.$http('POST',url , {
                ...params
            }).then(response => {
                if(response.code == 0){
                    this.$Message.success('操作成功')
                    if(name == 'project'){
                        this.loading = true;
                        this.selectedRows=[]
                        this.fetchProjectData()
                    }else{
                        this.loading1 = true;
                        this.selectedRows1=[];
                        this.fetchPackData()
                    }
                }
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        ChangeTime(type) {

            console.log(this.form.morning_worktime, type,'===');
        },
        btnClick() {
        },
        handleClear(value) {
            // this.handleInput('')
            console.log(value, 'value===qinghcu');
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        // 上传图片
        handleAvatarSuccess(res, file) {
            this.imageUrl1 = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(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;
        },
        changeNormalWeixin() {

        },
        changeSelectWeixin(item, flag) {
            if (flag) {
                this.select_placeholder_weixin = this.options_weixin_null.desc;
                return
            }
            this.selectedItem = { ...item };
            console.log(this.selectedItem, 'this.selectedItem====');
        },
        //  销售渠道
        domain_radioChange(type) {
            console.log(type, '--');
        },
        onSwitchChange(data) {
            console.log(data, '---');
        },
        updateHosInfo(props){
            this.$http('POST', '/api/admin/set_hospital_depart', {
                ...props
            }).then(response => {
                if(response.code == 0){
                    this.$Message.success('更新成功')
                }
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        submitForm(form) {
            console.log(this.$refs[form], '-----');
            this.$refs[form].validate((valid) => {
                console.log(this[form], '======formxinxi');
                if (valid) {
                    alert('提交成功!');
                    let props = {}
                    switch(form){
                        case 'siteForm1':
                            props={
                                morning_worktime:form.morning_worktime.join('-'),
                                afternoon_worktime:form.afternoon_worktime.join('-')
                            }
                            break;
                        case 'siteForm':
                            props={
                                is_fixed:this.form.is_fixed,
                                type:form.type,
                                notice:form.notice
                            }
                            break;
                        case 'numSettingForm':
                            props={
                                time_unit:form.time_unit,
                                time_unit_num:form.time_unit_num,
                                visit_day:form.visit_day,
                                treat_expire:form.treat_expire,
                            }
                            break;
                    }
                    this.updateHosInfo(props)
                } else {
                    return false;
                }
            });
        },
        cancelClick() {
            console.log('quxiao');
        },
        confirmClick(type) {
            console.log(type, '确认');
        }

    }
}
</script>
<style lang="scss">
.weekPlan {
    display: grid;
    grid-gap: 12px 44px;
    grid-template-columns: repeat(2, 1fr);

}
#siteMessage4 ::v-deep .el-form-item {
    margin-bottom: 0 !important;
}
.pageTitle{
    // padding: 12px 0;
}
.scroll-container {
  width: calc(100% - 380px);
  overflow-x: auto; /* 关键：启用横向滚动 */
}
.special-input {
    margin-bottom: 0 !important;
}
.scroll-list {
  display: flex;       /* Flex 布局 */
  flex-wrap: nowrap;   /* 禁止换行 */
  gap: 10px;          /* 子项间距 */
}

.scroll-item {
  flex: 0 0 auto;     /* 不伸缩、不收缩 */
  width: 200px;       /* 固定子项宽度 */
  height: 100px;
  background: #eee;
}
.totalCount {
    font-size: 12px;
    font-weight: normal;
    line-height: 13px;
    letter-spacing: 0.08em;
    color: #8A9099;
    margin-left: 12px;
}

.tabProject {
    width: calc(100% - 380px); 
    overflow-x: auto;

    .overTab{
        display: flex;
        gap: 12px;
        flex-wrap: nowrap; /* 禁止换行 */
    }

    .tab-item {
        height: 28px;
        // min-width: 74px;
        display: inline-flex; /* 关键修改：从 flex 改为 inline-flex */
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 4px 12px;
        gap: 4px;
        z-index: 2;
        border-radius: 14px;
        background: #FFFFFF;
        border: 1px solid #DFE2E6;
        font-family: Microsoft YaHei UI;
        font-size: 14px;
        text-align: justify;
        letter-spacing: 0.08em;
        color: #8A9099;
        white-space: nowrap; /* 防止文字换行 */
    }

    .active {
        color: #006AFF;
        border-color: transparent;
        background: #F2F3F5;
    }
}

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

.checkboxGroup {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    height: 72px;
    padding: 10px 0;
}

.addStore {
    margin-top: 12px;
}

.qqCode-wrap {
    margin-bottom: 14px;

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

    .avatar-uploader {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 12px 0 8px;
    }

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