<template>
    <view class="form-container">
        <view class="form-box">
            <block v-for="(item, index) in formData" :key="item.rules.name">
                <view class="form-item flex-row--c">
                    <!-- 单行文本框 -->
                    <view class="line" v-if="['text','password','number','code'].includes(item.type)">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'"
                        >
                            <text class="colorRed" v-if="item.rules.verify">*</text>
                            <text class="num" v-if="num">{{ index + 1 }}.</text>
                            {{ item.label }}
                        </view
                        >
                        <!-- 发送验证码 -->
                        <view class="line-right send-code-box" v-if="item.type === 'code'">
                            <input
                            :type="item.type"
                            class="input"
                            placeholder-class="plaClass"
                            :placeholder="item.placeholder"
                            v-model="item.rules.value"
                            @input="inputVal(index)"
                            />
                            <view style="width:250rpx">
                                <u-button
                                size="mini"
                                type="primary"
                                :disabled="item.disabled||isSend"
                                @click="sendCode(item)"
                                >
                                    {{ codeFont }}
                                </u-button>
                            </view>
                        </view>
                        <!-- 普通输入框 -->
                        <view class="line-right" v-else>
                            <input
                            :type="item.type"
                            class="input"
                            placeholder-class="plaClass"
                            :placeholder="item.placeholder"
                            v-model="item.rules.value"
                            :disabled="item.disabled"
                            @input="inputVal(index)"
                            />
                        </view>
                    
                    </view>
                    <!-- 下拉选择-->
                    <view class="line" v-else-if="['select','time'].includes(item.type)">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'"
                        >
                            <text class="colorRed" v-if="item.rules.verify">*</text>
                            <text class="num" v-if="num">{{ index + 1 }}.</text>
                            {{ item.label }}
                        </view
                        >
                        <view class="line-right">
                            <input
                            disabled
                            type="text"
                            class="input"
                            placeholder-class="plaClass"
                            :placeholder="item.placeholder"
                            v-model="item.rules.label"
                            @click="item.show = true"
                            />
                            <view class="select-icon"></view>
                        </view>
                        <u-select
                        v-if="item.type === 'select'"
                        :title="item.title"
                        v-model="item.show"
                        :list="item.list"
                        value-name="value"
                        label-name="name"
                        @confirm="selectConfirm($event,item)"
                        ></u-select>
                        <!--类型为时间-->
                        <u-picker v-else-if="item.type === 'time'"
                                  :params="item.params"
                                  mode="time"
                                  v-model="item.show"
                                  @confirm="selectTime($event,item)">
                        </u-picker>
                    </view>
                    
                    <!-- 多行文本框 -->
                    <view class="textarea-box" v-else-if="item.type == 'textarea'">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'"
                        >
                            <text class="colorRed" v-if="item.rules.verify">*</text>
                            <text class="num" v-if="num">{{ index + 1 }}.</text>
                            {{ item.label }}
                        </view
                        >
                        <view class="line-bottom-textarea">
                            <textarea
                            rows=""
                            style="color: #a7a7a7; font-size: 28rpx"
                            auto-height
                            :maxlength="-1"
                            cols=""
                            placeholder-class="plaClass"
                            :disabled="item.disabled"
                            :placeholder="item.placeholder"
                            v-model="item.rules.value"
                            @input="inputVal(index)"
                            >
                            </textarea>
                        </view>
                    </view>
                    <!-- 上传图片 -->
                    <view class="img-box  flex-col-l" v-else-if="item.type == 'file'">
                        <view style="font-size:26rpx" :class="item.rules.verify ? '' : 'p-l14 '">
                            <text class="colorRed" v-if="item.rules.verify">*</text>
                            <text class="num" v-if="num">{{ index + 1 }}.</text>
                            {{ item.label }}
                        </view>
                        <view class="img-upload p30">
                            <u-upload
                            :auto-upload="false"
                            :fileList="item.rules.fileList"
                            :disabled="item.disabled"
                            
                            :accept="item.accept"
                            :capture="item.capture"
                            :maxCount="item.maxCount"
                            :sizeType="item.sizeType"
                            :compressed="item.compressed"
                            :camera="item.camera"
                            :multiple="item.multiple"
                            :maxSize="item.maxSize"
                            :previewImage="item.previewImage"
                            
                            width="150rpx"
                            height="150rpx"
                            
                            @on-choose-complete="afterRead($event,item)"
                            @on-remove="deletePic($event,item)"
                            ></u-upload>
                        </view>
                    </view>
                    
                    <!-- 单选框 -->
                    <view class="line-col" v-else-if="item.type === 'radio'">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'"
                        >
                            <text class="colorRed" v-if="item.rules.verify">*</text>
                            <text class="num" v-if="num">{{ index + 1 }}.</text>
                            {{ item.label }}
                            <text style="font-size: 20rpx; color: #9e9e9e; margin-left: 23rpx; width: 140rpx">(单选)
                            </text>
                        </view
                        >
                        <view class="line-bottom-select" :style="{ 'padding-left': num ? '60rpx' : '34rpx' }">
                            <u-radio-group :currentIndex="index" v-model="item.rules.value"
                                           @change="radioChange($event, index)">
                                <u-radio
                                icon-size="35"
                                label-size="25"
                                shape="circle"
                                v-for="(radioItem, radioIndex) in item.list"
                                :key="radioIndex"
                                :name="radioItem.value"
                                :disabled="radioItem.disabled"
                                >{{ radioItem.label }}
                                </u-radio
                                >
                            </u-radio-group>
                        </view>
                    </view>
                    <!-- 多选框 -->
                    <view class="line-col" v-else-if="item.type == 'checkbox'">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'"
                        >
                            <text class="colorRed" v-if="item.rules.verify">*</text>
                            <text class="num" v-if="num">{{ index + 1 }}.</text>
                            {{ item.label }}
                            <text style="font-size: 20rpx; color: #9e9e9e; margin-left: 23rpx; width: 140rpx">(多选)
                            </text>
                        </view>
                        <view class="line-bottom-select" :style="{ 'padding-left': num ? '60rpx' : '34rpx' }">
                            <u-checkbox-group @change="checkboxGroupChange($event,item)">
                                <u-checkbox
                                icon-size="35"
                                label-size="25"
                                v-model="checkboxItem.checked"
                                v-for="(checkboxItem, checkboxIndex) in item.list"
                                :key="checkboxIndex"
                                :name="checkboxItem.value"
                                :disabled="checkboxItem.disabled"
                                >{{ checkboxItem.name }}
                                </u-checkbox
                                >
                            </u-checkbox-group>
                        </view>
                    </view>
                    
                    <!-- 手机输入框 -->
                    <view class="line" v-else-if="item.type === 'mobile'">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'"
                        >
                            <text class="colorRed" v-if="item.rules.verify">*</text>
                            <text class="num" v-if="num">{{ index + 1 }}.</text>
                            {{ item.label }}
                        </view
                        >
                        <view class="line-right">
                            <input
                            type="number"
                            v-model="item.rules.value"
                            :placeholder="item.placeholder"
                            @input="inputVal(index)"
                            class="input"
                            :maxlength="11"
                            />
							 <view style="width:250rpx">
								 <u-button
								 v-if="item.oneKeyPhone"
								 size="mini"
								 type="primary"
								 open-type="getPhoneNumber"
								 @getphonenumber="getphonenumber"
								 :disabled="item.disabled"
								 >一键获取
								 </u-button>
							 </view>
                        
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
import mixins from "./mixins";

export default {
    name: "activeForm",
    mixins: [mixins],
    data() {
        return {
            submitData: "",
            selectBox: [],
            currentSelectIndex: "",
            currentSelectValue: "",
            codeFont: "获取验证码",
            wait: 60,
            isSend: false,
            sendColor: "color:#ff5b01",
        };
    },
    props: {
        //是否展示序号
        num: {
            type: Boolean,
            default: false,
        },
        formData: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    computed: {
        // formData: {
        //     get() {
        //         // checkbox回显
        //         this.value.forEach(item => {
        //             if (item.type === "checkbox") {
        //                 item.list.forEach(item2 => {
        //                     item2.checked = item.rules.value.includes(item2.value)
        //                 })
        //             }
        //         })
        //         console.log("this.formData", this.value)
        //         return this.value
        //     },
        //     set(nval) {
        //         this.$emit("input", nval);
        //     }
        // }
    },
    methods: {
        //input输入框的值传给父组件
        inputVal(index) {
            const data = {
                val: this.formData[index].rules.value,
                index: index,
            };
            if (String(data.val) != "" && String(data.index) != "") {
                this.formData[data.index].rules.value = data.val;
            }
            this.$emit("input", this.formData);
        },
        
        // 单选 下拉框点击确定
        selectConfirm($event, item) {
            item.rules.label = $event[0].label;
            item.rules.value = $event[0].value;
            this.$emit("input", this.formData);
            // console.log("this.formData", this.formData)
        },
        selectTime({year, month, day, hour, minute, second}, item) {
            let date = ''
            if (year) {
                date += year + '-'
            }
            if (month) {
                date += month + '-'
            }
            if (day) {
                date += day
            }
            if (hour) {
                date += ' ' + hour
            }
            if (minute) {
                date += ':' + minute
            }
            if (second) {
                date += ':' + second
            }
            item.rules.value = date
            item.rules.label = date;
            this.$emit("input", this.formData);
            console.log("this.formData", this.formData)
        },
        //单选 点击触发
        radioChange($event, index) {
            this.$emit("input", this.formData);
            console.log("this.formData", this.formData)
        },
        //复选框 点击触发
        checkboxGroupChange($event, item) {
            console.log("param; :>> ", $event, item);
            item.rules.value = $event;
            this.$emit("input", this.formData);
        },
        // 删除图片
        deletePic($event, item) {
            item.rules.fileList.splice($event.index, 1)
            this.$emit('input', this.formData)
            console.log("this.formData", this.formData)
        },
        // 新增图片
        afterRead($event, item) {
            // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
            console.log("$event, item", $event, item)
            item.rules.fileList = item.multiple ? $event : $event
            this.$emit('input', this.formData)
            console.log("this.formData", this.formData)
        },
        // 发送验证码
        sendCode(item) {
            let setTime = 0;
            this.sendCodeCallback(item)
            if (!this.isSend) {
                this.isSend = true;
                setTime = setInterval(() => {
                    this.wait--;
                    
                    this.codeFont = this.wait + "重新发送";
                    if (this.wait === 0) {
                        clearInterval(setTime);
                        this.codeFont = "获取验证码";
                        this.isSend = false;
                        this.wait = 60;
                        
                    }
                }, 1000);
            }
        },
        //校验
        $vervify() {
            return new Promise((resolve, reject) => {
                this.formData.forEach((item) => {
                    if (item.rules.verify) {
                        switch (item.type) {
                            case "checkbox":
                                if (item.rules.value.length === 0) {
                                    uni.showToast({
                                        title: item.rules.errMess || "请选择" + item.label,
                                        duration: 2000,
                                        icon: "none",
                                    });
                                    
                                    reject(false)
                                    // throw Error(); //终止函数
                                }
                                break;
                            case "file":
                                if (item.rules.fileList.length === 0) {
                                    uni.showToast({
                                        title: item.rules.errMess || "请选择" + item.label,
                                        duration: 2000,
                                        icon: "none",
                                    });
                                    reject(false)
                                    // throw Error(); //终止函数
                                }
                                break;
                            case "mobile":
                                if (!item.rules.value) {
                                    uni.showToast({
                                        title: item.rules.errMess || "手机号不能为空",
                                        duration: 2000,
                                        icon: "none",
                                    });
                                    reject(false)
                                    // throw Error(); //终止函数
                                }
                                if (!/^\s{0}$|^1\d{10}$/.test(item.rules.value)) {
                                    uni.showToast({
                                        title: "手机格式错误",
                                        duration: 2000,
                                        icon: "none",
                                    });
                                    reject(false)
                                    // throw Error(); //终止函数
                                }
                                break;
                            default:
                                if ([null, undefined, ''].includes(item.rules.value)) {
                                    uni.showToast({
                                        title: item.rules.errMess || item.label + "不能为空",
                                        duration: 2000,
                                        icon: "none",
                                    });
                                    reject(false)
                                    // throw Error(); //终止函数
                                }
                                if (item.rules.regexp && !(new RegExp(item.rules.regexp).test(item.rules.value))) {
                                    uni.showToast({
                                        title: item.label + "格式不正确",
                                        duration: 2000,
                                        icon: "none",
                                    });
                                    reject(false)
                                    // throw Error(); //终止函数
                                }
                                break;
                        }
                    }
                });
                resolve(this.$submitForm())
            })
            
        },
        // 提交序列化的表单
        $submitForm() {
            const formData = this.formData
            let submitData = {};
            for (let i = 0; i < formData.length; i++) {
                if (formData[i].type === 'file') {
                    submitData[formData[i].rules.name] = formData[i].rules.fileList;
                    break;
                }
                submitData[formData[i].rules.name] = formData[i].rules.value;
                
            }
            return submitData;
        },
		//重置表单
		resetForm() {
			
			// for (let key in this.formData) {
			//     if (this.formData.hasOwnProperty(key)) {
			//         switch (typeof this.formData[key]) {
			//             case "object":
			//                 this.formData[key] = []
			//                 break
			//             case "number":
			//                 this.formData[key] = ''
			//                 break
			//             case "string":
			//                 this.formData[key] = ''
			//                 break
			//         }
			
			//     }
			// }
			// this.$emit("input", this.formData);
			
			
			for (let item of this.formData) {
				item.rules.value =""
			}
			
			
		    this.$emit("input", this.formData);
		}
    },
};
</script>

<style lang="scss" scoped>
.img-box{
	padding-top: 30rpx;
	.img-upload{
	padding-top: 30rpx;
	}
}
// 弹框
.select-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 300000;
    
    .select-bg {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
    }
    
    .select-box {
        position: absolute;
        left: 0;
        bottom: -1000upx;
        width: 100%;
        background: #fff;
        max-height: 50%;
        // height: 0%;
        overflow: auto;
        
        .select-title {
            display: flex;
            justify-content: space-between;
            height: 80rpx;
            background: #f5f5f5;
            line-height: 80rpx;
            padding: 0 30rpx;
        }
        
        .select-item {
            font-size: 28rpx;
            color: #333;
            border-bottom: 1px solid #eee;
            height: 75rpx;
            line-height: 75rpx;
            padding: 0 30rpx;
            
            i {
                display: block;
                float: right;
                border-bottom: 4rpx solid #1ca032;
                border-right: 4rpx solid #1ca032;
                width: 12rpx;
                height: 26rpx;
                transform: rotate(45deg);
                margin-top: 24.5rpx;
            }
        }
    }
    
}

// 下拉icon
.select-icon {
    float: right;
    border-bottom: 2rpx solid #999;
    border-right: 2rpx solid #999;
    width: 16rpx;
    height: 16rpx;
    transform: rotate(-45deg);
    margin-right: 30rpx;
}

.color-999 {
    color: #999;
}

.plaClass {
    text-align: right;
    
    font-size: 26rpx;
}

.form-container {
    .form-box {
        width: 100%;
        box-sizing: border-box;
    }
    
    .colorRed {
        color: red;
        padding: 0 10rpx;
    }
    
    .line-right {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    
    .line-bottom-select {
        padding-top: 40rpx;
    }
    
    .line-bottom-textarea {
        padding-top: 20rpx;
        
        textarea {
            min-height: 100rpx;
        }
    }
    
    .line-left {
        display: flex;
        min-width: 22%;
        align-items: center;
        height: 100%;
        letter-spacing: 0.5px;
        font-size: 26rpx;
        // font-weight: 550;
        color: #000000;
        box-sizing: border-box;
    }
    
    .p-l14 {
        padding-left: 34rpx;
    }
    
    .textarea-box {
        // display: flex;
        width: 100%;
        border-bottom: 1px solid #ededed;
        padding-top: 20rpx;
        // align-items: center;
        textarea {
            padding-left: 32rpx;
            height: 100rpx;
            font-size: 25rpx;
            color: #333;
        }
    }
    
    .line {
        padding: 27rpx 0;
        // min-height: 100rpx;
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        border-bottom: 1px solid #ededed;
        overflow: hidden;
        
        .input {
            padding-right: 20rpx;
            padding-left: 20rpx;
            height: 100%;
            width: 100%;
            text-align: left;
            font-size: 28rpx;
            color: #333;
            border: none;
            overflow: hidden;
            text-overflow: ellipsis;
            outline: none;
        }
    }
    
    .line-col {
        padding: 27rpx 0;
        // min-height: 100rpx;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        border-bottom: 1px solid #ededed;
        overflow: hidden;
        
        .input {
            padding-right: 20rpx;
            height: 100%;
            width: 100%;
            text-align: left;
            font-size: 28rpx;
            color: #333;
            border: none;
            overflow: hidden;
            text-overflow: ellipsis;
            outline: none;
        }
    }
    
    .num {
        margin-right: 8rpx;
    }
    
    
}
</style>
