<template>
    <div class="elementWrap">
        <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
        <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">

            <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="">下拉框：</label>
                <GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options"
                    defaultValue="选项1" />
            </div>
            <div >
                <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
                <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>

                <GuipTable :tableData="tableData" ref="multipleTable" @selectChange="handleSelectionChange"
                    :multiple="true" autoColumn="true" width="900px">
                    <template slot="header">
                        <el-table-column fixed prop="date" label="日期" width="180"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="name1" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="name2" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="name3" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="name4" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="name5" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="name6" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="name7" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="name8" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="name9" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="name11" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="name12" label="姓名" width="150"></el-table-column>
                        <el-table-column prop="price" label="价格" width="150">
                            <!-- <template slot-scope="scope">
                            <span @click="handlePriceClick(scope.row)">{{ scope.row.price }}</span>
                        </template> -->
                            <!-- 气泡弹出框  后期样式自定义-->
                            <!-- <template slot-scope="scope">
                                <el-popover trigger="click" placement="top">
                                    <input type="text">
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">{{ scope.row.price }}</el-tag>
                                    </div>
                                </el-popover>
                            </template> -->
                        </el-table-column>
                        <el-table-column prop="address" label="地址" width="200"> </el-table-column>
                        <el-table-column prop="address1" label="地址测试"></el-table-column>
                        <el-table-column prop="price2" 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 fixed="right" label="操作" width="100">
                            <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>
                    </template>
                </GuipTable>
            </div>

            <div >
                <h3 for="">表格(带气泡框),内容自定义：</h3>
                <GuipTable :tableData="tableData" :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" 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}`]" 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 disabled :styleObject="styleObject" />
            </div>


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

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

                <GuipInput ref="GuipInput" :styleObject="styleObject1" defaultValue="爱吃麻辣烫" :maxlength="100"
                    @change="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput"
                    placeholder="这是自定义默认提示语" />

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

                <GuipInput :defaultValue="defaultValue" @clear="handleClear" 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>默认按钮</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>
                <GuipButton type="primary" :btnstyle="btnstyleObj1">随便写的</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" label="age" desc="这是是右侧文案" v-model="form.age"
                    prop="age" placeholder="这是自定义默认提示语" />
            </div>

            <div style="width: 600px;height: 150px;">
                <h3>获取手机验证码(布局也可更改，使用插槽自定义展示内容)</h3>
                <GuipFormItem column="column" addClass="w388">
                    <!-- 这个 form-top-icon 类名已经有样式，除此布局外需要自定义添加样式 -->
                    <div slot="formLeft" class="form-top-icon">
                        <img src="../assets/franchise1/phone-fill.svg" alt="">
                        <span>手机号码</span>
                    </div>
                    <PhoneCode slot="formDom"></PhoneCode>
                </GuipFormItem>
            </div>
            <el-button type="primary" @click="submitForm">表单Submit</el-button>

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

        <div style="display: flex;">
            <el-date-picker
      v-model="date1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
            <!-- <GuipButton type="primary" @click="showModal">弹框</GuipButton>
            <GuipButton type="primary" @click="showMessage">轻提示</GuipButton>
            <GuipButton type="primary" @click="getFormdata">提交</GuipButton> -->
        </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>

        <el-button type="primary" @click="openDialog">打开弹框</el-button>

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

        <!-- <el-switch v-model="switchValue1" active-text="按月付费" inactive-text="按年付费">
        </el-switch>
        <el-switch style="display: block" v-model="switchValue2" active-color="#13ce66" 
            active-text="按月付费" inactive-text="按年付费">
        </el-switch> -->

        <div class="ele-item">
            <label for="">开关L</label>
            <GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
            </GuipSwitch>
        </div>
    </div>
</template>

<script>

import { rules } from "../assets/vabForm";
// @ is an alias to /src
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipRadio from '@/components/GuipRadio.vue';
//   import GuipForm from '@/components/GuipForm.vue';
import PhoneCode from '@/components/PhoneCode.vue';
import GuipButton from '@/components/GuipButton.vue';
//   import GuipConfirm from '@/components/GuipConfirm.vue';
import GuipInput from '@/components/GuipInput.vue';
//   import GuipModal from '@/components/GuipModal.vue';
import GuipSelect from '@/components/GuipSelect.vue';
import GuipTable from '@/components/GuipTable.vue';
import GuipTextarea from '@/components/GuipTextarea.vue'

export default {
    name: 'HomeView',
    components: {
        GuipTextarea,
        GuipTable,
        GuipSwitch,
        // GuipForm,
        GuipDialog,
        GuipRadio,
        GuipFormItem,
        PhoneCode,
        GuipButton,
        // GuipConfirm,
        GuipInput,
        // GuipModal,
        GuipSelect
    },
    data() {
        return {
           
            date1:'',
            switchValue: true,
            dialogVisible: true,//是否展示弹框
            showCancelButton: true, // 控制是否显示取消按钮
            showCloseButton: true, // 控制是否显示关闭按钮
            form: {
                username: '',
                language: '',
            },
            languageOptions: [
                { label: 'JavaScript', value: 'js',selectedLabel:'JavaScripthhhhhhhhhh' },
                { label: 'Python', value: 'py',selectedLabel:'JavaScripthhhhhhhhhh'  },
                { label: 'Java', value: 'java', disabled: true,selectedLabel:'JavaScripthhhhhhhhhh' }, // 禁用选项
                { label: 'Go', value: 'go' ,selectedLabel:'JavaScripthhhhhhhhhh' },
            ],
            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' }
                ],
                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",
                    },
                ],
            },
            // 表格数据
            tableData: [{
                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: "广州",
                }
            ],
            input: 'hahhahah',
            defaultValue: 'asdasda',
            radio: 3,
            radio1: 5,
            btnstyleObj: {
                width: '247px',
                height: '44px',
                background: '#F2F7FF',
                borderRadius: '2px',
                fontSize: '14px',
                letterSpacing: '0.08em',
                color: '#006AFF !important'
            },
            btnstyleObj1: {
                width: '180px',
                height: '40px',
            },
            styleObject: {
                width: '200px',
                height: '40px'
            },
            styleObject1: {
                width: '600px',
                height: '50px'
            },
            plain: false,
            
            options: [{
                value: '选项1',
                label1:'黄金hhhhhh',
                label: '黄金糕'
            }, {
                value: '选项2',
                label1:'双皮奶hhhhhhhhh',
                label: '双皮奶'
            }, {
                value: '选项3',
                label1:'蚵仔煎hhhhhhhhh',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label1:'双皮奶hhhhhhhhh',
                label: '龙须面'
            }, {
                value: '选项5',
                label1:'双皮奶hhhhhhhhh',
                label: '北京烤鸭'
            }],
        }
    },
    methods: {
        // 部分情况可能导致页面不更新，增加 key 强制重新渲染
        random(){
            var randomNumber = Math.random();
            return randomNumber
        },
        onSwitchChange(value) {
            console.log('Switch 状态变化:', value);
        },
        // 弹框相关方法---start
        openDialog() {
            this.dialogVisible = true;
        },
        // 确认按钮事件
        handleConfirm() {
            this.$message.success('点击了确认按钮');
            this.dialogVisible = false;
        },
        // 取消按钮事件
        handleCancel() {
            this.$message.warning('点击了取消按钮');
            this.dialogVisible = false;
        },
        // 关闭弹框事件
        handleClose() {
            this.$message.info('弹框已关闭');
            this.dialogVisible = 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.tableData,row)
            console.log(this.tableData,'this.tableData=====');
        },
        // 取消事件
        onCancel(row, prop) {
            console.log('取消修改:', row, prop);
            this.$message.info('已取消');
            this.$set(this.tableData,row)
        },
        // 表格气泡框-----

        // 监听单选框组变化
        radioChange(data) {
            console.log(data, 'radio--data');
        },
        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.defaultValue = '这是我清除后给的文案'
            // 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();
        },
    },
    mounted() {
        this.getList();
    },

}
</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;
        }
    }
}


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


</style>