<template>
    <div class="site-setting-wrap pagePadding min-flex-right">
        <p class="pageTitle bold">基础信息</p>
        <div class="siteMessage flex-common" id="siteMessage1">
            <p class="littleTitle mb32">基础信息</p>
            <el-form :model="siteForm" :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.tags" multiple :options="options_payword"
                                        placeholder="选择省份">
                                    </GuipSelect>
                                </div>
                                <div class="short-width">
                                    <GuipSelect width="100%" v-model="form.tags" 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="siteForm.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="siteForm.company_address"
                                prop="company_address" placeholder="请输入" />
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="所在科室" :required="true">
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="siteForm.company_address"
                                prop="company_address" 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="yibao" @change="onSwitchChange" activeText="非医保定点"
                                    inactiveText="非医保定点">
                                </GuipSwitch>
                            </div>
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="使用功能">
                            <el-checkbox-group slot="formDom" v-model="checkList" class="checkboxGroup">
                                <div class="flex">
                                    <el-checkbox label="医生名片（基础功能不可取消）"></el-checkbox>
                                    <el-checkbox label="患者预约"></el-checkbox>
                                </div>
                                <el-checkbox label="项目计数"></el-checkbox>
                            </el-checkbox-group>
                        </GuipFormItem>
                        <GuipFormItem column="column" class="" label="就诊提醒">
                            <div slot="formRight" class="desc">就诊前的注意事项，非必填</div>
                            <GuipTextarea slot="formDom" v-model="form.detailDesc" prop="description" width="100%"
                                height="84px" autosize placeholder="输入" />
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" />
        </div>
        <div class="siteMessage flex-common" id="siteMessage2">
            <p class="littleTitle mb32">出诊时间</p>
            <el-form :model="siteForm1" :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="time1"
                                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
                                @change="ChangeTime('time1')">
                            </el-time-picker>
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="工作时间（ 下午 ）" :required="true">
                            <el-time-picker slot="formDom" style="width:100%" is-range v-model="time2"
                                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
                                @change="ChangeTime('time1')">
                            </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="[key] in Object.entries(weekPlan)" :key="key" v-model="weekPlan[key]"
                                    :options="options_weekPlan" @change="weekChange()" :label="key" placeholder="休息">
                                </GuipSelect>
                            </div>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />
        </div>
        <div class="siteMessage flex-common" id="siteMessage3">
            <p class="littleTitle mb32">放号设置</p>
            <el-form :model="numSettingForm" :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="numSettingForm.times"
                                prop="times" 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="numSettingForm.nums"
                                prop="nums" 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="numSettingForm.hours"
                                prop="hours" 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="numSettingForm.days"
                                prop="days" placeholder="请输入" unit="天" />
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('numSettingForm')" />
        </div>
        <p class="pageTitle bold">项目管理</p>
        <div class="siteMessage flex-common" 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">新增分组</GuipButton>
                        <GuipButton size="table" type="primary">新增项目</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('1')">批量禁用</GuipButton>
                        <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }"
                            @click="batchOperate('2')">
                            批量启用</GuipButton>
                    </div>

                </div>
                <div class="flex-between mb32 mt32">
                    <div class="tabProject flex">
                        <div :class="['tab-item ', projectSearchId == item.id ? 'active' : '']"
                            v-for="item in projectTagData" :key="item.name">{{ item.name }}</div>
                    </div>
                    <div class="right flex">
                        <span>搜索项目</span>
                        <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="projectSearchName"
                            prop="company_name" placeholder="请输入">
                            <img src="@/assets/input_search_ic.svg" slot="suffix" @click="handleClear" />
                        </GuipInput>
                    </div>
                </div>
                <GuipTable :tableData="projectList" style="width: 100%" ref="multipleTable"
                    @selection-change="handleSelectionChange" :loading="loading">
                    <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"></el-table-column>
                    <el-table-column prop="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" @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="selectAll"
                                :indeterminate="isIndeterminate">全选</el-checkbox>
                        </div>
                        <span class="totalCount">共{{ courseList.length }}条，已选{{ selectedCount }}条</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>
                <GuipTable :tableData="courseList" style="width: 100%" ref="multipleTable1"
                    @selection-change="handleSelectionChange1" :loading="loading1">
                    <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"></el-table-column>
                    <el-table-column prop="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" @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="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="courseList.length">
            </el-pagination>
            </el-form>
        </div>
    </div>
</template>
<script>
import store from '../store';
import GuipFormItem from '@/components/GuipFormItem.vue';
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 {setHighActive} from '@/utils/common';
export default {
    // 站点设置
    name: '',
    props: [''],

    components: {
        GuipFormItem,
        GuipButton,
        GuipInput,
        GuipTable,
        GuipSwitch,
        GuipSelect,
        GuipTextarea,
        GroupFormBtns

    },
    data() {
        return {
            currentPage:1,
            pageSize:10,
            currentPage1:1,
            pageSize1:10,
            loading: false,
            loading1: false,
            selectedRows: [],//已选中数据
            selectedRows1: [],//已选中数据
            isIndeterminate: false,
            isIndeterminate1: false,
            projectSearchId: '',
            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'
                },
                {
                    name: '针灸1',
                    id: '1'
                },
                {
                    name: '针灸2',
                    id: '11'
                },
                {
                    name: '针灸3',
                    id: '12'
                },
                {
                    name: '针灸4',
                    id: '13'
                },
            ],
            courseList: [
                {
                    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'
                },
            ],
            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: {
                '周一': '',
                '周二': '',
                '周三': '',
                '周四': '',
                '周五': '',
                '周六': '',
                '周日': '',
            },
            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: '4',
                label: '休息'
            },],
            siteForm: {
                company_name: '',
                company_address: '',
                company_phone: '',
                site_alias: '',
            },
            form: {
                description: '',
                detailDesc: '',
                tags: ''
            },
            siteFormrules: {
                site_alias: [
                    { required: true, message: '请输入站点简称', trigger: 'blur' }
                ]
            },
            siteForm1: {
                domain_set: '',
                domain_source: '平台免费域名',
            },
            siteForm2: {
                zhifubao_pay: '',
                weixin_pay: '',
            },
            siteFormrules1: {
                domain_source: [
                    { required: true, message: '请输入站点简称', trigger: 'blur' }
                ]
            },
            domain_source: [
                { label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
                { label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
            ],
            options_weixin_null: {
                label: '暂无收款账号',
                value: '暂时没有收款账号，我想稍后配置',
                desc: '暂无收款账号，稍后配置'
            },
            select_placeholder_weixin: '暂无收款账号，稍后配置',
            selectedItemWeixin: {},//微信收款方式
            options_weixin: [],
            options_zhifubao: [],
        }
    },
    computed: {
        selectedCount() {
            return this.selectedRows.length;
        } // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    mounted() {
        store.commit('SET_PAGETITLE', '基本设置');
    },
    methods: {
        onSwitchChange1(row) {
            row.status = !row.status;
            this.$set(this.projectList, row)
        },
        onSwitchChange2(row) {
            row.status = !row.status;
            this.$set(this.courseList, row)
        },
        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) {
            this.selectedRows = rows;
            // 更新全选按钮状态
            const allSelected = rows.length === this.courseList.length;
            const noneSelected = rows.length === 0;

            this.selectAll1 = allSelected;
            this.isIndeterminate1 = !noneSelected && !allSelected;
        },
        // 批量操作
        batchOperate(type) {
            if (type == '1') {
                // 禁用

            } else {
                // 启用

            }
        },
        ChangeTime(type) {
            console.log(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, '---');
        },
        submitForm(form) {
            console.log(this.$refs[form], '-----');
            this.$refs[form].validate((valid) => {
                console.log(this[form], '======formxinxi');
                if (valid) {
                    alert('提交成功!');
                } 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);

}

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

.tabProject {
    gap: 12px;

    .tab-item {
        /* 自动布局子元素 */
        height: 28px;
        min-width: 74px;
        /* 自动布局 */
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 4px 12px;
        gap: 4px;
        align-self: stretch;
        z-index: 2;
        border-radius: 14px;
        background: #FFFFFF;
        box-sizing: border-box;
        /* middle/middle_line_1 */
        border: 1px solid #DFE2E6;
        /* body/body 2_regular */
        font-family: Microsoft YaHei UI;
        font-size: 14px;
        text-align: justify;
        /* 浏览器可能不支持 */
        letter-spacing: 0.08em;
        /* text/text_4 */
        color: #8A9099;
    }

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

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

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