<template>
    <div class="main-content12">
        <div class="elementWrap">
            <domainBind label="域名设置" @handleEvent="handleEvent" />
            <PromptText text='这是一个提示框' :type="1" />
            <PromptText text='这是一个提示框' :type="2" />
            <PromptText text='这是一个提示框' :type="3" />
            <PromptText text="前期准备事项" :type="1" class="beforeNotice">
                <template #next_desc>
                    <p class="flex">
                        <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
                            target="_blank">
                            <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
                    </p>
                </template>
                <template #desc>
                    <p class="mt12 flex">
                        1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
                            target="_blank">
                            <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
                    </p>
                    <p class="mt10 flex">
                        2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank">
                            <img src="@/assets/site/form_linkActive.svg"
                                alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
                    </p>
                </template>
            </PromptText>


            
            <div class="ele-item">
                <label for="">实时预览外层嵌套</label>
                <!-- 默认 显示电脑端、手机端 -->
                <!--  :showMobile="false"  :showPc="false" -->
                <DevicePreview>
                    <template #desktop>
                        电脑端内容-内容自定义
                    </template>
                    <template #mobile>
                        内容自定义
                        手机端端内容-- 手机端端内容
                    </template>
                </DevicePreview>
            </div>

            <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
            <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
                <div class="ele-item">
                    <label for="">copy固定内容</label>
                    <!-- 复制固定文本 -->
                    <GuipButton size="big" v-clipboard="'渝过田晴'">复制渝过田晴</GuipButton>
                    
                    <!-- 复制动态文本 -->
                    <GuipButton size="big" v-clipboard="content">点击复制: {{ content }}</GuipButton>
                </div>
                <div class="ele-item">
                    <label for="">手动点击copy</label>
                    <GuipInput v-model="form.input1">
                        <!-- 提示可以不添加 、图标可更换 -->
                        <GuipToolTip content="点击复制到粘贴板"  slot="suffix">
                            <img src="@/assets/menu/Totalprofit.svg" @click="handleClickCopy" />
                        </GuipToolTip>
                    </GuipInput>
                </div>
                <div class="ele-item">
                    <label for="">单选框(对象格式)：</label>
                    <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
                        @change="radioChange" :rules="rules.language" />
                </div>
                <div class="ele-item">
                    <label for="">单选框2（数组格式 + 自定义取值）：</label>
                    <GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language" selectedLabelKey="selectedLabel"
                        @change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']"
                        value-key="id" />
                </div>

                <div class="ele-item">
                    <label for="">数组套对象类型下拉框：</label>
                    <!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey-->
                   <div class="flex">
                    <GuipSelect width="150px" v-model="form.card" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
                        prop="card" :options="options" valueKey="id1" labelKey="id2" :extraItem="{label:'全部',value:'99999'}"/>
                        <p>j卢卡斯就到啦</p>
                        <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
                        @blur="handleInput" prop="input2" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
                   </div>
                </div>
                <div class="ele-item">
                    <label for="">纯数组[1,2]下拉框：</label>
                    <GuipSelect width="150px" v-model="form.card" clearable label="卡片" @change="selectChangeTest"
                        prop="card" :options="['麻辣烫','提拉米苏']" />
                </div>
                <div class="ele-item">
                    <label for="">对象格式下拉框：</label>
                    <GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
                        prop="card" :options="languageOptions"/>
                </div>
                <el-button type="primary" @click="submitForm">Submit</el-button>

                <div>
                    <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
                    <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
                    <GuipTable :tableData="[{payment:0,name2:10008.9}]" ref="multipleTable" @selectChange="handleSelectionChange"
                        :multiple="true" autoColumn="true" :loading="tableLoading">
                        <!-- <template slot="header"> -->
                        <el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column>
                        <el-table-column prop="created_at" label="时间" width="200">
                            <template slot-scope="scope">
                                <div class="flex cell_render">
                                    <GuipToolTip content="文字居中">
                                        <span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
                                            scope.row.payment
                                                ==
                                                '0' ? '文字居中' : '文字居中' }}</span>
                                    </GuipToolTip>
                                    <GuipToolTip content="图标居中">
                                        <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
                                            :color="'#8A9099'" :hoverColor="'#006AFF'" />
                                    </GuipToolTip>

                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="unit_num" label="数量" width="180">
                            <template slot-scope="scope">
                                <GuipToolTip content="单元格局中">
                                    <div class="flex">
                                        <span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
                                            scope.row.payment
                                                ==
                                                '0' ? '单元格局中' : '单元格局中' }}</span>
                                        <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
                                            :color="'#8A9099'" :hoverColor="'#006AFF'" />
                                    </div>

                                </GuipToolTip>
                            </template>

                        </el-table-column>
                        <el-table-column prop="name2" label="姓名" width="150" :formatter="$stateFormat"></el-table-column>
                        <el-table-column prop="statu" label="价格" width="150">
                            <template slot-scope="scope">
                                <GuipSwitch v-model="scope.row.statu" activeText="默认类型boolean" inactiveText="关闭" :active-value="1" :inactive-value="0"
                                    @change="onSwitchChange1(scope.row)">
                                </GuipSwitch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="地址1" width="150"> </el-table-column>
                        <el-table-column prop="address" label="地址2" width="250"> </el-table-column>
                        <el-table-column prop="address" label="地址3" width="150"> </el-table-column>
                        <el-table-column prop="address1" label="地址测试" width="100"></el-table-column>
                        <el-table-column prop="price" label="价格" width="300">
                            <template slot-scope="scope">
                                <GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
                                    prop="card" :options="options" defaultValue="选项1" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作(固定右)" width="200" fixed="right">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
                                    <el-button type="text">编辑</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="total">
                    </el-pagination>
                </div>
                <div class="flex">
                    <h3 for="">表格(带气泡框),内容自定义：</h3>
                    <a href="/register">点击一下跳转参照页面</a>
                    <!-- 暂时废弃此版本 -->
                    <!-- <GuipTable :tableData="tableData4" :key="random()" ref="multipleTable"
                        @selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px"
                        :columns="columns" @confirm="onConfirm" @cancel="onCancel">
                        <template #popover-content-name="{ row, column }">
                            <div>
                                <GuipInput ref="GuipInput" width="252px" type="text"
                                    v-model="row[`edit_${column.prop}`]" label="排序" :prop="column.label"
                                    placeholder="这是" />
                            </div>
                        </template>
                        <template #popover-content-age="{ row, column }">
                            <GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" type="text"
                                label="年龄" :prop="column.label" placeholder="这是" unit="岁">
                            </GuipInput>
                        </template>
                        <template #popover-content-address="{ row, column }">
                            <div>
                                <p>自定义内容：{{ column.label }}</p>
                                <el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择">
                                    <el-option label="北京市" value="北京市" />
                                    <el-option label="上海市" value="上海市" />
                                    <el-option label="广州市" value="广州市" />
                                </el-select>
                            </div>
                        </template>
                    </GuipTable> -->
                </div>

                <div class="ele-item">
                    <label for="">文本域：固定行数</label>
                    <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" />
                </div>
                <div class="ele-item">
                    <label for="">文本域：自适应高度</label>
                    <GuipTextarea :styleObject="{ width: '450px' }" placeholder="自适应高度" autosize />
                </div>
                <div class="ele-item">
                    <label for="">文本域：自定义label、描述</label>
                    <GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="90px"
                        placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit />
                </div>

                <div class="ele-item">
                    <label for="">输入框：</label>
                    <GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px"
                        placeholder="这是自定义默认提示语" />

                    <div style="width: 20px;height: 10px;"></div>

                    <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
                        @blur="handleInput" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />

                    <div style="width: 20px;height: 10px;"></div>

                    <GuipInput v-model="form.input3" width="400px">
                        <span slot="prependshow">http:</span>
                        <!-- <img slot="prefix" src="../assets/radio_checked.svg" alt=""> -->
                        <!-- 输入框后面小图标 -事件自定义 -->
                        <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
                        <!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->

                        <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
                        <!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->

                        <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
                        <span slot="appendshow">.checkcopy.com</span>
                    </GuipInput>
                    <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
                </div>

                <div class="ele-item">
                    <label for="">单选框：</label>
                    <el-radio v-model="radio1" :label="1">选项一</el-radio>
                    <el-radio v-model="radio1" :label="2">选项二</el-radio>
                </div>

                <div class="ele-item">
                    <label for="">单选框组：</label>
                    <el-radio-group v-model="radio" @input="radioChange">
                        <el-radio :label="3">备选项</el-radio>
                        <el-radio :label="6">备选项</el-radio>
                        <el-radio :label="9">备选项</el-radio>
                    </el-radio-group>
                </div>
                <div class="ele-item">
                    <label for="">按钮尺寸：</label>
                    <GuipButton size="superBig">加盟并进入后台</GuipButton>
                    <GuipButton size="big">准备完毕，验证自有域名</GuipButton>
                    <GuipButton size="page">下一步</GuipButton>
                    <GuipButton size="primary">保存</GuipButton>
                    <GuipButton size="table">新增站点</GuipButton>
                    <GuipButton size="form">前往添加</GuipButton>
                </div>
                <div class="ele-item">
                    <label for="">强按钮：</label>
                    <!-- 默认 type= primary  normal 样式 -->
                    <GuipButton>默认</GuipButton>
                    <GuipButton loading>按钮</GuipButton>
                    <GuipButton disabled>按钮</GuipButton>
                </div>
                <div class="ele-item">
                    <label for="">弱按钮：</label>
                    <GuipButton type="ignore">按钮</GuipButton>
                    <GuipButton type="ignore" loading>按钮</GuipButton>
                    <GuipButton type="ignore" disabled>按钮</GuipButton>
                </div>
                <div class="ele-item">
                    <label for="">中按钮：</label>
                    <GuipButton type="system">按钮</GuipButton>
                    <GuipButton type="system" loading>按钮</GuipButton>
                    <GuipButton type="system" disabled>按钮</GuipButton>
                </div>
                <div class="ele-item">
                    <label for="">文字按钮：</label>
                    <GuipButton type="text">强引导</GuipButton>
                    <GuipButton type="grey">弱引导</GuipButton>
                </div>
                <div class="ele-item">
                    <label for="">独特按钮：可以自定义划过时 图标图片、文字颜色</label>
                    <hover-button button-text="默认样式" :default-icon="require('../assets/upLoad_grey.svg')"
                        :hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B"
                        hover-text-color="#006AFF" @click="btnClick" />
                    <!-- 宽高单独传递 、其余统一放置在 customStyle 中-->
                    <hover-button button-text="自定义" :default-icon="require('@/assets/site/addIcon.svg')"
                        :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#626573"
                        hover-text-color="#006AFF" width="110px" height="32px"
                        :customStyle="{ fontSize: '12px', background: '#fff', borderRadius: '2px', borderColor: '#DFE2E6' }" />

                </div>
                <div class="ele-item">
                    <label for="">独特按钮单独写样式：</label>
                    <div class="btn1">创建首个网站</div>
                </div>
                <!-- 暂时废弃 -->
                <!-- <div class="ele-item">
                    <label for="">常规按钮：</label>
                    <GuipButton>默认按钮</GuipButton>
                    <GuipButton type="mild" size="medium">轻度按钮</GuipButton>
                    <GuipButton type="primary">按钮</GuipButton>
                    <GuipButton type="reverseMild">按钮</GuipButton>
                    <GuipButton type="primary" loading>按钮</GuipButton>
                    <GuipButton type="success" :plain="plain">按钮</GuipButton>
                    <GuipButton type="info" :plain="plain">按钮</GuipButton>
                    <GuipButton type="warning" :plain="plain">按钮</GuipButton>
                    <GuipButton type="danger" :plain="plain">按钮</GuipButton>
                </div>
                <div class="ele-item">
                    <label for="">禁用按钮：</label>
                    <GuipButton disabled>默认按钮</GuipButton>
                    <GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton>
                    <GuipButton type="reverseMild" disabled>按钮</GuipButton>
                    <GuipButton type="primary" size="medium" disabled>按钮</GuipButton>
                    <GuipButton type="success" disabled>按钮</GuipButton>
                    <GuipButton type="info" disabled>按钮</GuipButton>
                    <GuipButton type="warning" disabled>按钮</GuipButton>
                    <GuipButton type="danger" disabled>按钮</GuipButton>
                </div>
                <div class="ele-item">
                    <label for="">三种尺寸按钮：</label>
                    <GuipButton type="primary">默认按钮</GuipButton>
                    <GuipButton type="primary" size="medium">中等按钮</GuipButton>
                    <GuipButton type="primary" size="small">小的按钮</GuipButton>
                    <GuipButton type="primary" size="mini">迷你按钮</GuipButton>
                </div> -->
                <div class="ele-item">
                    <label for="">自定义宽高按钮：</label>
                    <GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton>
                </div>

                <div class="ele-item">
                    <label for="">提示：</label>
                    <GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton>
                    <GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton>
                    <GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton>
                </div>

                <div style="width: 600px;">
                    <h3>表单左右布局（直接使用封装好的input）</h3>
                    <!-- 表单左右布局 -->
                    <GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username"
                        :rules="usernameRules" placeholder="这是自定义默认提11示语" />
                </div>

                <div style="width: 800px;height: 150px;">
                    <h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
                    <GuipInput ref="GuipInput" column="column" addClass="w510" required label="age" desc="这是是右侧文案"
                        v-model="form.age" prop="age" placeholder="这是自定义默认提示语" />
                </div>
                <div style="width: 400px;height: 150px;">
                    <h3>自定义 表单内容 </h3>
                    <!-- 可以添加独立类名 默认宽度继承父元素 100% -->
                    <GuipFormItem column="column" class="mb24" label="自定义左侧" :required="true">
                        <!-- 如果 左侧为纯文本 无特殊格式、样式 可以直接 使用label 属性；
                        添加必输校验 直接使用 required 属性
                        特殊的使用slot = formLeft 自定义内容；
                        添加独立类名，修改样式 -->
                        <!-- <b slot="formLeft">自定义左侧</b> -->
                        <span class="desc" slot="formRight"><a href="https://www.baidu.com/">跳转一下</a> 自定义右侧</span>
                        <!-- 自定义下方内容 -->
                        <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.age" prop="age"
                            placeholder="请输入" />
                    </GuipFormItem>
                </div>

                <div class="ele-item">
                    <label for="">开关L</label>
                    <!-- active-value 开启状态的值 -->
                    <!-- inactive-value 关闭状态的值 -->
                    <GuipSwitch v-model="form.switchValue3" activeText="默认类型boolean" inactiveText="关闭" :active-value="true" :inactive-value="false"
                        @change="onSwitchChange">
                    </GuipSwitch>
                </div>
                <div class="ele-item">
                    <label for="">开关L</label>
                    <!-- 左侧不需要添加float 属性 -->
                    <GuipSwitch v-model="switchValue" float="right" activeText="文案在右，默认左侧" inactiveText="关闭"
                        @change="onSwitchChange">
                    </GuipSwitch>
                </div>
                <div class="ele-item">
                    <label for="">开关L</label>
                    <GuipSwitch v-model="switchValue1" :active-value="1" :inactive-value="0" activeText="number"
                        @change="onSwitchChange">
                    </GuipSwitch>
                    <GuipSwitch v-model="form.switchValue2" active-value="0" inactive-value="1" activeText="string"
                        @change="onSwitchChange">
                    </GuipSwitch>
                    <p>当前值switchValue2：{{ this.form.switchValue2 }}</p>
                </div>
                <div class="flex ele-item">
                    <label for="">input、drop组合使用(默认使用)</label>
                    <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
                        <div slot="formDom" class="self-drop-wrap flex">
                            <GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
                            </GuipInput>
                            <!-- 只用作选中内容展示 -->
                            <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">
                                {{ currentDomainItem.name }}</div>
                        </div>
                        <!--触发 真实下拉操作 -->
                        <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
                        <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.domainSuffix1"
                            :options="domainOptions" @change="changeSelectIp" placeholder="请选择">
                            <template #normal>
                                <div class="flex flex-between noraml-jump">
                                    <div class="left">
                                        <b>添加新域名</b>
                                        <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
                                        <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
                                    </div>
                                    <div class="right">
                                        <GuipButton size="form">前往绑定</GuipButton>
                                    </div>
                                </div>
                            </template>
                        </CustomDropdown>
                    </GuipFormItem>
                </div>
                <div class="flex ele-item">
                    <label for="">input、drop组合使用(自定义下拉选择项)</label>
                    <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
                        <div slot="formDom" class="self-drop-wrap flex">
                            <GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
                            </GuipInput>
                            <!-- 只用作选中内容展示 -->
                            <div @click="toggleDrop1" class="point flex appendDrop" style="width: 40%;">
                                {{ currentDomainItem.name }}
                            </div>
                        </div>
                        <!--触发 真实下拉操作 -->
                        <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
                        <CustomDropdown slot="formDom" ref="dropDomain1" width="100%" v-model="form.domainSuffix"
                            :options="domainOptions" @change="changeSelectIp" valueKey="id" placeholder="请选择">
                            <template #normal>
                                <div class="flex flex-between noraml-jump">
                                    <div class="left">
                                        <b>添加新域名</b>
                                        <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
                                        <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
                                    </div>
                                    <div class="right">
                                        <GuipButton size="form">前往绑定</GuipButton>
                                    </div>
                                </div>
                            </template>
                            <!-- 自定义下拉选项 选中条件-->
                            <!-- 不添加这个 默认普通选中格式  单独取值 display-key
                                        自定义渲染项 渲染的内容自定义 ，display-key 属性不再生效-->
                            <template #item="{ item }">
                                <div class="flex-between">
                                    <div class="left">
                                        <p class="one">{{ item.label }}</p>
                                    </div>
                                    <div class="right">
                                        <img v-if="form.domainSuffix == item.id"
                                            src="@/assets/register/drop-selected.svg" alt="">
                                    </div>
                                </div>
                            </template>
                        </CustomDropdown>
                    </GuipFormItem>
                </div>
                <div class="flex ele-item">
                    <label for="">单独实现自定义内容下拉选择</label>
                    <CustomDropdown width="500px" v-model="form.domainSuffix" :options="domainOptions"
                        @change="changeSelectIp" valueKey="id" placeholder="请选择">
                        <template #normal>
                            <div class="flex flex-between noraml-jump">
                                <div class="left">
                                    <b>添加新域名</b>
                                    <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
                                    <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
                                </div>
                                <div class="right">
                                    <GuipButton size="form">前往绑定</GuipButton>
                                </div>
                            </div>
                        </template>
                        <template #item="{ item }">
                            <div class="flex-between">
                                <p>测试一下自定义内容{{ item.id }} + {{ item.label }}</p>
                                <p>易烊千玺/田栩宁</p>
                            </div>
                        </template>
                    </CustomDropdown>
                </div>


            </el-form>
            <div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">
                --------------------分割线0------------------------------</div>

            <div style="display: flex;" class="ele-item">
                <label for="">日期选择器</label>
                <el-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>

            <div ref="ScaleBox" class="ScaleBox">
                <!-- Form  组件-->
                <!-- @headdenForm="headdenForm" -->
                <!-- @changeSelect="changeSelect" -->
                <!-- <GuipForm
                    :fromItem="fromItem"
                    :formNewList="formList"
                    :detail="edit"
                    :disabled="edit"
                    ref="VabForm"
                />
                <div class="cardfooter" style="display: flex;">
                    <el-button @click="cancellation">取消</el-button>
                    <el-button @click="save" type="primary">保存</el-button>
                </div> -->
            </div>
            <div class="flex ele-item gap10" style="flex-wrap: wrap;">
                <label for="">一些功能集合</label>
                <GuipButton type="primary" ref="button1" :btnstyle="{ width: '300px' }" @click="openDialog3('button1','bottom')">下方弹出消息提示
                </GuipButton>
                <GuipButton type="primary" ref="button2" :btnstyle="{ width: '300px' }" @click="openDialog3('button2','top')">上方弹出消息提示
                </GuipButton>
                <GuipButton type="primary" ref="button3" :btnstyle="{ width: '300px' }" @click="openDialog4('button3','top')">一直显示消息提示
                </GuipButton>
                <GuipButton type="primary" ref="button5" :btnstyle="{ width: '300px' }" @click="openDialog5">动态更改提示文案
                </GuipButton>
                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog6">主动隐藏消息提示
                </GuipButton>
                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右）
                </GuipButton>
                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）
                </GuipButton>
                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog2">打开弹框-放弃原按钮，自定义
                </GuipButton>
                <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
                
            </div>

            <div class="flex ele-item">
                <label for="">提示信息</label>
                <GuipToolTip content="这是一个提示">
                    <GuipButton type="primary" size="page">悬停查看提示</GuipButton>
                </GuipToolTip>

                <GuipToolTip placement="bottom" effect="light">
                    <GuipButton type="primary" size="page">自定义提示内容</GuipButton>
                    <template #content>
                        <div style="max-width: 200px">
                            <h4>自定义标题</h4>
                            <p>这里可以放任何HTML内容</p>
                            <el-button size="mini">甚至按钮</el-button>
                        </div>
                    </template>
                </GuipToolTip>
                <GuipToolTip placement="bottom" effect="light" content="点击进入编辑">
                    <svg-icon :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
                        :hoverColor="'#006AFF'" />
                </GuipToolTip>
            </div>

            <GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
                :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
                <!-- 自定义内容 -->
                <div>
                    <p>这是一个自定义内容的弹框。</p>
                </div>
            </GuipDialog>
            <GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题"
                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
                <!-- 自定义内容 -->
                <div>
                    <p>这是一个自定义内容的弹框。</p>
                </div>
            </GuipDialog>
            <GuipDialog type="center" :dialogVisible="dialogVisible2" title="自定义标题、内容、按钮"
            :showFooterButton="false"
                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
                <!-- 自定义内容 -->
                <div>
                    <p>这是一个自定义内容的弹框。</p>
                    <p>这是一个自定义内容的弹框。</p>
                    <p>这是一个自定义内容的弹框。</p>
                    <p>这是一个自定义内容的弹框。</p>
                    <!-- 样式自定义 -->
                    <div class="btns gap10 mt24" style="width:100%">
                        <GuipButton type="ignore">取消</GuipButton>
                        <GuipButton :btnstyle="{width:'240px'}">⚡️咖啡不加糖喔</GuipButton>
                   </div>
                </div>
            </GuipDialog>
        </div>
    </div>
</template>

<script>

import { rules } from "../assets/vabForm";
import CustomDropdown from '@/components/CustomDropdown.vue';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipRadio from '@/components/GuipRadio.vue';
import GuipButton from '@/components/GuipButton.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipSelect from '@/components/GuipSelect.vue';
import GuipTable from '@/components/GuipTable.vue';
import GuipTextarea from '@/components/GuipTextarea.vue'
import GuipToolTip from '@/components/GuipToolTip.vue'
import HoverButton from '@/components/HoverButton.vue'
import GuipFormItem from '@/components/GuipFormItem.vue'
import SvgIcon from '@/components/SvgIcon.vue';
import PromptText from "@/components/PromptText.vue";
import DevicePreview from "@/components/PreviewTab.vue";
import domainBind from "@/components/domainBind.vue";


export default {
    name: 'HomeView',
    components: {
        domainBind,
        PromptText,
        GuipTextarea,
        GuipTable,
        GuipSwitch,
        GuipDialog,
        GuipRadio,
        GuipButton,
        GuipInput,
        GuipSelect,
        GuipToolTip,
        HoverButton,
        SvgIcon,
        GuipFormItem,
        DevicePreview,
        CustomDropdown
    },
    data() {
        return {
            content:'测试一下',
            domainOptions: [
                {
                    value: '.chachongz.com',
                    label: '111.chachongz.com',
                    id: '11',
                    name: '测试一下自定义名称111'
                },
                {
                    value: '.turnitin.org.cn',
                    label: '222.turnitin.org.cn',
                    id: '22',
                    name: '测试一下自定义名称222'
                },
                {
                    value: '.jishu.chachongz.com',
                    label: '333.jishu.chachongz.com',
                    id: '33',
                    name: '测试一下自定义名称333'
                },
            ],
            tableData3: [{
                id: '12987122',
                name: '王小虎',
                amount1: '234',
                amount2: '3.2',
                amount3: 10
            }, {
                id: '12987123',
                name: '王小虎',
                amount1: '165',
                amount2: '4.43',
                amount3: 12
            }, {
                id: '12987124',
                name: '王小虎',
                amount1: '324',
                amount2: '1.9',
                amount3: 9
            }, {
                id: '12987125',
                name: '王小虎',
                amount1: '621',
                amount2: '2.2',
                amount3: 17
            }, {
                id: '12987126',
                name: '王小虎',
                amount1: '539',
                amount2: '4.1',
                amount3: 15
            }],
            tableWidth: 0,
            currentPage: 1,    //当前页
            pageSize: 5,   //每页的容量
            total: 0,   //列表总数
            tableLoading: false,
            timer: null,
            date1: '',
            switchValue: true,
            switchValue3: true,
            switchValue1: 1,
            switchValue2: '0',
            dialogVisible1: false,
            dialogVisible2: false,
            dialogVisible: false,//是否展示弹框
            showCancelButton: true, // 控制是否显示取消按钮
            showCloseButton: true, // 控制是否显示关闭按钮
            form: {
                username: '',
                language: '',
                switchValue3:true,
                switchValue2: '0',
                domain_set: '',
                domainSuffix: '11',
                domainSuffix1: '.chachongz.com',
                card: '1',
                card1: '20',
                input1: '跨年的烟火,绽放天空',
                input2: '',
                input3: '',
            },
            languageOptions1: [
                { label: 'JavaScript', value: 'js', selectedLabel: '333提拉米苏33', id: 0, name: 0 },
                { label: 'Python', value: 'py', selectedLabel: '柠檬茶', id: 1, name: '易烊千玺' },
                { label: 'Java', value: 'java', disabled: true, selectedLabel: '榴莲大福', id: 2, name: '王源' }, // 禁用选项
                { label: 'Go', value: 'go', selectedLabel: '444222麻辣烫', id: 3, name: '王俊凯' },
            ],
            languageOptions: {
                '20': '查重站',
                '31': 'AI站'
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                card: [
                    { required: true, message: '请选择有效信息', trigger: 'blur' }
                ],
                language: [
                    { required: true, message: '请选择语言', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                ],
                input2: [
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' }
                ],
            },
            usernameRules: [{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules
            msg: "测试",
            title: "相关附件",
            edit: false,
            action: true,
            header: false,
            width: 1920,
            height: 1080,
            dataList: [
                { name: "张三", age: 19, id: 1 },
                { name: "李四", age: 20, id: 2 },
            ],
            formList: [],
            // 模拟数据 详细 测试
            fromItem: {
                id: "Shanghai",
                id1: "选项4",
                name: "用户名",
                radioId: "2",
                checkboxId: ["上海", "北京"],
                textareaIner: "textarea",
                dateTime: "2023-09-12 00:00:00",
                uploadList: [
                    {
                        name: "小梨猫.jpg",
                        size: 160517,
                        uid: 1695291434025,
                        url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
                    },
                ],
            },
            // 表格数据
            tableData2: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                price: '20',
                age: 20,
                statu:1,
                // 在支持修改的项目中，需要主动保留一份原始数据
                edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎11',
                address: '上海市普陀区金沙江路 151811 弄',
                price: '10',
                age: 30,
                statu:1,

                edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'

            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                price: '200',
                statu:0,
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            tableData4: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                price: '20',
                age: 20,
                // 在支持修改的项目中，需要主动保留一份原始数据
                edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎11',
                address: '上海市普陀区金沙江路 151811 弄',
                price: '10',
                age: 30,
                edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'

            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                price: '200',
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            // 表格列配置
            columns: [
                { prop: 'name', label: '姓名（带气泡）', popover: true }, // 支持气泡框
                { prop: 'age', label: '年龄', popover: true }, // 不支持气泡框
                { prop: 'address', label: '地址（带气泡）', popover: true }, // 支持气泡框
            ],
            optionss: [
                {
                    value: "选项1",
                    label: "黄金糕",
                },
                {
                    value: "选项2",
                    label: "双皮奶",
                },
                {
                    value: "选项3",
                    label: "蚵仔煎",
                },
                {
                    value: "选项4",
                    label: "龙须面",
                },
                {
                    value: "选项5",
                    label: "北京烤鸭",
                },
            ],
            cities: [
                {
                    value: "Beijing",
                    label: "北京",
                },
                {
                    value: "Shanghai",
                    label: "上海",
                },
                {
                    value: "Nanjing",
                    label: "南京",
                },
                {
                    value: "Chengdu",
                    label: "成都",
                },
                {
                    value: "Shenzhen",
                    label: "深圳",
                },
                {
                    value: "Guangzhou",
                    label: "广州",
                }
            ],
            tableData: [],
            input: 'hahhahah',
            defaultValue: 'asdasda',
            radio: 3,
            radio1: 5,
            btnstyleObj: {
                width: '388px',
                height: '46px',
                borderRadius: '4px',
                background: '#006AFF',
            },
            btnstyleObj1: {
                width: '247px',
                height: '46px',
                borderRadius: '4px',
            },
            styleObject: {
                minWidth: '200px',
                maxWidth: '400px',
                // height: '40px'
            },
            styleObject1: {
                width: '600px',
                height: '50px'
            },
            plain: false,
            options: [{
                value: '选项1',
                label1: '黄金hhhhhh',
                id1: '1',
                id2: '1是打开快递吧',
                label: '黄金糕'
            }, {
                value: '选项2',
                id1: '12',
                id2: '啊22哈哈',
                label1: '双皮奶hhhhhhhhh',
                label: '双皮奶'
            }, {
                value: '选项3',
                id1: '13',
                id2: '啊33哈哈',
                label1: '蚵仔煎hhhhhhhhh',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                id1: '14',
                id2: '啊444哈哈',
                label1: '双皮奶hhhhhhhhh',
                label: '龙须面'
            }, {
                value: '选项5',
                id1: '155',
                id2: '啊55哈哈',
                label1: '双皮奶hhhhhhhhh',
                label: '北京烤鸭'
            }],
            tooltip:null
            
        }
    },
    mounted() {
        this.getList();
        this.getStagePurchase()
        // this.$loadingFn.show()
        // setInterval(()=>{
        //     this.$loadingFn.hide()
        // },70000)
        // this.timer = setTimeout(() => {
        //     this.$store.dispatch('hideLoading')
        // }, 2000)
        // this.timer = null;

    },
    computed: {
        currentDomainItem() {
            return this.findItemById('id', 'domainSuffix');
        }
    },
    methods: {
        switchChange(value){
            console.log(value,'====value');
            console.log(this.switchValue1,'===uuuu');
        },
        handleEvent(data){
            console.log(data,'data')
        },
        handleOptions(options){
            console.log(options,'options')
        },
        // 手动copy内容
        handleClickCopy(){
            this.$copy(this.form.input1, {
                successMsg: '内容已复制到剪贴板',
                errorMsg: '复制失败，请按Ctrl+C手动复制',
                vm: this
            });
        },
        // 自定义的radio label 展示内容
        formatLabel(option) {
            return `${option.name} (ID: ${option.id})`;
        },
        findItemById(valueKey, key) {
            // 自动查找选中项 
            return this.domainOptions.find(item => item[valueKey] === this.form[key]);
        },
        toggleDrop1(e) {
            this.$refs.dropDomain1.toggleDropdown(e)
        },
        toggleDrop(e) {
            this.$refs.dropDomain.toggleDropdown(e)
        },
        changeInputtest(e) {
            console.log(e, '---000changeInputtest');
        },
        changeSelectIp(item) {
            // 选中项
            // this.selectedItem1 = { ...item };
            console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-');
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            console.log(row, column);
            if (rowIndex % 2 === 0) {
                if (columnIndex === 0) {
                    return [1, 2];
                } else if (columnIndex === 1) {
                    return [0, 0];
                }
            }
        },

        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            console.log(row, column);

            if (columnIndex === 0) {
                if (rowIndex % 2 === 0) {
                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },
        openMessage(type) {
            console.log(type);
            // 单独指定方法调用
            switch (type) {
                case 'success':
                    this.$Message.success('成功，文案自定义')
                    break;
                case 'error':
                    this.$Message.error('失败，文案自定义')
                    break;
                case 'info':
                    this.$Message.info('提示，文案自定义')
                    break;
            }
            // 自定义选项
            // this.$Message({
            //   type: 'success',
            //   title: '成功标题',
            //   message: '这是一条成功的提示消息',
            //   duration: 5000,
            //   showClose: true,
            //   center: true
            // })
        },
        showTooltip() {
            this.$refs.tooltip.show()
        },
        hideTooltip() {
            this.$refs.tooltip.hide()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getStagePurchase()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getStagePurchase()
        },
        getStagePurchase() {
            this.tableLoading = true
            const that = this
            that.tableData = []
            this.$http('POST', '/supernew/ajax_get_stage_purchase', {
                type: 0,
                cur_page: 1,
                page_size: 5,
            }, {
                headers: {
                    'AUTH': '3c901fa4a19a7ad9d01238890863d499'
                }
            }).then(response => {
                this.tableLoading = false
                this.$nextTick(() => {
                    that.tableData = response.data.list
                    // console.log(that.tableData,'---that.tableData');
                    // that.type2name = response.data.type2name
                    that.total = response.data.total
                })
            }).catch(error => {
                this.tableLoading = false
                console.error(error, 'error')
            })
        },
        btnClick() {

        },
        openLoading() {
            this.$store.dispatch('showLoading')
            setTimeout(() => {
                this.$store.dispatch('hideLoading')
            }, 2000)

        },
        handleFilter(column) {
            // 在这里处理筛选逻辑
            console.log('筛选列:', column);
        },
        // 部分情况可能导致页面不更新，增加 key 强制重新渲染
        random() {
            var randomNumber = Math.random();
            return randomNumber
        },
        onSwitchChange(value) {
            console.log('Switch/ 状态变化:',this.switchValue, value);
            // console.log('Switch 状态变化:',this.form.switchValue2,this.form.switchValue3, value);
        },
        onSwitchChange1(value) {
            // 操作表格内的 看一下是否同步修改了
            // console.log(this.tableData2,value,'this.tableData2===');
            console.log('Switch/ 状态变化:', value.statu);
        },
        // 弹框相关方法---start
        openDialog() {
            this.dialogVisible = true;
        },
        openDialog1() {
            this.dialogVisible1 = true;
        },
        
        openDialog2() {
            this.dialogVisible2 = true;
            // // 销毁tooltip
            // this.tooltip.destroy()

            // // 隐藏所有tooltip
            // this.$hideAllPositionMessages()
        },
        openDialog6(){
            this.tooltip.hide()
        },
        openDialog3(el,pos){
            // type属性可更换
            this.$positionMessage({
                duration:3000,
                type: 'success',
                message: '操作成功',
                target: this.$refs[el], // 可以是DOM元素或选择器
                position: pos // 或 'bottom'
            }) // 3秒后自动隐藏（可选）


           
            console.log(this.tooltip,'tooltip',el,pos);
        },
        openDialog4(el){
            // 一直显示
            this.tooltip = this.$positionMessage({
                type: 'info',
                message: '这个提示会一直显示',
                target: this.$refs[el],
                duration: 0 // 0表示一直显示
            })
        },
        openDialog5(){
            this.tooltip.updateMessage('更新后的文本内容----')
        },
        // 确认按钮事件
        handleConfirm() {
            this.$message.success('点击了确认按钮');
            this.dialogVisible = false;
        },
        // 取消按钮事件
        handleCancel() {
            this.$message.warning('点击了取消按钮');
            this.dialogVisible = false;
            this.dialogVisible1 = false;
            this.dialogVisible2 = false;
        },
        // 关闭弹框事件
        handleClose() {
            this.$message.info('弹框已关闭');
            this.dialogVisible = false;
            this.dialogVisible1 = false;
            this.dialogVisible2 = false;
        },
        dialogVisibleChange(data) {
            console.log(data, 'data098908090');
        },
        // 弹框相关方法---end

        // 选择表格某一项 点击  
        handlePriceClick(row) {
            this.currentRow = row;
            this.editedPrice = row.price;
            this.dialogVisible = true;
        },

        // 表格气泡框-----
        // 确认事件
        onConfirm(row, prop) {
            console.log('确认修改:', row, prop);
            this.$message.success('修改成功');
            this.$set(this.tableData4, row)
            console.log(this.tableData4, 'this.tableData=====');
        },
        // 取消事件
        onCancel(row, prop) {
            console.log('取消修改:', row, prop);
            this.$message.info('已取消');
            this.$set(this.tableData, row)
        },
        // 表格气泡框-----

        // 监听单选框组变化
        radioChange(data) {
            console.log(data, 'radio--data');
        },
        selectChangeTest(val){
            console.log(val,'select-----选中的',this.form.card,this.form.card1);
        },
        handleClick(row) {
            console.log(row);
        },
        submitForm() {
            this.$refs.formRef.validate((valid) => {
                console.log(this.form, '======formxinxi');
                if (valid) {
                    alert('提交成功!');
                } else {
                    return false;
                }
            });
        },
        // 重置表单
        resetForm() {
            this.$refs.form.resetFields();
        },
        triggerError() {
            this.$refs.formRef.validateField('username', (error) => {
                if (error) {
                    console.log('错误信息:', error);
                } else {
                    console.log('无错误');
                }
            });
        },
        getFormdata() {
            console.log(this.$refs.GuipInput.value);
        },
        handleInput(value) {
            console.log(value, 'value===输入框输入得知');
        },
        handleClear(value) {
            this.form.input3 = '这是我清除后给的文案'
            // this.handleInput('')
            console.log(value, 'value===qinghcu');
        },
        getList() {
            const dataList = rules();
            dataList.forEach((item) => {
                if (item.field === "id") {
                    item.options = this.cities;
                }
                if (item.field === "id1") {
                    item.options = this.optionss;
                }
            });
            this.formList = dataList;
        },
        save() {
            this.$refs.VabForm.submitForm("ruleForm");
        },
        //取消
        cancellation() {
            this.$refs.VabForm.resetForm("ruleForm");
        },
        // 表格点击、选择
        handleSelectionChange(data) {
            // 多选模式下的时候 data 为数组格式
            // 单选的时候是 对象
            console.log(data, '表格行信息');
        },
        // 全选按钮
        toggleAllSelection() {
            // console.log(this.$refs.multipleTable,'this.$refs.multipleTable');
            this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();
        },
    },
    beforeDestroy() {
        if (this.timer) {
            clearTimeout(this.timer)
            // 确保离开组件时关闭 loading
            this.$store.dispatch('hideContentLoading')
        }
    }


}
</script>
<style lang="scss" scoped>
.elementWrap {
    /* width: 100%; */
    padding: 30px 40px;
    background: #fff;

    .ele-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 20px 0 30px;

        label {
            font-size: 16px;
            font-weight: bold;
            width: 100px;
            margin-right: 10px;
            text-align: left;
        }
    }
}

// 组合框样式 start
// input drop组合使用
.combo-formItem {
    ::v-deep {
        .form-item-bottom {
            position: relative;
        }

        .select-trigger {
            background: #F6F7FA;
            border-color: transparent;
        }

        .is-open .select-trigger {
            border-color: #006AFF;
        }

        .el-input__inner {
            border-radius: 2px 0 0 2px;
        }
    }

    .self-drop-wrap {
        position: absolute;
        z-index: 1;
        width: 100%;
    }

    .appendDrop {
        height: 38px;
        align-items: center;
        border-radius: 0 2px 2px 0;
        border: 1px solid #DFE2E6;
        border-left-color: transparent;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 30px 0 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        &:hover {
            border: 1px solid #006AFF;
        }
    }
}

// 组合框样式 end

.ScaleBox {
    width: 1000px;
    background-size: 100% 100%;
    -ms-transition: 0.3s;
    transition: 0.3s;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    margin: 0 auto;
}

.cardfooter {
    width: 100%;
    bottom: 20px;
    right: 30px;
    text-align: right;
    justify-content: center;
}

.btn1 {
    cursor: pointer;
    font-weight: bold;
    width: 114px;
    height: 40px;
    /* 自动布局 */
    display: flex;
    align-items: center;
    padding: 11px 12px;
    box-sizing: border-box;
    color: #FFFFFF;
    border-radius: 4px;
    transition: all .3s;
    background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);

    &:hover {
        opacity: 0.7;
        background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
    }
}
.btns{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>