<template>
    <view class="form-wrap form-component">
        <block v-for="(item, index) in formData">
            <view class="order-wrap" v-if="item.controller == 'Text'">
                <view class="order-cell">
                    <view class="name">
                        <text class="tit">{{ item.value.title }}</text>
                        <text class="required">{{ item.value.required ? '*' : '' }}</text>
                    </view>
                    <view class="box">
                        <input type="text" :placeholder="item.value.placeholder" placeholder-class="placeholder color-tip" v-model="item.val" />
                    </view>
                </view>
            </view>

            <view class="order-wrap" v-if="item.controller == 'Textarea'">
                <view class="order-cell flex-box textarea">
                    <view class="name">
                        <text class="tit">{{ item.value.title }}</text>
                        <text class="required">{{ item.value.required ? '*' : '' }}</text>
                    </view>
                    <view class="box">
                        <textarea :placeholder="item.value.placeholder" placeholder-class="placeholder color-tip" v-model="item.val"></textarea>
                    </view>
                </view>
            </view>

            <picker mode="selector" :range="item.value.options" v-if="item.controller == 'Select'" @change="pickerChange($event, index)">
                <view class="order-wrap">
                    <view class="order-cell">
                        <view class="name">
                            <text class="tit">{{ item.value.title }}</text>
                            <text class="required">{{ item.value.required ? '*' : '' }}</text>
                        </view>
                        <view class="box">
                            <text v-if="item.val != ''">{{ item.val }}</text>
                            <text v-else class="color-tip">请选择</text>
                        </view>
                        <text class="iconfont icon-right"></text>
                    </view>
                </view>
            </picker>

            <view class="order-wrap" v-if="item.controller == 'Checkbox'">
                <view class="order-cell">
                    <view class="name">
                        <text class="tit">{{ item.value.title }}</text>
                        <text class="required">{{ item.value.required ? '*' : '' }}</text>
                    </view>
                    <view class="box check-group-box">
                        <checkbox-group @change="checkboxChange($event, index)">
                            <label v-for="(v, k) in item.option_lists" :key="k">
                                <checkbox :value="v.value" :checked="v.checked" />
                                <view class="checkbox">
                                    <text class="iconfont" :class="{ 'icon-fuxuankuang2': !v.checked, 'icon-fuxuankuang1 color-base-text': v.checked }"></text>
                                    {{ v.value }}
                                </view>
                            </label>
                        </checkbox-group>
                    </view>
                </view>
            </view>

            <view class="order-wrap" v-if="item.controller == 'Radio'">
                <view class="order-cell">
                    <view class="name">
                        <text class="tit">{{ item.value.title }}</text>
                        <text class="required">{{ item.value.required ? '*' : '' }}</text>
                    </view>
                    <view class="box radio-group-box">
                        <radio-group @change="radioChange($event, index)">
                            <label v-for="(v, k) in item.option_lists" :key="k">
                                <radio :value="v.value" :checked="item.val == v.value" />
                                <view class="radio-box">
                                    <text class="iconfont" :class="{ 'icon-yuan_checkbox': item.val != v.value, 'icon-yuan_checked color-base-text': item.val == v.value }"></text>
                                    {{ v.value }}
                                </view>
                            </label>
                        </radio-group>
                    </view>
                </view>
            </view>

            <view class="order-wrap" v-if="item.controller == 'Img'">
                <view class="order-cell flex-box">
                    <view class="name">
                        <text class="tit">{{ item.value.title }}</text>
                        <text class="required">{{ item.value.required ? '*' : '' }}</text>
                    </view>
                    <view class="box img-boxs">
                        <view class="img-box" v-for="(v, k) in item.img_lists" :key="k" @click="uploadImg(index)">
                            <image :src="$util.img(v)" mode="aspectFill"></image>
                            <text class="iconfont icon-guanbi" @click.stop="delImg(k, index)"></text>
                        </view>
                        <view class="img-box" @click="addImg(index)"><text class="iconfont icon-add1"></text></view>
                    </view>
                </view>
            </view>

            <view class="order-wrap" v-if="item.controller == 'Date'">
                <view class="order-cell">
                    <view class="name">
                        <text class="tit">{{ item.value.title }}</text>
                        <text class="required">{{ item.value.required ? '*' : '' }}</text>
                    </view>
                    <view class="box box-flex">
                        <picker mode="date" :value="item.val" @change="bindDateChange($event, index)">
                            <view class="uni-input" :class="{ 'color-tip': !item.val }">{{ item.val ? item.val : item.value.placeholder }}</view>
                        </picker>
                    </view>
                    <text class="iconfont icon-right"></text>
                </view>
            </view>

            <view class="order-wrap" v-if="item.controller == 'Datelimit'">
                <view class="order-cell flex-box">
                    <view class="name">
                        <text class="tit">{{ item.value.title }}</text>
                        <text class="required">{{ item.value.required ? '*' : '' }}</text>
                    </view>
                    <view class="box date-boxs">
                        <view class="date-box">
                            <picker mode="date" :value="item.start_date" @change="bindStartDateChange($event, index)">
                                <view class="picker-box">
                                    <view class="uni-input" :class="{ 'color-tip': !item.start_date }">{{ item.start_date ? item.start_date : item.value.placeholder_start }}</view>
                                </view>
                            </picker>
                        </view>
                        <view class="interval iconfont icon-jian"></view>
                        <view class="date-box">
                            <picker mode="date" :value="item.end_date" @change="bindEndDateChange($event, index)">
                                <view class="picker-box">
                                    <view class="uni-input" :class="{ 'color-tip': !item.end_date }">{{ item.end_date ? item.end_date : item.value.placeholder_end }}</view>
                                </view>
                            </picker>
                        </view>
                    </view>
                </view>
            </view>

            <view class="order-wrap" v-if="item.controller == 'Time'">
                <view class="order-cell">
                    <view class="name">
                        <text class="tit">{{ item.value.title }}</text>
                        <text class="required">{{ item.value.required ? '*' : '' }}</text>
                    </view>
                    <view class="box box-flex">
                        <picker mode="time" :value="item.val" @change="bindTimeChange($event, index)">
                            <view class="uni-input" :class="{ 'color-tip': !item.val }">{{ item.val ? item.val : item.value.placeholder }}</view>
                        </picker>
                    </view>
                    <text class="iconfont icon-right"></text>
                </view>
            </view>

            <view class="order-wrap" v-if="item.controller == 'Timelimit'">
                <view class="order-cell flex-box">
                    <view class="name">
                        <text class="tit">{{ item.value.title }}</text>
                        <text class="required">{{ item.value.required ? '*' : '' }}</text>
                    </view>
                    <view class="box date-boxs">
                        <view class="date-box">
                            <picker mode="time" :value="item.start_time" @change="bindStartTimeChange($event, index)">
                                <view class="picker-box">
                                    <view class="uni-input" :class="{ 'color-tip': !item.start_time }">{{ item.start_time ? item.start_time : item.value.placeholder_start }}</view>
                                </view>
                            </picker>
                        </view>
                        <view class="interval iconfont icon-jian"></view>
                        <view class="date-box">
                            <picker mode="time" :value="item.end_time" @change="bindEndTimeChange($event, index)">
                                <view class="picker-box">
                                    <view class="uni-input" :class="{ 'color-tip': !item.end_time }">{{ item.end_time ? item.end_time : item.value.placeholder_end }}</view>
                                </view>
                            </picker>
                        </view>
                    </view>
                </view>
            </view>

            <view class="order-wrap" v-if="item.controller == 'City'">
                <view class="order-cell box-flex">
                    <view class="name">
                        <text class="tit">{{ item.value.title }}</text>
                        <text class="required">{{ item.value.required ? '*' : '' }}</text>
                    </view>
                    <view class="box">
                        <pick-regions :default-regions="item.default_regions" :select-arr="item.select_arr" @getRegions="handleGetRegions($event, index)">
                            <view class="select-address " :class="{ empty: !item.val, 'color-tip': !item.val }">
                                {{ item.val ? item.val : item.select_arr == '2' ? '请选择省市' : '请选择省市区/县' }}
                            </view>
                        </pick-regions>
                    </view>
                    <text class="iconfont icon-right"></text>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
    export default {
        name: 'ns-form',
        components: {
            pickRegions: () => import('@/components/pick-regions/pick-regions.vue'),
        },
        props: {
            data: {
                type: Array,
                default: {}
            },
            customAttr: {
                type: Object,
                default: function() {
                    return {};
                }
            }
        },
        data() {
            return {
                formData: this.data
            };
        },
        created() {
            this.setFormData();
        },
        watch: {
            data: function() {
                this.setFormData();
            }
        },
        methods: {
            setFormData() {
                this.formData = this.data;

                this.formData.forEach(item => {
                    if (!item.val) item.val = item.value.default ? item.value.default : '';

                    if (item.value.options) {
                        item.option_lists = [];
                        item.value.options.forEach((v, k) => {
                            var obj = {};
                            obj.value = v;
                            obj.checked = false;
                            if (item.controller == 'Radio' && ((!item.val && k == 0) || (item.val &&
                                    item.val == v))) {
                                obj.checked = true;
                                item.val = v;
                            }
                            if (item.controller == 'Checkbox' && item.val) {
                                let val = item.val.split(',');
                                obj.checked = val.indexOf(v) != -1;
                            }
                            item.option_lists.push(obj);
                        });
                    }

                    if (item.controller == 'Img') {
                        item.img_lists = item.val ? item.val.split(',') : [];
                    }

                    if (item.controller == 'Date' && !item.val) {
                        if (item.value.is_show_default) {
                            if (item.value.is_current) {
                                item.val = this.getDate();
                            } else {
                                item.val = item.value.default;
                            }
                        } else {
                            item.val = '';
                        }
                    }

                    if (item.controller == 'Datelimit') {
                        if (item.val) {
                            let date = item.val.split(' - ');
                            item.start_date = date[0];
                            item.end_date = date[1];
                        } else {
                            item.val = '';

                            if (item.value.is_show_default_start) {
                                if (item.value.is_current_start) {
                                    item.start_date = this.getDate();
                                } else {
                                    item.start_date = item.value.default_start;
                                }
                            } else {
                                item.start_date = '';
                            }

                            if (item.value.is_show_default_end) {
                                if (item.value.is_current_end) {
                                    item.end_date = this.getDate();
                                } else {
                                    item.end_date = item.value.default_end;
                                }
                            } else {
                                item.end_date = '';
                            }
                            if (item.start_date && item.end_date) {
                                item.val = item.start_date + ' - ' + item.end_date;
                            }
                        }
                    }

                    if (item.controller == 'Time' && !item.val) {
                        if (item.value.is_show_default) {
                            if (item.value.is_current) {
                                item.val = this.getTime();
                            } else {
                                item.val = item.value.default;
                            }
                        } else {
                            item.val = '';
                        }
                    }

                    if (item.controller == 'Timelimit') {
                        if (item.val) {
                            let time = item.val.split(' - ');
                            item.start_time = time[0];
                            item.end_time = time[1];
                        } else {
                            item.val = '';

                            if (item.value.is_show_default_start) {
                                if (item.value.is_current_start) {
                                    item.start_time = this.getTime();
                                } else {
                                    item.start_time = item.value.default_start;
                                }
                            } else {
                                item.start_time = '';
                            }

                            if (item.value.is_show_default_end) {
                                if (item.value.is_current_end) {
                                    item.end_time = this.getTime();
                                } else {
                                    item.end_time = item.value.default_end;
                                }
                            } else {
                                item.end_time = '';
                            }

                            if (item.start_time && item.end_time) {
                                item.val = item.start_time + ' - ' + item.end_time;
                            }
                        }
                    }

                    if (item.controller == 'City') {
                        item.full_address = '';
                        item.select_arr = item.value.default_type == 1 ? '2' : '3';
                        if (item.val) item.default_regions = item.val.split('-');
                        else item.default_regions = [];
                    }
                });
            },
            verify() {
                let verify = true;

                for (let i = 0; i < this.formData.length; i++) {
                    let item = this.formData[i];
                    if (item.controller == 'Text') {
                        if (item.value.required && !item.val) {
                            verify = false;
                            this.$util.showToast({
                                title: '请输入' + item.value.title
                            });
                            break;
                        }

                        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                        if (item.name == 'ID_CARD' && reg.test(item.val) === false) {
                            verify = !item.value.required;
                            if (verify == false) {
                                this.$util.showToast({
                                    title: '身份证输入不合法'
                                });
                                return false;
                            }
                            if (verify == true && item.val != '') {
                                this.$util.showToast({
                                    title: '身份证输入不合法'
                                });
                                return false;
                            }
                        }

                        // 验证手机号
                        if (item.name == 'MOBILE' && this.$util.verifyMobile(item.val) === false) {
                        	verify = !item.value.required;
                        	if (verify == false) {
                        		this.$util.showToast({
                        			title: '手机号输入不合法'
                        		});
                        		return false;
                        	}
                        	if (verify == true && item.val != '') {
                        		this.$util.showToast({
                        			title: '手机号输入不合法'
                        		});
                        		return false;
                        	}
                        }
                    }

                    if (item.controller == 'Textarea') {
                        if (item.value.required && !item.val) {
                            verify = false;
                            this.$util.showToast({
                                title: '请输入' + item.value.title
                            });
                            break;
                        }
                    }

                    if (item.controller == 'Select') {
                        if (item.value.required && !item.val) {
                            verify = false;
                            this.$util.showToast({
                                title: '请选择' + item.value.title
                            });
                            break;
                        }
                    }

                    if (item.controller == 'Checkbox') {
                        if (item.value.required && !item.val) {
                            verify = false;
                            this.$util.showToast({
                                title: '请至少选择一个' + item.value.title
                            });
                            break;
                        }
                    }

                    if (item.controller == 'Img') {
                        if (item.value.required && !item.val) {
                            verify = false;
                            this.$util.showToast({
                                title: '请至少上传一张' + item.value.title
                            });
                            break;
                        }
                    }

                    if (item.controller == 'Date') {
                        if (item.value.required && !item.val) {
                            verify = false;
                            this.$util.showToast({
                                title: '请选择' + item.value.title
                            });
                            break;
                        }
                    }

                    if (item.controller == 'Datelimit') {
                        if (item.value.required && !item.val) {
                            verify = false;
                            this.$util.showToast({
                                title: '请选择' + item.value.title
                            });
                            break;
                        }

                        if (this.$util.timeTurnTimeStamp(item.start_date) > this.$util.timeTurnTimeStamp(item.end_date)) {
                            verify = false;
                            this.$util.showToast({
                                title: '结束日期不能小于开始日期'
                            });
                            break;
                        }
                    }

                    if (item.controller == 'Time') {
                        if (item.value.required && !item.val) {
                            verify = false;
                            this.$util.showToast({
                                title: '请选择' + item.value.title
                            });
                            break;
                        }
                    }

                    if (item.controller == 'Timelimit') {
                        if (item.value.required && !item.val) {
                            verify = false;
                            this.$util.showToast({
                                title: '请选择' + item.value.title
                            });
                            break;
                        }

                        if (item.start_time >= item.end_time) {
                            verify = false;
                            this.$util.showToast({
                                title: '结束时间必须大于开始时间'
                            });
                            break;
                        }
                    }

                    if (item.controller == 'City') {
                        if (item.value.required && !item.val) {
                            verify = false;
                            this.$util.showToast({
                                title: '请选择' + item.value.title
                            });
                            break;
                        }
                    }
                }

                if (verify) {
                    return this.formData;
                } else return verify;
            },
            pickerChange(e, index) {
                this.formData[index].val = this.data[index].value.options[e.detail.value];
                this.$forceUpdate();
            },
            checkboxChange: function(e, index) {
                this.formData[index].val = e.detail.value.toString();
                this.formData[index].option_lists.forEach(item => {
                    item.checked = e.detail.value.indexOf(item.value) != -1;
                });
                this.$forceUpdate();
            },
            radioChange: function(e, index) {
                this.formData[index].val = e.detail.value;
                this.$forceUpdate();
            },
            // 修改图片
            uploadImg(index) {
                this.$util.upload(
                    Number(this.formData[index].value.max_count), {
                        path: 'evaluateimg'
                    },
                    res => {
                        if (res.length > 0) {
                            res.forEach(v => {
                                if (this.formData[index].img_lists.length >= Number(this.formData[index].value.max_count)) {
                                    this.$util.showToast({
                                        title: '最多上传' + this.formData[index].value.max_count + '张图片'
                                    });
                                    return false;
                                } else {
                                    this.formData[index].img_lists.push(v);
                                }
                            });
                        }

                        this.formData[index].val = this.formData[index].img_lists.toString();
                        this.$forceUpdate();
                    }
                );
            },
            // 添加图片
            addImg(index) {
                if (this.formData[index].img_lists.length >= Number(this.formData[index].value.max_count)) {
                    this.$util.showToast({
                        title: '最多上传' + this.formData[index].value.max_count + '张图片'
                    });
                    return false;
                }
                this.$util.upload(
                    Number(this.formData[index].value.max_count), {
                        path: 'evaluateimg'
                    },
                    res => {
                        if (res.length > 0) {
                            res.forEach(v => {
                                this.formData[index].img_lists.push(v);
                            });
                        }
                        this.formData[index].val = this.formData[index].img_lists.toString();
                        this.$forceUpdate();
                    }
                );
            },
            // index 当前数据的下标  k 当前图片的下标
            delImg(k, index) {
                this.formData[index].img_lists.splice(k, 1);
                this.formData[index].val = this.formData[index].img_lists.toString();
                this.$forceUpdate();
            },
            getDate() {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                month = month > 9 ? month : '0' + month;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            },
            getTime() {
                const date = new Date();
                let hour = date.getHours(); //得到小时
                let min = date.getMinutes(); //得到分钟

                hour = hour > 9 ? hour : '0' + hour;
                min = min > 9 ? min : '0' + min;
                return `${hour}:${min}`;
            },
            bindDateChange(e, index) {
                this.formData[index].val = e.detail.value;
                this.$forceUpdate();
            },
            bindStartDateChange(e, index) {
                this.$set(this.formData[index], 'start_date', e.detail.value);
                this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
                this.$forceUpdate();
            },
            bindEndDateChange(e, index) {
                this.$set(this.formData[index], 'end_date', e.detail.value);
                this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
                this.$forceUpdate();
            },
            bindTimeChange(e, index) {
                this.formData[index].val = e.detail.value;
                this.$forceUpdate();
            },
            bindStartTimeChange(e, index) {
                this.formData[index].start_time = e.detail.value;
                this.$forceUpdate();
            },
            bindEndTimeChange(e, index) {
                this.formData[index].end_time = e.detail.value;
                this.formData[index].val = this.formData[index].start_time + ' - ' + this.formData[index].end_time;
                this.$forceUpdate();
            },
            // 获取选择的地区
            handleGetRegions(e, index) {
                this.formData[index].val = '';
                this.formData[index].val += e[0] != undefined ? e[0].label : '';
                this.formData[index].val += e[1] != undefined ? '-' + e[1].label : '';
                this.formData[index].val += e[2] != undefined ? '-' + e[2].label : '';
                this.$forceUpdate();
            }
        }
    };
</script>

<style lang="scss">
    .order-wrap {
        padding: 20rpx 0;

        &:last-child {
            margin-bottom: 0;
            border-bottom: 0;
        }
    }

    .order-cell {
        display: flex;
        align-items: center;
        background: #fff;
        position: relative;

        &.textarea {
            align-items: unset;
        }

        &.clear-flex {
            display: block;

            .box {
                margin-top: 16rpx;
                text-align: left;
            }
        }

        &:last-child {
            margin-bottom: 0;
            border-bottom: solid 1px #eee;
        }

        &.align-top {
            align-items: flex-start;
        }

        text {
            font-size: $font-size-base;
        }

        .name {
            width: 160rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tit {
            text-align: left;
            font-size: $font-size-base;

            text {
                font-size: $font-size-base;
            }
        }

        .required {
            color: red;
            font-size: 28rpx;
            margin-left: 4rpx;
            width: 14rpx;
            text-align: left;
            display: inline-block;
        }

        .box {
            flex: 1;
            padding: 0 10rpx;
            line-height: inherit;
            text-align: left;

            input {
                font-size: $font-size-base;
                text-align: left;
            }

            textarea {
                font-size: $font-size-base;
                width: 100%;
                height: 88rpx;
                line-height: 44rpx;
                text-align: left;
            }

            checkbox-group {
                display: flex;
                flex-wrap: wrap;
            }

            radio-group {
                display: flex;
                flex-wrap: wrap;
            }

            label {
                display: flex;
                align-items: center;
                line-height: 1;
                margin-right: 30rpx;
            }

            &.img-boxs {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }

            .img-box {
                margin: 10rpx 20rpx 10rpx 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100rpx;
                height: 100rpx;
                border: 1rpx solid $color-line;
                border-radius: 4rpx;
                position: relative;

                .icon-guanbi {
                    position: absolute;
                    top: -14rpx;
                    right: -14rpx;
                    display: inline-block;
                    width: 28rpx;
                    height: 28rpx;
                    line-height: 28rpx;
                    color: $color-tip;
                }

                .icon-add1 {
                    font-size: 40rpx;
                }

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            &.box-flex {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            &.date-boxs {
                padding: 0 10rpx;
                display: flex;
                align-items: center;
            }

            .interval {
                margin: 0 12rpx;
                color: #000;
                font-weight: bold;
            }

            .date-box {
                .picker-box {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                }
            }
        }

        .radio-group-box {
            radio {
                display: none;
            }

            .radio-box {
                display: flex;
                align-items: center;
                line-height: 1;

                .iconfont {
                    font-size: 32rpx;
                    margin-right: 10rpx;
                }
            }
        }

        .check-group-box {
            checkbox {
                display: none;
            }

            .checkbox {
                display: flex;
                align-items: center;
                line-height: 1;

                .iconfont {
                    font-size: 32rpx;
                    margin-right: 10rpx;
                }
            }
        }

        .iconfont {
            color: $color-tip;
            font-size: $font-size-base;
        }

        .box-flex picker {
            display: block;
            width: 100%;
        }

        .icon-right {
            line-height: 1;
            position: unset;
        }
    }
</style>