<template>
    <div class="elementWrap">
        <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
        
        <div class="ele-item">
            <label for="">下拉框：</label>
            <GuipSelect msg="Welcome to Your Vue.js App" :options="options"/>
        </div>
        <div class="ele-item">
            <label for="">表格：</label>
            <GuipTable msg="Welcome to Your Vue.js App" :tableData="tableData">
                <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="地址">
                    </el-table-column>
                    <el-table-column
                    prop="address1"
                    label="地址测试">
                </el-table-column>
            </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 class="ele-item">
            <label for="">表单校验:</label>
            <el-form :model="form" :rules="rules" ref="myForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <div style="display: flex;">
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="triggerError">触发错误</el-button>
                </div>
            </el-form>
        </div>

        <div style="width: 300px;height: 100px;">
            <h3>表单左右布局</h3>
        <!-- 表单左右布局 -->
            <GuipFormItem
            label="标题"
            :required="true"
            >
                <GuipInput
                slot="formDom"
                ref="GuipInput"
                width="280px"
                height="32px"
                placeholder="这是自定义默认提示语"/>
            </GuipFormItem>
        </div>

        <div style="width: 300px;height: 150px;">
            <h3>表单上下布局</h3>
            <GuipFormItem
            label="标题"
            :required="true"
            column="column"
            >
                <GuipInput
                slot="formDom"
                ref="GuipInput"
                width="100%"
                height="38px"
                placeholder="这是自定义默认提示语"/>
            </GuipFormItem>
        </div>

        <div style="width: 300px;height: 150px;">
            <h3>表单上下布局(带右侧文案)</h3>
            <GuipFormItem
            label="标题"
            :required="true"
            column="column"
            addClass="w510"
            >
            <span class="rightdesc" slot="formRight">这是右侧文案</span>
                <GuipInput
                slot="formDom"
                ref="GuipInput"
                width="100%"
                height="38px"
                placeholder="这是自定义默认提示语"/>
            </GuipFormItem>
        </div>

        <div style="width: 300px;height: 150px;">
            <h3>获取手机验证码</h3>
            <GuipFormItem
            column="column"
            addClass="w388"
            >
            <!-- 这个 form-top-icon 类名已经有样式，除此布局外需要自定义添加样式 -->
                <div slot="formLeft" class="form-top-icon">
                    <img  src="../assets/phone-fill.svg" alt="">
                    <span>手机号码</span>
                </div>
                <PhoneCode slot="formDom"></PhoneCode>
            </GuipFormItem>
        </div>


        <div style="display: flex;">
            <!-- <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">
                <el-button @click="cancellation">取消</el-button>
                <el-button @click="save" type="primary">保存</el-button>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  
import { rules } from "../assets/vabForm";
  // @ is an alias to /src
  import GuipFormItem from '@/components/GuipFormItem.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,
        GuipForm,
        // GuipRadio,
        GuipFormItem,
        PhoneCode,
        GuipButton,
        // GuipConfirm,
        GuipInput,
        // GuipModal,
        GuipSelect
    },
    data(){
        return {
            form: {
                username: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ]
            },
            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",
                },
                ],
            },
            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:'300px',
                height:'50px'
            },
            plain:false,
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                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 弄'
                }],
            options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
        }
    },
    methods:{
        submitForm() {
            this.$refs.myForm.validate((valid) => {
                if (valid) {
                alert('提交成功!');
                } else {
                return false;
                }
            });
        },
        triggerError() {
            this.$refs.myForm.validateField('username', (error) => {
                if (error) {
                console.log('错误信息:', error);
                } else {
                console.log('无错误');
                }
            });
        },
        // 监听单选框组变化
        radioChange() {
            // console.log(this.radio,'=====');
        },
        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;
        },
    },
    mounted() {
        this.getList();
    },

  }
  </script>
  <style lang="scss" scoped>
    .elementWrap{
        /* width: 100%; */
        padding: 30px 40px;
        .ele-item{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 30px;
            label{
                font-size: 16px;
                font-weight: bold;
                width: 100px;
                margin-right: 10px;
                text-align: left;
            }
        }
    }
</style>
  